Why AngularJS is generally better in Angular vs Ember vs backbone

“Angular vs. Ember vs. Backbone” generally turns into a war in most of the discussion forums. But in my personal opinion, the emphasis should be on “what kind of application you are developing” that brings us to the question “Angular, Ember or Backbone, which one is better?” Because all of them have their own advantages and disadvantages. But I personally have found Angular more preferable in most of the cases.

Comparing the Features

Backbone Ember Angular
Framework MV + VC Pure MVC MVW (Model View Whatever)
Template Support Uses underscore.js( an embedded template engine which allows logic inside template code) Uses Handlebars(a logic less template which doesn’t allow JS code to be written inside it but has provided some features to implement some logic) YES. It doesn’t require any other separate template engine.(Also doesn’t support any 3rd party template engine)
Nested Template Support No Ember + Handlebar has support, but only Handlebar doesn’t support Yes
Auto Binding No Yes. (Supports auto binding but when used template engine other than handlebars auto updating turns off.) Yes
Routing Yes Yes Yes
Dependency Has a dependency for underscore.js Handlebar.js for templates, and jquery 1.7 or higher No Dependency
Compatible with other frameworks Yes Yes Yes
Additional Features 1. Computed properties and its binding
2. Data formatters
DI, mocking, directives, watch expressions and its binding, HTML5 validations

Templates

Backbone: In backbone, you can choose your own template engine, no matter whether it’s String or DOM based. Usually people prefer handlebars.js, a string-based template library.

Ember: It uses built-in string-based templates (mandatory). Arguments in favor of string-based templates include “it’s faster” (debatable) and “theoretically, the server can render them too” (also debatable, as that’s only true if you can actually run all of your model code on the server, and nobody generally does that in practice).

Angular: Angular uses built-in DOM-based templates (mandatory). DOM-based templates means doing control flow (each, if, etc.) purely via bindings in your actual markup and not relying on any external library. Argument include “it’s faster” (debatable) and “the code is easier to read and write

In Angular the DOM structure is created on pageload. Suppose you have multiple templates in your page and you don’t want to show them at a time. In that case also you have to define those at page load lavel, if you use angular, which will unnecessary create few extra DOM elements. But in Ember you can insert dynamic templates as it uses string based templating method. So in this perspective Ember and Backbone’s string-based templating may go handy, but if you talk about data binding, DOM-based templates provides you better performance. According to the Angular developers’ team, in near future DOM-based templating will be natively supported on browsers and when this happens, Angular apps will run way too faster, so we should best prepare ourselves for the future by adopting it now. AngularJS is from Google, so they are already working on this with Chromium and standards bodies.

Model Mutation:

Backbone & Ember: In model mutation both Backbone and Ember follows almost the same structure and flow. They use getters and setters to get or set a value and this is also an efficient way to learn the model change and accordingly reflect it to view. But while rendering the data elements, ember adds observers to each element. As the observers are heavy, so it makes the rendering process slower.

Angular:  Angular doesn’t use the traditional getters and setters like backbone and ember, rather it uses Dirty Checking to learn the model change, which is way too faster (according to the angular team).

Angular uses Dirty Checking, which is based on the lexical scoping in js and helps in garbage collection too. Not only that, angular lets all the model mutation to happen first and then inform all the listeners in a consistent state. This helps to prevent wrong data operations.

Performance:

Performance is something, which you just can’t judge only basing on the pros and cons of the framework. Rather, it completely depends on your needs and the type of app you are developing. The key performance judging factors are given in the examples below.

Eg 1: Suppose, in your app, you are using huge number of data. So if you use ember, you will find the app is taking too much time to get loaded; and that’s because ember adds observers to each element. So this thing makes the rendering very slow in comparison with backbone and angular. But once the app is loaded, and you expecting your view to reflect the model change immediately; well angular will make you sad. Because, as it don’t have an observer attached with each element, so to learn the data change, the angular controller has to traverse the whole data model (dirty checking). But if your app doesn’t depend on fast data binding; rather you want your app to load faster, angular is the best option.

Eg 2: Angular is sort of a HTML compiler. It has the power to manipulate the normal behaviour of your HTML. Suppose, you are printing the data of your model one by one using {{#each}} helper in ember (actually in handlebars), or using the ‘For’ loop of backbone. In this case ember will run a loop to print them; and as you know, loops are always heavy and time consuming operations. But in a similar situation, angular’s ‘ng-repeat’ will fetch the data as a whole and will put it directly on your html. This is a much faster process.

Eg 3: Suppose your app is a continious animation based app, where you have to perform some animation to each element in your model (let your model has the instances of few html elements or something similar to that). So here, ember’s observers will be of no use; cause no matter what, you have to change the model and view continuously. So angular’s continuous checking or dirty checking may play a role for you here.

So, this is how, performance is a variable thing, which varies from projects to projects, scenarios to scenarios, environments, dependencies and many more. So only that framework can give you best performance which is the most compatible one to your app.

Here is a Live Performance Testing with example.

Learning & Development

Backbone: Basic backbone is very easy to learn, but while developing, you will find it was not enough. Because only using backbone you can’t structure your code much. It needs more libraries and templates to make a proper project.

Ember: Ember has more structured documents and it’s also not that tough to learn. Its implementation (with handlebars) is much similar to the other process and object oriented programming.

Angular: Angular is a little tricky, because it’s somewhat an extension of HTML. But once you get this html processing, it will become the simplest framework to learn.

Angular is comparatively simple to learn, and more simple to develop. A friend of mine made a widget on backbone, which was of more than 3800 lines. It has come down to 725 lines when rewritten in Angular. And the code was more structured and clean. Simplicity is one of the best plus points of Angular.

Testability

Testing is possible on all the frameworks, if you learn the right pattern to develop your project. Your modularity and ability of dependency injection are the key parts to have a testable code. And modularity and dependency injection are two of the major features of angular. Angular itself was built keeping the testing facility in mind. So I think, in testability angular is ahead of Backbone and Ember.

Projects point of view:

While developing, or before starting the development of a project you need to keep in minds many points; and these really plays the role behind the selection of the framework.

There was a time when the codes of backbone seemed to be very clean and structured. But ember and angular showed the codes can be more cleaner and structured. Let’s watch these three frameworks as project developers point of view.

Backbone: Maximum people has worked with backbone; so it’s much easier to found an experienced backbone developer. There are lot of help available there in the net about backbone. It won’t cost you much to train your people. So in this point of view, backbone is good.

Ember: The best thing about ember is, if forces you to follow the ember way; and if you don’t, the app will never run. Though for beginners it will be a headache; but the best thing is; as everyone will follow the same way to develop the app, so it will be well structured and very very easy to maintain in future. Everyone is not a good coder; and humans always like shortcuts. So, if you are developing a huge project with lots of developers, they can’t code any logic wherever they want. They have to strictly follow the MVC structure and ember’s way of coding.

Angular: What if you don’t have much time to develop your project? Not much time to learn frameworks? Then you must go with the angular way. Angular also makes the code much more cleaner, structured and maintainable if the developer has knowledge of MVC development. It reduces the lines of codes like anything.

Conclusion

I think comparing backbone with Ember and Angular is unfair, because it’s more like a library than a framework. So it won’t provide as many features as provided by the frameworks like Ember and Angular.

It’s also not like a single framework will be always the best one. I’ve also given examples for that in this article. There are lot of factors you need to take care of before selecting the javascript framework for your application. I’m working in a travel service company right now and we selected Ember over Angular for our development, because it was more suitable to our previous architecture and widget based development. Similarly lot other environmental factors will come.

Every framework has its pros and cons. But what we need to consider is, the requirement list of our project and the adaptability of the framework on those requirements. But as an overall view, I’ve found out angular is very easy to learn (even a guy who didn’t work much with MVC and just knows simple HTML and javascript, can learn it very easily); it reduces the number of lines in your code more than backbone and ember; if your data model is not huge, it provides you fast rendering and execution; manipulates the DOM directly; makes your code testable and lot more. That is why I’m considering Angular a better option than Ember and Backbone generally.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Pretty good comparaisons. Thanks!

    • metalshan

      Charles, I’ve added few more points to the article just now. Hope you will like it.

  • shouwang411

    It helps me

  • vaibhav

    Best comparison I have seen till date.

    • metalshan

      Thank you 🙂

  • Alessandro Falchi

    Nice article, thanks.
    (just a note: I think font color of your blog has too low contrast)

    • metalshan

      Thanks for the suggestion Alessandro. Actually to make it less painful for eyes I made it like that.

    • Bodhisatwa Ghosh

      A little darker would have been better.

    • metalshan

      Hmm.. will edit the font color soon… Thanks for your suggestions people 🙂

  • Redman

    Why compare a library with a full stack framework?

    • metalshan

      Actually I wrote this article for all type of people. Who even didn’t work with any of them, and want to choose one.
      That is the reason I’m making it clear.

  • Manas Tunga

    “Not much time to learn frameworks? Then you must go with the angular way “———- This is absolutely wrong. Angular has a very steep learning curve. if you don’t have time to learn it properly (or you don’t know what you are doing in angular) this may create disastrous result. As compared to backbone (i.e not actually a framework rather a library) is easy to learn than angular. No doubt angular is a complete framework but it has a steep learning curve and don’t go with angular if you don’t have much time to learn it.

    • metalshan

      I said “Not MUCH time to learn frameworks”. Not like, “No time to learn frameworks at all”. Without learning you can not start using a framework.

      The thing I said is, if you have minimal time and want a quick development (which generally the service companies do. They dont care much about quality) in that case angular is the one which can benefit you. For huge development ofcourse you have to go in depth. It’s obvious.

      But where quality deliverable are tends to low, and you dont have much time, you can’t even dream to start with ember. Even backbone is also complicated comparing to angular.

    • Richard Poole

      I’d have to agree with Manas, Angular is powerful for sure but getting to grips with it properly is a big time investment. If you haven’t used it before then I wouldn’t recommend it for small projects as something that is trivial in other frameworks can take a long time to code in angular (even if the resultant code is smaller)

    • metalshan

      To get in depth of something you always need a huge time investment. No doubt about that.
      But if you are in a situation that you just know what is MVC and haven’t worked with ember or angular and do need a kickstart, than angular is an easier platform to start with. Cause it doesn’t restrict much. You are free to do many things just like HTML. the template itself is much similar to html which is not that much in case of ember (handlebars).
      The meaning of my point was NEVER like, “If you don’t know anything, than also you can do all the stuffs with angular”.

  • ktiedt

    I am curious what this widget is that had such a drastic LOC change between the 2… A friend of mine had “a website” written in XYZ and when he switched to ABC it went from over 9000 LOC to just 10… With no context of what “a widget” entails, or even if it were properly written in either library… really means nothing to the readers.

  • Niels Steenbeek

    You mention Ember as Pure MVC, but in Ember the View layer knows the Controller layer. That’s not pure MVC I think.
    See http://emberjs.com/guides/views/handling-events/#toc_sending-events.

    • metalshan

      User can interact with view only but view is not suppose to change model or do any logical execution. So, for any interaction the view may trigger an action of its controller; there’s nothing wrong in it. After all, the controller doesn’t know which viewes it has under it. Only the views know about its controller.

  • Alejandro Varela

    the most detailed comparison i have seen, thanks!

  • grumpyOldCat

    afaik Angular works fine with DOM based templating engines

  • Hébert Frédéric

    Hi,
    thanks for this post. I’ve a beginner question. Is Ember better than Angular when it comes to design the model layer? Ember data seems to be very easy to learn and well structured. Is it a solution to inject ember data into angular controllers with resolve property of route-angular configuration in lieu of restangular? Thanks in advavnce for your help.