Flux RSS du blog Angular - Med... Note

Flux RSS du blog Angular - Medium

Le site web semble être le blog officiel d'Angular, un framework d'application web. La page d'accueil affiche une liste d'articles de blog récents intitulés comme "10ème anniversaire du projet Angular". Les thèmes courants incluent la technologie, le développement et Angular lui-même. Il y a une barre de recherche, ainsi que des catégories, des étiquettes et une page à propos. Il fournit des ressources, des mises à jour et des tutoriels liés au framework Angular.

Fil de notes

CdXz5zHNQW_efWO6p8BJv.png
L'équipe Angular a introduit l'outil Web Codegen Scorer pour améliorer la génération de code web pilotée par l'IA. Cet outil aide à optimiser les LLM pour l'état actuel du framework Angular et facilite l'intégration des fonctionnalités d'application évolutives. Il aide à analyser et à déboguer les échecs courants des LLM, permettant une itération plus rapide sur les améliorations. Le Web Codegen Scorer a été développé en collaboration avec des experts en IA, en sécurité et en accessibilité pour une évaluation robuste. Angular a également collaboré avec l'équipe SolidJS, démontrant le potentiel de l'outil pour améliorer la génération de code pour d'autres frameworks. L'outil est open-source pour encourager les contributions de la communauté et une adoption plus large des frameworks. Angular v20.2 inclut le serveur Angular MCP, fournissant aux agents de codage des outils intégrés pour les sessions de développement. Les futures fonctionnalités du serveur MCP incluront des outils de modernisation pour la migration de syntaxe et un moteur RAG local pour des informations d'IA à jour. Le support Angular a été intégré aux produits d'IA de Google, Gemini Canvas et Google AI Studio. L'équipe explore également un framework axé sur l'IA, se concentrant sur les capacités des agents pour les bases de code volumineuses et minimisant les problèmes courants des LLM. Ils expérimentent des formats d'auteur et des structures d'application, promettant la transparence dans les futurs développements Angular. L'équipe Angular s'engage à soutenir les développeurs dans la création d'applications évolutives et alimentées par l'IA.
CdXz5zHNQW_J8s9Nu3Qbl.png
Angular a publié des mises à jour mineures v20.1 et v20.2, mettant l'accent sur la productivité des développeurs et les améliorations de l'intelligence artificielle. Un point fort est la disponibilité en production d'Angular sans zone, offrant des avantages tels que des tailles de bundle plus petites et une débogage améliorée. De nouveaux primitives d'animation, animate.enter et animate.leave, permettent une intégration plus facile des animations CSS natives et déprécient le vieux package @angular/animations. L'équipe élargit ses offres d'IA avec des guides pour la construction d'applications alimentées par l'IA et améliore les outils de codage assistés par l'IA.Ils travaillent également sur un serveur MCP expérimental pour répondre aux besoins de l'IA, tels que la recherche de documentation et les meilleures pratiques pour les LLM. Les outils de développement Angular incluent maintenant une visualisation des routes et des graphiques de signal pour une débogage améliorée. Les tests de composants ont été simplifiés avec la prise en charge de la transmission d'objets de liaison à TestBed.createComponent.Le composant Mat Menu peut maintenant fonctionner comme un menu contextuel, et NgComponentOutlet prend en charge les injecteurs d'environnement personnalisés pour les composants dynamiques. D'autres améliorations incluent un guide de routage revu, un signal de navigation actuelle, une propriété détruite sur DestroyRef, et une meilleure prise en charge des opérateurs de modèle et des attributs ARIA. Angular prend maintenant en charge TypeScript 5.9 et a apporté des améliorations à httpResource et httpClient. La communauté a fourni des commentaires significatifs pour le nouveau mascotte Angular, avec un design final qui sera révélé plus tard cette année.
CdXz5zHNQW_bylcGSZJTi.png
Les équipes Angular et Chrome ont collaboré pour apporter des données et des insights spécifiques à Angular directement dans le panneau de performance des outils de développement Chrome, créant une expérience de profilage unifiée pour les développeurs. Cette intégration permet aux développeurs de combiner les avantages des deux outils, offrant une vue plus synchronisée et complète des performances de leur application. La nouvelle piste personnalisée pour Angular dans les outils de développement Chrome fournit des données de performance en utilisant des concepts Angular tels que le démarrage de l'application, les composants, la synchronisation de l'interface utilisateur et les hooks de cycle de vie. Les diagrammes de flammes de la piste personnalisée regroupent les appels de fonction ensemble sous les composants et les autres concepts Angular correspondants, permettant aux développeurs de zoomer sur des fonctions individuelles pour une vue plus granulaire. Les entrées du diagramme de flammes sont codées par couleur pour aider les développeurs à identifier rapidement ce qui se passe dans leur application, distinguant entre le code de l'application, les autres scripts ou les activités du navigateur. Les couleurs représentent différents aspects de l'application, tels que les services d'injection de dépendances, les modèles compilés par Angular et les points d'entrée. La piste personnalisée est interactive, permettant aux développeurs de cliquer sur une entrée dans le diagramme de flammes pour révéler plus d'informations détaillées sur une entrée donnée. Pour commencer, les développeurs doivent s'assurer qu'ils utilisent la dernière version d'Angular et une version à jour de Chrome, exécuter leur application Angular en mode développeur et activer la piste personnalisée en tapant ng.enableProfiling() dans la console. Cette intégration démontre l'engagement continu d'améliorer l'expérience du développeur au sein de l'écosystème Angular, permettant aux développeurs de construire des applications plus rapides et plus efficaces.
CdXz5zHNQW_arec9d2R1S.png
Angular a réalisé des avancées significatives au cours des deux dernières années, notamment en matière de réactivité avec Signals et d'applications sans zone. La dernière version, Angular v20, se concentre sur le perfectionnement des fonctionnalités en cours de développement pour une expérience développeur solide. Cette version stabilise des API telles que effect, linkedSignal et toSignal, et promeut le zoneless en version préliminaire pour les développeurs. Elle améliore également le débogage avec Angular DevTools et s'associe à Chrome pour des rapports Angular personnalisés directement dans les Chrome DevTools. La version améliore l'expérience développeur grâce à des mises à jour du guide de style, à la vérification des types et à la prise en charge du service de langage. De plus, elle fait progresser le développement de l'IA générative (GenAI) et lance une demande de commentaires pour une mascotte officielle d'Angular. Cette version promeut les fonctionnalités de réactivité en version stable, notamment les API signal, computed, input et view queries. Elle introduit également des API expérimentales, notamment l'API resource et httpResource, pour gérer l'état asynchrone avec Angular. En outre, elle promeut le zoneless en version préliminaire pour les développeurs et consolide Angular sur le serveur avec l'hydratation incrémentale et la configuration du mode de rendu au niveau des routes. Enfin, elle améliore l'expérience développeur avec des informations sur les performances dans Chrome DevTools et des ajouts et améliorations du framework.
CdXz5zHNQW_t5gWIMi5Tb.png
Le processus de prévisualisation des développeurs d'Angular permet aux développeurs d'essayer des API et des fonctionnalités avant qu'elles ne soient promues en production. Cela permet également à l'équipe Angular d'ajuster ces API en fonction de l'utilisation réelle et des commentaires. Grâce aux commentaires sur l'API effect(), l'équipe a identifié plusieurs améliorations à la conception qui permettront de résoudre les problèmes réels de fonctionnalité et d'expérience développeur. L'une des modifications consiste à supprimer le drapeau allowSignalWrites, qui visait à encourager les bonnes pratiques, mais qui a finalement découragé l'utilisation de effect() dans les cas où il serait raisonnable de mettre à jour les signaux. Au lieu de cela, l'équipe se concentrera sur d'autres moyens d'encourager les bonnes pratiques, notamment l'ajout de nouveaux assistants de réactivité si nécessaire. Le moment où les effets s'exécutent est également en train d'être modifié, les effets s'exécutant désormais dans le cadre de la hiérarchie des composants pendant la détection des changements. Ce changement vise à rendre le moment des effets plus prévisible et plus utile, et à résoudre les bogues liés aux effets qui s'exécutent trop tôt ou trop tard. La plupart des utilisations de l'API effect() continueront de fonctionner comme prévu, mais certains cas d'utilisation peuvent être affectés, tels que les effets sur les résultats de la requête de vue et toObservable() des signaux d'entrée. L'équipe Angular a corrigé environ 100 cas où le changement de moment a eu un impact significatif sur le code pendant les tests chez Google. Suite à ces modifications, l'API effect() restera en prévisualisation pour les développeurs au moins jusqu'à la version 19.0, avec des plans pour stabiliser l'API dans une prochaine version mineure. L'équipe Angular remercie la communauté pour ses commentaires et son soutien, qui ont joué un rôle crucial dans le développement d'Angular.
Angular v17.3 introduit une API améliorée pour déclarer des sorties, disponible en tant que version préliminaire pour les développeurs. La nouvelle API simplifie le processus de déclaration des sorties dans les directives et s'aligne sur d'autres API basées sur des fonctions comme les entrées de signal. Elle fournit également des types plus précis pour émettre des valeurs, améliorant ainsi la sécurité des types et réduisant le risque d'erreurs de runtime subtiles.Les développeurs peuvent déclarer des sorties en utilisant la fonction output(), qui initialise un champ de classe et permet d'émettre des valeurs en invoquant la fonction .emit. Pour les sorties basées sur des flux observables, la fonction outputFromObservable() peut être utilisée.La nouvelle API n'est pas un signal mais une amélioration ergonomique qui réduit le code boilerplate. Elle présente une suppression automatique des sorties lors de la destruction de la directive et une sécurité des types améliorée pour les valeurs émises.Toutes les sorties implémentent l'interface OutputRef, fournissant une manière cohérente pour les développeurs d'écouter les sorties de manière programmatique. Le package d'interopérabilité RxJS inclut la fonction outputToObservable pour écouter les sorties de manière idiomatique RxJS.La nouvelle API de sortie est disponible en version préliminaire pour les développeurs et Angular encourage les commentaires de la communauté. Les développeurs peuvent essayer les nouvelles API en installant la dernière version d'Angular avec ng update.L'API de sortie améliorée dans Angular v17.3 offre plusieurs avantages, notamment une alignement conceptuel avec d'autres API basées sur des fonctions, une syntaxe simplifiée, une suppression automatique, une sécurité des types améliorée et une écoute programmatique cohérente.Les développeurs sont encouragés à fournir des commentaires sur les nouvelles API de sortie via des commentaires, des discussions GitHub ou d'autres canaux. Les commentaires seront utilisés pour affiner et stabiliser davantage les API.
Les consoles d'éclairage sont des appareils électroniques utilisés dans la conception d'éclairage théâtral pour contrôler les lumières de scène. L'équipe de nstudio a développé Blackout, une application iPad qui offre les mêmes fonctionnalités que les consoles autonomes. L'application prend en charge les protocoles de contrôle DMX et le contrôle Bluetooth via les puces LumenRadio TimoTwo.Blackout maintient un taux de transmission de données constant vers les lumières connectées tout en offrant une interface utilisateur fluide avec des indicateurs de données en temps réel et des contrôles de projecteur détaillés. Elle utilise Angular 17+ et NativeScript 8+ pour le développement, combinant l'injection de dépendances, la mise en page et la gestion d'état d'Angular avec les vues optimisées pour la plateforme et l'intégration de CoreMIDI d'iOS de NativeScript.L'architecture de composants déclaratifs d'Angular, les directives et la gestion d'état via NgRx ont aidé à créer des fonctionnalités d'interface utilisateur sophistiquées, telles que le mode d'apprentissage MIDI et la directive nsIf, qui améliore les performances en détachant les vues de la détection des changements jusqu'à ce qu'elles soient nécessaires.En associant Angular à NativeScript, l'équipe a pu styliser les vues UIKit avec Tailwind CSS et utiliser des API et des techniques spécifiques à la plateforme. NgRx a joué un rôle crucial pour garantir une couche d'état solide pour gérer le flux de données et minimiser les calculs inutiles, tandis que NativeScript a permis l'utilisation de moteurs de rendu optimisés pour la plateforme pour des performances idéales et un comportement naturel de l'appareil.
Angular 17.1 introduit les entrées de signal, une alternative réactive aux entrées basées sur des décorateurs @Input(). Les entrées de signal améliorent la qualité du code et la productivité grâce à une sécurité de type accrue, permettant une intégration plus facile avec les signaux Angular.Les entrées de signal permettent aux développeurs de répondre efficacement aux changements d'entrée en utilisant des signaux, en prenant en charge les entrées facultatives et obligatoires.Par rapport à @Input(), les entrées de signal marquent automatiquement les composants OnPush comme sales, améliorant l'expérience utilisateur et ouvrant la voie à Zoneless.Les entrées de signal exploitent la puissance des signaux, permettant un suivi efficace des changements et une dérivation de valeurs tout en notifiant Angular pour un re-rendu nécessaire.Les cas d'utilisation potentiels incluent la déclaration et le rendu, la surveillance des changements, la dérivation de valeurs et les transformations de valeurs.Les entrées de signal prennent en charge les transformations et les alias, offrant une flexibilité dans la gestion des valeurs brutes et la satisfaction de besoins spécifiques.L'équipe Angular recommande d'utiliser les entrées de signal une fois qu'elles seront promues au statut de production dans une version à venir.Les développeurs sont encouragés à fournir des commentaires sur les entrées de signal en version de prévisualisation pour les développeurs.La notation abrégée pour input() peut causer de la confusion en raison de l'utilisation implicite de undefined comme valeur initiale.Les entrées sont désormais en lecture seule, ce qui peut affecter les applications qui comptaient sur la mise à jour des entrées à partir du composant.