This is a short introduction for the improvements of Angular 4 framework, why it’s faster, and better than AngularJS.
Since last month, I’ve started to use Angular 4 to implement a new web app, with its component model.
To be honest, Angular 4 has been improved a lot from AnguarJS, although the main conceptions are staying the same.
First of all, dirty check is still there, but using a faster tree change detection model. Unlike AngularJS is running all the watchers without checking whether necessary or not, Angular 4 is doing the dirty check from top to bottom and started to use ChangeDetectionStrategy.OnPush to give the developers more power to control the components. Also, Angular 4 is doing a lot behind the scene to make watcher faster, like instead of using functions (AngularJS), now using object variable directly in watcher, thanks to AoT compilation. From some videos, this makes dirty check 3–8 times faster than AngularJS.
Second, Angular 4 started to use Observable, Zone.js and AoT compilation to make the events model more reliable and easier. It embraces that everything in web is in fact Async, like user input event, XMLHttpRequest, timer etc. Zone.js patched lower level browser APIs, like fetch, setTimeOut etc. Then through Observable, we can easily subscribe an event handler to trigger the change detection etc. You will feel the power of this model.
Third, a big big improvement is AoT compilation for templates. Honestly, Angular 4’s component is still weaker than React.js, but when I used AngularJS, I just remembered if I forgot a “(” in the template, it took ages to find out where the problem was. One of the reason is it’s super ambiguous error message.
Now, with Zone.js and AoT, all the templates is in fact compiled to be a function. So whenever there are any errors in the HTML template, Angular 4 can give you at least which line may have issue. This makes development a lot easier.
To make these improvements, Angular 4 is kind of over engineered. I often think whether we have to do that much to make everything happen. But if you divide Angular 4 to some small pieces, the conceptions can be reused to solve a lot of real world issues.
(Angular 4 is still doing too much and too complex. The life cycle events is too weak to use. It’s totally decoupled from DOM, so it’s kind of hard to understand. Also, change detection is triggered mainly by Angular, so if you do something like dynamically generate a component in ngAfterViewInit, you may encounter some warnings, then you have to force a new Change detection manually.)
Anyway, compared to the complexity, the improvements is quite attractive. it’s worth a try. :)
