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?

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?

• javascript
• user-interface
• design-patterns

• theres no reason why MV[C|P] shouldnt apply - its pretty language independent. – Chii Commented Aug 31, 2009 at 11:11

6 Answers 6

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.

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.

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)
}

As i know there are no specific patterns for Javascript yet. But I think there is a potential for something like widgets(component) approach. Since mainly we use javascript to empower our html code. It is logically that we should connect our every javascript object to html tag. So here we have something like Model(jsObject)+View(HTMLrepresentation). To get MVC we need controllers and we have Events for this. In this case we will have incapsulated easily extensibel component.

for example:

// this is a part of some FormValid.js
<script>
function FormValid(){

}

FormValid.prototype.validate=function(){...}
</script>

//this is our HTML
<form id="form1"...onsubmit="this.jsObject.validate();">
</form>

<script>
//all the following stuff could be solved in one line, but you need to create some helper. Like Components.Attach("FormValid").to("form1");
var newObj=new FormValid()
var form=document.getElementById("form1");
from.jsObject=newObj;
newObj.htmlObj=form;
</script>

Also I have an idea of using template engines like Zparser to separate view and model. I am developing js library for this, so I am in this question right now.

We have core object with view method. All our classes have it like a prototype at he end. This method gets templates property of class and using some templates parser generates HTML basing on our model. This HTML is inserted in htmlObj node so the VIEW of our object is updated. This is basically an idea and our code becomes:

// this is a part of some FormValid.js
<script>
function FormValid(){

}
Components.extendCore(FormValid);

FormValid.prototype.validate=function(){...}
</script>

FormValid.prototype.templates={
   main:'<form class="form1"...onsubmit="this.jsObject.validate();">...</form>'
}

//this is our HTML
<div id="form1"></div>
<script>
Components.Attach("FormValid").to("form1");
</script>

I still think last one inline <script> should be there and it is not mixing logic with representation because this is component - solid piece. It have no meaning one without another. Actually this should be a part of application. Something like html of component(in las one example is div) should be defined and wrapped with component which will automatically add script and ids.

Now. I showed you 2 examples and i will explain why second is too specific.
All stuff is in accessibility and performance(and memory leaks). If you will refresh all html of component frequently - it will blink, also you will need to set up all dynamic events back and check everything for memory leaks. But the main problem if JS will fail - your application will show nothing.

So i prefer to have choice between those two:) and use everything on their places.

Check out a site called quince. I am not sure how many patterns here are javascript ui patterns. But this is a pretty good resource for ui patterns

Patterns aren't always language agnostic. A lot of classic design patterns are pointless in JavaScript because we don't need a lot of the workaround that they solve in stricter langauge paradigms.

The reason MVC isn't such a hot fit for client-side web development, however is more situational.

First of all I think time and pain have proven that typical web applications are best treated as two separate applications. The one that happens on the browser and the one that happens on the server. The fewer dependencies you establish between the two, the more flexible, maintainable and easier web apps have been to modify in my experience. The M is business logic (which people tend to incaccurately conflate with "database layer" IMO).

The problem with MVC in that scenario is that we don't want to expose business logic on the client-side and attempting to munge the whole app into one hideous http-divide-hiding construct has proven painful as I mentioned.

Very similar patterns where you separate data or "view model" concerns can work fairly well, however.