← All Articles

Should I use AngularJS or jQuery?

Jan 31, 2015
Javascript

Well, the short answer is you don’t have to make a choice, since they work perfectly well together.

But let’s take a look at some of the differences and similarities so that you can make an informed decision of what to use and when.

The 1st and 2nd Generation JS Frameworks

From ~ 2006, several first generation javascript frameworks were developed, namely jQuery, Prototype, mootools, and YUI. These focussed on DOM manipulation (ie when X event happens, do Y on element Z) and grew rapidly in adoption until jQuery generally became acknowledged as the most widely adopted “standard”.

With increasing demand for interaction on web pages, the next generation of JS frameworks were released around ~2010. The most popular include:

These were particularly suited for MVC client-side applications, and the main difference was they focussed on what should change, ie X is an attribute of Y (and so automatically change X when Y changes).

This was a significant difference to the jQuery approach, and allowed developers to think conceptually of the web app as a collection of data objects, instead of as a collection of DOM elements to be manipulated. That is, a transition from imperative to declarative programming.

  • 1st gen frameworks (ie jQuery) think “when X event happens, do Y”

  • 2nd gen frameworks (ie AngularJS) think “X is an attribute of Y” (so automatically change X when Y changes)

The rest of this article now focusses on the differences between the “standard” in the first generation (jQuery), and what I believe will become the standard in the second generation - AngularJS.

AngularJS - but why?

In my opinion, there are 3 strong reasons why I prefer Angular over jQuery.

1. Two-way Data Binding

For applications which model complex database relationships (i.e. any application with several data objects), any change in a model object or attribute will automatically update all other sections of the DOM which are affected.

For example, an ecommerce shopping cart which requires summing up the prices of several products. In this scenario, adding a new product can automatically update the total section without requiring any explicit changes to the page elements.

More on this later.

2. Separation of Concerns

AngularJS decouples the HTML (e.g. class names, ids, etc) from the javascript functions, by using models to establish relationships between objects this makes refactoring and changing UI simpler

3. Unit Testing

As a follow on effect of item 2 above, these frameworks also enable JS unit testing (using tools like Jasmine) which is much trickier for jQuery.

So what does the code look like?

Illustrated by a simple example - say we want a basic calculator which multiplies a qty input with a cost input to display a total value.

In jQuery, this would be something like:

$("#qty, #cost").on('change', function(){
    var qty = $("#qty").val();
    var cost = $("#cost").val();
    $("#total").html( parseInt(qty) * parseInt(cost) );
})

In AngularJS, this would be something like:

<div ng-app ng-init="qty=1;cost=2">
    <b>Invoice:</b>
    <div>
        Quantity: <input type="number" ng-model="qty" required >
    </div>
    <div>
        Costs: <input type="number" ng-model="cost" required >
    </div>
    <div>
        <b>Total:</b> {{qty * cost | currency}}
    </div>
</div>

Read on for a short summary of the differences

What about the other 2nd generation frameworks?

What do I think?

  • React is too simplistic (just the “V” in “MVC” and still needs to be paired with Backbone or Angular)

  • Meteor is currently too immature (version 0.8.0) to be used in production

  • EmberJS and Backbone are more mature and possible contenders, but Angular’s popularity suggests it will quickly become the de-facto standard

Angular has a good balance of maturity, community support, and productivity - making it a suitable choice for production apps.

Made with JoyBird