EmberUI

An interface framework built on ember.js that supercharges web apps.

Building compelling interfaces on the web is a painful process. Form elements are very limited in their capability and usability. There are many widgets to extend the basic form elements, but they are painful to use and frequently don’t work as advertised.

EmberUI takes a different approach — by providing a full replacement for all form field types, in addition to adding some of its own, it can provide a consistent experience to the user throughout the app regardless of what OS or browser they may be using.

There are five different pillars that will drive the this framework:

1) Beautiful, but not distracting

Most of the existing frameworks are ugly. Bootstrap’s and jQueryUI widgets are especially bad looking. A lot of attention will be spent to ensure that form elements look great and have a consistent visual language.

The aesthetic style will not be trendy. It will not be flat, nor excessively skeuomorphic. It will use neutral colors. It will blend into its surroundings — doing its best to go by unnoticed

2) Thoughtful design choices

Beyond aesthetics it will also try to fix some of the legacy issues that I have encountered while building web apps. For example, when date widgets show the date as 2013/05/11 it isn’t because it is the best way to express the date to a human. It is legacy decision that was never reexamined and fixed.

Supporting a proper visual hierarchy on the page is also important and every element will come in several sizes to make building complex interfaces easier.

3) Ambitious

A framework needs to cover all the bases or it can lead to frustration. EmberUI aims to provide a large selection of form elements to make collecting common data types easy.

Some will be simple such as fields that allows for auto-formatting of data types such as currencies and credit card numbers, others will be more complex such as date & time selectors and file uploading.

4) Smart, flexible error handling

Error handling on the web is painful.EmberUI will have a built in way to display errors for each form field. Either via highlighting the field in red, or if more detail is required, showing an error message by the input with the error.

Validation will happen as the user interacts with the form and not wait until the form is submitted. Providing custom validation code will be trivial and be built right into model for your objects.

5) Easy to extend and customize

If for some reason EmberUI doesn’t have the form field you need, it should be simple to subclass and add it yourself following code practices established by ember.js.

If color or aesthetic customization is needed it should be simple to get going and build your own custom theme. If you do make customizations, it shouldn’t prevent you from upgrading the framework at a later date.

EmberUI is an open source project and available under the MIT license. All PSDs will be made available as I progress and accompanied by a blog post explaining my design decisions.

Keep an eye on this blog for updates and if you are interested in helping with the ember.js side of things drop me a line on Twitter.