Friday, 23 September 2016

AngularJS, Backbone.js or Ember.js

Choosing a right javascript framework is a difficult choice. There are so many factors to consider and so many options out there that selecting a framework can be overwhelming. You probably want a solid, stable and proven framework to build upon, but don't want to be limited by your choice.
All of these javascript frameworks are open source and comes under MIT license and try to solve the problem of creating Single Page Web Applications using the MVC design Pattern.So, here are a few pros and cons of each framework.

emberjs, backbone and angular

AngularJS : It was born in 2009 as a part of a larger commercial product, called GetAngular. Angularjs is very fast. It can do some amazing things like two-way bindings without having to learn much and its easy to learn for the begininers.

  • Create custom DOM elements: e.g.<slider start=-5 end=5 />
  • Invents its own concepts sometimes: scopes, directives, transclusion
  • Some concern with performance over many DOM elements
  • “Views do the UI, Controllers work out the logic behind the UI, Services take care of communication with the backend and hold together pieces of common and related functionality, while Directives make it easy to create reusable components and extending HTML by defining new elements, attributes and behaviors.”
  • Two way binding.
Angular's Templating engine is simply HTML with binding expressions baked-in. Binding expressions are surrounded by double curly braces:

    <li ng-repeat="framework in frameworks" title="{{framework.description}}">               

EmberJS: It's roots go way back to 2007. Starting its life as the SproutCore MVC framework, originally developed by SproutIt and later by Apple.I believe that learning Ember is easier than Angular but it requires a highest learning investment at the beginning to get basic things done.The Angular and Ember communities are pretty big as well. Also lots of tutorial and activity in StackOverflow and IRC, but not as much as Backbone.

  • Performance focus
  • Two way binding
  • Very low boilerplate - I like
  • Templating engine / handlebars
  • Routing & data layer
  • Docs and API seems a tad more friendly than angular in general
  • Ember API was changing a lot but is now stable
  • Server rendering is a bit easier - pure JS
  • Litters the dom with placeholder script tags - technically this is invisible but a bit gross. But they’re fixing this with a new component called HTMLBars. UPDATE: This isn’t an issue anymore, changes merged in.
Ember currently uses the Handlebars template engine, which is an extension to the popular Mustache templating engine.

    {{#each frameworks}} 
        <li {{bind-attr title=description}}> 

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.

  • Views manipulate DOM directly - kinda icky in my POV, makes code harder to test and allows things to get tangled
  • Light & fast
  • 3rd party templating, usually underscore
  • No two way binding
  • Unopinionated and barebones - sometimes a good thing but doesn’t provide structure, many competing plugins / frameworks to choose from
  • Probably will have to use with marionette at least.

    <% _.each(frameworks, function(framework) { %> 
        <li title="<%- framework.description %>"> 
            <%- %> 
    <% }); %> 

Ember's holistic approach which embraces MVC structure will make a lot of sense for developers who have a MVC programming background in Python, Java, C# or any other OOPS language concepts.Angular's approach for extending HTML will make a lot of sense for people who are web developers by heart.Backbone embraces minimalism and It's is small, fast and easy to learn, and provides the minimum that you need to get going.

Featured post

How to create dynamic schema in mongodb

Sometime what we need in our application is to create mongodb schema for collection and some of our collection schema are same but names are...

Popular Posts