Site icon Blog ARC Optimizer

Mes nouvelles fonctionnalités préférées, démo, et ensuite

Mes nouvelles fonctionnalités préférées, démo, et ensuite


Venez découvrir les nouveautés d’Angular v21 : une autre mise à jour incroyable pour nous !

Angular v21 vient de tomber et honnêtement ? C’en est encore un autre version amusante et conviviale pour les développeurs, et je ne sais pas comment ils vont continuer comme ça ! Entre l’arrivée de fonctionnalités tant attendues, l’amélioration de l’accessibilité et l’entrée en scène d’une adorable nouvelle mascotte, cette version ressemble à un dicton angulaire :

« Hé, nous vous avons entendu. Rendons la création d’applications plus facile, plus claire et bien plus agréable. »

Voici mes quatre principaux points forts, ainsi qu’une mini-démo où j’essaie des formulaires de signal expérimentaux avec Kendo UI et le nouveau serveur Angular MCP.

1. Angular ARIA : accessibilité, de première classe

ARIA angulaire fait désormais officiellement partie de la plateforme Angular, apportant assistants d’accessibilité automatiques directement dans le cadre. Au lieu de se concentrer sur des rôles ARIA ou de se démener pour correspondre au comportement du clavier selon les spécifications, les développeurs peuvent s’appuyer sur des primitives sans tête et alignées sur les normes qui font ce travail à leur place.

La bibliothèque se lance avec des composants et des exemples de base, notamment un accordéon, une zone de liste déroulante, une grille, une zone de liste, un menu, des onglets, une barre d’outils et bien plus encore, chacun étant construit avec une exactitude sémantique et des interactions fiables mises en œuvre dès le départ. Radiogroup a été intentionnellement supprimé car le HTML natif le gère déjà bien et l’équipe travaille activement sur de futurs ajouts comme un sélecteur de date.

Dans mon Conversation d’Angular Air avec Wagner Maciel de l’équipe Angular, nous avons examiné pourquoi l’équipe Angular a créé cette nouvelle bibliothèque, comment elle prend en charge à la fois la cohérence interne de Google et la flexibilité des développeurs externes, et pourquoi elle est distincte du CDK. Les primitives d’Angular ARIA sont alimentées par machines à états pilotées par des signauxoffrant aux développeurs une base prise en charge par un framework pour des systèmes de conception accessibles et permettant de porter ces mêmes primitives sur autre cadres qui prennent en charge les signaux.

Wagner a également précisé qu’Angular Material ne sera pas réécrit ou porté sur les composants ARIA, et que les développeurs ne devraient pas considérer ARIA comme un remplacement ; c’est une capacité additive, pas un chemin de migration.

Le résultat est l’une de ces fonctionnalités qui ça rend tout tranquillement meilleur: moins d’erreurs d’accessibilité, des expériences utilisateur plus cohérentes et un avenir où « accessible par défaut » est une attente, pas une réflexion après coup. Si vous souhaitez approfondir les décisions de conception, la sémantique et la vision d’accessibilité au niveau du framework derrière Angular ARIA, l’épisode complet est ici :

2. Formes de signaux expérimentales : une toute nouvelle façon de penser les formes

Les formulaires reçoivent un éclat attendu depuis longtemps.

Les formes de signal sont :

  • réactif par défaut
  • plus simple
  • plus explicite
  • et bien plus facile à raisonner que l’ancienne soupe statut/sale/touchée

Nous avons fait deux épisodes d’Angular Air en approfondissant le fonctionnement de Signal Forms, leur philosophie de conception et ce à quoi nous pouvons nous attendre à l’avenir :

👉 Analyse approfondie des signaux et des formulaires (Sander Elias) :

👉 Présentation des formulaires de signal + API de mutation/ressource (Manfred Steyer) :

TL;DR : Signal Forms rationalise tout : l’état reste synchronisé, vos modèles restent sécurisés et toutes vos validations se trouvent dans un endroit propre et centralisé.

3. Rencontrez Angie, la nouvelle mascotte officielle d’Angular

Angular a enfin une mascotte et son nom est Angie-un rayon amical de joie TypeScript en forme de bouclier.

Les mascottes comptent plus que nous ne l’admettons. Ils donnent un cadre de personnalité, une identité communautaire et un véritable « visage » aux événements, aux documents et aux contenus.

Attendez-vous à voir Angie partout : dans les documents, les publications sur les réseaux sociaux, les autocollants, les cadeaux de conférence et peut-être… votre IDE. 👀

4. Le serveur Angular MCP (avec un tuteur angulaire à l’intérieur ?!)

Celui-ci me passionne tellement.

Angular expédie désormais un serveur officiel Model Context Protocol (MCP)ce qui signifie :

  • Vous pouvez consulter des documents et des outils Angular via n’importe quel client IA compatible MCP.
  • Vous pouvez générer du code angulaire en utilisant de vraies règles angulaires.
  • Vous pouvez poser des questions telles que « pourquoi est-ce cassé ? » et obtenez des commentaires contextuels.
  • Il comprend même un Tuteur angulaire pour des explications guidées et un dépannage.

Pour commencer :

ng mcp

Ce qui répertoriera les bits json à coller dans votre fichier mcp.json (au moins pour VS Code).

Et du coup… votre IA a Connaissances natives d’Angularl’accès à votre code et la possibilité de vous aider à créer et déboguer de vrais composants.

https://d585tldpucybw.cloudfront.net/sitefinity-videos/default-source/default-video-library/angular-mcp.mp4?sfvrsn=c791ef9d_1

https://d585tldpucybw.cloudfront.net/sitefinity-videos/default-source/default-video-library/mcp-json.mp4?sfvrsn=9c12f46a_1

Bonus : compatibilité de l’interface utilisateur Kendo avec Angular v21

L’interface utilisateur Progress Kendo pour Bibliothèque angulaire est déjà entièrement compatible avec Angular v21.

Mieux encore, les équipes d’interface utilisateur de Progress Kendo ont apporté des améliorations de performances et des modèles angulaires modernes pour plusieurs versions, de sorte que les composants profitent déjà de :

  • capacités sans zone
  • contrôler le flux (@for, @if)
  • améliorations de l’hydratation
  • améliorations majeures du rendu

L’interface utilisateur de Kendo est actuellement activée v18et il apporte un nombre surprenant de fonctionnalités intégrées qui s’alignent parfaitement sur les principes d’Angular v21.

Si vous utilisez Kendo UI et que vous souhaitez passer à Angular 21, vous êtes prêt à partir. 🎉

Angular Air : La trilogie v21

Au cours des trois derniers épisodes, Angular Air a essentiellement été la tournée de lancement non officielle d’Angular v21. Résumés rapides :

✔ Angular Air — La réactivité réinventée avec Manfred Steyer

👉 https://youtu.be/sc9BC1LpxT8

Comment l’équipe a reconstruit les formulaires au-dessus des signaux et quels modèles mentaux changent à l’avenir.

✔ Angular Air — L’avenir des formes angulaires ; Signaux, validation et contrôles dynamiques avec Sander Elias

👉 https://youtu.be/a5346O2zCrU

API de mutation, ressources, linkedSignals et à quoi ressemble la validation de formulaire dans le nouveau monde.

✔ Angular Air — Angular ARIA avec Wagner Maciel

👉 https://youtu.be/N8tZ-Y4hlWg

Pourquoi l’accessibilité avait besoin d’une réponse de première partie et comment Angular ARIA améliorera les systèmes de conception et les bibliothèques de composants complexes.

Si vous voulez la version « commentaires des développeurs » des notes de la v21, ces trois épisodes le sont.

Mini démo : Formes de signaux expérimentaux + Kendo UI + le serveur Angular MCP

Je voulais faire un petit segment « construisons quelque chose » pour comprendre ce qui est nouveau.

Voici mon plan :

  1. Testez tous ces nouveaux serveurs MCP sophistiqués !
  2. Utilisez Kendo UI pour Angular (et si possible… le nouveau Agentic UI Generator).
  3. Mettez à jour Node, mettez à jour la CLI Angular et générez un nouveau projet Angular 21.
  4. Interrogez Angular MCP Server sur le code de mes applications jusqu’à présent.

Vérification des versions

Vous avez besoin Nœud v20.19.0 ou supérieur pour Angular 21. Je suis sur le nœud 22, donc tout va bien.

Installation de la CLI angulaire

npm install -g @angular/cli  

Ensuite, j’ai généré un tout nouveau projet—fluxforge2.0:

https://d585tldpucybw.cloudfront.net/sitefinity-videos/default-source/default-video-library/flowforge2.mp4?sfvrsn=1137f0e8_1

Étape 1 : Utilisation du générateur d’interface utilisateur agent (serveur MCP)

J’ai invité le Générateur d’interface utilisateur agent Kendo UI pour échafauder l’interface utilisateur de mon formulaire, et cela m’a donné une arborescence complète de composants Angular + Kendo UI.

Je lui ai également demandé de remplacer rapidement l’interface utilisateur par un thème violet. Vérifiez-le:

https://d585tldpucybw.cloudfront.net/sitefinity-videos/default-source/default-video-library/theme-change-ui-generator.mp4?sfvrsn=d1df2f47_1

Puis j’ai demandé au Serveur MCP angulaire pour analyser le code et donner votre avis :

📄 Aperçu de l’analyse :

  • analyse
  • suggestions
  • corrections
  • le panneau « c’est ce que vous avez bien fait »
  • le panneau « c’est ce que Angular recommande »

C’était honnêtement fou : obtenir des commentaires Angular sur le code que vous venez de générer… instantanément.

Conclusion

Angular 21 donne l’impression d’avoir franchi un cap : pas seulement la livraison de fonctionnalités, mais la poursuite de la livraison joie:

  • une mascotte autour de laquelle se rallier
  • une histoire d’accessibilité modernisée
  • formulaires alimentés par des signaux de nouvelle génération 🦾
  • et un véritable serveur MCP alimenté par l’IA qui s’intègre à votre éditeur

Et avec Kendo UI entièrement compatible (et livrant son propre serveur MCP !), la v21 est la version Angular la plus excitante depuis des années.

Rejoignez-nous pour nos webinaires de sortie la semaine prochaine pour plus de détails sur ce que Progress a préparé ! 👉 https://www.telerik.com/blogs/ai-forward-telerik-kendo-ui-2025-q4-release-webinars-coming




Source link
Quitter la version mobile