Angular 4 - the Butterfly, Not the Cocoon

First of all, it is smaller and faster (source) — the butterfly has abandoned its cocoon stage and has a lot more to offer. Besides, AOT generated code is looking more attractive: it’s much slimmer (about 60% less than before). What does this mean for you, the developer? The more complex your template work is, the more you save in terms of time and effort, as well as production bundle size — we’re talking hundreds of kilobytes (source).

Animation package has received its makeover as well: it now has its own space in the forest of development, instead of being part of the @angular/core package. An implication of this? If animations are of no use to you, the extra code generated by them will not be meddling with your production bundles. Besides, you’ll be able to find documentation more easily and really squeeze the juice out of autocompletion. You can now even play a role in the evolution of your animations by adding them to your main NgModule through the import of BrowserAnimationsModule from @angular/platform-browser/animations  (source).

Another step of this amazing metamorphosis — going from Angular 2 to Angular 4 — is what has been done with packaging. In reality, there are three major changes: flat ES modules, experimental ES2015 Builds, and experimental closure compatibility. 

The first one allows for an array of new possibilities. Now you can enjoy improved tree-shaking, faster build, transpilation, and loading in browsers (well, under certain circumstances), as well as a smaller size of generated bundles — thanks to flattened module versions in the ECMAScript Module format (source).

Experimental ES2015 Builds represents an optional step in the evolution. Yet, those seeking a leaner package might want to explore this possibility — if combined with Rollup, there is a 7% savings in terms of bundle size (source). If you are ready to try these new packages, you will need to configure your build toolchain to resolve “es2015” property in package.json over the regular “module” property (source).

Yet another option for an optimized bundle size and tree shaking is represented by the experimental closure compatibility, made possible thanks to closure annotations available in all of the code (source).

Angular 4 represents an even greater transformation in comparison with Angular 2 thanks to its four new features. One of them is the improved *ngIf and *ngFor which now allow for the use of an if/else style syntax, and assignation of local variables — when unrolling an observable, for instance (source). Another one, Universal (a project that makes it possible for developers to run Angular on a server), has now been updated to make the perfect match with Angular thanks to this first release. You can find most of its code in @angular/platform-server (source).

Ngc now got a chance to become faster thanks to yet another new feature, TypeScript 2.1 and 2.2 compatibilities. Besides, there is no longer the danger of being lost in the template jungle because source maps are provided any time an error in a template occurs. Now when there is an error caused by something in one of your templates, source maps — which give a meaningful context in terms of the original template — are generated (source).

But this is not all: Angular 4 is no little moth! It now boasts more beautiful traits, including a new title case pipe, which capitalizes the first letter of each word. The HTTP one makes it much easier to add search parameters to an HTTP request, while the test one lets you override a template in a test in a much more user-friendly fashion (source).  

In addition, obtaining or updating meta tags is now a fresh morning breeze thanks to a new service. Meanwhile, forms have more than survived the natural selection process: its validators and compare select options are the creatures of the new millennium. One such validator helps double check an input e-mail, while a select comparewidth boasts a new directive which allows the developer to compare options. The router has not been left out by the evolution either — it now includes the ParamMap, CanDeactivate, and 118n. These, respectively, help you represent URL parameters, implement clever logic (when the user drifts away from the component they were working on), and internationalize more simply (source).

As you can see, Angular 4 is a major step in the Angular metamorphosis and yet, it’s not the end of the chain. A more sophisticated Angular creature will be born later on this year — version 5, in either September or October, followed by newer versions approximately every six months.