jQuery vs AngularJS – Which is better for your project?

Given the boom of web development libraries and frameworks, choosing the right ones for the project can be a daunting task. In this article, a brief comparison of two most commonly used JavaScript toolsets – jQuery and AngularJS – is provided.

Round-Trip vs Single-Page Applications

As Adam Freeman describes in his book Pro AngularJS [27], at the early stage of the web, applications were developed to follow a round-trip model. In this model, the browser sends an initial request to a server and receives an HTML document. All user interactions on the document (such as form submissions) result in requesting and receiving a completely new HTML document. In the round-trip model, the browser tends to be a thin client that only renders HTML documents as all the application logic is happening on the server side.

The round-trip model has several drawbacks. Higher performance requirements are put on the server as this is where most of the application logic resides. Larger network bandwidth is needed because duplicate content – such as headers and page layout – is being transferred with each response. This all results in a slower response time.

Single-page applications work differently. At the beginning, the browser sends an initial request to a server and receives a HTML document. But the following user interactions lead to Ajax requests that request only small fragments of data to be transferred. Instead of transferring the whole HTML document and re-rendering the user interface, Ajax requests only allow the data that is needed to be transferred and plug it into existing elements that are being displayed to the user. This means that the initial HTML document is never reloaded.

The single-page model also has some drawbacks. Ajax calls are performed asynchronously and usually add more complexity to the application. Single-page applications need more powerful browsers since most of the application logic is happening in the browser.

Today, most of the applications fall somewhere between the two. If you want to deliver a seamless user experience with fluid transitions and short response times, single-page model is usually a better fit.

jQuery

jQuery is a JavaScript library that allow developers to “write less, do more” [35]. Briefly said, jQuery offers a very mature and efficient way of querying, accessing, and modifying elements in Document Object Model (DOM) and simplifies things such as event handling, animation, and Ajax. In addition, jQuery has an extensive repository of plugins created by its large community.

The jQuery library offers the following features: [36]

• HTML/DOM manipulation,
• CSS manipulation,
• HTML event methods,
• effects and animations,
• AJAX and other utilities.

Besides the core library, jQuery can be extended by jQuery UI and jQuery Mobile libraries. jQuery UI is a set of user interface interactions, effects, widgets, and themes. jQuery Mobile is a user interface framework built on top of both jQuery and jQuery UI. It allows developers to build responsive web sites or applications that work on smartphones, tablets and desktop devices. [37, 38]

jQuery Mobile has several weaknesses: [9, 27]

• It creates additional mark-up.
• It offers bad performance. Before it applies CSS, it runs a load of JavaScript, adding large numbers of classes all over the place.
• It provides many controls/functions, but only a very small part of them are used in applications, which causes a lot of waste of performance.
• It can be hard to write and manage large applications and thorough unit testing can be a challenge.
• It does not come with out-of-the-box functionalities, such as templating, data-binding, or dependency management, which are often necessary for the development of complex applications. However, third-party libraries such as Mustache, Knockout, EmberJS, BackboneJS, or RequireJS can provide these functionalities.

I believe that jQuery and jQuery Mobile are great tools that have definitely earned their place – specially when it comes to round-trip applications or simpler projects that involve DOM manipulations and do not involve data manipulation. When more complex applications need to be developed, additional libraries can help to deal with templating, databinding, or dependency management. However, these libraries usually add another layer of complexity and can negatively impact the overall performance of the application.

AngularJS

AngularJS is an open source JavaScript framework sponsored and maintained by Google. “The goal of AngularJS is to bring the tools and capabilities that have been available only for server-side development to the web client and, in doing so, make it easier to develop, test, and maintain rich and complex web applications.” [27] AngularJS extends HTML by custom elements, attributes, classes or comments (called directives). Directives are markers on a DOM element that tell the AngularJS’s HTML compiler to attach a special behavior to that DOM element or even transform the DOM element and its children. [39]

Following are the features offered by AngularJS: [9, 27, 39]

• two-way data binding between views and models, which eliminates DOM manipulation;
• built-in templating engine;
• cut-down version of jQuery called jqLite;
• MVC pattern support that helps to divide the application into three distinct areas: the data (model), the logic that operates on that data (controller), and the logic that displays the data (view);
• dependency management;
• deep-link routing that allows the state of the application to be encoded in the URL so it can then be restored to the same state;
• built-in services for RESTful server communication.

AngularJS also has some drawbacks:

• It needs up-front investment in development before initial results can be seen.
• It extends HTML with additional elements, which can seem like an odd idea.

AngularJS is a framework that can be used to build complex and high performance client-side web applications in a clean MVC way. By doing so, it places an emphasis on building applications that are maintainable, testable, and easily extendable.

Comparison of jQuery and AngularJS

Some people may argue that jQuery and AngularJS are not comparable because they differ significantly from each other and jQuery is a library while AngularJS is a framework. In any case, they are the two most widely used JavaScript toolsets in web development and, therefore, I believe a brief comparison needs to be done in order to help us to decide which of them is more suitable for our project.

It is important to note that jQuery and AngularJS can be used together, but as far as performance is concerned, only one of them should be used in your application.

Previously, I have talked about single-page and round-trip models. Now it is time to compare jQuery and AngularJS in the context of these two types of models.

Every time a new HTML document is loaded in AngularJS, the HTML elements have to be compiled, data bindings have to be evaluated, and directives need to be executed. This results in an initial overhead that takes some time depending on the complexity of the HTML document and associated JavaScript code, the quality of the JavaScript engine used in the browser, and the processing capability of the device. It is evident that we want to minimize this overhead and, therefore, we want to load new HTML documents as infrequently as possible. Consequently, AngularJS excels in a single-page model when a new HTML document is loaded only when the application is accessed for the very first time. [27]

jQuery is a library that does not come with any out-of-the-box features supporting the development of complex applications. Even though third-party tools can be used to deliver on capabilities such as MVC pattern support, templating, and deep linking, AngularJS offers these out-of-the-box while maintaining much smaller footprint.

If performance is one of the main concerns, jQuery is generally a better choice for simpler projects that use the round-trip model. As the project is moving closer to the single-page model and is becoming more complex, AngularJS is the right choice. Figure 1 shows the area where AngularJS is a better fit than jQuery. “Use AngularJS for more complex singlepage web apps, when you have time for careful design and planning and when you can easily control the HTML generated by the server.” [27]

Figure 1: AngularJS is well-suited to single-page and complex web applications (ref: 27)

Table 1 compares the capabilities of both tools. [40] The capabilities missing by jQuery could be substituted by the following third-party tools:

• Knockout for MVC Pattern Support, Deep-Link Routing, and Data Binding (56 KB);
• Underscore for Templating (16 KB);
• RequireJS for Dependency Management (15 KB);
• jQuery Validation Plugin for Form Validation (22 KB).

Table 1: Comparison of jQuery and AngularJS capabilities [40]

It is worth noting the file size of each of the tools (all sizes stand for minified versions). jQuery used with the third-party tools mentioned above would amount to 205 KB while still not covering all the capabilities of AngularJS, which comes in at 126 KB. As file size certainly is not the only factor when it comes to benchmarking, the drawback from using several third-party tools should be as it can bring more complexity to the application and thus result in a bigger footprint.

Conclusion

I briefly described the characteristics of both most widely used JavaScript toolsets in web development. After that, I compared them in the context of a single-page and round-trip model, and analyzed the capabilities they offer in the development of complex applications. The outcome of this comparison is that AngularJS is a good choice for complex projects as it offers capabilities such as MVC pattern support, templating, and deep-link routing. Moreover, the nature of how AngularJS is executed makes it excel in single-page applications, allowing for better performance. jQuery, on the other hand, is a powerful tool that excels in situations when simple applications need to be developed rapidly. Its minimal initial workload makes it a good fit for round-trip applications.

As mentioned in the Round-Trip vs Single-Page Applications section, if your goal is to build a single-page application that would deliver a seamless user experience with fluid transitions and short response times, AngularJS is usually a better choice.

Bibliography

[9] H. Phan. Full-stack Mobile App With Ionic Framework. Hoc Phan, 2014.

[27] A. Freeman. Pro AngularJS. 1st ed. Expert’s Voice inWeb Development. Apress, 2014. ISBN: 1430264489.

[35] jQuery. URL: https://jquery.com/ (visited on 03/30/2015).

[36] jQuery Introduction. URL: http://www.w3schools.com/JQuery/jquery_intro.asp (visited on 03/30/2015).

[37] jQuery Mobile. URL: https://jquerymobile.com/ (visited on 03/30/2015).

[38] jQuery UI. URL: https://jqueryui.com/ (visited on 03/30/2015).

[39] AngularJS – Superherois JavaScript MVW Framework. URL: https://angularjs.org/ (visited on 03/30/2015).

[40] D. Lamb. jQuery vs. AngularJS: A Comparison and Migration Walkthrough. 2014. URL: https://www.airpair.com/angularjs/posts/jquery-angularjscomparison-migration-walkthrough (visited on 03/30/2015).