Creating Wijmo: The New JavaScript Library in Town

ComponentOne just launched a brand new UI kit for client-side Web development called Wijmo. Wijmo contains over 30 widgets built on jQuery and jQuery UI that can help you build a better Web. This article will walk you through how ComponentOne built Wijmo and teach you how to develop your own widgets.

Intro to jQuery & jQuery UI

When Microsoft announced their decision to adopt jQuery as their official JavaScript library, ComponentOne took note. The idea is simple in nature, but monumental in principle. Microsoft’s decision to shift focus on using and contributing to jQuery was a big win for Microsoft, jQuery, and you. Now, millions of websites are using a common JavaScript library.

jQuery is a concise JavaScript library for working with the Document Object Model (DOM) and Asynchronous JavaScript and XML (AJAX). It provides an API for traversing the DOM based on CSS syntax. When compared to using standard JavaScript APIs, it makes most DOM queries so much easier. In most instances it dramatically cuts down on lines of code too.

jQuery UI is a widget and interaction library built on top of jQuery. The widgets take a simple piece of HTML markup and turn it into an interactive UI element. jQuery UI applies JavaScript for added behavior and CSS for rich style. It’s also a great tool for progressively enhancing HTML.

The Wijmo Story

Wijmo, codenamed Rhino, was born out of necessity; ComponentOne needed it! The team wanted to completely rebuild its ASP.NET tools, so they looked to jQuery UI as their client-side framework. It was perfect for what the team wanted: a powerful, yet lightweight framework for JavaScript UI components. There was only one problem with committing to using it: the lack of UI widgets. Since the team embraced jQuery and jQuery UI, they decided to build on top of these tools, using their frameworks and guidelines.

Wijmo was purposed to build a complete kit of jQuery UI Widgets as a client-side framework for ComponentOne’s ASP.NET controls. The team used the jQuery UI Widget Factory to build these widgets to all of jQuery UI’s guidelines and principles. The result has been a complete kit of widgets for developing applications to the high standards of jQuery UI.

This client-side framework was so powerful, that ComponentOne decided to release it on its own. What was originally going to be part of our ASP.NET controls is now a complete JavaScript UI library of its own.

Why ComponentOne Chose jQuery UI

There are a number of reasons ComponentOne chose jQuery UI. First, the team felt it was natural to follow Microsoft’s adoption of jQuery. It was only more natural to expand to jQuery UI for building UI components. Beyond that, there are some very significant reasons to use jQuery UI.

JavaScript Market Share

When you look at the numbers, there is no question, jQuery owns the JavaScript market. According to builtwith.com, jQuery is used on 19,901,925 websites and in more than 40% of the top 10,000 websites (See Figure 1.)

The Widget Factory

The Widget Factory is a model for building widgets provided by jQuery UI. It provides a common foundation for building jQuery UI widgets. Widgets are simply jQuery plugins that have state. The Widget Factory is the equivalent of a base class in an object-oriented programming model. The difference is you are not inheriting it, you are extending it. It provides common methods that every widget needs like “s” and “enable”. It also provides the options property, which is used to set any option on a widget. The Widget Factory helps guide you along the way by creating a clear organization and structure of code. It also helps other developers understand the code in your widget.

The CSS Framework

One of my favorite aspects of jQuery UI is the CSS Framework. This framework provides both common and specific CSS classes that are applied consistently throughout the widgets. The purpose of the framework is to be able to style an entire application in an object-oriented manner rather than styling individual pieces. For example, anything clickable will receive a ui-state-default class and when it’s hovered over it will receive a ui-state-hover class. Using this convention you can just define styles for common classes and impact every widget in doing so. Then, you can simply override the styles you do not want using the specific classes like ui-accordion.

The CSS Framework includes classes for layout helpers, containers, interaction states, interaction cues, icons, and other miscellaneous visuals. The cool thing about the framework is that it can be applied anywhere, even beyond jQuery UI widgets.

Themeroller

In addition to having a CSS Framework, jQuery UI also has a pretty powerful tool to help you add themes to the widgets that support it. This tool, Themeroller is a web app hosted by jQuery for customizing and downloading rich themes built using the CSS Framework. Themeroller also includes 24 pre-made themes that you can use or tweak to your liking. This tool does everything from generating background images to rounding your corners. Even if it doesn’t give you the final result, it can still save you countless hours of time. The generated CSS it outputs is well organized and you can easily modify it by hand.

By: Chris Bannon

Chris Bannon is familiar with many acronyms: UX, ASP.NET, AJAX, C#, SQL, and jQuery. He has mastered techniques such as CSS layout, unobtrusive JavaScript, semantic markup, and graceful degradation. Chris manages ComponentOne’s product lines for jQuery, ASP.NET, and iPhone web development. He spends most of his time building or using the web and it is his passion. Chris also spends a lot of time teaching others new techniques in web development. He has given sessions at jQuery Conference, MVCConf, Dev Connections, and Code Camps around the U.S. He is the organizer for the jQuery user group in Pittsburgh. When he isn’t in front of a computer you can find him spending time with his family, golfing, or playing ice hockey.

chrisb@componentone.com