Une sortie pleine de joie pour la période des fêtes : Angular 19

Angular 19 est livré avec une API Signal stable, une hydratation incrémentielle et un nouveau guide de style. Découvrez les grandes nouvelles du lancement de la v19 aujourd’hui (19 novembre 2024) !

Aujourd’hui, l’équipe Angular a publié sa 19e version de ce framework bien-aimé, avec un joyeux ciel couvert pour tout l’événement :

« Nous sommes meilleurs lorsque nous travaillons ensemble. C’est pourquoi nous collaborons avec Firebase, Netlify, IDX, Puppeteer, Playwright, Vite et de nombreuses autres équipes de l’écosystème pour vous apporter de la joie lors de la création d’applications Web. — Minko Guechev

Cela semble être l’ambiance, alors que l’équipe continue de déployer de nouvelles fonctionnalités étonnantes pour le framework à un rythme constant, ce qui rend les utilisateurs finaux et les développeurs heureux.

Minko a également passé en revue les innovations les plus significatives ainsi que les défis que l’équipe Angular a relevés dans les versions récentes, dans l’adresse State of Angular au NG Belgrade. Cela incluait la montée des signaux, rendant Zone.js facultatif pour les développeurs Angular et une approche globale du développement axée sur la communauté.

Dans l’événement stream ce matinde nombreux membres de l’équipe Angular ont présenté les dernières fonctionnalités de la v19 qui s’appuient sur ces monuments les plus récents.

Il y a tellement de choses à couvrir et si peu de temps cette période des fêtes, couvrons donc les trois meilleures fonctionnalités d’Angular v19 que vous ne voulez vraiment pas manquer.

• Stabilisation et ajouts de l’API de signal
• Mises à jour SSR : hydratation incrémentielle
• RFC pour NOUVEAU✨ Guide de style

Stabilisation et ajouts de l’API de signal

Avant Angular v19, le signal et les signaux calculés étaient stables. Cependant, il y avait une longue liste de signaux (voir l’image ci-dessous de Jeremy les parcourant) qui sont également tous désormais stables !

Maintenant que celles-ci sont stables, l’API Signals comporte deux autres fonctionnalités qui sont dans l’aperçu du développeur pour la version 19 : les signaux et les ressources liés.

Les signaux liés sont…

Les signaux liés sont inscriptibles (vous ne pouvez pas écrire sur un signal d’entrée, mais vous pouvez le faire sur un signal lié). Ils ont un état qui dépend d’un autre état réactif. Un bon cas d’utilisation serait un état local inscriptible qui dépend d’autres signaux. Pensez donc « signal d’entrée inscriptible ».

→ Lorsque l’expression change, la valeur du signal lié revient à celle qui a été calculée.
→ « Le linkedSignal La fonction vous permet de créer un signal pour maintenir un état intrinsèquement lié vers un autre État. — Documents angulaires
→ Tout comme un signal mais au lieu de la valeur par défaut, accepte le calcul fn.

La ressource est…

La ressource est la manière dont un signal peut charger des données de manière asynchrone en réponse à l’évolution des dépendances. La ressource exposera les données chargées sous forme de signal et ses états de chargement et d’erreur sont également des signaux. 🤯

→ La requête est essentiellement un signal calculé de tout ce dont vous avez besoin pour faire une requête.
→ Un chargeur est nécessaire pour exposer les données liées.
→ La ressource est quelque peu accessible en écriture car vous pouvez modifier les données provenant du serveur.
→ RFC à venir comme ressource : les noms, la syntaxe et les fonctionnalités vont tous être discutés et intégrés au fur et à mesure que la communauté s’exprimera dans ce nouvel ajout au framework.

Il y a un rxResource version aussi, et Deborah Kurata a réalisé une vidéo qui tue sur rxResource() contre. Resource() cela vaut la peine d’être vérifié. Je l’ai invitée à venir sur Angular Air et à en parler davantage avec nous le 5 décembre. Alors venez rejoindre le stream et posez toutes vos questions brûlantes !!

Mises à jour SSR : hydratation incrémentielle

Dans la v16, Angular offrait une prise en charge complète de l’hydratation des applications, dans les vues différées v17, dans la v18 eventReplay. Ces trois éléments nous ont amenés à offrir aujourd’hui une hydratation supplémentaire. Cependant, afin de comprendre pleinement à quel point cette fonctionnalité est étonnante, il est peut-être nécessaire de raconter une histoire SSR.

L’hydratation complète de l’application dans la v16 s’accompagnait d’un coût de scintillement/changement de mise en page. Les vues différées ont réduit le JS qui devait être initialement chargé et corrigé les changements de disposition potentiels avec des espaces réservés, nous offrant ainsi une meilleure forme d’hydratation dans nos applications Angular. Cependant, les espaces réservés avaient un coût, le contenu de l’espace réservé devait être remplacé et, avant cela, il n’avait aucune interactivité.

L’hydratation incrémentielle consiste à restituer le modèle principal côté serveur, de sorte qu’il devrait ressembler à ce qu’il sera après le déclenchement du bloc de report, puis, côté client, laisse ce contenu déshydraté. Le contenu est donc authentique, aucun espace réservé n’est nécessaire. Mais, étant dans un blocage différé, comme on pouvait s’y attendre, nous ignorons le téléchargement JS.

Voici un aperçu de la façon de mettre en œuvre une hydratation progressive ; c’est désormais une option supplémentaire pour les blocs différés :

Alors maintenant, la prochaine question évidente : que se passe-t-il si quelqu’un essaie d’interagir avec ce contenu qui n’a pas encore été hydraté ?

Vallée étrange

Il existe un terme SSR appelé « Uncanny Valley » qui décrit l’état de votre application rendue côté serveur lorsque JS/Angular n’est pas encore chargé. Si un utilisateur essaie de cliquer sur quelque chose, rien ne se passe, car l’application n’est pas encore complètement hydratée.

La réponse de l’équipe Angular aux éléments de contenu non hydratés et non interactifs (ou vallée étrange) est la fonctionnalité précédemment publiée, EventReplay ! La relecture d’événements permet aux développeurs de capturer les événements déclenchés pendant l’étrange vallée. Ensuite, commencez à hydrater le contenu et rejouez l’événement lorsque le JS est chargé et prêt.

L’hydratation progressive est si puissante, notamment en combinaison avec EventReplay. Mais les fonctionnalités ne s’arrêtent pas là ! Il est également livré avec un nouveau déclencheur (never) qui peut être utilisé pour dire à des choses comme le contenu statique d’un blog de ne jamais s’hydrater, ce qui est un excellent moyen de réduire la surcharge de vos applications !!

Pour commencer à utiliser une hydratation progressive, ajoutez provideClientHydration(withIncrementalHydration) à votre candidature providerset vous pourrez alors commencer à utiliser les déclencheurs d’hydratation dans vos blocs différés !

RFC pour NOUVEAU✨ Guide de style

Celui-ci n’est pas strictement une fonctionnalité angulaire publiée dans cette version. Cependant, cela met en évidence le cœur du mouvement Angular actuel : le développement piloté par la communauté pour apporter de la joie aux développeurs. Je suis très enthousiasmé par un guide de style mis à jour et la demande de commentaires est actuellement toujours ouverte. L’équipe Angular souhaite avoir votre avis alors qu’elle façonne l’avenir de notre plus merveilleux framework. Alors jetez un œil et donnez votre avis !!

C’est un Wrap 🎁

Il y a eu de nombreux autres points forts, comme par exemple, le mode autonome est désormais la version par défaut. Plus besoin de dire standalone: true lorsque vous souhaitez obtenir les dernières nouveautés. La CLI avec ng update command va être utile pour cela, afin que vous n’ayez pas à retourner manuellement vos drapeaux autonomes. Il existe également trois nouveaux outils de refactoring dans la v19 ainsi que le refactoring ASL directement dans votre IDE qui sont SUPER utiles avec toutes ces nouvelles fonctionnalités déployées plus rapidement que la lumière.

Assurez-vous de consulter la documentation ou l’événement de flux v19 pour découvrir toutes les autres fonctionnalités étonnantes. L’équipe a travaillé très dur sur celui-ci – je suis impressionné par tout ce qu’ils y ont apporté.

Et pour utiliser de nouvelles fonctionnalités (comme le mode autonome) avec Interface utilisateur Kendo pour angulaireassurez-vous de consulter nos documents pour connaître les dernières façons d’intégrer nos composants. Comme toujours, nous prenons en charge Day-Zero pour la v19 d’Angular. Nous sommes très enthousiasmés par la direction et l’ambiance que l’équipe Angular propose, et nous espérons les égaler au cours de l’année à venir.

A la prochaine, joyeuses fêtes et joyeux Angular v19 !!