Quoi de neuf avec Angular 5 concernant le compilateur, les formulaire et http
Angular 5 vient de sortir, nous allons nous pencher dans cet articles sur les nouveautés dans le compilateur, les formulaires et le module http.
N’oublions pas que de d’autres nouveautés sont aussi présentes :
i18n, rxjs, router, pipes, service-workers, platformBrowserDynamic…
Stephen Fluin, dans son article sur le blog d’Angular, parle avec la version 5.0.0 de la sortie d’une version majeure et outre le fait qu’elle contient un certain nombre de nouveauté, elle corrige aussi beaucoup d’anomalie.
Compilation
Dans les différents discours de l’équipe d’Angular, l’objectif de chaque nouvelle version a pour objectif avant tout qu’elle soit plus performante et plus rapide, et plus particulièrement à la compilation.
Angular a deux fonctionnement pour pouvoir compiler :
– JIT (Just-in-Time)
– AOT (Ahead-of-Time)
Le compilateur JIT existe depuis la version 1 d’Angular même si des améliorations ont pourtant été ajoutées au fur et à mesure des versions.
C’est un compilateur qui s’exécute dans le navigateur. Lorsque l’application d’Angular 2 est lancée dans le navigateur, le compilateur JIT va prendre beaucoup de temps pour analyser les composants dans l’application et générer du code en mémoire, d’autant que chaque fichier est compilé séparément. Si la page est rechargée, tout ce travail doit être fait encore une fois.
Le compilateur AOT est exécuté par la machine du développeur et ce via la ligne de commande et c’est le build qui est distribué. Tout le code est compilé ensemble. Le compilateur n’est pas déployé (on gagne en terme de taille, vu que celle-ci est réduite de moitié). De plus le compilateur AOT peut ignorer des détections de changement ou de système d’injection de dépendances à l’exécution. Il permet aussi d’avoir des erreurs plus précises lorsque celles-ci surviennent et sont donc plus simple à corriger.
Si vous souhaitez comprendre dans le détail, les compilations AOT, visualisez la vidéo d’Antoine Viau sur Youtube.
Avec angular 4, utiliser AOT lors d’un développement était un peu lent, c’est pourquoi on favorisait la méthode JIT pour coder et la méthode AOT pour mettre en production.
Et pour cause, AOT compilait l’application complète. Éh oui, pour n’avoir besoin d’être plus efficace par la suite, il avait besoin d’être gourmand au départ chez nous développeur. Avec la version 5, ce n’est plus le cas, ngc, e compilateur angular peut maintenant compiler uniquement ce qui est nécessaire avec l’application de l’optimiseur de génération.
Grâce à cet optimiseur, les bundles (paquets) de l’application sont plus petits ce qui est déjà intéressant mais surtout lors de la construction il va marquer des parties de l’application pour supprimer ensuite les parties supplémentaires qui ne sont pas nécessaire. Tous les décorateurs sont supprimés du code à exécuter puisqu’ils ne sont pas nécessaires à ce moment là, ce qui a pour effet de rendre beaucoup plus rapide le temps de démarrage de l’application.
Avec tout cela, pour développer, on ne va plus utiliser
ng serve
mais
ngx --watch
Le temps de compilation va être divisé par 4.
On peut rajouter, si on le souhaite, l’option fullTemplateTypeCheck ce qui a pour effet de vérifier à fond nos modèles et surtout de stopper la compilation avec une explication vraiment précise en cas d’erreur.
Encore une nouveauté du côté du compilateur, la reconstruction incrémentale. C’est une notion introduite avec TypeScript 2.3 et qui permet d’économiser 95% du temps de construction. Il suffit pour cela de rajouter l’opion –aot.
ng serve --aot
Formulaire
La validation a été amélioré avec Angular 5 sur les formulaires. Avant à chaque frappes dans un champ texte, la validation se déclenchait et affichait l’erreur. Cela change avec l’option updateOn sur les FormControl.
On peut désormais la déclencher uniquement lorsque le champ perd le focus en valorisant l’option updateOn à blur ou uniquement à la soumission du formulaire avec l’option submit.
Si vous ne spécifié par updateOn, il existe malgré tout mais avec l’option change, qui correspond au comportement actuel.
ngOnInit() {
this.testForm = this.fb.group({
name: '',
description: ''
}, {
updateOn: 'blur'
});
}
Http
La librairie @angular/http qui a fait son apparition dans Angular 4.3, est maintenant déprécié dans la version 5 et sera supprimé dans la version 6.
Elle est remplacée par la @angular/common/http et introduit httpClient.
Nous n’avons désormais plus besoin d’utiliser les objets HttpHeaders (pour passer un entête lors d’un appel http) et HttpParams (pour définir par exemple un paramètre dans sérialisé dans un type mime application/x-www-form-urlencoded), tout se fait maintenant avec des objets littéraux.
return this.http.post(this.url, {
headers: { 'Authorization': token },
params: { 'userId': 1 }
});
Il est à noter, si vous effectué une migration d’@angular/http vers @angular/common/http, qu’il faudra supprimer tous les :
map(res => res.json())
