Dernières améliorations d'Angular 17 : tout ce que vous devez savoir

D'après les recherches menées par Statista, Angular est le framework de développement Web le plus utilisé, exploité par 17,46 % des personnes interrogées ^[i] . Pour maintenir cette position, améliorer les performances et simplifier le codage, l'équipe Angular a publié sa nouvelle version – Angular 17 le 11 septembre 2023.

Le framework Angular renouvelé est guidé par la vision de Sarah Drashner, directrice de l'ingénierie chez Google et chef de l'équipe Angular. Il apporte des améliorations incrémentielles, garantissant une compatibilité ascendante tout en s'alignant sur les dernières tendances en matière de frameworks front-end.

Avec Angular 17, les entreprises et les développeurs peuvent imaginer une expérience de développement améliorée. Ici, la nouvelle syntaxe du flux de contrôle, la prise en charge améliorée du rendu côté serveur (SSR), une CLI turbocompressée par esbuild et d'autres mises à jour contribuent à un flux de travail de développement plus fluide et plus dynamique.

Dans cet article de blog, vous pouvez décoder les nouvelles améliorations et mises à jour du framework de développement Web Angular 17. Vous comprendrez également pourquoi les développeurs devraient en tirer parti, en facilitant la collaboration, en encourageant la réutilisation du code et en garantissant la création d'applications Web évolutives et maintenables.

Commençons!

Principales fonctionnalités et améliorations d'Angular 17

1. Une documentation tournée vers l’avenir

Angular 17 introduit une amélioration significative à sa documentation avec le développement d'une nouvelle maison sur angulaire.dev. Cette refonte comprend une structure remaniée, des guides mis à jour, un contenu enrichi et une plate-forme de pointe qui favorise un parcours d'apprentissage interactif pour Angular et Angular Command Line Interface (CLI).

L'aperçu bêta d'angular.dev marque le début d'une nouvelle ère, avec l'intention d'en faire le site Web par défaut pour Angular dans la version 18. Le point culminant intègre WebContainers, permettant aux utilisateurs d'exploiter la puissance de la CLI Angular directement dans un navigateur Web moderne. Cela promet en outre une expérience de documentation tournée vers l’avenir et immersive.

2. Flux de contrôle intégré

Dans Angular 17, une amélioration notable est l'introduction d'une nouvelle syntaxe de bloc de contrôle, remplaçant les directives structurelles traditionnelles telles que *ngIf, *ngFor et *ngSwitch. Cette évolution offre aux développeurs une plus grande flexibilité et une meilleure lisibilité du code des modèles.

Par exemple, les blocs @if et @else offrent un moyen plus propre d'afficher du contenu de manière conditionnelle, à l'aide d'expressions logiques. Le bloc @for simplifie l'itération sur les collections, permettant un code plus expressif et concis. De plus, les blocs @switch, @case et @default facilitent un flux de contrôle efficace, améliorant ainsi la gestion de plusieurs conditions.

Pour bénéficier de ces améliorations, les développeurs peuvent migrer les modèles existants à l'aide du schéma fourni. Cela conduira à une approche plus moderne et rationalisée du développement de modèles dans Angular 17.

3. Boucle @for intégrée

La fonctionnalité de boucle @for intégrée dans Angular 17 représente une amélioration significative de l'expérience du développeur et de la vitesse de rendu. Cette syntaxe résout un goulot d'étranglement de performances courant observé dans les applications qui s'appuient sur *ngFor en rendant obligatoire l'utilisation de « track » pour une détection efficace des modifications. Cela garantit également un processus de rendu plus rapide.

Contrairement à son prédécesseur, la fonctionnalité « piste » est intégrée de manière transparente en tant qu'expression dans le modèle, éliminant ainsi le besoin d'une méthode supplémentaire dans la classe du composant. Notamment, la boucle @for intégrée fournit également un raccourci pratique pour gérer les collections avec zéro élément via un bloc @empty facultatif. Cette fonctionnalité non seulement rationalise le développement, mais améliore également considérablement les performances des applications Angular, marquant une étape notable dans l'évolution du framework.

4. Vues différées

Dans Angular 17, une amélioration significative appelée Deferrable Views a été introduite en réponse à la demande de la communauté Angular concernant un mécanisme intuitif permettant de charger paresseusement des composants, des directives et des tuyaux.

Cette nouvelle fonctionnalité vise à rendre le processus de chargement différé des dépendances plus intuitif et pratique. Les vues différées permettent aux développeurs de charger de manière déclarative des parties de leurs modèles jusqu'à ce qu'elles soient nécessaires, optimisant ainsi la taille initiale du bundle et améliorant le temps de chargement initial de l'application. Ceci est réalisé grâce à l’utilisation de la nouvelle syntaxe de flux de contrôle « @-syntax » dans les modèles.

Étant donné que les vues différées fournissent des solutions intégrées et gérées pour le chargement différé, les développeurs peuvent exprimer leur intention sans gérer les importations dynamiques détaillées, les observateurs d'intersection ou les gestionnaires d'événements. Cette fonctionnalité prend également en charge la prélecture pour une disponibilité plus rapide des ressources.

De plus, les développeurs peuvent utiliser des déclencheurs intégrés et des conditions personnalisées pour spécifier quand et comment le chargement différé doit avoir lieu. De plus, les vues différées réduisent le code passe-partout, gérant automatiquement la gestion des dépendances en arrière-plan.

5. Rendu côté serveur amélioré (SSR)

Les capacités de rendu côté serveur d'Angular 17 permettent aux développeurs d'améliorer les performances des applications et l'expérience utilisateur. La fonctionnalité Hydration Boost rationalise le processus d'hydratation JavaScript côté client, minimisant le scintillement et assurant une transition plus fluide vers les pages Web interactives.

Angular 17 adopte également le format standardisé EcmaScript Modules (ESM) pour SSR, simplifiant les builds et améliorant la compatibilité avec les outils populaires. De plus, il se concentre sur la réduction de la taille des bundles SSR grâce à des techniques de fractionnement de code, conduisant à des réponses plus rapides du serveur et à une optimisation améliorée des moteurs de recherche. Ces avancées positionnent Angular 17 comme un choix incontournable pour créer des applications Web hautes performances et conviviales pour le référencement.

6. Signal stable

Angular 17 introduit une évolution révolutionnaire avec la stabilisation des Signaux, un outil incontournable pour les amateurs de réactivité. Abandonnant son étiquette « aperçu pour les développeurs », Signals se présente désormais comme une solution robuste pour gérer l'état et faciliter les mises à jour des composants.

L’intégration de Signaux avec Change Detection.OnPush apporte un niveau de précision. Cela garantit que les composants sont actualisés uniquement lorsque leur signal spécifique change, optimisant ainsi les performances en évitant les nouveaux rendus inutiles. Le retrait de la méthode de mutation au profit de mises à jour immuables améliore encore la prévisibilité et la propreté du maintien de l'historique de l'état. Alors que Signals est à l'honneur, Effects, toujours en avant-première pour les développeurs, donne un aperçu de l'avenir de la gestion d'état d'Angular, présentant de puissantes capacités pour les opérations asynchrones.

Essentiellement, Angular 17 fournit aux développeurs un ensemble d'outils raffinés, comprenant des signaux stables, l'intégration OnPush, des mises à jour immuables et le potentiel évolutif des effets. Cela favorise finalement la création d’applications bien structurées.

7. Création de performances avec esbuild

L'adoption d'esbuild dans Angular 17 marque une avancée significative dans l'amélioration des performances de build pour les projets Angular. S'appuyant à l'origine sur Webpack, la CLI Angular est passée à l'exploitation d'esbuild, un outil plus récent célébré pour sa nature conviviale et sa vitesse remarquable, avec plus de 20 000 téléchargements hebdomadaires.

L'intégration d'esbuild a été implémentée dans Angular 16 en tant qu'aperçu pour les développeurs et est maintenant devenue une implémentation stable dans Angular 17. Cette intégration est devenue le générateur par défaut pour les nouveaux projets via l'Application Builder. Pour les projets existants, les développeurs sont encouragés à envisager de passer à esbuild en mettant à jour l'entrée du constructeur dans angulaire.json.

Avec cette intégration, les opérations ng serve et ng build présentent une augmentation substantielle de la vitesse, tirant parti du serveur de développement Vite pour une création efficace de packages npm uniquement lorsque cela est nécessaire. L'intégration par l'équipe CLI de diverses optimisations de performances contribue en outre à un processus de construction accéléré, ng build atteignant souvent une amélioration de vitesse d'un facteur 2 à 4. Cette transition souligne l'engagement d'Angular à fournir aux développeurs des outils qui non seulement simplifient les flux de travail, mais améliorent également considérablement l'efficacité de la construction de projets.

8. Composants autonomes

Les « composants autonomes » sont une fonctionnalité révolutionnaire d'Angular 17 qui permet la création et l'utilisation de composants sans avoir besoin d'un module parent. Dans ce changement de paradigme, le composant racine, illustré par « AppComponent », est marqué comme autonome à l'aide de la propriété « standalone : true » dans le décorateur de composant. Cet attribut signifie que le composant fonctionne indépendamment d'un module parent. De plus, au lieu de s'appuyer sur un module, le composant utilise le tableau « imports » pour apporter les dépendances nécessaires, comme le module routeur.

La fonction « bootstrapApplication » est ensuite utilisée pour lancer l'application, démontrant une rupture avec l'approche traditionnelle centrée sur NgModule. La nouvelle flexibilité des composants autonomes facilite un style de développement modulaire et encapsulé, démontrant l'engagement d'Angular en faveur de l'évolution et de l'amélioration de l'architecture des composants.

Comment migrer vers Angular 17 ?

Pour mettre à niveau votre application Angular existante vers la version 17, suivez ces étapes :

• Tout d'abord, mettez à jour globalement votre Angular CLI vers la version 17 à l'aide de la commande 'npm install -g @angular/cli@17'.

• Ensuite, mettez à jour vos packages de base Angular en exécutant 'ng update @angular/core'.

• Si vous utilisez des packages Angular supplémentaires, mettez-les à jour individuellement, à l'aide de code, tel que « ng update @angular/material » pour Angular Material.

• Ensuite, testez minutieusement votre application pour vous assurer qu’elle fonctionne comme prévu après les mises à jour.

Certains conseils que vous pouvez suivre ici incluent la mise à niveau vers des versions mineures entre les mises à jour majeures, la sauvegarde de votre code et de votre base de données avant la mise à niveau et la vérification de la compatibilité des bibliothèques tierces. Vous devez également consulter la documentation Angular et les forums communautaires pour obtenir de l'aide si des problèmes surviennent pendant le processus de mise à niveau. Ces étapes simplifiées garantiront une transition en douceur vers la dernière version d'Angular tout en minimisant les défis potentiels.

Prêt à créer des applications robustes, riches en fonctionnalités et modernes avec Angular ? Parlez à nos experts!

Les références:

^[i] Statiste