Angular 7: Mise à niveau et nouveautés

Angular 7 vient de paraître et, même s’il semble ne présenter que peu de nouveautés et nouvelles fonctionnalités, il comporte des changements très intéressants niveau outillage, ainsi que des fonctionnalités permettant d’optimiser les performances. S’inscrivant totalement dans la tendance récente des versions précédentes, la mise à niveau vers la version 7 est un jeu d’enfant (et s’effectue plus rapidement que jamais). Cet article permet d’avoir un aperçu des nouveautés du framework.

Ajouts et nouvelles fonctionnalités

La liste ci-dessous n’offre qu’un bref résumé des nouvelles fonctionnalités de cette version, pour avoir beaucoup plus de détails nous vous invitons à vous tourner vers la documentation officielle en anglais.

CLI – Command Line Interface (Invite de commande)

L’équipe Angular s’est concentrée sur l’amélioration des outils disponibles pour les développeurs et en particulier Angular CLI. Habituellement, lorsque vous exécutez des commandes telles que ng new  ou ng add, tout s’exécute en une fois. Vous avez oublié d’inclure le routing ? Vous voulez ignorer les installations? Pas d’autres choix que de terminer l’exécution de la commande.

Avec la nouvelle CLI c’est de l’histoire ancienne. Elle répond maintenant avec des invites interactifs. Essayez simplement ng new monappangular7 et qu’est-ce que vous obtenez? Une nouvelle invite vous demandant si vous souhaitez ajouter un routage. Vous voulez essayer un format de feuille de style différent? Pas de problème! La CLI vous permet de choisir entre CSS, SCSS, SASS et plus (ou LESS!). Et la bonne nouvelle, c’est personnalisable! Ajoutez un fichier schematic.json à l’aide de Schematich CLI et vous pourrez indiquer à Angular CLI quels invites de commande exécuter.

La documentation CLI a aussi été intégrée à la documentation principale angular.io.

Le CDK (Component Dev Kit) Angular Material

ScrollingModule

Alors que de nombreux frameworks mobiles ont commencé à s’orienter vers le chargement dynamique de données sur les images ou les très longues listes, Angular a enfin pris ce chemin en ajoutant le ScrollingModule pour permettre le défilement virtuel. Lorsque les éléments gagnent ou perdent en visibilité, ils sont virtuellement chargés et déchargés du DOM. Les performances sont considérablement améliorées aux yeux de l’utilisateur. La prochaine fois que vous aurez une longue liste d’éléments à faire défiler par vos utilisateurs, insérez-la dans un composant cdk-virtual-scroll-viewport et profitez de l’amélioration des performances!

DragDropModule

Désormais, vous pouvez implémenter la prise en charge du glisser-déposer en utilisant Angular Material, y compris la réorganisation des listes et le transfert d’éléments entre les listes. Le CDK inclut le rendu automatique, les gestionnaires de glissement, les gestionnaires de dépôt et même la possibilité de transférer des données. Vous n’aimez pas l’animation standard du glisser-déposer? Pas de problème, c’est à vous de le surcharger.

En ce qui concerne Angular Material, la version 7 contient des styles de composants mis à jour conjointement à la nouvelle spécification Material Design.

Performance de l’application

Angular 7 est encore plus rapide que les versions précédentes. La mise à niveau est elle aussi plus rapide (moins de 10 minutes pour de nombreuses applications selon l’annonce officielle), le framework est plus rapide et le module CDK de défilement virtuel détaillé ci-dessus rend les applications beaucoup plus performantes.

Mais c’est là que les choses deviennent vraiment intéressantes: l’amélioration de cette version ne se situe pas uniquement sur la réduction de la taille du framework, mais également sur la réduction de la taille de vos applications! Les développeurs ont notamment corrigé une erreur de production via laquelle le polyfill reflect-metadata  était inclus en production. V7 le supprime automatiquement.

Les nouveaux projets sont désormais configurés par défaut à l’aide des Budget Bundles, dont le but est de vous avertir lorsque votre application atteint la taille maximale. Par défaut, vous recevez des avertissements lorsque vous atteignez 2 Mo et des erreurs à 5 Mo. Et lorsque vous avez besoin d’un peu plus d’espace, faites les ajustements nécessaire en éditant votre fichier angular.json.
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]

Dépendances mises à jour

Angular est à jour de Typescript 3.1, RxJS à 6.3 et le support de la v10 de node a été ajouté!

Ivy Renderer

La nouvelle génération de moteur de rendu (Ivy)… n’est pas encore tout à fait prête. L’équipe Angular ne s’engage pas sur une date précise, mais le développement est toujours actif et progresse. Ils indiquent que la validation de la compatibilité ascendante commence seulement et même si aucun membre officiel de l’équipe n’a commenté, la rumeur s’oriente vers une version bêta complète lancée au cours de la vie de la V7 puis une sortie officielle en même temps que la V8. Vous pouvez suivre l’avancement vous même sur le GitHub Ivy Renderer sur le repo Angular officiel. La bonne nouvelle? Ivy pourrait être publié dans une version mineure, à condition qu’il soit entièrement testé et validé. Alors qui sait? Peut-être que nous verrons apparaître tout cela dans la v7 finalement.

Mise à niveau

Difficile de faire plus simple !

Pour la grande majorité des applications Angular disponibles, et en supposant que vous utilisez déjà Angular 6 et RxJS 6, vous devez tout simplement exécuter la commande:

Et si vous utilisez Angular Material, cette commande-ci s’occupe de tout:

Si quelque chose vous semble étrange, consultez le Guide de mise à jour pour voir si vous avez besoin de commandes spéciales.