The Top 10 Javascript MVC Frameworks Reviewed

by Gordon. 197 Comments

UPDATE 1/14/2012: Added Batman.js and Angular.js due to popular demand and because they looked impressive.

Over the last several months I have been in a constant search for the perfect javascript MVC framework. Driven by a dire need for the right level of abstraction and features, I have tried out – some more cursorily than others – every framework I could get my hands on. Here lies a brief synopsis of each framework. Lastly, I share the framework which I ultimately decided on.

Specifically, the following four features are very important to me:

  • UI Bindings – I’m not just talking about templates, I’m talking about a declarative approach to automatically updating the view layer when the underlying model changes. Once you have used a framework (such as Flex) that supports UI bindings, you can never go back.
  • Composed Views – Like all software developers, I enjoy creating modular reusable code. For this reason, when programming UI, I would like to be able to compose views (preferably at the template layer). This should also entail the potential for a rich view component hierarchy. An example of this would be a reusable pagination widget.
  • Web Presentation Layer – We are programming for the web here people, the last thing I want are native-style widgets. There is also no reason for a web framework to create it’s own layout manager. HTML and CSS are already the richest way to do style and layout in existence, and should be used as such. The framework should be centered around this concept.
  • Plays Nicely With Others – Let’s face it, jQuery is pretty amazing. I don’t want a framework which comes bundled with a sub-par jQuery clone, I want a framework which recommends using jQuery itself.

The Contenders

Here is a table showing all of the frameworks support for the above features. Click through the title for more detail.

Framework UI Bindings Composed Views Web Presentation Layer Plays Nicely With Others
Backbone.js
SproutCore 1.x
Sammy.js
Spine.js
Cappuccino
Knockout.js
Javascript MVC
Google Web Toolkit
Google Closure
Ember.js
Angular.js
Batman.js

1. Backbone.js

Backbone.js is the web’s darling framework. You can’t go anywhere without hearing about it and they have an impressive list of brands using it. This was naturally one of the first frameworks I tried. I used it to build some of our internal administrative features at GroupTalent.

Pros: Strong community and lots of momentum. Underscore.js (which it uses heavily) is also a great framework.

Cons: Lacks strong abstractions and leaves something to be desired. The entire framework is surprisingly lightweight and results in lots of boilerplate. The larger an application becomes, the more this becomes apparent.

2. SproutCore 1.x

SproutCore is what Apple used on its iCloud initiative. Despite having a horrible name, it is actually an extremely well thought out framework. It is also one of the largest frameworks.

Pros: Bindings support. Solid community. Tons of features.

Cons: Overly prescriptive. Hard to decouple from unneeded features. Forces a native-like paradigm. I have a serious problem with any framework which discourages using html for layout.

3. Sammy.js

Sammy.js was a smaller framework that I stumbled upon. Due to its simplicity, it almost didn’t make this list. It’s core feature is a routing system to swap out areas of an application with AJAX.

Pros: Simple learning curve. Easier to integrate with an existing server side app.

Cons: Too simple. Not sufficient for larger applications.

4. Spine.js

Based on the name, Spine.js is obviously heavily influenced by backbone. Like backbone, it is very lightweight and follows a similar model.

Pros: Lightweight with good documentation.

Cons: Fundamentally flawed. A core concept of spine is “is asynchronous UIs. In a nutshell, this means that UIs should ideally never block”. Having built a serious non-blocking realtime application in the past, I can say this is entirely unrealistic unless the backend has something like operational transformation.

5. Cappuccino

Cappuccino is one of the more unique frameworks, coming with its own language Objective-J. Cappuccino tries to emulate Cocoa in the browser.

Pros: Large thought-out framework. Good community. Great inheritance model.

Cons: Out of all the languages you could emulate in javascript, Objective-C would be my last choice. This is coming from an iOS developer. I simply can’t get past the idea of programming Objective-J in the browser.

6. Knockout.js

Knockout.js is an MVVM framework that receives lots of praise from its supporters. It stresses declarative UI bindings and automatic UI refresh.

Pros: Binding support. Great documentation and amazing tutorial system.

Cons: Awkward binding syntax and lacks a solid view component hierarchy. I want to be able to reuse components easily. I also feel like identifying as an MVVM framework is deleterious. Hardly any of these frameworks are MVC, but are of the MV* variety (MVP, MVVM, etc).

7. Javascript MVC

Javascript MVC, in the interest of full disclosure, is a framework that I didn’t spend very much time evaluating.

Pros: Solid community and legacy.

Cons: Awkward inheritance model based on strings. Controllers are too intimate with views and lack bindings. The name is way too generic – the equivalent would be if RoR was called “Ruby Web Framework”.

8. Google Web Toolkit

GWT is a serious client-side toolkit that includes more than just a framework. It compiles Java to Javascript, supporting a subset of the standard java library. Google used it internally for Wave.

Pros: Comprehensive framework with great community. Solid Java-based component inheritance model. Great for behemoth client-side applications.

Cons: Despite what Google says, GWT is not going to stand the test of time. With initiatives like DART its clear that Java is not the future of the web. Furthermore, the abstraction of Java on the client is slightly awkward.

9. Google Closure

Google Closure is more of a toolkit than simply a javascript framework. It comes bundled with a compiler and optimizer.

Pros: Use by Google for many of their major apps. Nice component-based ui composition system.

Cons: Lack of UI-binding support.

10. Ember.js

Ember.js (formerly Amber.js SproutCore 2.0) is one of the newest contenders. It is an attempt to extricate the core features from SproutCore 2.0 into a more compact modular framework suited for the web.

Pros: Extremely rich templating system with composed views and UI bindings.

Cons: Relatively new. Documentation leaves lots to be desired.

11. Angular.js

Angular.js is a very nice framework I discovered after I originally posted this review. Developed by Googler’s, it has some very interesting design choices.

Pros: Very well thought out with respect to template scoping and controller design. Has a dependency injection system (I am a big fan of IOC). Supports a rich UI-Binding syntax to make things like filtering and transforming values a breeze.

Cons: Codebase appears to be fairly sprawling and not very modular. Views are not modular enough (will address this in more detail in the cons of Batman.js).

12. Batman.js

Batman.js, created by Shopify, is another framework in a similar vein to Knockout and Angular. Has a nice UI binding system based on html attributes. The only framework written in idiomatic coffeescript, it is also tightly integrated with Node.js and even goes to the extent of having its own (optional) Node.js server.

Pros: Very clean codebase. Has a nice simple approach to binding, persistence, and routing.

Cons: I very much dislike singletons, let alone the idea of enforcing singleton controllers. Suffers from the same ailments as Knockout and Angular with regards to nested components. I want to be able to declaratively reuse more than just templates. What Ember has over these frameworks is a way to declaratively re-use entire components that are backed by their own (possibly controller-level) logic.

The Winner

At the end of the day, Ember.js is the only framework which has everything I desire. I recently ported a relatively small Backbone.js application over to Ember.js and, despite some small performance issues, I am much happier with the resulting code base. Being championed by Yehuda Katz, the community around Ember.js is also amazing. This is definitely the framework to watch out for.

Of course this list is far from comprehensive. Almost all of these frameworks here were discovered by sheer notoriety, word of mouth, or by being mentioned on Hacker News. I am also not reviewing proprietary frameworks (or frameworks with disagreeable licenses – ExtJS anyone?).

What MVC framework do you use?

  • http://twitter.com/commadelimited Andy Matthews

    Thanks a lot for this article. It’s timely as I’m in the process of trying to settle on a framework as well. I’m still new to MVC  though so I’d really like to pick one and just go with it.

    Backbone is the one I’d settled on, but Ember looks great too. My only concern is durability. Given that it’s so new and going up against other heavyweights with a much larger community do you think that Ember can last?

    • http://codebrief.com Gordon Hempton

      I don’t think durability is an issue for ember. SproutCore already has a solid legacy.

      If you are deciding between the two, realize that Backbone is more of a skeleton framework for writing a javascript app on top of jQuery and underscore, while Ember is a full-fledge MVC framework.

    • http://twitter.com/wagenet Peter Wagenet

      Ember is already being used by some well known companies such as Zendesk, Square, LivingSocial and in the Travis CI project, as well as many others. Those of use working on it believe, like Gordon, that it’s the best framework out there and we want to keep making it better. Maybe some day something else better will come along, but until it does, we’ll be behind Ember.

      • Bach44

        Please add PureMVC to your list. I’d be curious to see how it stacks up against the other players!

  • Michael Martz

    Have you tried looking at batman.js? That framework seems pretty similar to many of these other frameworks except that it was designed with coffeescript in mind.

    • http://blog.dudeblake.com kblake

      I was wondering the same. Batman.js is pretty sweet!

    • http://twitter.com/ootoovak ootoovak

      I have also taken a look around at the Javascript MVC landscape and while I liked Spine and Backbone they felt a lot like Sinatra does compared to Rails and I wanted something closer to Rails. Batman.js looks REALY nice but I think in the end I will go with Ember.js as in the long run I think there will be more community support.

      I would love to see Batman.js added to this comparison.

    • http://blog.code-infection.com/ Balazs Nadasdi

      I love it too. batman.js is really cool.

    • http://codebrief.com Gordon Hempton

      Just added batman.js to the list.

  • http://twitter.com/ippalix ippa

    Knowing how Yehuda fixed all the broken things in Ruby on Rails into an excellent 3.0 version… I’ll trust anything this man does :) .

  • Justin

    JavaScriptMVC’s inheritance model is not based on strings. It’s based on prototypal inheritance. It optionally takes a string name of the class for introspection purposes.

    Also, I think you missed the templated event binding.

    • http://codebrief.com Gordon Hempton

      Yeah it’s a real inheritance model, just felt awkward to me. Agreed that I didn’t review it heavily enough.

      For templates event binding, are you referring to http://jupiterjs.com/news/3-2-controller-templated-event-binding ?

      That’s a relatively nice syntax for declaring event handlers, but it’s still not the level of abstraction around binding that I was looking for. In Ember or knockout all of this is done for you.

    • http://drewwells.net/blog Drew Wells

       https://github.com/jupiterjs/steal/blob/1536b834d41bd5d1bd62851de6152f0ac4363647/steal.js#L432

      Classical inheritance.  If you’re not using Object.create, it’s not prototypal inheritance.

  • Johan

    Have you looked at angular.js – it’s built by googlers and apparently used for a lot of projects internally. Closest probably to knockout.

    • http://codebrief.com Gordon Hempton

      Looks interesting. Will definitely check it out in more detail.

      • http://codebrief.com Gordon Hempton

        After spending some time looking at in more detail, I would put this framework as second to ember.js. I really like some of the architecture choices (DI, Scopes, etc).

        • Dean Sofer

          The release-candidates for 1.0 contain composite views. You can put your partials into A: script tags, B: partial html files that are automatically loaded in and templated, and C: in your javascript

          It was not available in 0.9 and 0.10, however the 1.0 implementation is probably the most diverse (and easy-to-leverage) approach I’ve seen.

          I’m a HUGE proponent of Angular, but my BIG problems with it are more about async issues and widget binding, but I think that may be normal for any framework (or an app that starts to become fairly large).

          • http://codebrief.com/ Gordon Hempton

            What do you mean by async issues? Does Angular.js have a run loop?

          • Robert Hall

            Would like to know the answer to this… :)

          • Dean Sofer

            Sorry I haven’t checked this in a while (don’t know if you still care).

            I started a project with the biggest AngularJS users called AngularUI (http://angular-ui.github.com) where we’ve put most of our ‘directives’ (jQuery plugins, reuseable components) together and they give lots of examples of how to bypass many pitfalls of a client-side framework.

            What I mean’t by ‘async issues’ wasn’t really an Angular-specific problem per-se, as a dev my big complexity has been getting plugins to trigger or utilize the DOM at the right time. Directives have made this WAY easier and clearer, but on rare occasion we have had to throw in a setTimeout so we don’t disrupt the compiler in unusual edge-cases.

  • http://twitter.com/themightychris Chris Alfano

    Did you look at ExtJS?

    • http://appointsolutions.com Rob Boerman

      Any top10 list of JavaScript MVC stuff that leaves out ExtJS entirely is rediculous

      • http://codebrief.com Gordon Hempton

        I would definitely have considered ExtJS if it had a better license: http://www.sencha.com/products/extjs/license/

        • Sam

          I definitely don’t intend to start a discussion about licensing, but can I ask what bothers you about the Ext Js one?

          If it is because you wanted to compare “free” libraries only, I shut up. Otherwise I can only hope you try it one day. (I’m not in any way connected to them)

          • http://ihatelowercase.livejournal.com/ Notorious BMG

            ExtJS is sooo bulky compared to Backbone.js + libs of choice stack Even having opportunity to pay the ExtJS’ costs, i wouldn’t opt for it. The only thing you can develop nicely with ExtJS is ugly inaccessible administration panel

        • Anonymous

          Actually, could you add it as a runner up? I’d like to hear your thoughts on how ExtJS stacks up against the rest of frameworks as it is an option for backend administration panels I’m working on.

  • Sanat Gersappa

    Knockout lets you re-use templates – http://knockoutjs.com/documentation/template-binding.html

  • mbrevoort

    Dojo is another odd exclusion. What was your process for narrowing to the ten you looked at?

    • Kyle Hayes

      I would like to know this as well. We use Dojo pretty exclusively for enterprise-level web site and application development at work. It would support pretty much everything you are discussing without being overly prescriptive and dogmatic about the approach.

      • http://codebrief.com Gordon Hempton

        Good to know. Dojo just simply never came up in my search/conversations with people.

        I will give it a review at some point.

    • http://www.rebeccamurphey.com Rebecca Murphey

      While I am certainly a big fan of Dojo, I’m not sure I’d include it in a list of “MVC Frameworks,” either (indeed, the appearance of Google Closure in this list feels slightly odd, too). Dojo is a great toolkit, and Toura’s Mulberry (http://mulberry.toura.com) is an MVC-ish framework targeted at PhoneGap dev that makes extensive use of Dojo — however, Dojo proper doesn’t come with a fairly standard MVC component like a router. As much as I like and use and want others to use Dojo, I do understand why it wasn’t on this list.

      • Anonymous

        btw the only massive apps are google docs and gogole maps. Both of which are designed using closure. That means it is the only proven one at massive scales.

  • Broc Seib

    Nice collection of frameworks Gordon.

    BTW, the characters in the comparison grid do not render and show up as little boxes.

  • Fernando

    I’m (almost) sure that you really know what you’re saying but empty comments like “the entire framework (…) results in lots of boilerplate” whithout a single line of code to prove your point or, worst, “initiatives like DART its clear that Java is not the future of the web” (really? based on what?) don`t help.

    • http://codebrief.com Gordon Hempton

      I agree that I don’t qualify a lot of these statements, its hard to get to that level of detail when dealing with so many frameworks. With regards to the boilerplate comment, that was anecdotal from my own experience.

  • Anonymous

    knockoutjs + sammy js should be added to the list … they play nicely together.

  • Broc Seib

    I can’t read the comparison grid — I suppose the “unknown character” boxes are supposed to be little checkmarks perhaps? How about some plain old text like “yes”/”no”.  On my machine it renders like this: http://goo.gl/qGtmE

    • http://codebrief.com Gordon Hempton

      They are unicode characters for checkmarks. What browser are you using?

      • Broc Seib

        I’m using the latest version of Chrome, version 17.x.  I opened the page in Safari 5.x, Firefox 3.6, and IE 8.x. (Firefox at least shows the unicode values in the little boxes, respectively as 2717 and 2713.)

        Then I checked on a couple other machines, laptop, and chromebook. They all render these unicode characters correctly.

        I conclude the problem is my one machine.

  • Anonymous

    Does anything come close to what Flex offers? 

    • http://codebrief.com Gordon Hempton

      Ember is the closest of the ones that use pure html for presentation. You could argue that Sproutcore 1.x, and Capuccino come pretty close.

    • Johans

      Angualr.js is what Flex should have been if it was built for HTML5. In fact one or the developers is ex-Adobe – I think he may even have worked on Flex.

      • http://codebrief.com Gordon Hempton

        Being a former flex-man myself, I agree with this to an extent. When it comes to binding idioms, angular.js is more similar. When it comes to component composition, ember.js is more similar.

        Angular.js, like flex, is designed in a more enterprisy style.

    • Johans

      You may like to look at the recent port of Cafe Townsend to Angular by Thomas Burleson  https://github.com/ThomasBurleson/angularJS-CafeTownsend

  • http://twitter.com/rider_pie Pietro
  • Jamesjlaw

    Thanks for the list. We’ve tried knockout and backbone recently and a moving forward with knockout given its data bindings, and is less prescriptive. As far as your concern on template re-use with knockout what you’re saying doesn’t seem to be correct. Also like to add that as of 2.0 KO has “native” templates, which is really good for stuff that will NOT be re-used… which is often the case with a lot of UI work.

    • http://codebrief.com Gordon Hempton

      Knockout is a great framework. I think its a good choice.

      With regards to template reuse, from what I’ve gathered, you can re-use basic templates, but it is not as elegant to reuse more complex components backed by their own logic.

  • http://twitter.com/cromwellian cromwellian

    Despite the snark comments about GWT and Objective-J, I think the core take away is that the future of the web is the trend towards polyglotism and divorcing the language something is developed in from the runtime the browser has. CoffeeScript is a great example of this trend.

  • http://twitter.com/cromwellian cromwellian

    Small nit: GWT does support UI Bindings with the GWT Editor framework (http://code.google.com/webtoolkit/doc/latest/DevGuideUiEditors.html)  The Editor framework also supports automatic persistence of the Views being edited, and declarative client-side and server-side UI widget validation with error display through JSR303 annotations.

  • Guest

    “What Ember has over these frameworks is a way to declaratively re-use entire components that are backed by their own (possibly controller-level) logic.”

    In Angular.js, would widgets (http://docs.angularjs.org/#!/guide/devguide.compiler.widgets.creatingwidgets) and/or ng:include (http://docs.angularjs.org/#!/api/angular.widget.ng:include) help achieve this goal? Do you have a specific example of something that would be easy to do in Ember.js in this regard but comparatively difficult in Angular.js?

    • http://codebrief.com Gordon Hempton

      I missed element level widgets. This might be sufficient, I will explore it some more and see if I can cook up an example.

      • Guest

        Also, see https://groups.google.com/d/msg/angular/QAPnpwcwEmc/ZG5hGTEier4J (the new compiler mentioned with regard to composed views is coming very soon) and https://groups.google.com/d/msg/angular/QAPnpwcwEmc/8QWApKKothAJ (computed properties).

      • Dean Sofer

        A suite entirely based on widgets/directives for Angular – https://github.com/angular-ui/angular-ui

  • http://twitter.com/triptych Andrew Wooldridge

    There is a new MVC framework being created for YUI – it may be worthy of review perhaps when it is released?

    • http://tiptheweb.org/tipstream/3mtvsfracef58/ Eric Ferraiuolo

      It has been released since mid-August 2011, but is receiving some really interesting features in 3.5.0 due out in March.

  • Ethan Brown

    Seems like you’ve left out node based frameworks such as Matador, Derby, Flatiron and Railway

    http://obvious.github.com/matador/  http://derbyjs.com/  http://flatironjs.org/  http://railwayjs.com/ 

    At a point this becomes a little ridiculous, but have you look at these?

    • Kaoru Aoi

      I heard railwayjs was pretty bad. Flatironjs and derby are both interesting.

    • Dave

      These Node based MVC frameworks are awesome and exactly what I have been looking for.  When a user makes an update within the page, there is no page refresh but the actual HTML of the page is updated.  So in the case of Backbone boilerplate template the HTML remains static whereas this is dynamic.  Much better for search engine spiders.

      Thanks a lot.  Just need to decide which one of the above to test first.

      • DasLicht

         How does this work ? updating html without page refresh ?

  • Pingback: The Top 10 Javascript MVC Frameworks Reviewed | Development Notes

  • Francis Lavoie

    There is also qooxdoo. Documentation is excellent, very well thought, but the design looks outdated (customizable).

    More like sproutcore, but you can also use it like Ember.js ( http://news.qooxdoo.org/todo-a-new-app )

  • Aashishkoirala

    hey how about Matador MVC for Node.js?

  • Tim

    An interesting article, sufficiently so that I’m looking at Ember for my next project. Could you expand on the “small performance issues” that you cite in relation to a backbone port.

    • http://codebrief.com Gordon Hempton

      I have an application that renders an extremely large collection of items and it has some lag compared to the backbone implementation.

  • Carlos Gavidia

    Nice

  • John Cook

    Thanks for putting together this article.  We are in the middle of choosing a JavaScript framework and your post was very helpful.  I think I agree with your conclusion about Ember.

    Personally I don’t care to use anything based on a non-native-JS implementation (I’m looking at you, CoffeeScript and GWT and Objective-J).  Your statement “We are programming for the web here people” applies as much to this as it does HTML.  Building a language abstraction on top of JavaScript is, in my opinion, only adding an unnecessary layer of complexity.

  • Anonymous

    does Dojo.js have MVC or is it just not very popular?

  • http://fashioningchange.com/blog/kevin Kevin Ball

    I’m using Backbone and it has been a big step forward for a structuring JS applications, but I definitely agree on the level of boilerplate, and I wish it had stronger abstractions.  It provides a “backbone” of structure, but compared to some of the server side frameworks (ie rails) it feels like it leaves a lot wanting still.

    Looking forward to trying Ember.js as well.

  • Machadogj

    Why do you think you can’t reuse Knockout.js view models? I have done this, and it worked pretty good and I was even working on Knockout 1.2, now with the “with” and “if” bindings is a lot simpler.

  • http://blog.atomicinc.com Avi Deitcher

    Thanks for putting this together, I think it really is invaluable. Don Browning @donwb:disqus tweeted it out.

    Some comments. 1) Everything here speaks mostly to client-side, as far as I can see. Thoughts on Node-side? 2) Sammy: I have used it for about two years now, pretty heavily. It is definitely not an MVC framework, nor does it try to be. What it does exceedingly well is handle routing. By using URLs to define your application position/state, and then using Sinatra-like (for Ruby enthusiasts) or expressjs-like (for Node) syntax, the entire path through an app is defined declaratively. This is incredibly powerful, and makes both writing and debugging dramatically simplified. Once in  a route, though, you need to handle the MVC separately. You could argue that it is sort of like a controller, but I don’t go that far. 3) Am I the only one left in the entire community who is still bothered by embedding code, however specialized or simplified, inside HTML? They all have the same issue – jade, handlebars (for Ember), etc. etc. The only templating engine I found that does not have this problem is purejs. I have issues with pure, but I love the fact that my HTML is 100% HTML. I then use selectors – essentially jQuery/Sizzle – to find what I want and render it, but I can do HTML design in plain HTML, even giving it to a real designer, without them thinking one bit about code. Anyone else?

    • http://ihatelowercase.livejournal.com/ Notorious BMG

      You don’t need to keep your templates inside your app’s html, just put em in separate html files, load them dynamically with require.js in development and use build tool to put em all together in production

      • http://blog.atomicinc.com Avi Deitcher

        Notorious,

        Are you referring to Ember? Do you mean keep separate .html files that have script tags in them? So then you render the template and insert it into the DOM? I can see how that would be cleaner, but that leaves you with two equally unpleasant options.

        1) Have the html be blank, with all of the content inside the templates. That makes it difficult to create the html independently. 2) Have the html have the content, e.g. Here is boilerplate and then have the same in the script template. But then you need to do it twice, and still end up having html designers messing around with the templates.

        What am I missing here? 

        • http://ihatelowercase.livejournal.com/ Notorious BMG

          Well, the way i see it – you design html separately, make sure it works like you want, then you tear it down into separate files with html chunks for your microtemplates, that your app logic needs.

          • http://blog.atomicinc.com Avi Deitcher

            And then with each change you need to reassemble, then rip it apart again? Not great for agile dynamic changes.

            There has to be a better way…

  • http://blog.atomicinc.com Avi Deitcher

    Thanks to this, I took another look at knockout and ember, both of which do UI bindings. They both do it in strange ways:

    • Ember: those odd script tags
    • Knockout: those odd data-bind attributes on the HTML. This is cleaner than Ember, but even so, needing to know the object names, the actual variable names, inside the HTML? Too odd. It should be the other way around.

    Doesn’t anything do a sane, “find by selector and then apply”? Something like (bastardizing the knockout example):

      Fill some data

    And then you can have in JS:

    var specialObj = {text:”cool stuff”}; Binder(“div#mydiv span#foo”,specialObj,”text”);

    so that “div#mydiv span#foo” selector element is bound to specialObj, with member “text” bound, or something similar?

    • Charles Himmer

      The reason I know Knockout.js doesn’t use CSS selectors to target DOM elements is because it is trying to leave CSS selectors (classes and ids) for design.  If you use CSS selectors for both design and JS logic your app can become really brindle if you refactor the CSS selectors you use for styling / layout.  I know people think the data-bind method is odd but it allows for separation of concerns.  Because your JS logic is not dependant on the DOM staying in the same order or having the same CSS classes, you could move large chunks of your HTML around and your JS logic will still work. This can be handy when you hand a template over to a designer and they are free to change / refactor CSS classes and the app’s JS logic doesn’t break. 

      • http://blog.atomicinc.com Avi Deitcher

        In essence, you are saying, somewhere down the line, you need a bind between html and js in order to render. It is going to be one of: 1) Real JS, with all its drawbacks of putting it into HTML. 2) The specialized syntax used by many templating engines, all of which are just variants on one another, with the same drawbacks as #1. 3) CSS selectors, which keeps it totally clean, with the drawback of creating js dependencies and possible brittleness if you refactor HTML. 4) Special data-bind tags, with the drawback of creating special tags and having knowledge of some amount of object syntax inside html.

        No matter how you play it, there has to be some amount of coupling, making the html or the js messy and brittle somewhere. To some extent, I think I prefer using CSS selectors because we have gotten so used to them from jQuery.

        Is there a different perspective here?

        • K33ger

          And as an organization, you can manage the CSS selectors with a sample naming process.  jsselectorname for the binding related, and just normal blogcommentdiv for non bound controls.  

          • http://blog.atomicinc.com Avi Deitcher

            Oh, I like that. So you are saying that if you have a div that is bound to something for template rendering purposes, you give it two classes:

            ….

            Where styleclassa is used exclusively for styling, and has zero impact and usage in template binding, and bindclassb is used exclusively for template binding and has zero impact and usage in styling. 

            I really like that.

          • Dan Polites

            We put a ‘-s’ on all classes that are used as jquery selectors. This way our designers know to leave those classes be. Also our designers know to not create any classes that end with ‘-s’.

          • http://blog.atomicinc.com Avi Deitcher

            Very smooth. And it doesn’t screw around with odd things like data-*, and easy to reference using CSS notation.

            I think I will adopt it!

          • inspiraller

            I don’t understand why angular.js or knockout.js or any other framework have created their own binding logic when you can use valid html attributes that actually encourage accessibility support. Use ‘role’, rather than ‘css’. role=”myWidget”

            You can still access the element by its id. The role is just an indicator that this element and potentially its children are controlled via a javascript widget and subject to change. It’s easy to remember, easy to apply, and requires no learning of a new syntax. It’s also declarative/implied and not rigid according to mvvm ui binding jargon. You can javascript it anywhich way you like externally.

          • inspiraller

            I don’t understand why angular.js or knockout.js or any other framework have created their own binding logic when you can use valid html attributes that actually encourage accessibility support. Use ‘role’, rather than ‘css’. role=”myWidget”

            You can still access the element by its id. The role is just an indicator that this element and potentially its children are controlled via a javascript widget and subject to change. It’s easy to remember, easy to apply, and requires no learning of a new syntax. It’s also declarative/implied and not rigid according to mvvm ui binding jargon. You can javascript it anywhich way you like externally.

          • http://blog.atomicinc.com Avi Deitcher

            I thought role was xhtml only, and not widely used. Of course, any html engine will just ignore it, which allows you to use it in JS, but why does it buy you anything over data-bind?

  • Andrew

    Regarding Composed Views. In Knockout 2.0 there’s a new concept of “parent” and “child” view models: http://blog.stevensanderson.com/2011/12/21/knockout-2-0-0-released/ So, one can split the ViewModel into separate parts and base various widgets on them. Does that count as Composed Views feature?

    • rajinder thakur

      .YUI is definitely missing in this comparison!

  • Guest

    YUI is definitely missing in this comparison!

  • http://www.facebook.com/people/Samori-Shinuza-Gorse/1302186545 Samori Shinuza Gorse

    Regarding the cons on Backbone: It depends what you call boilerplate, don’t forget that you can extend views to add things you use a lot.

  • Scott

    What performance problems did you encounter while using Ember.js?

  • fubar49

    Where you reviewing gwt or gwt platform because gwt is really just a java to javascript compiler, gwt platform is more of a framework. http://code.google.com/p/gwt-platform/

  • http://twitter.com/jeef3 Jeff K

    Great post, I’m a big fan of UI binding, so I’m trying to find a solution that will work with my preferred framework (Spine.js).

    I disagree that the “non-blocking” UI pattern is fundamentally flawed. I believe that there are plenty of use cases for having non-blocking UI, but yes, sometimes we must block and wait for the server. Maybe we are awaiting a response from an external service before we can proceed to the next step in a process, but a lot of the time a non-blocking UI works really well. The best example would be posting a comment. We know the post will succeed because client-side validation has told us the post is valid, so what is wrong with updating the UI immediately?

    I’m liking that Ember uses Handlebars, I do like that templating engine, so I’m curious how they do UI binding with it.

  • http://www.surfulater.com/ nevf

    I’ve been developing a moderately complex app for the best part of a year using Knockout.js Overall KO is an impressive framework however I do feel that I’ve spent too much time trying to work out why certain things don’t work as they should and how to accomplish some tasks which seem more complex than they should. Without the excellent support, especially from Ryan who deserves a medal, I may have given up and looked elsewhere by now. When data-binds don’t work you can spend quite some time trying to work out why. There are times when I’ve had to rewrite templates to work-around what appear to me to be bugs.

    If I were to start over I’d seriously evaluate the likes of Ember.js and Angular.js. Ember looks especially promising, however I’m not sure I’m sold on its use of script tags to accomplish two way bindings. I had a play with Metamorph.js which Ember uses and it didn’t quite feel right.

    For a new project I’m starting on I’ve decided to ditch MVC/MVVM frameworks altogether and develop something simpler to meet it’s specific requirements.

    Neville Franks, http://www.surfulater.com

  • Anonymous

    As a heavy user of ExtJs4, I can add a few cents.  

    ExtJs4 is a great enterprise-level Web UI framework. I even dare to say its the only enterprise-level web UI framework on the market  exists. It ships with the huge bundle of ready to use UI components and has a strong MVC paradigm.  Pros: Native UI bindings, great MVC, huge UI components code base, great examples, good tech support and large community. Very extendable. 

    Cons: License. Large foot step (packed starter bundle is around 600k). Performance. Not so obvious Controller paradigm (“Application”). Relatively steep learning curve.  

    • A Person

      Seems like a ton of cons. Also, enterprise is a meaningless marketing term.

      • http://www.facebook.com/patya Pavel Filippov

        (It’s me, emdin).

        Enterprise is a meaningless when used by marketing. From developer’s point of view, enterprise mean large-scale application, written by the large developer team, according to a certain standards.

        There is no strict definition what is “large”, for example, projects I worked with had more than 50 application screens, around 30 data models and code base around 900k. Team had 12 developers.     Now for constructive part of your comment — there are definitely a lot of cons, but the problem is there is no real choice if you’re going to build something big, extendable and supportable. And I’m far from evangelizing ExtJs, it’s more like love-hate relationship.  

        There is a simple test — try to find any good, consistent, and feature-rich grid component in today’s web UI frameworks. There is no one which even come close to one they have in ExtJs.

        • Chris Barry

          I agree, I used to hate the term enterprise, but it does actually mean something. Building for the future, big scale architecture, stuff you don’t really hit a problem with until you have a mammoth project. But when you do, you’ll find certain things that are considered enterprise, make more sense.

          • Bill Baran

            My definition of enterprise is an application that allows more than one level of aggregation — It supports multiple independent business units but provides a unified view.

        • Saem Ghani

          I use ExtJS4 extensively, and I’m sorry, but it being anything better than faux-useful is a lie.

          Basic UI components in their grid like combo boxes have issues when it comes to rendering — this is a known issue that I don’t believe has been resolved, even in 4.1.

          First and foremost, ExtJS’ testability is exceptionally poor considering how “enterprise” grade it is. This really shows in the incredibly broken set of releases they’ve had, heck one of their RCs didn’t have working stores. They’re only getting their feet together on this now, their previous unit tests only covered the most barest of core. The entire model system is obtuse, with support for nested records completely absent, and if you do try and include it, things break left right and centre. Their validation is another joke, form and model validation aren’t unified. Not to mention extending their validation in a useful way is difficult. Did I mention how hard it is to test? Then there is their model management, as per their stores, which are basically like database table proxies, this seems to urge you into a pattern of treating each of your database records as root entities. Their data binding is also pathetic, while other systems can have easy to setup reactive models with nice data binding, we’re stuck with terrible models (flat records). Seriously, try and commit a non-flat record as a single transaction, it’s hilariously fun — as long as gouging your eyes out from the resultant code falls into that category.

          Carrying on that last point, when people say enterprise, they often think unit of work and transactional as being bread and butter. This is not sanely possible except in trivial cases. Think about this long and hard, because I’d argue you’re not doing enterprise if you’re not doing transactions.

          And then lets get into page weight, sure your app will feel enterprise, if by enterprise we mean needlessly slow. It’s got an enormous foot print and load time, and even with all that, they made it for single page apps. Wow, really? So now we have to write our own dependency injection system (and no, xtypes et al, aren’t sufficient, as it doesn’t handling scoping and lifecycle issues) because real enterprise apps aren’t a single page.

          The only things I can think of currently that I’m not violently allergic to, are their layouts, if they work, and their grid/tree (the widget and only partially the backing store).

        • Maxim T

          There recently had been added one HTML5 javascript framework jRIApp. It was specially designed to build LOB applications like it is done in Silverlight with WCF RIA services. It is based on MVVM design pattern and also has data service part. It is published under MIT license on GitHub https://github.com/BBGONE/jRIApp . If you are programming in C# (it has data service written in C#) and know how to program ASP.NET MVC – it will be your best choice. You can watch demo on youtube for Single Page Application http://www.youtube.com/watch?v=m2lxFWhJghA

    • http://www.facebook.com/dominicwatson Dominic Watson

      I’m using Sencha Touch and damn, this is not a company you want to invest time into following. At times I wonder if they do any testing at all as very core parts of the framework will just die in an update. Every update seems to contain some new quirk with no help available on their public forum. Their team have to let posts stagnate for 24hrs before posting (as opposed to when they stumble upon them in Premium). Their Architect product is quite far behind Sencha releases… for instance – they changed scrollable to require “null” in 2.1.1 rather than “false” and Architect 2+ months later STILL cannot specify scrollable as null, leaving a $400 application useless.

      There’s a performance issue with dataviews where dragging the view will cause classes to be removed and added everytime you move. Which causes a repaint. I’ve supplied the code to fix this (a check to see if the new class set is any different before remove/adding) which gives a massive performance improvement to scrolling on Android and after about 2 releases they still haven’t incorporated it. If you ask them the status they’re entirely silent (even on premium forum)… I think they’re waiting until ST 2.2 to release the fix so they can harp on about how fantastic the performance changes are.

      So, you’re talking about a company that won’t release fixes and talk to it’s community all for marketing their product.

      Go to their forums and look at how many posts are just left to die. Also, typically my applications take about 6 seconds to load (I would consider myself quite a seasoned ST developer after playing with it for almost a year)

  • http://twitter.com/amorgaut Alexandre Morgaut

    Hi Gordon,

    thank you for this very interesting feedback.

    Maybe you might also be interested by Wakanda: http://wakanda.org It is a Model-driven approach of Web App development in pure JavaScript

    As the community manager of this project I would be very interested by your feelings about it (either bad or nice)

    Regards,

    Alexandre

    • Anonymous

      Hello Alexandre, 

      just a little note — examples and demos can be extremely useful when presenting such a framework. Unfortunately, I didn’t find any of these on your website. 

  • http://twitter.com/andriijas Andreas

    Have you built something big with ember? In what sense does it play well with others. For example all the divs it adds surrounding your views, doesn’t that clash with boostrap (github.com/twitter/boostrap for those living under stones) .row > [class*="span"] ?

    Also what in backbone js do you think is left to be desired? Also,

  • Markus

    Well if you are an iOS developer you should have an understanding of the relationship Objective-C has to C. It is the same with Obj-J to JavaScript.

    A good blog post from the Obj-J creator addresses this misunderstanding: http://cappuccino.org/discuss/2008/12/08/on-leaky-abstractions-and-objective-j/

    IMHO it is not very practical to simply compare MVC frameworks one by one. These different MVC frameworks exist for a reason. Each of them does something better or more suitable for a given problem than another.

    My personal toolkit is Knockout (small), Backbone (medium), Cappuccino (large).

  • Miguel Zakharia

    I came across Addy Osmani’s github page (https://github.com/addyosmani/todomvc) which includes a sample ToDo app for each of the following: Backbone, Ember, Spine, JavaScriptMVC, Sammy, YUILibrary, KnockoutJS, Knockback, AngularJS, Broke, Fidel, and ExtJS. 

  • http://www.facebook.com/azhdanov1 Andriy Zhdanov

    Sammy.js also allows composing templates (not views, as it’s not an MVC really, but one still can define a function in and re-use it also)  – e.g. with Handlebars: http://sammyjs.org/docs/api/0.7.1/all#Sammy.Handlebars, i.e. Sammy has partials, it depends on underline template engine used if it supports partials.

  • Donald Pipowitch

    Thanks a lot for the article. Very nice overview. Did you tested some of the frameworks on a mobile device? 

  • zazabe

    JMVC support UI Binding, could you update your table, I think it’s important to tell it…

  • walt

    Hi I am a fan of angular.js. You review has a big inaccuracy, angularjs does support reusable components. They have a rich API for widgets that do in fact allow for creating component code in it’s own scope (or rather inherited scope). Please visit angular and look at their widget system they have a great set of tutorials and explanations for widgets.

  • Charlesfeeney258

    Hi just wanted to point out angularjs allows for nested components and widgets.

  • Vetruvius

    I can talk about JavascriptMVC and ExtJS. We used them both, now we’re leaning toward JavascriptMVC. Mostly because it’s very lightweight, goes really well together with any jquery plugins. It has a nice binding model. ExtJS on the other hand comes with a ton of rich UI widgets, enabling you to quickly build things, but … it’s overly complex, too intimate with its layout managers. It’s just too heavy in many ways. This becomes a burden when you want to do something that hasn’t been designed by ExtJS team. Plus the license of course…

  • Cloudbeans

    I were thinking we were talking more about “infrastructure” frameworks then those bringing a whole widgets suite but as we talked about Extjs, that potentially opens the door of dozens pages of discussion by adding DHMLx, Smartclient, Bindows, Backbase, General interface and so on … and some mention that nothing come even close to extjs for “enterprise” context, then we should know that quite some “enterprise” suites were already really much impressive years before extjs become just a baby… and actually just to name an example, smartclient is still more impressive than extjs on most subjects to my mind. But whatever, i just wanted to mention a sympatic little one named jqwidgets http://www.jqwidgets.com using jquery and knockout. It’s still quite a baby but enough advanced to be (or become in medium-term) an extjs alternative.

    Now, out of the scope of the widgets suite, Pietro mentions Knockback which is quite interesting, combining Backbone and Knockout plus other stuff. Wouldn’t you see it as a good Ember competitor ? Quite surprised you’re not talking about it.

  • http://twitter.com/shon_ Shekhar Tiwatne

    Wonderful article. I just noticed Agility ( http://agilityjs.com/ ). Perhaps it too deserves a entry in this list.

  • Anonymous

    Nice review! I’m going to write a mobile app for my web app real soon, your review will be very helpful. I don’t quite agree with you when you say most of these frameworks could be classified as MV* instead of MVC; I think KO has quite a distinctive ‘feeling’ from others, it’s more related to codebehind frameworks such as WPF than other MVC frameworks.

  • Anonymous

    Hi there. Just two corrections:

    • it’s AngularJS not Angular.js
    • You can absolutely create composed views in AngularJS, it can be done in several ways depending on what you need. Starting from simply including templates into the master template, all the way to creating new html elements or attributes via directives that represent your widgets (which can contain other widgets, bindings etc)
    • http://codebrief.com/ Gordon Hempton

      Thanks for the corrections. I will correct Angular.js to AngularJS shortly, however I need to dig deeper into Angular to verify that view composition is indeed a first-class citizen in the framework and not more of a helper mechanic.

      • Anonymous

        Hi Gordon, have you had a chance to look at angular yet? I still see that your blog post, which keeps on coming up in various discussions, is presenting false information.

        We now have a new home page with “tabs” example to show off how crazy you can go with composed views in angular.

        http://angularjs.org/

        • Anonymous

          I’m still waiting for the table to be updated :-)

          As several people have independently confirmed, AngularJS has composed views.

      • Anonymous

        +1 for taking a better look at Angular. It meets all of the criteria you stated, with a much smaller footprint than Ember.

      • nogece

        At the end of the directive chapter in the angular dev-guide, you’ll find a paragraph on writing components. Yet, I wonder about nesting such derictives.

  • http://rawlinson.us/blog Bill

    I haven’t really dug into this yet but another library was released last week, canJS – which is a new version of javascriptMVC – it seems lightweight, has dynamic binding, works with jQuery (or the dom library of your choice it seems).  I’m not sure if it supports partials but it does use web presentation layer.

    Overall it looks like a promising candidate.  I think, based on the documentation, that I like the way canJs does the binding using it’s can.Observe class but I haven’t had a chance to really look at it to with any depth.  

    Correct me if I’m wrong but can’t you, using underscore, setup dynamic binding between the view and model?  If that is the case, since backbone seems to often be used along side underscore, it seems like backbone can support dynamic binding (just not out of the box).

  • http://twitter.com/_karim_nassar_ Karim Nassar

    Can you say more about the “small performance issues” of Ember? I’m evaluating it for a largish project, and comments like that concern me a little.

  • http://pulse.yahoo.com/_U4PZYWK6UOOXAVHGSW4TY7DGGE Richard

    Why is lack of HTML5 compliance not mentioned as a con for any of these?   Ember, Angular and probably others don’t result in a valid HTML 5 document (pre-rendering).  So compliance checking via a build server is out the window.   XHTML provided the ability to namespace custom attributes and elements (which the Backbase ajax framework used to great effect).  Angular is effectively creating its own namespace ng- minus the namespace declaration.  Why was it so hard for developers to grasp the namespacing concept in XHTML and look where it has led us.   By bucking the standards, nearly all these frameworks throw the possibility of editor tooling and validation right out the window.

    When templating as provided by these frameworks is combined with control libraries like jQuery UI, we get the problem of loss of state within the UI component because the component has to be re-initialized every time the template is updated.  The template engine wipes out any markup a UI control may have injected.  It’s kind of like trying to keep a water droplet distinct within a pail of water.  These frameworks are trying to address a functional need but fundamentally, HTML would be better off if data binding and controls/composites were to be added to the specification.

  • http://twitter.com/cromandini cromandini

    I would have added Sencha Touch, the mobile version of ExtJS. It is free for commercial use and has an important stage of maturity.

  • http://www.facebook.com/profile.php?id=513347803 Kojo Cnario

    I think you should check out Agility.js @ http://agilityjs.com . It definitely tocks all the boxes for the feature you have listed.

  • Rasmus Schultz

    This post needs an update – I don’t know if it did at the time, but angular does have support for components now, they’re called directives.

  • Riya Sharma555

    IMO, I think WOOZOO is a nice framwork which has extra feature of Localisation and internationalization, URL management, Plugins.

  • http://twitter.com/javascriptedme JavaScripted

    I’ve been researching some of those frameworks you’ve included in your article and I must admit that I would also chose Ember.js as my winner. On the other hand I think the choice depends on what is being written. If I work mainly with DOM I choose jQuery, when working with event’s and I’m writing some algorithms I would probably choose Backbone.

    BTW Great post, thanks.

  • Salman Abbas

    Great comparison. Thank You!

  • http://profiles.google.com/garysweaver Gary Weaver

    Something else worth considering is how much the framework and its community support accessibility and “less-enabled” browsers via progressive enhancement, graceful degradation, etc. jQuery Mobile does a great job at degrading with little work, for example. Unfortunately, it’s really easy to get caught up in the client-side app processing, speed, and ability to cache without considering what might be given up in the process. It’s really just a business decision. Can you afford to develop for those users? Can you afford to lose them if you don’t?

  • Jason Crockford

    So, I started reading this because of the title. I read down as far as Backbone.js. Backbone is not an MVC framework. The Controller and the view are the same thing – so how is that MVC?

  • http://twitter.com/flrent Florent Lamoureux

    I think you miss a lot by omitting Sencha’s frameworks. Ext-JS is probably one of the richest. Anyway, this is a great article, thank you.

  • Darth

    Unfortunately ember.js doesn’t play nicely with others when EXTEND_PROTOTYPES: true, which is the default. For example: https://github.com/emberjs/ember.js/issues/553

  • Anonymous

    I’m more and more looking into AngularJS, which is approaching 1.0.0, and has reusable components as “directives”, where you can split your template, controller logic, and link all of that as a new “HTML” tag, like a “tab” or a “panel”, and that brings the templates, the data binding and logic in.

    Maybe you want to update the table, as Angular becomes a serious contender.

  • Steven
    • http://www.facebook.com/gregwaxman Gregory Waxman

      Tower is a full framework for Node.js development, not a “MVC” Framework like the above ones.

  • Abdiel Aviles

    I’m currently using Agility.js for a small project. Very easy to learn and good enough for prototypes. Still not ready for prime time and i don’t think it will ever be (IMHO).

  • http://twitter.com/rfletcherEW Rob Fletcher

    Regarding your comments on lack of nested components with controller-level logic, doesn’t Angular have this with directives? They are nestable, can have their own controllers and complex & well controlled scope relationships between parent & child.

  • http://nils-blum-oeste.de/ Nils Blum-Oeste

    Hey Gordon, I really love this post. However you should update the table, as angular.js has support for reusable components via it’s directives. Actually it is quite a remarkable feature of angular.js, as it allows you to extend HTML to a DSL for UI declaration.

  • Matt

    Another framework that pairs UI widgets with a mvvm framework is KendoUI by Telerik. They suffer some of the same cons as ExtJS 4 which is licensing, somewhat of a learning curve (but lets be honest all of these have a learning curve), and it is still very new. They do have a nice grid which I saw down in the comments was a point of concern. I am probably never going to use KendoUI because of the $699 per developer license fee, but I thought I would add another option in the mix. I have been using knockoutjs recently along with jQuery and jQueryUI, and have been happy with the results.

    • http://www.facebook.com/hkdobrev Haralan Dobrev

      Isn’t KendoUI more like jQuery UI for UI widgets etc.?

      These comparisons are only about MVC frameworks.

  • http://stephane-klein.info/ Stéphane Klein

    What do you thing about http://canjs.us ?

  • Andreas

    I think you should check MeteorJS out. It is probably a little early, but it looks really promising.

  • Anonymous

    About about Meteor.js?

  • inspiraller

    angular.js does not play nicely with others. In fact its worse, because it over pollutes the global namespace with all your added controller functions. I also wouldn’t say it conforms to your concept of web presentation layer either because it has invented its own declarative logic attributes which aren’t valid html.

  • Devric

    What about Can.js

  • Jesus Bejatano

    I will go for Batman!!! NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN

  • Andre Lopes

    Ember.js just don’t have native REST interface, which in my opinion is a basic feature of Javascript MVC frameworks. Use pure XMLHttpRequest Object? No, thanks

  • Uther Pendragon

    Wow… They all suck. I have been programming hard-core javascript for almost a decade, day in and day out, and have for the most part ended up writing everything from scratch. Nothing I’d found had ever been up to what I would consider “elegant” (with the exception of jquery, which is damn nice). When I say elegant, I mean in how it is implemented, not necessarily how it is written (although it’s tough to find anything written nicely either).

    In my opinion, all the frameworks I’ve come across all seem to be centered around making javascript into something it’s not (class based objects, poorly represented or implemented abstraction, bloat bloat bloat). The UI and template frameworks have been the most disappointing: poor ui binding, hideous template syntax, little to no re-usability or modularity). To heads up the flamers, I am not just blindly bashing on these… I looked into all of them and gave each a fair assessment. Maybe it’s just me, but I think they’re taking the wrong direction for a UI framework. For one, it seems like every toolkit / framework I see these days have a synopsis encouraging a “method chaining” style of implementation (not necessarily chaining themselves, but everything wrapped and bundled like tight arguments instead of a “formal” declaration). I know it’s nice in jquery, but it’s just NOT right for all situations… but that’s just my pet peeve. ….I’m gonna get off the box to go shit. I have my own template engine I wrote years ago called jsx. I never released it to the world as it still was not quite right to me. I have since started on version 2 which is a complete rewrite using the same philosophies. As soon as I get a beta version prepared, I shall release it for review. When I do, I will post it here, as I’m very interested in how it is received apropos to the standards of this match-up. To give a general idea of what sets jsx a world apart from any template engine I’ve yet to see is that ALL the code for interfacing with the view is IN the template itself, which is pure, valid html. The controller is bound to the view at instantiation and all templates can be reused and embedded in other templates simply by name and/or cascade-style qualifiers.

    …but I digress

    • daslicht

      Another funny thing is that some what do solve anything with JavaScript such as Templating which result in having to present alternative content to search engines to keep the site searchable. I think that the Hijack approach is much more smarter but none of the “framewoks” seem to consider this.

  • http://pedro.albuquerques.net Pedro Albuquerque Santos

    Very nice article. I also found ember.js to be very promising. However I have yet to develop a full app with it.

    Could you please also take a look at the Enyo framework (that comes from the now defunct webOS) http://enyojs.com/? I’d like to know your opinion about it, since you seem pretty experienced with JavaScript frameworks.

  • Anonymous

    We did evaluate emberjs & knockoutjs for our requirement. You can find the details here http://blog.bootstraptoday.com/2012/01/23/emberjs-vs-knockoutjs/. We found knockoutjs framework suitable for our requirement

  • http://dorkitude.com/ Kyle Wild

    FYI some people may find your “plays nicely with others” column misleading. I think it would be more accurate to say “plays nicely with jquery”.

    Perhaps then you could add a column for “plays nicely with others”, which would be False for many of these libraries, which themselves not only play nicely with jQuery, but require it, to the exclusion of many other (third-party or homegrown) DOM manipulation tools.

  • Anonymous

    quick correction about angularjs. you can indeed compose views nicely through directives. it is one of the “cool” angularjs features.

  • Fox

    How to make a Website which is built with a ClientSide JS Framework Indexable by google? Creating alternative html snapshots seams to be a tedios task!

  • Anonymous

    Google has launched yet another framework called Montage via it’s subsidiary Motorola mobility. http://tetsubo.org/

    montage has UI data binding like that of Angular but is also server aware

  • Linton Ye

    Great post Gordon! Could you elaborate a bit about the performance issues for Ember.js you mentioned? Was it due to the download size or anything else? 37k min+gzip is certainly larger than 5k for Backbone.js, but I don’t see how it would be anything noticeable.

  • Shosy

    Regarding UI bindings – who say’s that’s a good thing? binding UI via hard-coding specific JS/some framework code , is really bad and against de-coupling JS / HTML / CSS , etc.. best practices. What i like about Backbone.js, is that it’s totally DATA driven, as in: it’s not VIEW->DATA, rather than DATA->VIEW. And you can imeplement the render of the view as you wish. Unike angular for example where your really binded. The #1 crieterion is how much the framework is de-coupled. The less points-of-failure , the better. I don’t want to change my html and then i’ll have to run and change my JS just because of that ( ui bindings ), i want to change my html as i wanted (regardless of the JS) and then just change the view that manipulates it (single-point-of-failure)

    So this , in my mind, should be a definite PRO and not a CON.

  • daslicht

    How do yoiu guys maintain the search engine index~ability ? Do yo generate html sanpshots using phantom js ~or~ Do you follow the hijack paradigm?

  • shoshy

    Could it be that my comment got deleted?!

  • http://twitter.com/bradw2k Brad Williams

    After using both AngularJS and Ember.js for a while now, I don’t see that AngularJS has a deficient mechanism for re-use of components. Re-use is done very simply using ng-include. The template included can specify a controller function. The controller should not be thought of as a singleton, it is a function which is passed the “scope” state in which the mark-up occurred, and scope is never a singleton. In effect, each part of the DOM which has an associated controller, is working on a “scope” instance that programmatically reflects the state of that part of the DOM. Personally I find this very similar to the way an Ember.js controller has “content” state.

  • Jeff Wilde

    You missed Derby and meteor. They are similar to spine but with real time collaboration. They are not as mature though.

  • Roy Truelove

    To readers – please try these frameworks yourselves. I mired through Ember.js because of this post only to finally switch to AngularJS and was much happier for it. I don’t like the nested views issue either but there are workarounds and upcoming improvements that will help.

  • Anonymous

    I like the way you’ve clearly summarised things—if you continually updated the article (and even set it up on a memorable url or even its own domain :-) it would become a great one-stop evaluation tool! One further distinction: is a framework Node-centric or not—i.e. can I use it in my browser now or when I dig deeper is it actually designed with Node in mind? I mean, if you’re using something like Octopress or Nanoc and just want some quick data binding for the UI and a bit of JSON or local storage you’re in a different country to someone building a full-on SPA with a DB.

  • qiufang zhou

    What about enyo framework by hp?

  • http://twitter.com/AllThingsSmitty Matt Smith

    Thanks Gordon. We’re actually in the midst of trying to decide the ideal framework for some long-standing projects and your list and great because it gives a breakdown of the features. Word of mouth has influenced us as well but this is a really good rundown.

  • Victor Woo

    Why is MVVM deleterious (knockout.js)? Is there something to support the theory?

  • yobo

    Hi everyone !

    Nice article, even after one year ;-) my advice would be to read that excellent book on the subject : “HTML5 and JavaScript Web Apps Building Apps for the Open Web” O’Reilly

    http://books.google.fr/books?id=a0_1wKzQxqgC&pg=PA87&dq=ember+js&hl=fr&sa=X&ei=gDnHULTcAdCDhQeTkoHYAQ&ved=0CD0Q6AEwAQ

    Yobo (France, Rennes)

  • harry

    Would very much like a follow-up article with the current landscape. The company I work for were evaluating switch to one of the above frameworks. Without getting knee-deep in the project, we’re leaning towards Angular over say Ember/Backbone. But that is based on evaluating our set of requires. Has Ember improved it’s documentation and is it still a clear winner 1 year on?

  • rupalee

    how to decide which framework to be used?

  • fox

    Therer is now CAN ! http://canjs.us looks very promising !

    You should also add it to the list and reevaluate :)

  • Rengo

    Why do you say Backbone is not “UI BINDINGS”? You can bind a view with a dom element.

  • Prabhat

    What about Dojo?

  • Maxim T

    Hi. there’s recently added one more HTML5 javascript framework jRIApp, specially designed to build LOB applications in – Silverlight with WCF RIA services style. It is based on MVVM pattern and also has data service part. It is published under MIT license on GitHub. You can watch demo on youtube http://www.youtube.com/watch?v=CxWcC2O8u-k&feature=youtu.be

  • mravinale

    angular has the include directive for composition: http://docs.angularjs.org/api/ng.directive:ngInclude take a look at this example as well: http://jsfiddle.net/JxRHY/3/

  • http://twitter.com/mackstar Richard McIntyre

    Awesome comparison, thanks – I am leaning towards Ember but am interested what you mention about ‘small performance issues’ in your conclusion. Can you shed more light on this? Great performance is a MUST for the project I am working on.

  • daslicht

    What about CanJS? and JavaScripotMVC

    http://33.javascriptmvc.com

  • Joaozito Polo

    Angular.js don’t plays nicely with others!

    He doesn’t interferes with jquery calls, but its operation does not allow the control of DOM, like focus() atfer model change event.

    (I’m not an expert on angular.js, but I tested this and it’s failed)

  • http://twitter.com/aks_sba Alan Stebbens

    Meteor.com seems to be missing. Have you considered it?

    • fox

      IMO still not really SEO friendly.

      Not SEO friendly either but great either: WAKANDA.ORG

  • http://abhishek.dilliwal.com Abhishek Dilliwal

    I recently evaluated angular, ember and backbone. And I say Angular should be winner. I like how they do the model binding, its not a passive binding like making a new HTML string and re-rendering , rather it plays with DOM. I would suggest you to have a look to that. Angular has much better performance than Ember.

  • Dean

    I recently created a micro JavaScript MVC library based of just a few files with the following features;

    • Easily extensible classes
    • Autoloader
    • Tiny footprint

    here is the link if anyone is interested in a MVC with only the bare minimum features: https://github.com/deanvaughan/Simple-Javascript-MVC

  • http://www.habdas.org/ Josh Habdas

    Learn to use Vagrant for developing modern web applications on Windows. Use it to create a Single Page Application using Chaplin and Backbone.

    http://www.habdas.org/developing-modern-web-applications-on-windows-vagrant/

  • http://twitter.com/syrnick syrnick

    Interesting that you don’t mention that Ember also uses singleton controllers by default.

  • Romu

    Hi there,

    I made a lot of efforts to help developers to write maintainable code. The result has been the framework soma.js. It is minimal, just write plain javascript and benefit of the power of dependency injection.

    http://somajs.github.io/somajs/

  • Nathaniel Tucker

    Why no backbone based frameworks like Marionette? It’s not really fair to compare vanilla backbone to the likes of Ember, when if you’re looking for a complex application on backbone you’re going to be using a framework as well.

    That’s like comparing backbone to just handlebars just because that’s a standalone library that Ember uses. Backbone is like that for Marionette (though in a different way – it’s not a templating library.)

  • Anonymous

    CanJS si great, try it.

  • Adam

    I tried ember because of this post. Part of the beauty of javascript is in its flexibility; I feel like backbone holds true to this beauty, whereas ember does not. My 2¢.