Receive New Tutorials

Angular vs Ember vs Backbone: What Should JavaScript Beginners Learn?

– {{showDate(postTime)}}

If you’re not an advanced JavaScript developer at the point of learning your first framework, what should you pick? This article will give you some ideas and compare AngularJS, Ember.js, and Backbone.js, giving you some code examples for you to get a better idea.

The text summary is written by the Codementor team and is based on the Codementor Office Hours hosted by Craig McKeachie, who authored the JavaScript Framework Guide. The summary may vary from the original video and if you see any issues, please let us know!

My learning path was going from jQuery to Angular before jumping to Backbone, and finally Ember. If I had to do it again, I think it would have been a much better experience for me to have learned Backbone.js first. Some people can be up in arms and say things such as “You’re just wasting your time,” or “Why learn this stuff that doesn’t matter for JavaScript?”, but from a learning perspective, I think it’s not bad if you’re doing it just to get prepared for actual MVCs, considering how Backbone.js is more like a library than a framework.

Basically, I’m sure a lot of relatively new JavaScript developers run across a lot of broad statements where people point out what framework is good, what is better, and what is lacking. However, without some context within which to digest those statements, they end up being an opinion about things. I personally like to think about frameworks by breaking them down to features and giving concrete examples, since I think this really informs a lot of understanding of what’s not there.

I’ve written on on my blog before about how to learn JavaScript frameworks quickly, and I also rewritten it for SitePoint. For a quick example, let’s look at the routing feature of each framework. You need this feature if you’re in a client-side app and virtually switching pages on the client-side. So, whenever you click a link or change an URL in the address bar, that URL change or window.location change is being intercepted on the client, and a new virtual template will be loaded with new data.

Here in Backbone is a really simple example of routing by switching between the “Home” and “About” page:

var HomeView = Backbone.View.extend({
      template: '<h1>Home</h1>',
      initialize: function () {
          this.render();
      },
      render: function () {
          this.$el.html(this.template);
      }
  });
  

var AboutView = Backbone.View.extend({
      template: '<h1>About</h1>',
      initialize: function () {
          this.render();
      },
      render: function () {
          this.$el.html(this.template);
      }
  });
  
  var AppRouter = Backbone.Router.extend({
      routes: {          
          '': 'homeRoute',
          'home': 'homeRoute',
          'about': 'aboutRoute',          
      },
      homeRoute: function () {
          var homeView = new HomeView();          
          $("#content").html(homeView.el);
      },
      aboutRoute: function () {
          var aboutView = new AboutView();          
          $("#content").html(aboutView.el);
      }
  });

  var appRouter = new AppRouter();
  Backbone.history.start();

(JSFiddle Link)

You can see from the example above that the homeRoute is set to default '', in which the browser would go to the HomeView and load the HTML. Basically, the route maps to a function or some JavaScript code that loads a new view end, so it’s just like a server-side framework’s MVC router, only it’s happening on the client.

Here is how you’d do the router in Angular’s built-in provider:

var routingExample = angular.module('FunnyAnt.Examples.Routing', []);
routingExample.controller('HomeController', function ($scope) {});
routingExample.controller('AboutController', function ($scope) {});

routingExample.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});

(JSFiddle link)
In which when you go to a particular path, you’d run the route controller and then load the template, which is similar to what Backbone does. It’s a way to dynamically load the page and virtually switch it.

In Ember, however, you’d notice a lot less code because Ember embraces convention:

App = Ember.Application.create();

App.Router.map(function() {
    //first paramater refers to the template
    this.route('home', { path: '/' });
    this.route('about');
});

(JSFiddle Link)

Once you understand what these codes do, you can look at all the frameworks in a much more unbiased perspective and also realize they’re a lot more alike than they are different. Personally, I don’t think it’s useless to learn any of them, since I think once you get a framework, you’d get it. Everyone wants you to believe the framework they use is better and more different, but that’s mainly because of the pros and cons of each framework.

What you really need to understand is the concept of Single-Page Applications (SPA), and how JavaScript MVC frameworks help you build a SPA.

In terms of the learning curve, I think it is big across all frameworks.

AngularJS may seem intimidating because it used to have documentation so awful it was almost comical, especially since they allowed people to comment in the bottom and when you’re digging through them for something useful you may be amused by what people post there. Nowadays the AngularJS docs are much better. Furthermore, the community around Angular is extremely big, so if you ask anything on Stack Overflow, you’ll get an answer in no time compared to other frameworks. However, how difficult you find Angular will also depend on what background you’re coming from. If you come from a Java enterprise or a .NET enterprise where you use Inversion of Control (IoC) containers every day and now what dependency injections are, you’ll have less of a problem with AngularJS. If you come from a creative media background, code CSS and jQuery plugins but aren’t used to the enterprise-y stuff, then you may find it more of a challenge to learn Angular.

Tom Dale did a great job for Ember’s documentation and their web components are much easier to understand than AngularJS’s directives, but when it comes to getting questions answered, I personally found it a bit more difficult, though that has a lot to do with the number of people using the framework.

Backbone is small, so it’s relatively simple to “get”. So, if you have the time, it is a pretty good idea to learn Backbone first to get more familiar with how MVC works, since as you can see from the examples above MVC frameworks are all pretty similar.

Angular vs Ember vs Backbone: What Should JavaScript Beginners Learn?

Other posts in this series with Craig McKeachie:

Please accept our cookies! 🍪