Which js frameword to choose: AngularJS vs Ember.js vs Backbone.js vs KnockoutJS

You’ve got the perfect idea for a JavaScript-based application or website. Now all you have to do is pick the right open source framework.You’ve probably heard the words Angular, Ember, and Backbone, you might not know what they are, or why they help web development.

js-compare
Developers use JavaScript for lots of different Web applications because it can really make the client side—that is, the user’s side—look and work beautifully. But while it may not look old, the JavaScript language has been around for nearly 20 years, and it has the variety and vastness to prove it. If you keep adding more and more code to make it work in multiple browsers and use cases, it can quickly become a big, confusing mess.

Enter JavaScript frameworks. Frameworks like Angular, Backbone, and Ember bring structure to your JavaScript code and keep it organized. They’re all open source, so they’re constantly being improved by the community. They also save you time because they’re each built on top of JQuery, a powerful library that makes some of JavaScript’s tricker operations easier to perform and more readable.

About These Frameworks

All the frameworks we are going to meet today have a lot in common: they are open-sourced, released under the permissive MIT license, and try to solve the problem of creating Single Page Web Applications using the MV* design pattern. They all have the concept of views, events, data models and routing. We are going to start with some quick background and history, and then dive in to compare the three frameworks.

AngularJS was born in 2009 as a part of a larger commercial product, called GetAngular. Shortly after, Misko Hevery, one of the engineers who founded GetAngular, managed to recreate a web application that consisted of 17 thousand lines of code and took 6 months to develop in a mere 3 weeks using just GetAngular. Reducing the size of the application to just about 1,000 lines of code convinced Google to start sponsoring the project, turning it into the open-source AngularJS we know today. Amongst Angular’s unique and innovative features are two-way data bindings, dependency injection, easy-to-test code and extending the HTML dialect by using directives.

Backbone.js is a lightweight MVC framework. Born in 2010, it quickly grew popular as a lean alternative to heavy, full-featured MVC frameworks such as ExtJS. This resulted in many services adopting it, including Pinterest, Flixster, AirBNB and others.

Ember’s roots go way back to 2007. Starting its life as the SproutCore MVC framework, originally developed by SproutIt and later by Apple, it was forked in 2011 by Yehuda Katz, a core contributor to the popular jQuery and Ruby on Rails projects. Notable Ember users include Yahoo!, Groupon, and ZenDesk.

(Metric till July, 2015)

Metric AngularJS Backbone.js Ember.js
Stars on Github 40.2k 18.8k 14.1k
Third-Party Modules 1488 ngmodules 256 backplugs 1155 emberaddons
StackOverflow Questions 104k 18.2k 15.7k
YouTube Results ~93k ~10.6k ~9.1k
GitHub Contributors 96 265 501
Chrome Extension Users 275k 15.6k 66k
Open Issues 922 13 413
Closed Issues 5,520 2,062 3,350

Brief Introduction to the frameworks

AngularJS

Angular offers you data binding into DOM, but also a bunch of other things such as controllers and a ready to use set of “services” for building single page apps and other things.

Angular offers a quite easy entry into using it, but some of it can feel confusing. It uses more advanced features such as dependency injection quite a lot.

The main downside to Angular for me was that it was much harder to understand at first. Sure, the basics are easy to grasp, but once you need to do something it doesn’t do out of the box for you, it requires a much deeper understanding than the other two.

Backbone.js

Backbone.js

Backbone is rather different from the others. It doesn’t really give you a data binding facility as such, but rather a bunch of objects you can build your own MVC-ish solution with.

It’s quite nice when you want to build some more complex interactions or more complex models. It doesn’t really limit you because it doesn’t really give you anything high level either.

The downside of Backbone is boilerplate. You end up writing lots of code that’s mostly for wiring things together – things you get by default from Knockout and Angular with a few markup attributes. It also requires more understanding of how Backbone’s whole set of objects work together before you can do a lot.

KnockoutJS

Very easy to get started with, Knockout is the easiest to pick up of the three and gets you to doing things quickly.

It’s very good if you want to do things the library supports out of the box.

Where it fails in my experience is when you start getting more complicated behaviors or models. It becomes harder and harder to link behaviors with the data binding system when your models become more complex.

Ember.js

Ember can do almost all that Angular can and equally fast or faster, and it manages to achieve that without deviating so much from classic Javascript syntaxes and patterns. It looks quite a lot like Backbone, but where Backbone is either loose or lacking features, Ember has it covered and enforces best practice. It is closely tied to the Handlebars templating engine which I believe is the most superior and is also used by 2 other Javascript tools which I love using – Ghost and Assemble.

Compare of AngularJS vs Ember.js vs Backbone.js vs KnockoutJS vs others

AngularJs – is used to toolset based on extending the HTML vocabulary for your application.
Knockout js – Aims to simplify JavaScript UIs by applying the Model-View-View Model (MVVM) pattern.
Backbone js – Provides models with key-value binding and custom events, collections, and connects it all to your existing API over a RESTful JSON interface.
Ember js – Provides template written in the Handlebars templating language, views, controllers, models and a router.
Meteor js – a full stack framework for rapid single page app development, with a rich toolset, covering almost every aspect of a single page app (templating, client side data storage, client/server communication, storage, authentication, etc..)

When to use AngularJs, Knockout js, Backbone js, Ember js and Meteor Js

AngularJs – could be very useful when we working on Data Driven Application.
Knockout js – could be useful for Data Driven Application but not for heavy Dom mmanipulation.
Backbone js – could be very useful when we are doing heavy DOM manipulation.
Ember js – could be useful when Data Driven Application with route is used.
Meteor js – very useful for any single page app, when its concurrent user base doesn’t exceed 1000 users (could be scaled horizontally, when used without the server as pure client side app there is no restriction)

Documentation

  • Knockout documentation for data binding syntax is extensive. Utility methods provided by the library are almost not existent
  • Angular documentation is very well organized and has tons of information including interactive examples. The learning curve is steeper for Angular, as the library is much more conceptual and wider in application.

Testing

  • Angular is written with testability in mind, but it still requires some additional effort to integrate a test framework. Protractor is a a popular end-to-end test framework for AngularJS applications. Protractor is a Node.js program built on top of WebDriverJS. Protractor runs tests against your application running in a real browser, interacting with it as a user would.
  • Knockout apps can be tested using similar methodologies, however, Knockout does not inherently result in testable code.

Dependencies on other Javascript Framework

Angular Js – has no dependencies.
Knockout js – has no dependencies.
Backbone js – is depend on underscore js and Jquery.
Ember js – is depend on handlebars and Jquery.
Meteor js – has a few dependencies like jQuery, though they are bundled into the core packages.


Summary

Knockout has a low barrier of entry, but is also harder to manage when code base and complexity grows. It is not easy to build the necessary infrastructure correctly, and poor decisions made in structuring code may cost a lot to fix in the future.

Angular’s ability to bind directly to plain objects, modular structure, and strict development guidelines prevent many issues right from the start, and provide a strong architectural foundation for the application.

Here is the differentiation between AngularJs, Knockout js, Backbone js, Ember js and Meteor Js. Hope it will be very useful to understand and implement in your MVC and MVVM application.