Angular 2.0: A revolutionary angle!

Hello there! We are right nigh to the final release of Angular 2.0, which means it's time to decipher what this excitement means to the developers’ community and understand the business impact of this new framework backed by none other than Google Inc.

Angular 2.0: A brief history

At the ng-Europe conference on 22nd September 2014, the Angular Team announced its next major release, a.k.a Angular 2.0, disclosing that there would be a drastic change in the codebase and semantics. To everyone’s surprise, they also announced that Directives, Controllers, $scope and jqLite will be dropped off, clearly indicating towards breaking all the compatibility with existing codebase.

Understandably, this created a huge uproar amongst the developers, with the absence of migration path from 1.x to 2.0 versions causing a lot of confusion.

With the growing popularity of other frameworks like ReactJS and Ember in late 2014, the Angular Team decided to restructure their core architecture in order to meet the market requirements and build the best ever JavaScript Framework while ignoring the animosity from the community.

On 30th April 2015, when AngularJS was moved from Alpha to developers’ preview, it caused a big hullabaloo in the market to see this new code structure. As promised, many features were drastically changed and the compatibility with previous versions was totally ruled out. This resulted in some amount of disappointment. However, most of them were excited to ride a new wave in the field of front end technology which was about to begin. In December 2015 Angular 2.0 was moved to the Beta phase, pushing it closer to its final release. Once again AngularJS became the talk of the town for front-end developers!

Why we should not ignore this wave?

• AngularJS is powered by Google Inc.(need I say anything more?) which further increased its community size, making it one of the largest used front-end development framework.
• Increased community results in increased count of plugins and support which will grow this framework further. Very soon, it is expected to become "The Framework" which cannot be ignored while talking about JavaScript based UI development.
• Although google has declared in ngConf 2015 that it will continue its support to 1.x version till the community continues to use this, in order to push its new baby in market, Google might take a decision of invoking the support after a stable release of 2.0. This might mean that no new features are released in the existing code base.

What benefits can Angular 2.0 provide to my Application?

• With restructuring of $watch, overall performance of Angular 2.0 has drastically improved when compared with Angular 1.x. The team which built Angular 1.x is the same team working on Angular 2.0, opening up their weekly status meeting to the community, hence carrying their extremely valuable experience of previous version along with the constructive criticism from community, ensuring this framework becomes far better than the previous version
• Binding technique in Angular 1.x was based on ng-modal. Instant change in Javascript POJO was one of the main features of Angular 1.x to make this framework very popular amongst the developer community. Let's see how it works.
  • Angular creates patch points for all the asynchronous interactions with the form on page load.
  • On these patch points, Angular runs a dirty checking on scope object to see if any of the associated variable is changed. If so, it triggers the corresponding watchers.
  • These watchers in turn synchronize the UI and modal value through multiple dirty-check and run-watcher cycles.
  • Problem with this approach:
    • It is not clear which watcher will be fired in which sequence. Additionally, it is difficult to predict the number of times these watchers will be called.
    • Digest cycle consumes considerably large number of resources so although this technique just about works, there is a great scope of improvement.
    • It is extremely difficult to control the sequence of model update cycles. Registering a dependent listener is very risky.
  • How Angular 2.x solves this problem.
    • Angular 2.x has adopted a zones mechanism which is equivalent to a local-thread model in any of the multi-threaded languages. This increases the data update to be more transparent and also avoids the need for a conventional digest cycle.
    • This blog gives more clarity on how Angular 2.x change detection system improves the performance over conventional digest cycle approach.
• Many new integrated features, including flexible routing in Angular 2.0, have reduced the dependency on third party libraries. It has also dropped off the less used modules, understanding the real need of common UI development. These changes will make this library more lightweight and less error-prone. Below is a code snippet to understand how Angular 2.0 has simplified routing to great extent.
  
  
  
• Development of Angular 2.0 version is focused towards the mobile platforms. The thought behind this focus is that it’s easier to handle the desktop side of things, once the challenges related to mobile (performance, load time, etc.) have been addressed.  The 1.x version was not designed with this approach. Although Ionic framework was helping the usage of angular 1.x on mobile devices, performance wise it was still very slow.
• Angular 2.0 is based on Typescripts which provides compile time error handling. This feature helps developers understand the errors well in advance, reducing the bug fixing cost and make the development process almost twice as faster. Angular team is also planning to release this framework in multiple variants that supports Dart and plain ECMA6 as well.
• Annotation support and improved dependency injection (DI) will reduce number of lines of code to improve maintainability.
• Simplification of language syntax has reduced the learning curve of Angular 2.0 to great extent. However, a considerably good online tutorial can help you easily put this weapon in your quiver. This will help rapidly ramping up the team to get started. Given below is a code snippet of Angular 2.0  which appears to be quite simple for any beginner level developer compared to the code snippet in second window.
  
  

  

  Angular 2.0 code snippet

  
  

  

  Angular 1.X code snippet

  
  
• Lazy loading was one of the biggest challenges in Angular 1.x. Yet some third party libraries like ocLazyLoad and requireJS had enabled this feature in angular 1.x. Ideally a framework itself is supposed to provide this lazy loading feature in order to maintain a better hierarchy of modules and corresponding files. Considering this limitation in 1.x, Angular team has addressed this issue in 2.x and have come up with considerably better lazy loading techniques. This blog gives a better idea about how Angular 2.0 has approached to solve this issue using asynchronous routing techniques.

Is there any bitter bite as well?

No technology is perfect enough to meet all the expectations of community. Angular 2.0 is no exception to it. Let's highlight some of the challenges associated with Angular 2.0

• Huge number of applications have been built across the globe based on Angular 1.x framework. As the direct migration path is not given by angular team, migration of these existing projects in Angular 2.0 is going to be a real challenge for the community.
• Although thousands of blogs and tutorials are already online, a real enterprise product experience of this framework is yet to come out.
• Release date of this framework is still not fixed, resulting in an uncertain wait.

The Last Word…

There are still lot of things to be analyzed as Angular 2.0 framework is coming with a lot of promises for the UI developers community. Till the beta release, it has already fulfilled many of them. It is clear that Angular 2.0 is going to revolutionize UI technology to great extent and begin a new era of UI development.

Happy Coding…!!




Written by Mahesh Kedari, AngularJS Expert at Eternus Solutions