Discussion :

[Bruno]

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 :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

{{age !== null && age !== undefined ? age : calculateAge() }}

devient :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

{{ age ?? calculateAge() }}

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

[Gugelhupf]

Sans l'op�rateur nullish coalescing, j'aurais peut-�tre �crit :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

{{age || age === 0 ? age : calculateAge() }}

Au lieu de:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

{{age !== null && age !== undefined ? age : calculateAge() }}