La semaine dernière marquait la sortie tant attendue d'Angular 13, la dernière version majeure du populaire framework de développement web. Dans cet article, je vais vous présenter un aperçu des nouveautés et des améliorations les plus remarquables de cette version. Préparez-vous à découvrir les nouvelles fonctionnalités, les améliorations de performances et les améliorations de l'expérience de développement qui font d'Angular 13 une version prometteuse. Suivez-moi pour en savoir plus sur les avancées passionnantes de ce framework incontournable dans le monde du développement logiciel.
Fin du support de IE ! 🎉🎉
Le moment tant attendu est enfin arrivé : Angular dit adieu à Internet Explorer ! Comme annoncé précédemment, Angular CLI et Angular ne fourniront plus de support spécifique pour IE. Cette décision apporte de nombreux avantages, notamment une amélioration significative de l'expérience de développement. En supprimant le processus de construction différentielle (qui permettait de créer une version compatible avec IE), nous bénéficions désormais de moins de polyfills embarqués et l'équipe Angular peut se concentrer sur l'amélioration de la chaîne de compilation en se libérant des éléments historiques.
Il est important de noter que si vous devez encore prendre en charge IE, la version 12 d'Angular continuera d'être supportée jusqu'en novembre 2022. Cela vous laisse suffisamment de temps pour prévoir la transition vers des navigateurs modernes et profiter pleinement des fonctionnalités avancées offertes par les dernières versions d'Angular.
Ivy everywhere !
La progression de ViewEngine se poursuit avec cette nouvelle version d'Angular. Désormais, l'ensemble des modules Angular est compilé en utilisant le nouveau mode de compilation "partielle".
Concrètement, cela signifie que nous n'avons plus besoin d'effectuer une première compilation avec ngcc pour obtenir ensuite une construction plus rapide. Les modules sont déjà au format de sortie de ngcc, ce qui accélère considérablement le démarrage en mode développement par rapport aux versions précédentes.
Ce changement s'accompagne de l'introduction du cache Angular (.angular/cache), conçu pour accélérer les temps de compilation. Si nécessaire, il suffit de supprimer le dossier de cache pour le vider.
Notez bien que lors de la migration vers la version 13, veillez à ajouter la ligne "/.angular/cache" dans votre fichier .gitignore. Dans mon cas, Angular CLI n'a pas automatiquement ajouté cette ligne, il est donc important de le faire manuellement pour éviter de commettre des fichiers de cache dans votre référentiel.
Tester plus vite !
Avec la version 13, le nouveau teardown du TestBed, déjà introduit en opt-in avec la version 12.1, est désormais activé par défaut. Cette mise à jour corrige un léger problème d'injection de style, où les styles des composants n'étaient pas déchargés correctement à la fin de l'exécution d'une suite de tests. Cette situation ralentissait considérablement l'exécution des tests unitaires utilisant TestBed.
En pratique, cette modification n'entraîne aucune différence notable, si ce n'est une amélioration des performances lors de l'exécution des tests.
Template toujours plus strict
D'importants changements sont en cours pour améliorer le typage dans Angular.
Depuis un certain temps, nous avions déjà l'option "fullTemplateTypeCheck" disponible. Cependant, elle doit désormais être remplacée par "strictTemplates" qui offre un contrôle encore plus strict. Dans mon projet personnel, j'ai déjà constaté plusieurs erreurs détectées grâce à cette nouvelle configuration.
Formulaires plus strict
En vue de la prochaine version 14, les propriétés AbstractControl.status et AbstractControl.statusChanges ont été retravaillées au niveau du typage. Ainsi, le type "status" est maintenant FormControlStatus au lieu d'une simple chaîne de caractères, et le type "statusChanges" est devenu Observable
Ces modifications visent à préparer l'intégration complète du typage pour les formulaires dans la version 14 à venir.
Petite sucre dans les templates
À partir d'Angular 12.1, une amélioration a été apportée aux cas de passage d'objets dans les événements, tels que <button (click)="setName({ name: name })">Set name. Désormais, vous pouvez simplement écrire <button (click)="setName({ name })">Set name, comme vous le feriez dans du code JavaScript/TypeScript classique. Cela permet une syntaxe plus concise et familière.
Suppression des bindings préfixés
Jusqu'à présent, lorsqu'il s'agissait de lier des propriétés ou des événements, nous avions le choix entre différentes syntaxes telles que ((click)) pour les événements et [input] pour les propriétés. De plus, il était possible d'utiliser les syntaxes alternatives comme on-click ou bind-input. Cependant, ces syntaxes alternatives sont désormais dépréciées et seront éventuellement supprimées dans les prochaines versions.
Bien que ces syntaxes alternatives aient été utilisées par certains, en particulier dans les projets migrés depuis AngularJS, elles étaient moins courantes dans les nouvelles applications Angular. Ainsi, cette décision de dépréciation n'affectera probablement qu'un nombre limité de cas.
Conclusion
En conclusion, la montée de version d'Angular vers la 13 apporte des améliorations significatives en termes de typage dans les templates. Cependant, cela peut entraîner quelques problèmes lors de la mise à jour. Je vous recommande néanmoins de consacrer du temps à résoudre ces erreurs afin d'améliorer encore davantage la fiabilité de votre code.
En plus de cela, la version 13 propose également des améliorations de performances qui ne manqueront pas de rendre votre application plus réactive et fluide.
Dans l'ensemble, cette nouvelle version d'Angular offre un équilibre entre l'amélioration de la sécurité grâce à un typage plus strict et une optimisation des performances. Prenez le temps d'explorer ces nouveautés et d'apporter les ajustements nécessaires à votre projet.
