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
Dans sa version 6.0, le framework JavaScript Angular a �t� livr� avec un nouveau moteur de rendu appel� Ivy. � Vous aimez Angular, mais vous souhaitez juste qu'il soit plus petit, plus facile � d�boguer, et compil� plus rapidement ? Ce sont nos objectifs avec le nouveau moteur de rendu d'Angular nomm� Ivy � expliquait alors Google � propos d'Ivy. Selon l'�quipe Angular, ce moteur de rendu est ax� sur l'am�lioration de la vitesse et acc�l�re la compilation. Ivy faisait la promesse aux d�veloppeurs de r�duire la taille du code et de leur apporter une flexibilit� accrue. L'�quipe Angular a indiqu� en outre que le passage au nouveau moteur de rendu se ferait en douceur.
Dans la version 9.0 cette fois-ci toutes les applications vont utiliser le compilateur et le runtime Ivy par d�faut. L'outil a gagn� en maturit�. En effet, l'�quipe a not� qu'en plus des centaines de corrections de bogues, le compilateur Ivy et le runtime offrent de nombreux avantages :
- tailles de paquets plus petites ;
- des tests plus rapides ;
- un meilleur d�bogage ;
- une am�lioration au niveau des classes CSS et des liaisons de style ;
- un v�rification de type am�lior�e ;
- une am�lioration des erreurs de build ;
- un temps de build am�lior�, une activation d'AOT par d�faut ;
- l'am�lioration de l'internationalisation am�lior�e.
Tailles de paquets plus petites
Le compilateur Ivy a �t� con�u pour supprimer les parties d�Angular qui ne sont pas utilis�es via l�arborescence et pour g�n�rer moins de code pour chaque composant Angular.
Gr�ce � ces am�liorations, les petites applications et les grandes applications peuvent voir les �conomies de taille les plus spectaculaires.
- Les petites applications qui n'utilisent pas de nombreuses fonctionnalit�s Angular peuvent b�n�ficier le plus du tree-shaking (un terme couramment utilis� dans le contexte JavaScript pour parler de l'�limination du code mort).
- Les grandes applications avec de nombreux composants peuvent b�n�ficier le plus de la taille d'usine r�duite.
- Les applications de taille moyenne devraient voir des tailles de bundle �quivalentes ou l�g�rement plus petites, car elles b�n�ficient moins du tree-shaking et n'ont pas suffisamment de composants pour b�n�ficier d'une taille d'usine r�duite.
Les petites applications pourraient voir une diminution d'environ 30 % de la taille de l'ensemble, les grandes applications verront une diminution de 25 � 40% et les applications moyennes vont observer une diminution minimale
Des tests plus rapides
L'�quipe a travaill� sur l'impl�mentation de TestBed dans Ivy pour la rendre plus efficace.
Auparavant, TestBed recompilait tous les composants entre l'ex�cution de chaque test, ind�pendamment du fait que des modifications aient �t� apport�es aux composants (par exemple, par le biais de remplacements) ou non.
Dans Ivy, TestBed ne recompile pas les composants entre les tests sauf si un composant a �t� remplac� manuellement, ce qui lui permet d'�viter la recompilation entre la grande majorit� des tests.
Avec ce changement, les tests d'acceptation de base du framework sont environ 40% plus rapides. L'�quipe s'attend � ce que les utilisateurs voient leur propre vitesse de test d'application �tre environ 40 � 50 % plus rapide.
Meilleur d�bogage
Ivy vous fournit plus d'outils pour d�boguer vos applications. Lorsque vous ex�cutez une application en mode Dev avec le runtime Ivy, il vous est propos� d�sormais le nouvel objet ng pour le d�bogage.
- Vous pouvez demander � Angular l'acc�s aux instances de vos composants, directives, etc.
- Vous pouvez appeler manuellement des m�thodes et mettre � jour l'�tat.
- Lorsque vous souhaitez voir les r�sultats de la d�tection des modifications, vous pouvez d�clencher la d�tection des modifications avec applyChanges.
Ivy am�liore �galement la trace de la pile pour les probl�mes de d�bogage tels que ExpressionChangedAfterItHasBeenCheckedError. Auparavant, la trace de la pile pouvait �tre inutile:
Avec Ivy, vous voyez une trace de pile plus utile qui vous permet de passer directement � l'instruction de mod�le avec l'expression qui a chang�.
Une am�lioration au niveau des classes CSS et des liaisons de style
Le compilateur et le runtime Ivy fournissent des am�liorations pour la gestion des styles. Auparavant, si une application contenait des d�finitions concurrentes pour un style, ces styles se remplaceraient de mani�re destructive. Avec Ivy, les styles sont fusionn�s de mani�re pr�visible.
Consid�rez les extraits de mod�le et de composant suivants :
<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| @Component({
host: {
style: "color:blue"
},...
})
...
@Directive({
host: {
style: "color:black",
"[style.color]": "property"
},...
})
... |
Auparavant, la derni�re liaison � �tre �valu�e aurait �t� gagnante et cela pouvait d�pendre du moment des modifications de ces expressions. Si myColor et myOtherColor n'�taient pas d�finis, le style statique red aurait �t� ignor�.
Avec la version 9, vous pouvez g�rer vos styles selon un ordre de priorit� clair et coh�rent qui ne d�pend pas du timing. Les styles les plus sp�cifiques ont toujours la priorit� la plus �lev�e. Par exemple, une liaison � [style.color] remplace une liaison conflictuelle � [style].
Cependant, pour des raisons de compatibilit� descendante, l'�quipe a laiss� le comportement des liaisons [ngStyle] et [ngClass] �tre le m�me qu'auparavant. Lorsque leurs valeurs de liaison sont mises � jour, les nouvelles valeurs remplaceront toutes les liaisons concurrentes.
En tant qu'effet secondaire du refactoring de style, vous pouvez d�sormais �galement lier des propri�t�s personnalis�es CSS (�galement appel�es variables CSS).
1
2
3
| <div [style.--main-border-color]=" '#CCC' ">
<p style="border: 1px solid var(--main-border-color)">hi</p>
</div> |
V�rification de type am�lior�e
Le compilateur Angular peut v�rifier plus de types de votre application et appliquer des r�gles plus strictes. Ces fonctionnalit�s vous aideront, vous et votre �quipe, � d�tecter les bogues plus t�t dans le processus de d�veloppement.
Le framework prend en charge deux indicateurs principaux pour les v�rifications de type suppl�mentaires en plus de la valeur par d�faut :
- fullTemplateTypeCheck - L'activation de cet indicateur indique au compilateur de tout v�rifier dans votre mod�le (ngIf, ngFor, ng-template, etc.) ;
- strictTemplates - L'activation de cet indicateur appliquera les r�gles de syst�me de type les plus strictes pour la v�rification de type.
Am�lioration des erreurs de build
Le nouveau compilateur Ivy est non seulement plus rapide et offre une plus grande s�curit� de type, il facilite �galement la lecture de tous les messages d'erreur.
Dans la version 8 ou View Engine, une erreur de compilation typique ressemblerait � ceci:
Dans la version 9 avec Ivy, la m�me erreur ressemble � :
Des mises � jour ng plus fiables
Le framework a b�n�fici� de quelques modifications au fonctionnement de ng update pour rendre la fonctionnalit� plus fiable et informative.
- Utilisez toujours la derni�re CLI. � partir de la 8.3.19 de la CLI, le framework utilise maintenant la CLI de la version mise � jour TARGET lors des mises � jour. Cela signifie qu'� l'avenir, les mises � jour seront toujours g�r�es automatiquement par la derni�re CLI.
- Mises � jour de progression plus claires. ng update fait maintenant plus pour vous dire ce qui se passe sous le capot. Pour chaque migration, vous verrez des informations sur la migration.
- D�bogage des mises � jour plus facile. Par d�faut, ng update ex�cute toutes les migrations et laisse les modifications agr�g�es sur le disque pour que vous puissiez les inspecter. La mise � jour de la version 9 introduit �galement le nouvel indicateur --create-commits. Lorsque vous ex�cutez ng update --create-commits, l'outil valide l'�tat de votre base de code apr�s chaque migration, afin que vous puissiez parcourir et comprendre ou d�boguer les modifications qui sont apport�es � votre code.
De nouveaux composants
Vous pouvez d�sormais inclure des fonctionnalit�s de YouTube et de Google Maps dans vos applications.
- Vous pouvez afficher un lecteur YouTube dans votre application avec le nouveau youtube-player. Apr�s avoir charg� l'API du lecteur YouTube IFrame, ce composant en tirera parti.
- Le framework s'accompagne �galement des composants google-maps. Ces composants facilitent le rendu de Google Maps, l'affichage des marqueurs et le c�blage de l'interactivit� d'une mani�re qui fonctionne comme un composant Angular normal, vous �vitant d'avoir � apprendre la totalit� de l'API Google Maps.
Prise en charge de TypeScript 3.7
Angular a �t� mis � jour pour fonctionner avec TypeScript 3.6 et 3.7, y compris la fonction de cha�nage facultative extr�mement populaire de TypeScript 3.7. Pour rester en phase avec l'�cosyst�me, l'�quipe a �galement mis � jour sa version d'autres d�pendances de l'�cosyst�me telles que Zone.JS et RxJS.
Source : blog Angular
Angular 9.0 disponible. Par d�faut, toutes les applications vont utiliser le compilateur et le runtime Ivy
R�pondre avec citation
Partager