Ce site utilise des cookies et différents services d'analyse de trafic. Nous partageons également certaines informations sur son utilisation avec nos partenaires des réseaux sociaux.

Si les cookies techniques sont nécéssaires au fonctionnement du site, les autres nécessitent une autorisation de votre part.

09 avril 2018

Angular 6 : les nouveautés

Ce contenu propose une synthèse cadrée et rédigée par Arnaud Leray, Expert Angular et applications mobiles hybrides chez Niji.

 

 

La version finale d'Angular 6 est maintenant disponible!

Précisons tout d’abord que, contrairement au passage d’AngularJS à Angular 2, qui nécessitait une réécriture complète des applications, Angular 6 est une mise à jour ​dans la continuité d’Angular 2, 4 et 5​ (rappelons qu’​il n’y a jamais eu d’Angular 3​ à cause du module de routing qui était déjà en version 3).

La migration de vos projets vers Angular 6 devrait donc se faire en douceur​. 

Regardons ensemble les principales nouveautés apportées par cette version. 

 

Nouveau moteur de rendu : "Ivy" 

Dans la course aux performances menée par Google à chaque nouvelle version, Angular 6 apporte ni plus ni moins qu’un ​tout nouveau moteur de rendu, nommé "Ivy"​ !

Ce nouveau moteur promet une ​compilation plus rapide, une taille des bundles réduite, un meilleur débogage, ainsi qu’une plus grande flexibilité​, tout en restant rétro-compatible (vous n’aurez donc pas besoin de modifier spécifiquement vos applications pour profiter de ces avantages).

Il y a peu de benchmarks sur le sujet, mais il existe un exemple d’application "Hello World" dont la taille est d'à peine 3.3ko (compressé) contre près de 50ko sans ce nouveau moteur, ce qui promet une amélioration significative des performances !

Néanmoins, ce nouveau moteur n’est ​pas encore totalement compatible​ et ne le sera probablement pas lors de la sortie finale d’Angular 6.0.0. Pour pouvoir le tester, il faut l’activer via le flag ​enableIvy​ dans les options de compilation. 

Il est possible de suivre les avancées de ce nouveau moteur ici 

 

Mises à jour simplifiées

Angular CLI, l'outil en ligne de commande permettant notamment de générer une application Angular, offrira dans sa nouvelle version (Angular CLI 1.7) une nouvelle commande "ng update" permettant de mettre à jour automatiquement les dépendances d'une application.

A noter que cette nouvelle fonctionnalité s'appuie sur Schematics, l'outil permettant de transformer un projet en générant de nouveaux composants ou en modifiant ses sources.

 

Component Dev Kit (CDK)

Bien que n'étant pas tout à fait une nouveauté d'Angular 6 (existant depuis Angular 5.1), le CDK (Component Dev Kit) est un kit de développement de composants. Il constitue le coeur de la bibliothèque de composants Angular Material, et permet de créer ses propres composants sans réinventer la roue, tout en bénéficiant des best practices mises en place par Google dans Angular Material.

On peut ainsi créer assez simplement ses propres panneaux flottants (pour créer par exemple un menu contextuel, une liste déroulante ou un tooltip), des onglets personnalisés ou encore des tableaux de données à partir des composants de base du CDK.

La version 6 propose un nouveau composant tree permettant de gérer des arborescences.

 

Angular Elements

Pouvoir créer ses propres composants c'est bien, mais pouvoir les partager entre différents projets, c'est encore mieux ! C’est pour répondre à ce besoin que Google propose "Angular Elements".

Angular Elements permettra de packager des composants Angular sous forme de Web Components.

Pour rappel, les Web Components sont un standard (https://www.webcomponents.org/specs) permettant notamment de créer ses propres composants HTML (appelés "Custom Elements"). Supportés nativement par la plupart des navigateurs récents (ou via l'utilisation de polyfills pour les autres), ils permettent de créer des composants réellement réutilisables et indépendants du framework de développement utilisé (Angular, React, Vue, etc.)

Angular Elements permettra ainsi par exemple de créer des composants Angular réutilisables dans une application React.

 

Service Workers et PWA

Les Progressive Web Apps (PWA) sont des applications web pouvant fonctionner hors ligne, gérer des notifications push ou encore être "installées" sur la home des smartphones, à l’instar d’une application mobile.

Pour la création de PWA, depuis Angular 5, le framework permet la gestion de Service Workers (composant clef des PWA).

Dans Angular 6, l'implémentation des Service Workers bénéficiera de correctifs et de quelques nouveautés comme la possibilité de désinstaller un Service Worker.

 

Autres nouveautés

RxJS, la bibliothèque permettant de faire de la programmation réactive en manipulant des flux de données asynchrones, sera mis à jour en version 6. Pour ceux qui ne connaissent pas RxJS, Angular fournit un guide d'utilisation.

RxJS 6 permettra notamment de réduire encore plus la taille des bundles.

TypeScript, le langage de programmation JavaScript typé utilisé par Angular, sera mis à jour en version 2.7. Vous trouverez toutes les nouveautés de cette version ici.

Angular Buildtools Convergence (ABC) : Google souhaite proposer ses outils internes pour que chacun puisse builder ses applications Angular "comme le fait Google". Pour cela, Google proposera un nouvel outil de build nommé Bazel. Cet outil devrait en particulier permettre de ne pas recompiler entièrement une application à chaque modification mais uniquement le code impacté, permettant ainsi d’améliorer de manière significative le temps de compilation.

Il est encore tôt pour builder vos applications Angular avec Bazel, mais Google l'utilise déjà pour builder Angular lui-même. Pour en savoir plus, c'est ici

 

En résumé

Angular 6 apporte de nombreuses nouveautés permettant de booster les performances des applications et d'accélérer les temps de compilation.

Les nouveautés autour des composants comme le CDK et Angular Elements devraient aussi permettre de créer beaucoup plus facilement des bibliothèques de composants réutilisables dans différents projets et même avec différents frameworks.

L'amélioration des Service Workers permettra également de proposer des Progressive Web Apps toujours plus performantes pour offrir une expérience mobile capable de rivaliser avec les applications natives.

 

Si vous voulez en savoir plus sur notre expertise, contactez-nous.

 

Contact Relations Presse
Frédéric PAYEN
Directeur Marketing et Communication
presse@niji.fr