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!