UI Patterns in JavaScript

Question

What UI patterns do you usually use in JavaScript?

By UI patterns I mean best practices to be used to build and organize UI, generated/managed from JavaScript (apart from libraries like jQuery or YUI).

For example, if you came from .NET world you are familiar with MVC (Model-View-Controller) patterns family. In the world of WinForms and ASP.NET you will meet Model-View-Presenter. In WPF most likely you will find MVVM (Model-View-ViewModel) approach.

And what about JavaScript?

Answer 1

Patterns are usually language-agnostic. If a pattern has value, barring certain edge cases it will have value regardless of what language or technology you're using. Take MVC. The concept of separating the model from the view from the controller has value regardless of whether the model is implemented with an RDBMS or some other technology, whether the view is HTML or Swing or X.

Where you see certain patterns applied more in one technology than another, it usually just means that the developers of the technology had a particular approach that they supported more fully than others.

JavaScript itself doesn't impose any particular pattern on you. Some JavaScript frameworks, like YUI or Dojo or Glow will tend to lead you one direction more than another.

At the end of the day, look at the problem you're solving, the resources and experience you have, and follow the patterns that make sense.

Answer 2

I'd like to recommend Ross Harmes & Dustin Diaz's book, Pro JavaScript Design Patterns, definitely the best resource on this subject, and definitely worth a read.

There’s also a very interesting article on JavaScript MVC in the latest issue of A List Apart.

Answer 3

A good approach to building GUI application is that of browser:

1. using markup for UI layout
2. using javascript UI logic
3. using CSS for UI styling

Most of modern GUI frameworks (ExtJS, Dojo etc) offer APIs that greatly help building GUI in JavaScript solely. But there is another GUI framework Ample SDK that brings the before mentioned separation of concerns. It allows for using XML-based languages (XHTML, XUL, SVG) for layout, CSS for style and DOM APIs for UI logic.

To orchestrate a client-side GUI application you can use either MVC or a little bit more advanced pattern PAC, as for the former - there is a PureMVC implementation available

Take a look at the following snippet (only concerns UI logic, not app logic, to be built with MVC/PAC):

index.html

<script type="application/ample+xml">
    <xul:tabbox onselect="fOnSelect(event)"
     xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
        <xul:tabs>
            <xul:tab label="checkbox" />
            <xul:tab label="textbox" />
            <xul:tab label="datepicker" />
        </xul:tabs>
        <xul:tabpanels>
            <xul:tabpanel>
                <xul:checkbox />
            </xul:tabpanel>
            <xul:tabpanel>
                <xul:textbox />
            </xul:tabpanel>
            <xul:tabpanel>
                <xul:datepicker />
            </xul:tabpanel>
        </xul:tabpanels>
    </xul:tabbox>
</script>

index.css

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
xul|tab:focus {
    color: red;
}

index.js

function fOnSelect(oEvent) {
    alert(oEvent.currentTarget.selectedItems.length)
}