Vous êtes peut-être au courant, la version 8 d’Angular est sorti le 29 Mai 2019 ! Concrètement, cela signifie qu’il est maintenant temps de voir ce que cette nouvelle version du Framework propose, et si nous pouvons en profiter dans nos applications. Allez, au boulot…

Ah, et puis on à la fin de l’article on regarde comment mettre à jour votre application ! 👍

Note : Angular 8 a de nouveaux pré-requis, Node 10 et TypeScript 3.4 pour être exact. Bien sûr, l’ensemble du contenu du site et des formations ont été mis à jour en conséquence. 😇

Pss : Si vous ne comprenez pas la moitié de ce qui est écrit dans cet article, et que vous souhaitez devenir vraiment bon sur Angular (décrocher votre premier taf, prochaine mission, etc), recevez les 10 premiers épisodes de « Maîtriser Angular : Développer votre première application professionnelle«  dans votre boîte mail. Cela vous guidera dans la bonne voie !

Les nouveautés d’Angular 8

Le chargement différé, ou « Differential Loading »

Angular 8 est plus rapide que son prédécesseur, sans que vous n’ayez rien à faire de votre côté, en tant que développeur. Vos applications Angular 8 seront plus performantes grâce à quelques optimisations internes au Framework, et grâce au differential loading.

Et c’est quoi exactement, le « differential loading » ?

Lorsque vous générerai votre application pour la production, deux versions de l’applications seront alors créer. Une version pour les navigateurs modernes prenant en charge ES6, et une version pour les anciens navigateurs ne prenant en charge que la version ES5 de JavaScript. Le bon paquet sera chargé automatiquement par le navigateur.

En haut, la version de votre application fonctionnant sur les navigateurs récents.
En bas, la version de votre application pour les navigateurs plus anciens.

Cette nouvelle fonctionnalité entraîne l’amélioration de performance la plus significative d’Angular 8. Les nouveaux navigateurs seront en mesure de charger moins de code, notamment les polyfills qui permettent de faire fonctionner du code JavaScript ES6 dans les anciens navigateurs.

Le « Differential loading » permet de réduire la taille de votre application jusqu’à 20% !

Pour bénéficier du chargement différentiel, vous n’avez rien de spécial à faire. La commande ng build –prod d’Angular CLI se chargera de tout regrouper de manière à ce que le chargement différentiel fonctionne immédiatement.

Utiliser des SVG comme templates

On peut désormais utiliser des fichiers SVG dans un template. Jusqu’à maintenant, on avait seulement la possibilité d’utiliser du code HTML dans le template, ou dans un fichier externe. Maintenant, on peut directement un fichier SVG dans notre template :

@Component({
  selector: "app-icon",
  templateUrl: "./icon.component.svg",
  styleUrls: ["./icon.component.css"]
})
export class AppComponent {...}

Les Formulaires

On a maintenant accès à deux nouvelles méthodes pour nos formulaires réactifs. La première méthode markAllAsTouched permet de marquer tous les champs d’un formulaires comme ayant été « touché » par l’utilisateur.

myForm.markAllAsTouched(); // myForm est une instance de FormGroup.

Cela évite de devoir bouclé sur tous les champs du formulaire. La deuxième méthode clear permet de supprimer tous les champs d’un FormArray.

myFormArray.clear();

Là encore, cela évite des boucles inutiles. Pratique, donc !

Chargement dynamique des routes paresseuses, ou « lazy routes »

La syntaxe de chargement des routes paresseuses, utilise désormais la nouvelle syntaxe des importations dynamiques d’ES2020. Jusqu’à maintenant les importations de modules étaient statiques en JavaScript. Bref, on commence à être dans le futur, et le code suivant :

{ path: '/fruits', loadChildren: './fruit/fruit.module#FruitModule' }

Devient quelque chose comme ça :

{ path: `/fruit`, loadChildren: () => import(`./fruit/fruit.module`).then(m => m.FruitModule) }

On verra comment effectuer la migration de votre application un peu plus bas.

Le nouveau moteur de template IVY

Angular 8 nous permet d’avoir un aperçu du nouveau moteur de rendu développé par l’équipe d’Angular, nommé « Ivy ».

Il permet à votre application Angular d’être plus réactive, plus rapide, etc… sans que vous n’ayez rien à faire de votre côté. Et cela n’entraîne aucune cassure dans le code existant, théoriquement, mais cela n’est pas du tout recommandé d’utiliser Ivy en production pour le moment.

Mais pour le moment, ce nouveau moteur de rendu n’est disponible qu’à titre expérimental, et ne sera intégré comme le moteur par défaut qu’à partir d’Angular 9 normalement. Si vous voulez déjà l’essayer, générer une nouvelle application comme ceci :

ng generate fruitsApp --enableIvy=true

Mais concrètement, vous ne verrez pas grands choses, à part des micro-secondes de gain lors du chargement et des interactions avec votre application. 😅

Comment mettre à jour le code de « Apprendre Angular » ?

Très simple, pour mettre à jour votre application, utilisez le nouveau fichier package.json qui contient les dépendances nécessaires pour Angular 8.

Ensuite, supprimez votre dossier node_modules qui continent les anciennes dépendances, et réinstaller les nouvelles dépendances avec la commande :

npm install

Et c’est tout, l’application de Pokémon est à jour pour Angular 8 !

Comment mettre à jour le code de « Maîtriser Angular » ?

Angular CLI nous file un coup de main non négligeable, puisque la mise à jour pour Angular 8 se fait en une seule commande, pas plus :

ng update @angular/cli @angular/core

Et c’est tout ! C’est fait, vous êtes à jour pour la version 8. 🙉 Angular CLI a même automatiquement modifié le code qui n’était plus à jour concernant le chargement des routes paresseuses, sans même ouvrir notre éditeur de code. Si vous avez quelques problèmes suite à l’exécution de la commande, supprimez votre dossier node_modules, et réinstaller vos dépendances. Cela ne peut pas faire de mal, et évite les mauvaises surprises.

NOTE : Pour une migration un peu plus approfondie, jetez un coup d’oeuil à l’outil de migration Angular développé par les équipes de Google.

Conclusion

Angular 8 apporte de bonnes nouvelles, nos applications sont à jour avec l’éco-système général du développement web, elles sont plus performantes, et en plus la migration de version se fait très rapidement. On ne peut que saluer le travail effectué par les équipes en charge du développement d’Angular. Et bien sûr, on attend la suite avec impatience ! 😉

Sources 🚰

Non, je n’ai pas découvert seul toutes ses nouveautés. Je m’appuie sur le travail d’autres développeurs bien plus talentueux, et je synthétise tout cela de manière clair et accessible pour tous. Voici mes sources donc, mais tout est en anglais :

https://alligator.io/angular/angular-8/

https://blog.ninja-squad.com/2019/05/29/what-is-new-angular-8.0/

https://blog.angularindepth.com/embrace-yourself-angular-8-is-coming-1bf187c8f0bf