by Maks Surguy

AngularJS vs BackboneJS- initial impressions

A couple days ago I had to give a small presentation on AngularJS framework at my job.

In this post I will document my initial impressions of structure of AngularJS applications VS BackboneJS applications that I am used to build.

What is AngularJS? It is a javascript framework that is meant to be used for dynamic HTML views. Dynamic views means your data is bound to the views, when data changes – the view is instantly updated and vice versa. AngularJS applications are testable and extendable out of the box, meaning you can write better code for your frontend.

The promise of AngularJS is basically to breathe life into your HTML views and being able to do that for your other applications as well by reusing components.

Initially when looking at AngularJS application I noticed that the view templates contain a lot of information about what your application will be doing. Just look at the code below

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Pay attention to all things that start with “ng”. Those are AngularJS directives. In this simple application the model is embedded in the view template  (ng-model) and when the model is updated the output of the model (in the  double curly brackets) is updated immediately.

This is just the beginning though. Things get a little fancier when you can also specify a controller inside of your view and use the same controller in multiple applications without changing it.

AngularJS aims to manipulate with your DOM elements easily. So my opinion is that AngularJS can replace jQuery in a lot of cases. Form submits, building lists, removing elements, AJAX calls, etc, all can be substituted with AngularJS directives and functions.

What are examples of apps where you would want to use AngularJS?

Dynamic apps where changing one data can affect how other data changes and you need to show that instantly to the end user. A very good example of Angular JS application is a spreadsheet that can instantly calculate data placed in other cells. Try the example below by typing A1 in the B1 cell and then place a number value in A1. You can also try mathematical expressions like +, *. – or / to see how data is instantly updated throughout the application.

JS Bin AngularJS example

In comparison to BackboneJS applications, here are my initial findings on AngularJS applications:

  • AngularJS is much more extendable. You can make one component and reuse it in all of your applications. There are tons of components already available, Angular-UI is a prime example of that.
  • AngularJS makes your application easier to navigate and understand as a developer because what affects the views is cleanly embedded in the views, the bindings are clear VS in Backbone where sprinkles of jQuery can be used to modify some DOM elements that are hard to find with a naked eye.
  • BackboneJS has built in methods of syncing data to the server VS AngularJS does not (OR I am not aware of them yet).
  • BackboneJS apps have a lot of same code over and over again VS AngularJS apps have code that doesn’t repeat itself.

What would be a use for AngularJS in your apps?

For now that’s all folks!

Liked it? Take a second to support Maks Surguy on Patreon!
Become a patron at Patreon!
in Code Blog 9 comments
Post tags

You may also like

Seeed Arduino Sensor Kit review

Micro:bit Starter kit review

Flow Lines

9 comments

  • aditya menon May 8, 2013  

    Awesome article, thanks for sharing your thoughts. I am just beginning with Angular on a couple of projects, and I’d love to hear more from you as you work with it, as well.

    It feels like when I came to Laravel for the first time, only more vulnerable because by then I already knew codeigniter, but today I’m still not at the level of being able to write well-architected jQuery plugins.

  • mattl May 9, 2013  

    AngularJS does have the $resource factory that allows you to interact with RESTful services. This might be what you were looking for regards ‘syncing data to the server’.

    Check it out http://docs.angularjs.org/api/ngResource.$resource

  • Maks Surguy May 9, 2013  

    Ah, I see now! Thanks ! Will check it out more in real life examples and update this post when I can!

  • Ryan June 6, 2013  

    BB is really quick to get up and running with. MarionetteJS gives backbone a bit more convention over configuration.

    I’m really excited to learn Ember.js but it is a lot to tackle and takes over the entire DOM by default from what I can tell.

    I’m not too big of a fan of the bindings in the markup (Knockout & Angular). I know that both of these can leverage (and should leverage in production) JS based templating. But the jump is a huge rewrite and can get cumbersome.

    Knockout/Angular have the advantage of showing some content before JS takes hold, but this can sometimes be a bad thing when the user starts playing with the DOM before it is ready and their changes get destroyed. This is huge for Mobile where a client may lose service while pulling later resources. I’ve typed almost full posts on my phone and had it destroyed when the JS finished it’s job after downloading.

Leave a comment