Quelles sont les nouveautés dans Angular 6 ?

Angular Elements

Angular 6 est la première version qui supporte pleinement les éléments Angular ! Angular Elements était l'une des caractéristiques les plus attendues de cette version que les développeurs Google cherchaient auparavant à implémenter sur les versions ultérieures. Les Angular Elements vous donnent la possibilité d'utiliser vos composants dans d'autres environnements (comme une simple application jQuery ou une application VueJS). Il suffit de prendre un composant Angular et de l'enrober dans un élément personnalisé (aussi appelé élément DOM), ce qui vous permet d'utiliser vos composants Angular dans d'autres projets qui n'ont pas l'écosystème Angular complet. Pouvoir créer et publier un composant web dans Angular et l'utiliser sur n'importe quelle page HTML va être révolutionnaire. Imaginez être en mesure d'emballer ce favori-sélecteur Angular que vous aimez et l’implémenter dans l'application React de Maman. Avec des Angular Elements, cela est possible !

ANGULAR Ivy : moteur de rendu

Ivy est la prochaine génération du moteur de rendu Angular (Angular Renderer). Les développeurs devraient remarquer ce changement, leurs applications étant plus rapides et moins volumineuses. Il s’agit du troisième moteur de rendu qu'Angular connait. Le second était apparu entre la version 2 et 4, appelé View Engine. Après avoir remplacé la première, les développeurs Angular ont constaté une augmentation de la vitesse et une diminution de la taille de l'application, tout en ayant presque aucun rapport d'incompatibilité. L’équipe de développeurs Angular espèrent de nouveau voir le même genre de résultats.

Tree Shaking

Le Tree Shaking est une étape d'optimisation de build qui a pour vocation de s'assurer que le code inutilisé ne se retrouve pas dans votre bundle final. Le moteur de rendu Ivy fait bouger les arbres à un tout autre niveau. Au lieu de rendre les données du modèle et de les transmettre directement à un interpréteur qui doit savoir tout faire, le nouveau moteur de rendu va directement générer les instructions du modèle. Cela signifie des packages de taille beaucoup plus petite et un temps de démarrage plus rapide, ainsi un avantage secondaire qui permet de rendre les instructions générées beaucoup plus lisibles par l'Homme et donc plus faciles à comprendre et à déboguer. Le moteur de rendu Ivy est très intéressant notamment d’un point de vue plus design car il permet d’avoir des points de rupture dans votre template.

Compilation

Lorsque le compilateur traduit votre modèle en JavaScript, il est uniquement autorisé à utiliser les informations directement disponibles sur le composant et son décorateur (il ne peut pas regarder les dépendances). Ceci est en contraste avec le compilateur actuel qui nécessite une réelle analyse globale pour s'exécuter. En d'autres termes, la localité signifie simplement que vous ne pouvez regarder que des fichiers / composants individuels à la fois lors de la génération de l’application. Pour rappel, dans la version actuelle, il existe 2 types de compilation dans Angular :

• Just-in-Time (JIT), qui compile l’application dans le navigateur lorsqu’on la lance. C’est la compilation par défaut lorsque le développeur lance les commandes « ng nuild » et « ng serve »
• Ahead-Of-Time (AOT), qui compile l’application lors de la construction de celle-ci. Pour l’exécuter il faut rajouter le tag « --aot » (« ng build –aot » et « ng serve –aot »)

C'est une philosophie simple avec des impacts énormes. D'une part, elle vous permet d'expédier le code précompilé AOT en npm. Ce qui signifie que les développeurs n'ont pas à se soucier de compiler une bibliothèque particulière dans AOT, car elle est déjà compilée ! Cela signifie également que le fichier metadata.json n'est plus nécessaire, ce qui facilite le traitement de votre code par les outils et la compatibilité de plusieurs outils avec les packages npm. Cela simplifie à la fois la création et la consommation de packages. Ainsi, votre application a un temps de recompilation plus rapide car un changement dans un composant est moins susceptible de déclencher une recompilation pour l'ensemble de l'application.

L’ajout et les mises à jour d'Angular

La commande que la plupart des développeurs Angular attendait est :

ng update

Cette commande permet de mettre à jour toutes vos dépendances listées dans votre fichier package.json. Elle essaie d'intercepter les bogues partout où elle le peut pour mettre à jour votre code et profiter des nouvelles API. L'équipe d'Angular espère améliorer le niveau de maintenance du code tout en restant à jour avec:

• La mise à jour des dépendances npm,
• La mise à jour votre code (où il peut trouver des changements de rupture),
• La mise à jour votre code RxJS et Angular Material lorsque des dépréciations se produisent.

La deuxième commande tant attendue et complémentaire à la précédente permet d'ajouter facilement et en toute simplicité de nouvelles fonctionnalités à votre application.

ng add @angular/pwa ng add @angular/elements ng add @angular/material

Cette commande ajoute un peu de code à votre projet ; elle modifie et ajoute du code où il faut, pour permettre d’utiliser ce que vous avez ajouté. Par exemple, il y aura des schémas vous permettant d'ajouter des éléments tels qu’Angular Material, Angular Elements, les applications web progressives et les Services Workers à votre application Angular existante ! NativeScript est également en train de créer un schéma pour que vous puissiez utiliser « ng addNativeScript » dès le démarrage de votre application Angular 6. L'équipe Angular a travaillé main dans la main avec l'équipe NativeScript pour fournir des schémas supplémentaires permettant d’étendre l'interface CLI Angular, de créer des applications Native Mobile avec NativeScript et d’étendre les applications web existantes en ajoutant l'environnement mobile.

Désinscription du Service Worker

Aujourd’hui lorsqu’on crée une application web progressive, on passe forcément un certain temps dans la mise en place du Service Worker pour les notifications push ou le mode offline. Ce qui est invraisemblable mais pourtant réel, c’est qu’il est difficilement supprimable de l’application. Cependant la version d’Angular CLI 1.7, comprendra un fichier safety-worker.js qui vous permettra de désactiver le Service Worker à tout moment. Pour cela, il suffit de renseigner le contenu du fichier safety-worker.js à l’URL qui correspond au Service Worker que vous souhaitez désinscrire (@angular/service-worker). En dehors de toutes les fonctionnalités énumérées ci-dessus, Angular 6 prend en charge TypeScript 2.7 avec des nouveautés comme les déclarations de type conditionnel, les déclarations par défaut et l'initialisation de classe stricte. Il y a aussi le support RXJS 6, dont le principal objectif est d’optimiser et de réduire la taille des packages !