Cette dernière mise à jour est considérée comme majeure car elle touche toute la plateforme y compris le Framework, Angular Material et le CLI. Ivy est à présent le nouveau moteur d’Angular.
ACTUS
Pourquoi Ivy est dans Angular 9?
Date de publication: 21/02/2020
Angular est considéré comme l’une des solutions les plus réputées pour le développement de SPA (Single Page Application) qui existe depuis bientôt 10 ans (Octobre 2010). Plusieurs talents chez DHM IT le supportent comme ReactJS et Vue Js bien qu’il ait subi d'innombrables ajustements depuis sa première version (AngularJS) jusqu’à la dernière version d’Angular 9.
Mais pourquoi Ivy ?
La réponse est simple ! Le temps de chargement ! Prenons l’exemple du trafic en ligne américain, dont 63% provient de smartphones et de tablettes pouvant atteindre 80% dans quelques mois.
Il s’agit de l’un des plus grands challenges pour les développeurs Front-end, pouvoir charger le site web le plus rapidement possible, mais la contrainte qui reste toujours présente est que ces appareils souffrent souvent d’une connexion Internet médiocre ou lente. Cela rend la mission plus difficile malgré l’utilisation d’autres solutions palliatives pouvant booster le chargement, comme l’utilisation de CDN ou PWA.
Le compilateur IVY offre plusieurs avantages expliqués ci-après.
La réduction de la taille des bundles
Si on prend l’exemple d’une simple construction de site web avec Angular comme eliassy.dev avant Ivy, le poids du paquet était 510 ko et après la compilation on gagne 77 Ko de moins ce qui est -15% de taille globale et donc 15% plus rapide qu’avant. Pour un tel petit projet c’est considéré comme une bonne optimisation qui pourrait être importante dans des projets plus lourds.
Plus de rapidité au niveau des tests
Test tBed ne compile plus les composants entre l’exécution de chaque test à moins qu’un composant n’ait été remplacé manuellement, ce qui permet d’éviter la recompilation dans la plupart des tests. Cette action donne une rapidité d’environ 40% de plus dans l’acceptation des tests au niveau du core du Framework.
Débogage plus facile
Suivons l’exemple pris par eliassy sur GitHub, on fait la création d’un [Input] et on la relie avec une fonction inexistante nommé search. En tapant quelque chose dans l’input, avant Ivy on obtient une erreur moins précise, par contre, le message d’erreur est plus précis et plus riche avec Ivy concernant l’origine de l’erreur ce qui est très important dans le débogage des erreurs.
Liaisons de style et classes CSS améliorées
Avant Ivy, si une application contenant des définitions multiples des styles, ces derniers se remplaçaient d’une manière destructive et c’est là ou Ivy fournissait un ensemble d’améliorations pour la gestion des styles de tel sorte ils soient fusionnés de manière prévisible. Il est donc possible avec Angular 9 de gérer l’ordre de priorité qui ne dépend pas du timing, tout en gardant une priorité élevée pour les styles les plus spécifiques.
Pour avoir plus d’informations sur les règles de priorité de style n’hésitez pas à visiter le guide de la documentation.
Amélioration au niveau de la vérification des types
Cette amélioration aide à détecter les bugs plus rapidement dans le processus de développement. Pour une vérification des modèles (ngIf, ngFor, ng-template, etc …) il faut activer l’option fullTemplateTypeCheck et pour une vérification plus stricte il est possible d’activer l’option strictTemplates. Pour plus de détails par rapport à la vérification des types, vous pouvez voir le guide dans la documentation.
Amélioration du temps de construction et l’AOT par défaut
L’AOT Builds peut être sensiblement plus rapide même pour une utilisation dans le mode DEV. Un exemple à prendre en considération, le site de documentation d’angular passait de 0.8x à 0.5x avec Ivy, soit une amélioration de 40% ce qui démontre une rapidité de compilation et d’exécution importante peu importe le mode DEV ou PROD, donnant aussi une meilleure expérience aux développeurs Angular.
Il existe d’autres mises à jours qui touchent l’internationalisation, le CLI, des nouvelles options pour ‘provideIn’, l’IDE,les services linguistiques et plein d’autres que vous pourrez découvrir.
Vous pouvez également mettre à jour cette version facilement, mais il est recommandé de passer à la version 8 pour les anciennes versions d’Angular. Vous pouvez visiter update.angular.io pour des informations plus détaillées.
Voici quelques liens utiles qui peuvent vous aider dans votre avanture avec Angular 9:
https://angular.io/api/core/testing/TestBed
https://angular.io/guide/template-syntax#styling-precedence
https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3
https://gist.github.com/eliraneliassy/c32a6777c37c34f959148530113702f4#file-app-component-ts
- PARTAGER L'ARTICLE
