Should I use Angular / Backbone or Ember ?

comparison.md

AngularJS

Pros

• Perfect for complex "client-side" application, where the complexity is more in the way "components" of an app interacts with each other than in the way they sync and or interact with a backend.
• Very clean separation of concerns
• Uses concepts that kind of look likes the future of HTML/DOM (DOM templates, binding attributes…).

Cons

• A bit complicated to grasp. A lot of new concepts.
• jQuery or another dom parsing framework in directives may be painful to use (need more tests) because of the way angular compiles templates (see http://egghead.io/video/angularjs-angularelement/).
• Still under heavy development, some stuff changes a lot in the master version (but 1.0 can get you started)
• Some common things are still unavailable (you can't show or hide a view with an animation like fadeIn / fadeOut).

Tl;DR

Good for application with a big level of complexity on the client side, but you'll need to learn A LOT of new stuff.

---

BackboneJS

Pros

• Very easy to start with.
• Very small.
• Can be used with any external library.
• Documentation is good (it's easier to document a small project)

Cons

• It does just a few thing to help you create a good structure for you app, but you still have to do much of the work ! (even simple things like cleaning events binded to a view when you remove the view).
• If you add other components on top of it (Marionette, Chaplin, Thorax), the learning curve increases ( but not that much and code complexity decreases).

Tl;DR

Good for small and simple applications and easy to understand.

---

EmberJS

Pros

• Convention over configuration, you can get a lot of thing working with just a few lines of code ! (see https://peepcode.com/products/emberjs)
• EmberData looks perfect for syncing data between your app and a server api and/or localStocalStorage (especially if your server code follows a few convention, Restful routes…)
• I do trust Yehuda Katz and Tom Dale work a lot !

Cons

• Still under heavy development, some stuff changes a lot (especially for EmberData).
• You're forced to use the Handlebars template engine (but it's a good one so not really a big con)
• Documentation is getting better every day but still far from perfect.

Tl;DR

Good for applications where you need to deal with syncing data with server and/or save it offline. Looks like a good fit between Backbone and Angular but still young…

Other articles

• http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/
• http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/
• http://addyosmani.github.com/todomvc/

AngularJS cons

A bit complicated to grasp. A lot of new concepts.

Agreed, can be significantly reduced if you have someone to explain ;)

Can't use jQuery or another dom parsing framework in directives because of the way angular compiles templates (see http://egghead.io/video/angularjs-angularelement/).

Not sure why you think that. Angular works well with jQuery, you can find examples of directives using jQuery: https://groups.google.com/forum/#!topic/angular/ZRCZQdBGiR0

Still under heavy development, some things changes a lot

Not so true since 1.0.x

Some common things are still unavailable (you can't show or hide a view with an animation like fadeIn / fadeOut).

Agreed, but in those cases it will simply be "as complicated as before" ;)

Backbone cons

If you add other components in top of it (Marionette, Chaplin, Thorax), complexity increases.

I felt the exact opposite way ;)

Just edited a few things with your comments, as for the Angular + jQuery stuff I need to test it more, not sure if I understood http://egghead.io/video/angularjs-angularelement/ well.

About EmberJS, as it's a fork of SproutCore, I think it's the oldest of the three candidates here ;) I'm not sure it has ever been stable in its whole history :P And I don't get where it wins over Backbone when it comes to server-syncing: Backbone will use RESTful API by default you just have to tell your collection's url.

But I may have missed some things, as I stopped following EmberJS some months ago, too magical and heavy for me.

About angular.element it's just here to make Angular work without jQuery, but it works best with jQuery.

angular.element can be either an alias for jQuery function, if jQuery is available, or a function that wraps the element or string in Angular's jQuery lite implementation (commonly referred to as jqLite).
Real jQuery always takes precedence over jqLite, provided it was loaded before DOMContentLoaded event fired.

http://docs.angularjs.org/api/angular.element

Thank you for sharing your xp. Insightful, but I still do not know which to choose :)

A small note on The "Very small" pro for backbone is not reliable since it has strong dependency on jquery+underscore and that argument isn't as important as what people say. Thus, if you plan to make a big app, what you should look is the final size of your js file.

Eventually, it will probably be Backbone + another framework for the structure (maybe Marionette).

Just stumbled upon this. Maybe a bit late, but I think the performance is also a significant factor to take into account.
Speed of rendering, and size.
Which gives :

Backbone: Super light, but strong dependencies with JQuery & Underscore (~50ko I think). Precompiled templates are possibles, so really fast, but the whole view needs to be rendered on model change.

AngularJS: Relatively heavy (80ko), lesser need on JQuery but easier with it (which will bring it to 110ko). Data-biding enables to render only the part of view binded to the updated model, but the dirty-checking system is painfully slow when the page has a lot of bindings.

Ember: Not tested, I think the templating performance is halfway between Backbone & Angular, because it allows precompiled templates, but the whole framework is over 250ko ! (EmberJS: 180ko, Ember data: 70ko, Handlebar runtime: 10k).

A major con for Angular : the documentation sucks. A lot.