Accelerate • Organize • Iterate • Maintain • Share  your UI code

Notice (November 2013): QuickUI is no longer in active development. Many thanks to all who have supported this project. People interested in component-based web user interface design and development should look at HTML web components, for example those possible in the Polymer framework.

QuickUI is a free and open JavaScript framework that lets you create your web application's user interface with components called controls. A control includes all the DOM elements, interactive behavior, and visual styling necessary for the component to function. You can define a control to implement any level of your app's UI: a page template, a region on the page, a special button, etc. This approach lets you apply all the benefits of traditional object-oriented design to your JavaScript UI code. You'll have a rich set of components you can assemble into a great web application with a clean, intuitive, and responsive user interface.

Build up complex user interfaces from small building blocks

Each piece of the month — the headings, the cells for the days, etc., are all available as controls, all of which you can use. These components take care of all the date math, so you don't have to worry about that.

In all, the little date picker control turns out to be constructed from twenty different control classes, each playing a clearly-defined role in the date picker's final appearance and behavior. You can see these class relationships represented visually below (click for a larger graph). You can use each of those contributing control classes on their own, or in new combinations.

The point of this date picker example is not (just) that QuickUI has good date controls — the point is that the QuickUI framework gives you a powerful way to express your user interface in classes.

Waaaay beyond styling

Previous user interface frameworks only gave you big, chunky UI widgets to work with. Your ability to customize them is limited to the things the widget author could image you'd want to change. And while you can customize thigns a bit, there's a limit to what's possible with CSS. QuickUI lets you go way beyond that limit, with controls that can accept other controls.

Suppose you can have a product like, say, Flickr and want to show interesting the most interesting photo of the day on a calendar. Using the CalendarDay control as a starting point, create a new calendar-day-with-photo control. Drop that control into the exact same calendar month navigator control shown above, and voilà, a photo calendar:

Or you could create a new day control that renders a date with both Roman numerals and kanji calligraphy, and drop that into a calendar month for a result that's not possible with CSS alone:

Remixable user interface controls

Everyone's user interface needs are different. That's why all QuickUI controls are designed to be remixed: composed with other controls, extended with custom behavior, and generally adapted to the needs of your app. In the case of this calendar, you can tell the calendar to use a different control to render the days — and in that control, you can do whatever you want.

Or suppose you have more complex needs, and need to let the user select a date range. You can recombine the above elements to create a date range selector:

This particular example above makes use of a meta-control called Repeater that instantiates a given control class multiple times, so you can quickly adapt your UI to show two months, or four months, or however many work best.

Shared components encourage investment in fundamentals

There are many reasons why building user interfaces this way makes a lot of sense. One is that reusable components change the economics of making a heavier investment in user interface fundamentals.

Take the complex chore of localizing a calendar to other languages. The QuickUI date controls use the Globalize library, which supports roughly 350 different cultures around the world. Here are some instances of the same calendar month control, only now they've been instructed to show a calendar appropriate to French, Japanese, or Thai cultures:

Not only do the text labels for the month or days of the week change, different cultures prefer to see different days of the week as the "first" day of a week: Sunday in North American, Monday in Europe. And different cultures expect to see the different parts of a date rendered differently in text, so the DateTextBox control changes its presentation (and date parsing) accordingly.

Few teams can afford to invest that kind of effort — but if everyone shares an implementation, then that kind of investment will produce returns for everyone. Other examples of investments the component approach makes more reasonable are: performance, keyboard support, general accessibility, cutting-edge CSS optimization, and device responsiveness.

What makes QuickUI different from other web frameworks?

• Composability. You can generally put one control inside another. In other frameworks, your ability to customize the user experience is limited to the parameters the widget's author imagined you would want. Most QuickUI controls, in contrast, are designed you can place one control inside another whenever that would make sense.
• Modularity. Good controls should only have local effects and dependencies. When you add a control to a page, you don’t want to suddenly discover that the control is inadvertently stomping on, say, CSS styles you’re using elsewhere. Similarly, a control shouldn’t make lots of demands on its container; you should be able to stick a control anywhere and get something reasonable. In QuickUI, all controls are designed to be as context-independent as possible. This includes giving your controls deterministic, reliable access to their own elements, so your code won’t accidentally pick up other elements on the page.
• Extensibility. You can easily create specialized version of a control class by subclassing it. This is a killer feature that lets you build new controls out of existing ones. QuickUI provides well-defined semantics for how a subclass and its parent classes can work together to populate the DOM. Most frameworks force you to wrap the elements of a parent class, which turns out to be a dead end. In contrast, a QuickUI subclass populates “slots” inside its base class — and can define new slots of its own. For more on this approach, see how controls render themselves.
• Opacity. You can quickly define an external-facing API for your control class, obviating the need or temptation for other developers to muck about inside your control’s DOM. This keeps your control’s contract with its host container clean and well-defined, allowing you to evolve your controls without breaking everyone who’s already using them.
• Helpers for common UI situations. QuickUI’s runtime has helper functions to address situations that often come up when creating reusable controls, such as controls that need to perform custom layout calculations when they're added to the DOM, or when their size changes.
• Control classes are first-class objects. QuickUI permits the creation of meta-controls that can take another control class as input. For example, you can tell a ListBox control which control class should be used to represent its individual list items, and the ListBox will automatically take care of creating or destroying instances of that item class as the set of list items changes.
• Search engine support. You want the best of both worlds: to create UI in JavaScript and have UI text content searchable by Google and other search engines. QuickUI lets you reference controls in searchable HTML and then rehydrate those controls in the user’s browser. If you inspect this page's body tag, for example, you'll see how the site's page template (which is implemented as a QuickUI control) is applied to what a search engine sees as plain, searchable HTML.

Good citizen of the open web

QuickUI is built with jQuery, the web’s most popular JavaScript library, and works in all mainstream browsers: Apple Safari, Google Chrome, Microsoft Internet Explorer 8+, and Mozilla Firefox. The framework is agnostic with regards to your back end, your data binding model, your workflow, and your tool pipeline. QuickUI is planned to co-evolve with upcoming HTML specifications for web components.

QuickUI is free, and the source code is open under the MIT License.

A catalog of parts to start with

The optional QuickUI Catalog is a library of approximately 80 UI controls. Each control tries to do just one thing really well, and these are intended as starting point for your own UI. Originally designed for full browsers, many of the catalog controls work on mobile browsers as well. The page you are reading now, and this entire site, is built using QuickUI and controls from the QuickUI Catalog.

Get started

• Run through the interactive tutorial.
• Browse the QuickUI Catalog of controls.
• Take a look at the framework documentation.
• View the source code on GitHub.