Data Haunting

Easy Solutions Destination

By

AngularJs vs Knockout js vs Backbone js vs Ember js vs Meteor js

We have heard lots of about famous JavaScript framework AngularJS, Knockout js, Backbone js, Ember js and Meteor js. In this article we will compare all these JavaScript framework and will find out difference among all these JavaScript framework. At the end of comparison we will see which one is best either AngularJS or Knockout js or Backbone js or Ember js or Meteor js to use in our MVC and MVVM applications.

Compare Angular Js, Knockout, Backbone, Ember and Meteor js

Define AngularJs, Knockout js, Backbone js, Ember js and Meteor Js

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)

Developed by, Released on and size

AngularJs – developed by Miško Hevery and Adam Abrons and maintained by Google and community. Initially released on 2009.
Knockout js – developed and maintained by Steve Sanderson, a Microsoft Employee. It’s personal open source project and not a Microsoft Product. Initially released on July 5, 2010.
Backbone js – developed by Jeremy Ashkenas. Initially released on October 2010.
Ember js – developed by Yehuda, a member of the jquery, Ruby on Rails and SprouteCore teams. Initially released as the SprouteCore 2.0 framework later released as Ember.js on 2011.
Meteor js – Founded 2012 by Geoff Schmid, Matt DeBergalis, Nick Martin and David Greenspan.

How fast running from home page link ?

Angular Js – is very fast.
Knockout js – is very fast.
Backbone js – is average.
Ember js – is average.
Meteor js – is average compare to Angular Js.

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.

Data Binding Support

AngularJs – fully supports data bindings. Model use standard Json Property for data binding.
Knockout js – fully supports data binding and also provide options for creating custom bindings.
Backbone js – is not support data binding by default. Need to use plugin for support data binding
Ember js – fully support data binding and better than Backbone js.
Meteor js – Full reactive one directional databinding, the binding and tempting works even with coming technologies like web components (see polymer).

Routing supports

Angular Js – routing is very simple.
Knockout js – does not support routing. Routing is possible but need to depend on third party library sammy.js.
Backbone js – routing is very simple.
Ember js – routing is extremely supported but very complex.
Meteor js – Full reactive routing through a third party package called iron:router

Views – stuff displayed in the screen

Angular Js – uses Html as templating language and automatically pulls in Html templates via Ajax when needed.
Knockout js – uses Html as templating language and supports native templates and string based templates.
Backbone js – simple and straight forward and easy for jquery and Dom skills developer. Handlebars can be used for templating
Ember js – very easy to create. Handlebars are used for templating.
Meteor js – Very innovative templateing engine called “Blaze”, with a tempting syntax called “Spacebars”, which is a derivative from Handlebars. Though there are also Jade based templating sytanx out there and anyone can develop its own one based on Blaze.All templates are fully reactive, means when reactive datasources change, the template will always display the late state.

Support for Testing Application

Angular Js – has fabulous test supports and Karma developed by Angular js team is popular test runner.
Knockout js – has no default debugging tools. Functions like Console.log() and ko.toJson() can help to debug. We can use Sinon.js and Jasmine third party solutions to test our self.
Backbone js – has no default test solutions. We can use Sinon.js and Jasmine third party solutions to test our self.
Ember js – now it has good pretty good supports.
Meteor js – Has its own testing framework called “Velocity” to display test results reactively. It can use Mocha, Jasmine, Karma or even Selenium.

Data binding from server

Angular Js – not using Juqery but can do with Angulr’s $http. For better solutions can use $resources.
Knockout js – uses Jquery’s Ajax and can also Knockout mapping plugin.
Backbone js – can use Jquery’s $.ajax to power backbone. Very easy to understand.
Ember js – uses Jquery’s $.Ajax. Doing this Ember way is bit complex.
Meteor js – all Client/Server communication is done via Publication/Subscriptions using Meteors own DDP protocol. This way the developer doesn’t have to deal with building API’s or other middleware. Though through the http package or jQuery one can connect to any backend.

Third Party Integration with Angular Js, Knockout, Backbone, Ember Js and Meteor Js

AngularJs – not possible. Mostly impossible.
Knockout js – easy to use third party library and plugin.
Backbone js – easy to integrate.
Ember js – not easy but can integrate third party tools and plugin.
Meteor js – easy to use third party library and plugin. the templateing engine works also well with jQuery plugins.

Development tools

AngularJs – available.
Knockout js – available.
Backbone js – not available.
Ember js – available but not so compatible.
Meteor js – available. Through the meteor command line tool, takes care of server staring, file linking, bundling concatenating, deploying, file watching, CSS injection etc.

Performance wise best among AngularJs, Knockout, Backbone, Ember JS and Meteor Js

For performance wise if compare than there are plenty of reasons which are depends on nature of application and up to coder that how he/she optimize the code but in my experience Angular js is best for MVC and MVVM applications if other parameters are same and this is my personal opinion. I have also suggestions from fabian that Meteor JS also so fast and send me example of following link Meteor rendering example

What is your opinion ?

Here we have provide differentiation between AngularJs, Knockout js, Backbone js, Ember js and Meteor Js. I hope it will be very useful to understand and implement in your MVC and MVVM application. If you have any query and question, you can comment or you can mail me.

4 Responses to AngularJs vs Knockout js vs Backbone js vs Ember js vs Meteor js

  1. jacobmhulse says:

    Great article! This is a very succinct breakdown of these frameworks giving anyone who is unfamiliar with them quick understanding of their capabilities and differences.

    One question/request: You note that Knockout is “not for heavy Dom manipulation” while Backbone is. Can you elaborate on what you mean by heavy DOM manipulation? Perhaps an example?

    • Dilip Patel says:

      Hi Jacobmhulse

      Actually my point on heavy Dom manipulation is regarding heavy or large Html Element Structure. So if you are working with Knockout it is not suits for you as per it’s structure but if you are working with Backbone Js than there is no any difficulties.

  2. Pingback: Angular Knockout Backbone Ember Framework Overview | Jacob M Hulse

  3. Dilip Patel says:

    Hay ! I have updated my articles adding the details of Meteor Js. For this updation complete credit goes to “Frozeman” who is the author of “Building Single-page Apps with Meteor” (https://www.packtpub.com/web-development/building-single-page-web-apps-meteor).
    Thank you “Frozeman” for your great suggestions.

Leave a Reply