June 7, 2016 // By Jeson Martajaya
Since its inception in 2009, AngularJS has become a popular framework in building Single Page Web Application. It is a Javascript web framework that was written with Testability in mind. Modern features such as Dependency Injection and Separation of Concerns are already packaged built-in with the framework. These reasons alone are enough to make AngularJS a framework of choice for enterprises to reduce development costs while shorten the time to deliver.
In 2014, Google announced Angular 2. It is rebranded and repurposed. The ‘JS’ letters for JavaScript is dropped from its brand, as TypeScript becomes its preferred dialect. By the time of this writing, the official Angular 2 Tour of Heroes tutorial (not the Quickstart) is only available for Typescript and Dart. It is still not available for Javascript.
Angular 2 also shows a more separation between standard HTML versus Angular attributes. No more battling standards between html5 compliant data-ng-click or the short and sweet ng-click, they are replaced by (click) attribute with parentheses around it. This baked-in convention of using [brackets], (parentheses), *asterisks, or [(banana-in-a-box)]is Angular 2’s distinct way to indicate one versus two-way data binding, as well as DOM changing attributes.
<form> <li *ngFor="#user of users"> <!--* changes the DOM--> {{ user.name }} is {{ user.age }} years old. </li> <input type="text" [(ngModel)]="message"> <!--Banana in Box--> <button type="submit" (click)="updateMessage(message)">Update Message</button> </form>
In addition to tighter integration with Typescript, Angular 2 promises a better performance. One study claims it to be up to 5-10 times faster. Under the hood, Angular 2 replaces $scope.digest cycle with a more straightforward Javascript logic, thus result in a faster checking of a one-way binding. Also, by making its parts as components, Angular 2 allows developers to provide some guarantees to change detection mechanism to avoid unnecessary scanning of parts within the DOM tree. These concepts are originally coming from Reactive framework, which makes the performance Angular 2 comparable with React.js.
However, Angular 2 does not come without a drawback. The familiar concepts of $scope, watch and directive are removed. The documentation for Javascript purists on Angular 2 are lacking. AngularJS 1 developers still have to go through a learning curve. Add in the Typescript and Dart, it is definitely not an ‘at-home’ feeling for many die-hard Javascript developers.
AngularJS 1 is still a valid choice for Javascript SPA framework. AngularJS 1 is simple and easier to understand and follow for pure Javascript developers. There are a lot more documentation and community contributions for AngularJS 1. For these reasons, AngularJS 1 is still going to be around for many more years. However, Angular 2 is a great framework to start a greenfield project. As mentioned in previous paragraphs, this second iteration of Angular promotes the best practices from AngularJS 1, and removes the ones that don’t quite work well. In short, there is no rush to migrate existing AngularJS 1 project to Angular 2, but we can look forward for Angular 2 to be the framework of choice for new projects.
If you’d like to contact Magenic, email us or give us a call at 877-277-1044.