L'équipe Angular de Google annonce la version 12 d'Angular, le framework open source basé sur TypeScript,

Elle améliore le service de langue basé sur Ivy et apporte de nouvelles fonctionnalités

Mark Techson membre de l'équipe Angular chez Google a annoncé la version 12 d’Angular, le framework open source basé sur TypeScript, elle améliore le service de langue basé sur Ivy, apporte la Transition des anciens identifiants de messages i18n et bien d’autres nouvelles fonctionnalités. « Nous sommes de retour avec une nouvelle version et nous sommes impatients de partager toutes les grandes mises à jour et fonctionnalités qui vous attendent dans la version 12 d’Angular. « Ivy et ce qu'il débloque pour la plateforme sont une clé essentielle pour l'avenir d'Angular. Au fil des dernières versions, nous avons travaillé à l'objectif de faire converger l'écosystème Angular vers Ivy. Nous aimons appeler cette approche "Ivy Everywhere" », a déclaré Mark Techson, défenseur des développeurs au sein de l'équipe Angular chez Google.


Notons qu’Angular est un framework d'application web open source basé sur TypeScript, dirigé par l'équipe Angular de Google et par une communauté de particuliers et de sociétés. C’est une réécriture complète de la même équipe qui a construit AngularJS. Angular est utilisé comme frontal de la pile MEAN, composée de la base de données MongoDB, du framework de serveur d'applications Web Express.js, d'Angular lui-même (ou AngularJS) et de l'environnement d'exécution du serveur Node.js. Voici, ci-dessous, les nouveautés apportées par la version 12 d’Angular :

Transition des anciens identifiants de messages i18n

Actuellement, le système i18n utilise plusieurs formats d'identifiants de messages hérités. Ces identifiants sont fragiles, car des problèmes peuvent survenir en raison des espaces, des modèles de formatage et des expressions. Pour résoudre ce problème, les responsables d’Angular ont choisi d’abandonner se formant et d’opter pour un nouveau format d'identifiant de message canonique et qui est beaucoup plus résistant et intuitif. Ce format réduira l'invalidation inutile des traductions et le coût de retraduction associé dans les applications où les traductions ne correspondent pas en raison de modifications de l'espace blanc, par exemple.
Depuis la version 11, les nouveaux projets sont automatiquement configurés pour utiliser les nouveaux identifiants de message et Angular dispose désormais d'outils pour migrer les projets existants avec les traductions existantes.

L'avenir de Protractor

L'équipe Angular a travaillé avec la communauté pour déterminer l'avenir de Protractor. « Nous sommes en train d'examiner les commentaires partagés dans le RFC pour déterminer le meilleur avenir pour Protractor », révèle l'équipe Angular. Elle a choisi de ne pas inclure Protractor dans les nouveaux projets et, à la place, de proposer des options avec des solutions tierces dans l’interface de commande en ligne d'Angular. Parmi les partenaires qui travaillent avec l’équipe d‘Angular pour aider les utilisateurs à adopter les solutions alternatives, nous pouvons citer : Cypress, WebdriverIO et TestCafe.

L'opérateur nullish coalescing

L'opérateur nullish coalescing aide les développeurs à écrire du code plus propre dans les classes TypeScript depuis un certain temps déjà. Aujourd’hui, la puissance du nullish coalescing peut être appliquée aux modèles Angular dans sa version 12. Désormais, dans les templates, les développeurs peuvent utiliser la nouvelle syntaxe pour simplifier les conditionnels complexes. Par exemple :

devient :

Apprendre Angular

Dans le but d'améliorer l'expérience d'apprentissage d'Angular pour les développeurs, l’équipe Angular a apporté des changements significatifs à sa documentation. Elle a rédigé un guide de projection de contenu, et d'autres nouveaux contenus seraient en préparation. Une mise à jour d’ angular.io avec un guide du contributeur pour aider les personnes cherchant à améliorer la documentation.

Améliorations des styles

À partir de la version 12, les composants Angular prennent désormais en charge Sass en ligne dans le champ styles du décorateur @Component. Auparavant, Sass était uniquement disponible dans les ressources externes en raison du compilateur Angular. Pour activer cette fonctionnalité dans les applications existantes, on doit ajouter "inlineStyleLanguage" : "scss" à angular.json. Sinon, elle sera disponible pour les nouveaux projets utilisant SCSS.

Dans la version version 11.2, nous l'équipe d'Angular a ajouté la prise en charge de Tailwind CSS. Pour commencer à l'utiliser dans les projets, il faut installer le paquet tailwindcss de npm, puis initialisez Tailwind pour créer le fichier tailwind.config.js dans le projet. Angular CDK et Angular Material ont adopté en interne le nouveau système de modules de Sass. Si une application utilise Angular CDK ou Angular Material, il est important de s’assurer que du passage de node-sass au paquet sass npm. Le paquet node-sass n'est pas maintenu et ne suit plus les ajouts de nouvelles fonctionnalités au langage Sass.

En outre, Angular CDK et Angular Material exposent tous deux une nouvelle surface API Sass conçue pour être utilisée avec la nouvelle syntaxe @use. Cette nouvelle surface API fournit les mêmes fonctionnalités, mais avec des noms plus significatifs et des points d'entrée plus ergonomiques. Tous les guides sur material.angular.io ont été entièrement réécrits pour présenter cette nouvelle surface d'API, ainsi que pour fournir des explications plus détaillées sur les concepts de thématisation et les API.

Lors de la mise à jour vers la version 12, l'application passera automatiquement à la nouvelle API Sass en mettant à jour l'application avec ng update. Cette commande refactorisera toutes les déclarations @import de Sass pour le code Angular CDK et Angular Material vers la nouvelle API @use. Voici, ci-dessous, un exemple de l'avant et de l'après :

Autres grandes fonctionnalités

L'exécution de ng build passe maintenant par défaut en production, ce qui évite aux développeurs quelques étapes supplémentaires et permet également d'éviter les constructions accidentelles en production. Le mode strict est activé par défaut dans l'interface CLI. Il permet de détecter beaucoup plus tôt les erreurs dans le cycle de développement. Le service de langue basé sur Ivy passe d'une option à une activation par défaut. Ce service permet d'augmenter la productivité lors de la création d'applications en fournissant des fonctionnalités importantes telles que les compléments de code, les erreurs, les conseils et la navigation dans les modèles Angular.


Source : Angular

Et vous ?

Avez-vous une expérience avec Angular ?

Que pensez-vous de Angular ?

Quelle amélioration vous intéresse le plus sur cette version ?

Voir aussi :

Angular 10 est disponible, plus léger et n'inclut plus les bundles ESM5 ou FESM5, une version majeure qui couvre toute la plateforme, y compris le framework, Angular Material et CLI

Angular 10, la prochaine version majeure du framework TypeScript : correction de bogues, amélioration de performances et autres

Angular 9.0 est disponible. Par défaut, toutes les applications vont utiliser le compilateur et le runtime Ivy. L'équipe explique les avantages apportés par ce moteur de rendu

Prisma : un ORM de nouvelle génération pour Node.js et TypeScript, pour concurrencer TypeORM et Sequelize et devenir la norme de l'industrie