{"id":4641,"date":"2018-05-19T07:58:51","date_gmt":"2018-05-19T07:58:51","guid":{"rendered":"https:\/\/codewaveinsdev.wpengine.com\/?p=4641"},"modified":"2023-08-01T16:26:12","modified_gmt":"2023-08-01T16:26:12","slug":"angular-2-for-modern-fast-and-mobile-first-apps","status":"publish","type":"post","link":"https:\/\/codewave.com\/insights\/angular-2-for-modern-fast-and-mobile-first-apps\/","title":{"rendered":"Angular 2 for Modern, Fast and Mobile-First Apps"},"content":{"rendered":"\n
\n

I\u2019ve made the switch to Angular 2 for building modern, fast, mobile first web apps and here\u2019s why I\u2019d recommend it<\/p>\n<\/blockquote>\n\n\n\n

Why I recommend Angular 2 for building modern applications?<\/span><\/h2>\n\n\n\n

If your web app is built on Angularjs, why not switch to Angular 2 if it can make your web app 5x faster? Here are four reasons why I\u2019d recommend Angular 2 for developers building new web applications or planning to upgrade old apps to new frameworks.
1. Performance (speed)
2. Mobile device support (native app like experiences)
3. Component based (modularity and reusability)
4. Typescript and Ecmascript (ES6) support (clean and structured code)<\/p>\n\n\n\n

Performance & speed of apps built with Angular2 <\/h2>\n\n\n\n

The most important factor of any web application is \u201cperformance\u201d, specially in case of web applications that have complex UI, rendering large amounts of dynamic data. Watch Listener<\/strong> is an important capability Angular offers to constantly check if there are changes in data and if there are, load the new data without page refresh. Angular 2 compared to Angular 1.x, offers a much faster and smarter way to automatically detect data that is continuously changing and respond to it swiftly, without hindering the user experience on the web page.<\/p>\n\n\n\n

Manual Watchlists in Angular 1.x Vs Auto detection & triggers in Angular 2<\/h3>\n\n\n\n

Responding to change in data is much slower in Angular 1.x and here\u2019s what makes it so. In Angular 1.x, $scope<\/strong> assign a value to variable, creates watches (to listen to change in data). Many such watches result in a watchlist. When the value in $scope is modified to a new value, a digest cycle<\/strong> takes place. Every digest cycle will have a minimum of 2 iterations because the first iteration will watch (check) for any change in $scope and second iteration will be performed to make sure that there are no watches in the 2 iterations. Chances are that the value modified by one watch may also modify the value modified by another watch, in the meanwhile. After one complete digest cycle, the UI gets updated and renders the DOM. This may not be a problem with simple UI, however in case of a complex UI, it takes more time to update the DOM, which results in slow performance.<\/p>\n\n\n\n

\n
Scalable powerful apps with mean stack<\/a><\/div>\n<\/div>\n\n\n\n

In Angular 2, detection of change is done automatically by making use of Zone.js and it triggers change (like $digest in Angular 1.x). Asynchronous operations like events, http requests, timers cause the state to change in our application. Zone.js makes use of the concept \u201cMoney Patch\u201d i.e., replacing a member function (and related functionality) on any object with a new one. Zone.js obstructs all of the asynchronous APIs in the browser (when Angular runs). This is the reason why we use setTimeout() inside our components rather than something like $timeout because setTimeout() is monkey patched. <\/p>\n\n\n\n

Angular 2 maintains change detector for every component \/ directive<\/strong><\/h3>\n\n\n\n

It keeps track of the state of all of your bindings, for dirty checking. These are similar to $watch in Angular 1.x for template bindings. Change detection graph traverses from root to its leaves. It is a unidirectional directed tree and cannot have cycles. When an event is triggered, event handler callback runs, updates the view and renders the DOM. Since Angular 2 follows a unidirectional tree structure, it provides improved performance than it\u2019s previous version.<\/p>\n\n\n\n

To summarize, if I were to build a web application for stock market enthusiasts that deals with a lot of data every minute or let\u2019s say a web application that counts people falling sick every minute indicating patterns \u2013 I\u2019d do it on Angular 2.<\/p>\n\n\n\n

\n
Download best AWS security practices<\/a><\/div>\n<\/div>\n\n\n\n

Does Angular2 support mobile devices for native app like experiences?<\/h2>\n\n\n\n

AngularJS 1.x was not built by keeping mobile devices in mind. We could achieve it using frameworks like Ionic. But, this requires additional learning curve and may also affect the overall user experience. Angular 2 has been designed with mobile in mind, <\/strong>it is designed to offer extensive support for mobile devices where touch events and gestures work across all devices.<\/p>\n\n\n\n