Angular.dev et v17 : je vous ai dit que la Renaissance était là

Il s’agit de loin de la version la plus excitante d’Angular jamais créée.

Et oui, j’inclus 2,0 dans mes calculs. La nouvelle marque, le nouveau site Web pour les documents et les didacticiels et les nouvelles fonctionnalités telles que le chargement différé de manière native en font une période extrêmement innovante pour le framework Angular.

De nombreuses nouveautés, comme le parcours d’apprentissage réécrit et les nouveaux didacticiels avec des éditeurs de code intégrés au navigateur, rendent Angular plus facile que jamais à prendre en main et à utiliser. Angulaire pour tout le monde.

Angular.dev—Tout ce que cela implique 🐕‍🦺

Nouvelle apparence, nouveau logo 🔥 et nouveaux documents, le tout en ligne maintenant sur angulaire.dev. La documentation Angular v17 sur angulaire.io enseignez également d’abord de manière autonome. Cependant, angulaire.dev est simplifié et révisé pour un guide d’intégration autonome plus propre. Voici juste quelques des points forts de la nouvelle maison pour Angular :

• Nouvelle structure de contenu axée sur « les débutants d’abord »
• Approfondir les guides détaillés destinés aux développeurs avancés
• Tous les guides ont été nettoyés et/ou entièrement réécrits
• CLI est vraiment clair maintenant sur ce qu’il possède
• De nombreux nouveaux guides axés sur les performances
• Référence API restructurée
• Feuille de route revisitée
• Recherche améliorée très
• 🔥 La plus grande fonctionnalité : des didacticiels intégrés pour un apprentissage de petite taille. Étapes angulaires du code côte à côte :
  ◦ Les didacticiels sont un endroit puissant où vous pouvez apprendre des parties spécifiques d’Angular dans un endroit isolé. Par exemple, vous pouvez parcourir l’injection de dépendances basée sur l’injection, le flux de contrôle et les images optimisées avec la nouvelle directive image en exécutant une mini-application Angular en direct, le tout dans la documentation Angular. Ces mini-applications s’exécutent dans un conteneur Web avec esbuild en utilisant le serveur de développement vite, ce qui est vraiment à la pointe de la technologie.
  ◦ Les didacticiels utilisent de nouveaux Vite serveur de développement sous le capot et sont construits dans des conteneurs Web pour une vitesse fulgurante. 🐇
• Tutoriels sans ambiguïté à partir de guides et de références

Angular.dev : un outil pédagogique démontrant l’Angular le plus rapide jamais conçu

Les nouveaux documents enseignent aux développeurs à plusieurs niveaux. À première vue, ils expliquent bien sûr aux développeurs comment utiliser Angular pour créer les meilleures applications possibles. Mais ils ne s’arrêtent pas là. Angular.dev est aussi, en soi, un outil pédagogique. Le retirer de GitHub vous donnera un exemple parfait de la façon dont le Angulaire l’équipe elle-même gérerait des choses comme SSR, SSG, le flux de contrôle, le chargement différé et, un jour dans un avenir proche, sans zone.

L’équipe souhaitait l’utiliser pour fournir également un exemple détaillé de certaines des autres fonctionnalités les plus récentes, telles que des images autonomes optimisées et des utilisations supplémentaires du flux de contrôle. L’équipe a démontré (avec le terrain de jeu de codage et les modules de mini-tutoriel de codage) comment utiliser Angular dans des conteneurs Web avec esbuild à l’aide du serveur de développement Vite.

Ceci, combiné au routeur Angular utilisant l’API de transition de vue, au chargement paresseux et à l’utilisation par le site du chargement de modèle différé, fait que ceci l’utilisation la plus rapide d’Angular jamais réalisée. Donc, si vous avez besoin d’un grand exemple d’application pour savoir comment implémenter correctement les dernières techniques Angular 17, ne cherchez pas plus loin !

Angular, aussi rapide que Vue sur ces benchmarks

Pour plus de détails sur la nouvelle maison d’Angular, consultez le message d’annonce officiel de l’équipe ou va regarder cet épisode d’Angular Air où Emma et Mark nous expliquent les nouvelles fonctionnalités du site et les raisons de ce grand changement.

Secrets, surprises et un épisode Angular 17 Angular Air réussi

Nouvelle syntaxe de flux de contrôle (aperçu pour les développeurs)

Une nouvelle syntaxe de flux de contrôle est annoncée dans l’aperçu du développeur. Cette nouvelle syntaxe est non seulement beaucoup plus facile à utiliser, mais rend Angular 90 % plus rapide dans certains cas. La syntaxe des étoiles d’avant n’était pas bien comprise et a découragé beaucoup de développeurs. Ce flux de contrôle intégré élimine également complètement le besoin d’importations, ce qui rend l’autonomie beaucoup plus facile.

Parce que for, if et switch sont désormais intégrés, ils n’ont pas besoin de passer par les mêmes API que ng-if ou ng-for devoir. Ils peuvent interagir à un niveau inférieur avec les structures de données d’Angular (d’où les améliorations de vitesse).

Le suivi est obligatoire mais aide également les développeurs à avoir un flux de contrôle plus performant

En plus de la nouvelle syntaxe, l’algorithme de la boucle for pour ce qui se passe dans le DOM est désormais beaucoup plus intelligent. Dans les composants matériels, l’équipe a remarqué des améliorations de performances d’environ 30 % pour les composants qui nécessitent beaucoup de flux de contrôle, ainsi que des améliorations de la mémoire.

Envie d’essayer ceci ? Nouvelle migration de flux de contrôle expérimental

Si vous souhaitez essayer ce nouveau flux de contrôle, il existe une nouvelle migration expérimentale du flux de contrôle : ng generate @angular/core:control-flow .

Chargement différé angulaire natif (aperçu du développeur)

Chargement différé des éléments du modèle avec 🔥@defer

Il y a une nouvelle syntaxe et c’est, de loin, la fonctionnalité la plus intéressante d’Angular 17. Defer change la donne pour le chargement paresseux dans Angular. Par défaut, @defer chargera le composant interne lorsque le navigateur est inactif :

Différer les options de déclenchement

Mais cette nouvelle fonctionnalité ne s’arrête pas là. Il existe des options de déclenchement prêtes à l’emploi avec le on mot-clé. L’un des déclencheurs de report les plus époustouflants est viewport, ce qui différera le chargement du contenu spécifié jusqu’à ce qu’il soit dans la vue. 🤯

Jessica a couvert toutes les options de déclenchement disponibles lors de la diffusion en direct de l’annonce de l’équipe Angular. Ils incluent des déclencheurs supplémentaires tels que l’inactivité, l’interaction, le survol et la minuterie.

Jessica en streaming enseigne les déclencheurs de report

Espace réservé et chargement des paramètres facultatifs

Les deux @placeholder et @loading les commandes ont des paramètres facultatifs pour empêcher le scintillement de se produire lorsque le chargement se produit rapidement. @placeholder a
minimumet @loading a minimum et after.

Mises à jour CLI : quelques nouveaux paramètres par défaut

Modifications de la version du nœud – Ouais

Depuis Angular v17, la prise en charge de Node.js v16 est abandonnée. Voici quelques détails sur la prise en charge de Node pour cette version d’Angular :

• v18 (^18.13.0) et v20 (^20.9.0) sont pris en charge
• La v21+ n’est pas prise en charge mais stable
• La prise en charge est basée sur le statut Node.js LTS

Au revoir, invite d’itinéraires

L’équipe a réalisé que la plupart des applications incluent des routes, donc à partir de la version 17, lors de la création d’une application Angular, les routes seront incluses par défaut. Vous pouvez désactiver les itinéraires si vous le souhaitez, mais plus besoin de demander « Voulez-vous des itinéraires dans cette application ».

Au revoir les modules

Le jour est venu. Autonome est désormais par défaut à partir de la v17. Ainsi, lors de la création de nouvelles applications dans Angular, elles seront sans module. Si vous souhaitez toujours que les modules soient inclus dans vos composants générés après cela, vous pouvez toujours le spécifier dans votre angulaire.json. Mais la valeur par défaut est désormais autonome. (Cela peut également être vu dans l’histoire du développeur qui est maintenant racontée sur angulaire.dev, où sans module est le chemin d’apprentissage par défaut.)

Protections et résolveurs de routeur

Les gardes et résolveurs de routeur fonctionnels sont désormais également la valeur par défaut.

RSS & Hydratation

Beaucoup de travail a été effectué sur le rendu côté serveur pour la v17. L’hydratation est maintenant prête pour la production !!! 🔥

Une nouvelle chaîne d’outils de construction a contribué à résoudre les difficultés liées à la création d’applications universelles/hybrides. Les applications rendues SSR dans Angular sont désormais construites avec Vite et esbuild, qui sont 3 fois plus rapides que les temps de construction SSR précédents. Ceci n’est plus disponible dans l’aperçu du développeur dans la v17 et est la valeur par défaut pour les applications nouvellement générées. Il y a même une invite maintenant lorsque vous ng new une application qui vous demande si vous souhaitez activer le rendu côté serveur ! 😍

Soyez également à l’affût à l’avenir des schémas qui vous aideront à migrer vos applications statiques vers le générateur d’applications ! 💪

Si vous avez déjà essayé SSR dans Angular, vous saurez qu’il y avait un scintillement de l’interface utilisateur lorsque la page était hydratée. Ce scintillement a maintenant été résolu depuis la v17 ! Honnêtement, si vous n’avez jamais essayé SSR, c’est MAINTENANT dans la v17 qu’il est temps de le faire. C’est légitime. 🔥

(Lors de l’annonce, l’équipe a mentionné que l’hydratation progressive et le streaming seraient les prochains plans d’hydratation pour Angular.)

Nouveau système de construction par défaut

Le système de build que j’ai mentionné à plusieurs reprises tout au long de cet article (celui utilisant Vite et esbuild) était en préversion pour 16 et maintenant, pour 17, il est par défaut.

• Regroupement d’applications ESBuild
• Serveur de développement Vite
• Prise en charge RSS/SSG
• Sortie ESM complète
• Par défaut pour les nouveaux projets
• Inscrivez-vous pour les projets existants (que vous devriez absolument considérer !!)
• Amélioration moyenne du temps de production de 67 %

Autres mises à jour

Transformations personnalisées qui mettent à jour les valeurs au fur et à mesure qu’elles sont reçues en tant qu’entrées

Cela simplifie l’utilisation @Inputainsi, par exemple, vous n’avez plus besoin de lier manuellement désactivé à un booléen afin de le spécifier sur une entrée :

Améliorations CSS

Dans la version 17, Angular accepte désormais CSS comme chaîne littérale : au revoir, tableau !

Test du nouveau terrain de jeu angulaire et de la syntaxe CSS v17

À venir pour Angular 18+

Réactivité

L’équipe travaille sur la réactivité depuis un certain temps maintenant avec l’introduction et l’adoption de la primitive réactive intégrée, les signaux. Toutefois, le travail est loin d’être terminé sur le front réactif. L’équipe prévoit de poursuivre l’histoire des signaux en ajoutant du prototypage, des composants de signal et, un jour, zone.js en option. Ces fonctionnalités, comme toujours, seront des éléments que vous pourrez adopter au fur et à mesure, selon vos besoins, et les nouvelles versions seront rétrocompatibles.

Avantages supplémentaires sur lesquels l’équipe travaille

• Composants basés sur le signal
• SSR amélioré et expérience de pré-rendu
• Hydratation partielle et diffusion améliorées

Nouvelle marque : pour moi et pour vous !

La nouvelle marque englobe notre passé ainsi que l’avenir vers lequel nous nous dirigeons. Je suis enthousiasmé par ce nouveau changement et j’espère que vous l’êtes aussi.

L’équipe Angular vous demande de changer de nom avec eux et utiliser le dossier de presse fourni dans le pied de page. Ce n’est pas aussi difficile qu’il y paraît. Vous pouvez télécharger toutes sortes de variantes du nouveau logo Angular, ainsi que des fichiers illustrateurs et une présentation des directives de la marque.

La présentation des directives de la marque est extrêmement utile, y compris des éléments tels que les combinaisons de couleurs exactes autorisées pour le nouveau dégradé de marque Angular, et les choses que vous pouvez et ne pouvez pas faire avec ledit dégradé spécifique.

Notre équipe, en soutien à Angular v17, a rebaptisé notre Interface utilisateur Kendo pour angulaire mascotte, pour célébrer cette étape monumentale que notre communauté et notre cadre franchissent. Kendo UI est prêt à prendre en charge la v17 d’Angular ! Donc, si vous êtes aussi enthousiastes que nous à l’idée d’utiliser les dernières fonctionnalités, nous sommes prêts à franchir cette étape avec vous.
ng update ensemble. 👯‍♂️

PS Angular v17 sort officiellement le npm le 8 novembre 2023.