Since the launch of its version 2, redone in September 2016, the Angular framework developed by Google seeks to restore its coat of arms, a victim of competition more and more provided. Version 4 was launched in early spring of 2017 to bring a little lightness to a tool already very rich in features.
It is finally at the beginning of November that version 5 appears, less sweetened, more digestible, nevertheless just as tasty. Particular care was taken with the size of the deliverables, the compilation times and the appearance of a build optimizer and a new version of the CLI.
Google has already announced the dates of the next major releases in its 2018 roadmap. Version 6 is expected to arrive this March, Angular 7 is expected for November 2018.
Performances
The search for better performances has always been a critical point of the framework, even in its initial version, AngularJS. Version 2 was expected at the turn, although it has brought a mixed feeling within the community, with its builds handily exceeding the build sizes on equivalent frameworks, even after minification of the code. The advent of mobile users, more and more present, pushes developers to lighten the sizes of deliverables as much as possible.
It was therefore time to look into the problem, given the performance offered by the other frameworks. First of all, the TypeScript version upgrade introduced the “watch” option during compilation, allowing you to compile only what is needed. The saving of time is considerable. In addition, Angular is moving to an AOT mode that will become the standard.
The Angular CLI, version 1.5, now incorporates by default the build optimizer, to reduce its size. It proceeds in two stages. First, it is able to detect the parts of codes that are not necessary (tree shaking). These will not be in the final deliverable. In a second step, the build optimizer will remove code Angular decorators, which are actually used in compilation.
The management of error messages has been deepened, so much so that it is now possible to detect type errors within a template. Suppose we use a pipe that turns a string into uppercase characters, if the compiler detects that the input will be an integer, it will detect an error at compile time. This will save a lot of time (and some hair). To do this, pass the fullTemplateTypeCheck parameter to the compiler.
HttpClient
Angular, since version 4.3, integrates an Http module allowing to execute network requests within our applications.
Some changes on this module have been made in this new version, starting with its name (Http becomes HttpClient, HttpModule becomes HttpClientModule etc.), as well as its integration within the common module (ie @ angular / http is deprecated, it use @ angular / common / http).
New point having its importance, it is no longer necessary to deserialize the output response, which had the weakness of being weakly typed, which led to the typer to avoid disappointments with the compiler that seemed capricious on this point.
Router life cycle
New events and hooks appeared in the Angular life cycle, intrinsically related to the application’s router:
- ResolveStart / ResolveEnd: As the name implies, these events are triggered at the beginning and end of the resolve.
- GuardsCheckStart / GuardsCheckEnd: These events are enabled when the router checks for protection of the destination route.
- ActivationStart / ActivationEnd
- ChildActivationStart / ChildActivationEnd
The main interest of these events is rather in terms of UX, this will allow in particular to add and remove a loading loader, to warn the user of potentially long processing of the application.
In addition, you can now configure the router to reload the page if the application receives a request from the user to navigate to the same URL that is already there. To do this, you can simply add the onSameUrlNavigation option to the RouterModule.
Animations
One of Angular’s strengths is the integration of Web Animations API into components. Two new transition aliases are appearing: :increment and :decrement.
Their use is simple, it suffices to have as a state an integer numerical value. Let’s say we have a paginated list on our site, if we are on page n and we want to go to page n + 1, the transition will be declared as follows:
transition(‘n => n+1, n+1 => n+2, n+2 => n+3 …’)
With the transition alias, it will no longer be necessary to enumerate each transition between two states
transition(‘:increment’)
PWA – Services Workers:
@ angular / service-worker appeared in version 5 of Angular, having been for a long time in beta. This package provides all the features of the Services Workers, such as intelligent caching of our application assets, as well as the caching of certain predefined calls to web services. It is also on this last point that rests mainly the concept of Progressive Web App (PWA), allowing in particular to use an application in offline mode.
This mode of operation is still quite fragile, especially because of Apple’s policy that did not support the use of these Services Workers on iOS, and which finally changed last August.
New features
Some other features have been added in this major upgrade.
New pipes
It will no longer be necessary to be burdened with internationalized polyfills for formatting numbers, dates and currency currencies. The internationalization module is even now depreciated.
exportAs
Components and directives can now have multiple names. This will notably facilitate the migration of applications without breaking the existing code.
Forms
It will now be possible to run form checks (and consequent model updates) only on blur or submit events, and not all events, passing to our input field the Angular directive.
RxJS 5.5
Angular now includes version 5.5 of RxJS, which fixes tree shaking problems when importing objects from RxJS. It will therefore be possible to import Rx operators more easily.
Beware however, the chaining operators is greatly changed, following the appearance of the pipe method. This one is called directly by the source object, takes in parameters the various necessary operators, and returns an Observable.
Conclusion
Some major improvements are now available, in a new version really focused on performance gain. There are also some interesting additions in the life cycle of the router, as well as two new aliases for animations. Last but not least, Angular launches into the Progressives Web Apps, most likely in response to Apple’s changing position on the subject of Services Workers.
