Une porte se referme, l’autre reste grande ouverte : si AngularJS tirera prochainement sa révérence (une dernière release et puis s’en va), le voyage ne fait que commencer pour Angular. La dernière variante du framework développé par Google approche à grands pas, et l’on entrevoit déjà ce qui s’annonce comme une excellente version. Tour d’horizon des nouveautés attendues sur Angular 6.
D’abord annoncé pour fin mars 2018, Angular 6 devrait finalement voir le jour dans le courant du mois d’avril. Les release candidate se succèdent : RC.0, puis 1, puis 2, et finalement une 4ème (et dernière ?) le 7 avril dernier. Deux corrections de bugs seulement, ce qui laisse entendre que la version finale est imminente. Pour les plus impatients d’entre vous, rendez-vous sur la page Github du projet pour tester la rc.3 et suivre les dernières étapes jusqu’à la version finale.
Lors d’une conférence à Atlanta en février dernier, le directeur de la plateforme Angular chez Google Brad Green révélait déjà un certain nombre de détails sur ce qui attend les développeurs. Le discours complet est diponible sur Youtube :
Angular 6 : les nouvelles fonctionnalités
Component Dev Kit (CDK)
Ce package est déjà utilisé par la bibliothèque Angular Material, qui offre un ensemble complet de composants accessibles, performants et riches en fonctionnalités. Mais pour ceux qui ne souhaitent pas utiliser Angular Material, vous pourrez construire votre propre bibliothèque de composants UI et contrôler les mises en page grâce à CDK, sans avoir à réinventer la roue. Ce kit publié par Google en 2017 supporte également le Responsive Web Design.
A noter que le CDK n’est en soi pas vraiment une nouveauté puisqu’il existe depuis la version 5.1 d’Angular, mais la version 6 apportera un nouveau composant tree permettant comme son nom l’indique de gérer les arborescences.
Référez-vous à ce billet de blog Angular pour obtenir toutes les informations concernant la prise en main du Component Dev Kit.
Angular Elements
Si Angular est un framework de référence pour le développement d’application web monopage (SPA ou Single-Page Application en anglais), créer un widget pouvant être ajouté à une page web existante n’est pas chose aisée. N’était. Le package Angular Elements vous permettra en effet de créer un composant Angular et de le packager en tant que Web Component, utilisable sur n’importe quelle page HTML.
Prenez une application non-SPA conçue avec JavaScript et jQuery. Les développeurs de cette application pourront désormais utiliser des Web Components développés sur Angular, au sein de leur application. En facilitant le partage de ses composants, réutilisables et indépendants du framework de développement utilisé, Angular étend encore un peu plus sa flexibilité et séduira certainement de nouveaux adeptes.
Pour en savoir plus sur les Angular Elements, regardez l’intervention de Rob Wormald, développeur chez Google, lors de la conférence Angular Connect 2017.
Ivy
Ivy, c’est le nom de code donné au tout nouveau moteur de rendu qui réduira la taille des applications, accélèrera le temps de compilation et sera plus facile à débugger. C’est en tous cas la promesse de l’équipe Angular, qui assure par ailleurs que la transition vers ce nouveau moteur de rendu se fera tout en douceur.
Actuellement en beta, Ivy sera rétro-compatible et devrait améliorer les performances de manière significative : un exemple d’application Hello World avec Ivy pèse 3ko en .gzip, contre 50ko jusqu’alors !
Schematics et ng update
Angular CLI est basé sur la technologie Schematics qui permet de définir des templates personnalisés et des modifications de code, pour une utilisation avec l’outil en ligne de commande. Dans la nouvelle version d’Angular, la fonctionnalité ng update fait son apparition dans CLI v1.7. Elle vous permettra de mettre à jour les dépendances de vos applications et de corriger les versions automatiquement.
Avec Schematics, vous n’avez donc pas besoin d’attendre que l’équipe CLI propose de nouvelles fonctionnalités et pouvez faire vos propres transformations de code comme ng update.
Bazel
Bazel est un outil de build utilisé par l’ensemble des équipes Google, et qui sera proposé en option dans Angular 6. Décrit comme rapide, flexible et supportant une grande diversité de langages et plateformes, le compilateur Bazel est rendu open source en 2015 par Google, qui souhaite rendre ses outils internes accessibles au plus grand nombre.
En offrant la possibilité de recompiler seulement le code impacté lors d’une modification, sans régénérer l’application entière, Bazel devrait accélérer considérablement le temps de compilation. Il permettra de concevoir des applications « comme Google », qui a utilisé ce système de build en interne sur plus de 300 applications écrites en Angular.
Service Workers et Progressive Web Apps
Les Progressive Web Apps, ces applications d’un nouveau genre mêlant le meilleur des applications web et mobiles ont le vent en poupe. Depuis la version 5 d’Angular, les Services Workers (composants fondamentaux des PWA) sont pris en charge, et Angular 6 apportera un certain nombre de corrections. Quelques nouveautés sont également attendues, comme la possibilité de désinstaller un Service Worker.
Pour en savoir plus sur les Progressive Web Apps, appelées à façonner le web de demain, nous vous invitons à suivre notre formation sur les PWA, dispensée sur 3 jours !
Mais aussi…
Parmi les autres nouveautés, citons les supports de TypeScript 2.7 et de la bibliothèque RxJS 6.
Pour résumer
Angular 6 et son lot de nouvelles fonctionnalités laissent envisager une année 2018 encore plus faste que la précédente pour le framework JavaScript, dont la communauté continue de croitre. Plus petite, plus rapide, plus flexible et plus accessible que ses prédécesseurs, la version 6 d’Angular permettra notamment d’augmenter la performance des applications et de réduire le temps de compilation.
Le CDK et les Angular Elements permettront de créer et partager des composants plus facilement, alors que l’amélioration des Service Workers rendra possible la création de Progressive Web Apps.
En attendant le lancement officiel de toutes ces nouveautés pour le moins prometteuses, vous reprendrez bien une sixième canette de formation Angular ?
Les ressources pour apprendre Angular
En amont de la formation
Pour démarrer sur Angular, vous pouvez suivre le guide Quickstart disponible sur le site officiel du framework. Le tutorial « Tour des Héros » est ensuite un bon moyen pour vous familiariser avec les fondamentaux, en créant une première application. Jetez finalement un œil à la page dédiée à l’architecture de la plateforme. Ces quelques ressources vous permettront d’aborder une formation Angular plus sereinement, en ayant manipulé quelques-unes des fonctionnalités du framework.
Les meilleurs livres sur Angular
Angular peut être complexe, notamment car il résout des problèmes complexes. Pour vous accompagner dans votre apprentissage, nous vous proposons ici quelques publications qui vous permettront d’appréhender les spécificités du framework. Ces ouvrages techniques seront un très bon complément à notre formation Angular de 3 jours, où vous pratiquerez et apprendrez toutes les bonnes pratiques à mettre en œuvre lors de vos développements.
Remarque :
Les ouvrages ci-dessous font parfois référence à Angular 2 (ou 5). Rappelons qu’avec la gestion sémantique des versions d’Angular – détaillée dans la vidéo ci-dessous – ces livres restent pertinents même si vous travaillez sur Angular 4 ou plus.
Angular: Up and Running
Edité chez O’Reilly, ce livre démystifie le framework Angular. Il couvre la plupart des sujets de manière très structurée et vous fournira des instructions claires ainsi que beaucoup d’exemples. Chaque chapitre porte sur un concept particulier, et se termine avec des problèmes à résoudre pour renforcer vos connaissances.
Rangle’s Angular 2 Training Book
Consultable gratuitement et en intégralité en ligne, le Rangle’s Angular Training Book couvre les sujets les plus importants d’Angular, de la prise en main avec la toolchain au développement et maintien d’applications robustes. Tout ce que vous devez savoir pour démarrer sur Angular en toute sérénité.
ng-book, The Complete Book on Angular 5
Le ng-book est conçu pour vous guider pas à pas dans la création d’applications Angular. Du dossier vide au déploiement, chaque chapitre porte sur un sujet particulier (composants intégrés, observables, RxJS, data architecture, etc). De nombreux exemples de code sont fournis tout au long de l’ouvrage, pour chaque projet présenté. A noter que le premier chapitre est téléchargeable gratuitement.
Apprendre Angular
Pour ceux qui ne maîtrisent pas l’anglais, la documentation en français sur Angular est malheureusement rare. Voici cependant l’un des seuls ouvrages francophones sur le sujet, qui pourra vous permettre d’écrire une première application Angular et d’acquérir les bases concernant les composants, templates ou directives. Une introduction à TypeScript est également présentée.