À partir de la version 16, Angular a introduit des changements importants visant à améliorer l’expérience des développeurs (DX). Ces mises à jour simplifient le processus de développement, ce qui facilite et accélère l’écriture de code propre et efficace avec moins d’étapes. Les améliorations se concentrent sur la réduction des passe-partout, la simplification de la gestion des composants et l’offre d’une plus grande flexibilité, ce qui permet aux développeurs de se concentrer sur la création de fonctionnalités plutôt que de gérer une complexité inutile. Avec ces changements, Angular continue d’évoluer, garantissant que les débutants et les développeurs expérimentés peuvent créer des applications Web modernes plus efficacement.
Lazy Loading
Le chargement paresseux a un impact significatif sur les performances de l’application en vous permettant de charger le code uniquement lorsqu’il est nécessaire, plutôt que de tout charger à l’avance. Cela permet d’éviter que du JavaScript inutile ne soit regroupé et téléchargé, ce qui peut ralentir le temps de chargement initial, en particulier pour les applications volumineuses. En différant le chargement du code qui s’exécute dans des conditions spécifiques, le chargement différé optimise l’utilisation des ressources et améliore l’expérience utilisateur globale.
Dans Angular, lors de la définition des itinéraires, nous associons des pages à des chemins spécifiques. Avec le chargement différé, nous pouvons demander au compilateur de ne pas charger certains composants ou modules jusqu’à ce que leur itinéraire correspondant soit visité, ce qui réduit la taille initiale du bundle et accélère le démarrage de l’application.
Si vous souhaitez migrer vers la nouvelle syntaxe, vous pouvez suivre ces étapes ici
Dependency Injection
Dans cette section, je souhaite souligner l’importance d’utiliser la fonction utility inject() pour l’injection de service ou de composant, plutôt que de s’appuyer sur l’approche traditionnelle basée sur le constructeur. La fonction inject() est plus flexible et permet d’obtenir un code plus propre et plus lisible. Il simplifie les tests, prend en charge une meilleure gestion des dépendances et s’aligne sur les améliorations continues d’Angular pour améliorer l’expérience des développeurs. En adoptant inject(), vous pouvez tirer parti d’une méthode plus moderne et plus efficace pour gérer l’injection de dépendances dans les applications Angular.
Si vous utilisez toujours l’injection basée sur le constructeur et que vous souhaitez migrer vers la nouvelle syntaxe, vous pouvez suivre ces étapes ici !
Standalone
L’utilisation de composants autonomes vous donne plus de contrôle sur vos composants par rapport à l’approche traditionnelle des NgModules. Il vous permet d’importer des composants directement les uns dans les autres sans avoir besoin de passer par des modules. Les composants autonomes permettent de réduire le nombre de modules dans votre projet, ce qui se traduit par moins de code à gérer.
Si vous utilisez toujours NgModules et que vous souhaitez migrer vers des composants autonomes, vous pouvez suivre ces étapes ici !
Control flow (from version ≥ 17)
L’une des plus grandes améliorations d’Angular est l’introduction d’une nouvelle syntaxe pour la gestion du HTML. La syntaxe mise à jour pour la gestion des conditions et des itérations améliore considérablement la clarté et la maintenabilité du code. Auparavant, les directives aimaient *ngIf et *ngFor étaient utilisées, mais la nouvelle syntaxe offre des moyens plus rationalisés et plus propres de gérer de tels scénarios.
Si vous utilisez toujours *ngIf ou *ngForsi vous souhaitez passer à la nouvelle syntaxe, vous pouvez suivre ces étapes ici.
Self closing tag
Pour améliorer la visibilité du code dans votre éditeur, envisagez de formater les composants avec une meilleure syntaxe à l’aide de balises à fermeture automatique. Cette technique permet de créer un code plus propre et plus lisible. Voici un exemple d’utilisation de balises à fermeture automatique :
Les balises à fermeture automatique sont utiles lorsqu’un composant ne nécessite pas d’éléments enfants. Cette approche améliore la clarté du code, ce qui facilite sa gestion et sa lecture, en particulier dans les projets de grande envergure.
PS : Il n’y a pas de script de migration schématique pour vous aider à convertir vos composants à cette approche (la pull request est encore en brouillon sur GitHub, Merci à Enea Jahollari). Toutefois, si vous utilisez ESLint dans votre projet, vous pouvez activer cette règle à partir de @angular-eslint
{
« files »: [« *.html »],
« extends »: [« plugin:@angular-eslint/template/recommended », « plugin:prettier/recommended »],
« rules »: {
« @angular-eslint/template/prefer-control-flow »: « error »,
« @angular-eslint/template/prefer-self-closing-tags »: « error »,
« @angular-eslint/template/use-track-by-function »: « error »
}
},
Conclusion
Ces pratiques sont cruciales pour adapter votre projet aux évolutions futures d’Angular. Si vous souhaitez lire l’article en anglais, retrouvez le ici.
