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)
|Stars on Github||40.2k||18.8k||14.1k|
|Third-Party Modules||1488 ngmodules||256 backplugs||1155 emberaddons|
|Chrome Extension Users||275k||15.6k||66k|
Brief Introduction to the frameworks
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 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.
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.
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.
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)
- 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.
- 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.
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.
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.