Angular introduit les vues différées lors de sa nouvelle version 17 sorti en novembre 2023. Elles vont faciliter le travail des développeurs utilisant Angular.
Dans cet article, vous verrez comment s’utilise cette nouveauté pour votre application Angular.
Avant de se lancer
Vous avez la possibilité de suivre notre formation Angular durant laquelle vous apprendrez à développer des applications Web interactives écrites en TypeScript, à créer vos propres composants réutilisables et à maitriser les différentes facettes de la technologie.
Si vous avez déjà de l’expérience sur Angular, nous vous proposons notre formation Angular Avancé. Vous apprendrez à résoudre des problèmes d’orchestration sur RxJS, l’amélioration des performances de votre site Web ou développer et gérer des composants Angular.
L’équipe Ambient IT
Une nouvelle initiative
La communauté d’Angular souhaitait une méthode intuitive et intégrée pour le Lazy Loading, les composants, les tuyaux et les directives. Les vues différées ont été introduites dans les nouveautés d’Angular 17 afin de rendre le processus de chargement différé des dépendances plus intuitif. Cette fonctionnalité a été mise en place parallèlement à la nouvelle syntaxe de flux de contrôle qui utilise la même syntaxe. L’objectif est que la fonctionnalité soit ergonomique et familière lors de son utilisation dans vos modèles de composants.
Les vues différées aident à optimiser la taille de votre bundle initial ainsi qu’à améliorer la charge initiale de l’application en permettant la charge des parties de votre modèle jusqu’à ce qu’elles soient nécessaires ultérieurement. Il se peut qu’avec le Lazy Loading, un composant volumineux soit chargé seulement lorsqu’il est dans la fenêtre. Ce composant peut également être chargé en se basant sur une interaction par clic. Ces deux cas sont possibles de manière native dans un modèle utilisant les vues différées.
Les routes à chargements différé n’ont pas été modifiées. Le lazy loading au niveau de la route garantit un très bon moyen pour diviser vos morceaux d’application par route. Il est possible de combiner des itinéraires de lazy loading grâce à des vues différées, et ainsi pour maximiser l’optimisation des fragments de votre application. Cela offre le meilleur itinéraire vers une application optimisée.
Faits saillants rapides
Les vues différées offrent une expérience déclarative aux développeurs qui peuvent exprimer leur intention dans le modèle. Il n’est pas nécessaire de gérer des importations dynamiques détaillées d’ajouter des gestionnaires d’évènements ou d’utiliser des observateurs d’intersection. Un ensemble de déclencheurs intégrés ont été crées qui peuvent être utilisés seuls ou combinés avec une condition particulière pour spécifier comment et quand vous souhaitez que le chargement différé se produise. Par exemple :
<blog-post-cmp />
@defer (sur la fenêtre) {< /span>} @placeholder { />commentaires
<imgsrc=”placeholder.png” alt=”espace réservé” />>Cet exemple utilise un bloc d’espace réservé pour personnaliser tout ce qui précède le chargement différé. Un bloc de chargement et d’erreur existe pour personnaliser davantage ce qui est affiché, ce qui offre une flexibilité nécessaire pour procurer la meilleure expérience utilisateur avec votre application.
Prélecture
Les vues différées peuvent prendre en charge nativement la prélecture, c’est-à-dire que les ressources seront disponibles plus rapidement que si elles avaient été uniquement chargées en différée. Elle prend aussi en charge l’ensemble des déclencheurs et des conditions personnalisées et permet de personnaliser l’expérience du chargement différé de votre application. Voici un exemple :
<blog-post-cmp />
@defer (sur la fenêtre d'affichage ; prélecture sur inactif) {
<commentaires />
} @placeholder {< /span> />>"placeholder"=alt” placeholder.png"=srcimg
< Le composant de commentaire s’affichera immédiatement lorsqu’il entrera dans la fenêtre d’affichage.
Des fonctions simplifiées
Tout le travail de gestion des dépendances se déroule dans l’ombre. En effet, vous avez juste à écrire votre bloc @defer et d’utiliser vos composants comme vous le feriez habituellement à l’intérieur de ce bloc. Angular va extraire automatiquement les dépendances sous le capot et crée des importations dynamiques spécialement pour vous. Par conséquent, le chargement différé ne passera pas par plusieurs chemins pour fonctionner dans votre application.
Vers l’avenir
Grâce aux diverses opinions de leur communauté, cela constitue une base solide sur laquelle ils peuvent s’appuyer. L’une des premières choses qu’ils explorent est de savoir comment apprendre aux blocs de report d’attendre l’initialisation asynchrone des composants. La communauté d’Angular a exprimé un grand intérêt pour la manière dont l’équipe Angular arrive à intégrer les vues différées pour la récupération de données. Plus précisément, le déclenchement des blocs de report une fois la récupération des données terminée.
Plusieurs données sont récupérées afin de connaître la meilleure solution pour résoudre ce problème. Les vues différées sont de bons éléments de base pour une hydratation progressive.
Les vues différées sont en aperçu développeur, au fur et à mesure que les développeurs se familiariseront avec cette nouvelle fonctionnalité, Angular collectera les commentaires et ils amélioreront la fonctionnalité afin qu’elle ne soit plus en aperçu développeur dans leur prochaine version.
