Choice of Javascript MVC Framework: Backbone, Angular, Ember, Knockout etc.

As usage (read fashion) of Javascript in increasing, I get a Question often in different forms:

• Which JS MVC framework is best?
• Why did you choose BackboneJS for your app?
• What is the JavaScript MVC framework with the most momentum?

Recently when I was thinking about it, was hungry and entered into kitchen, a very good analogy struck my mind:

"Which knife is best?"

So the question arises, "For what purpose?"

Each one of them is created keeping a specific purpose in mind and works best for that purpose. If you use one for some other purpose, it will work. It may work well but may not be best.

The same is applicable for technology frameworks. You need to choose one that is suitable for your app. While talking on this topic with people, I found that many of them choose a framework that is popular. Without considering what exactly the framework brings for them. The popularity may be just a hype at that time and I do not see it wise to make such an important product decision based on just hype.

However, if your app is just another app like others, you may want to go with the popular one. The JS Toolbox maintain a chart showing popularity parameters (Watchers, forks and open issues) for different JS frameworks using Github APIs. Here is the snapshot of May 16 2014.

I met a person who went for KnockoutJS because he was able to build first version very quickly using its data bindings. He still loves data bindings but when a user changes something on a form and later decides to Cancel instead of Save, he runs into issue as the model is already changed because of data-binding. Now he implements two models and on save copy from the UI bound model to the model that save the data to the back-end.

I answers the question in just one line, "We choose Backbone because we wanted power with us (programmers) than with the framework. We do not like magic in general."

Now, other than the type of app, personal style also adds to the making a choice.

On the web, I read so many reviews and comparisons people did. Most of them clearly write what they are looking in the framework and declare a winner from their point of view. 

For example, Gordon Hempton in his article "The Top 10 Javascript MVC Frameworks Reviewed" on CodeBrief says that he is looking for 1. UI bindings 2. Composed Views 3. Web Presentation Layer and 4. If it plays well with others like jQuery. After his review (and re-review), he says that emberJS is best as it is the only one providing all four together. Still, I would suggest reading the article as he lists one liner pros and cons of all the frameworks. You may discard his decision and take your own decision based on his inputs.

Similarly, Steven Sanderson has done a good and lengthy job of discussing points that one considers for such selection. In some cases he also discuss the points where people do not agree and have different opinions. Finally, he does not give any verdict but lists bulleted points about each framework. His post Rich JavaScript Applications – the Seven Frameworks (Throne of JS, 2012) is also worth considering while making a selection.

For making us choose right framework with a better hands-on feel, Addy Osmani (and friends) went ahead and created todomvc.com. It provides basic info about each framework, shows demo of ToDo List app using that framework and points you to a Github repository for code of the demo app. This gives a good feel of the framework even before you start and also allows you to compare as it is the same functionality implemented via different frameworks.

Addy also wrote a very good article on Smashing Magazine, Journey Through The JavaScript MVC Jungle. In the article, he not only discuss important points about selecting a framework (other than personal style and choice of features) but also suggests when to use what.

Here are a couple of quotes from his article:
BackboneJS

"I want something flexible which offers a minimalist solution to separating concerns in my application. ... I’d like some decisions about the architecture left up to me. ... As I may be building something complex, I’d like there to be an active extension community around the framework that have already tried addressing larger problems"

EmberJS

"I want something that tries to tackle desktop-level application development for the web. It should be opinionated, modular, support a variation of MVC, avoid the need to wire everything in my application together manually, support persistence, computed properties and have auto-updating (live) templates."

AngularJS

"I want something declarative that uses the View to derive behavior. It focuses on achieving this through custom HTML tags and components that specify your application intentions."

jQuery

"I want something that will help me build simple Web applications and websites. ... The solution should abstract away browser differences so I can focus on the fun stuff."

So the bottom line remains at its place :).
The selection of right framework is not that straight forward. It really depends on the nature of app and the developers.

The choice may go wrong for various reasons e.g. lack of big picture, time constraints etc. But keeping an eye and moving to a better suitable framework as soon as possible may help a lot.

In our case at ShopSocially, as we choose BackboneJS at the first place, we created our internal sub-framework as we realized a pattern and that is working beautifully.