Round-Trip vs Single-Page Applications
As Adam Freeman describes in his book Pro AngularJS , 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.
The jQuery library offers the following features: 
- 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 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.
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
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.
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.” 
Table 1 compares the capabilities of both tools.  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).
|Abstracts the DOM||Yes||Yes|
|Unit Test Runner||Yes||Yes|
|AJAX / JSONP||Yes||Yes|
|Integration Test Runner||No||Yes|
|MVC Pattern Support||No||Yes|
|Two-way Data Binding||No||Yes|
|File Size||96 KB||126 KB|
Table 1: Comparison of jQuery and AngularJS capabilities 
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.
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.
 H. Phan. Full-stack Mobile App With Ionic Framework. Hoc Phan, 2014.
 A. Freeman. Pro AngularJS. 1st ed. Expert’s Voice inWeb Development. Apress, 2014. ISBN: 1430264489.
 jQuery. URL: https://jquery.com/ (visited on 03/30/2015).
 jQuery Introduction. URL: http://www.w3schools.com/JQuery/jquery_intro.asp (visited on 03/30/2015).
 jQuery Mobile. URL: https://jquerymobile.com/ (visited on 03/30/2015).
 jQuery UI. URL: https://jqueryui.com/ (visited on 03/30/2015).
 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).