Angular, un des principaux framework JavaScript avec Vue et React, sort très régulièrement de nouvelles versions majeures.
Ces versions apportent non seulement des correctifs, mais aussi de nouvelles fonctionnalités, souvent très attendues des développeurs freelance. Et la version 15, prévue pour novembre 2022, ne fait pas exception !
Faisons le point sur cette nouvelle mise à jour du framework made in Google.
Le point sur Angular
Avant de parler de cette nouvelle version du framework, il est bon de faire le point sur cette techno, de manière plus globale.
Angular, à ne pas confondre avec AngularJS, est donc un framework open-source, basé sur du TypeScript. Cette techno front est principalement maintenue par Google.
Sa première version date de 2016, et la prochaine à venir, la 15 – celle qui nous intéresse ici, est prévue pour mi-novembre 2022.
Techniquement parlant, ce framework se distingue de ses concurrents par des contraintes techniques plus fortes et un cadre de développement plus marqué. Ce qui est particulièrement adapté dans le cas de projets complexes, notamment en équipe et en entreprise. Ça l’est en revanche un peu moins lors de plus petits projets, en équipe restreinte ou en solo. Dans ce cas là, on préfèrera souvent la flexibilité de React ou la simplicité de Vue.
Nous l’avons dit, Angular met à disposition des nouvelles versions majeures de son framework régulièrement – environ tous les 6 mois.
La maintenance de toutes les versions majeures d’Angular est assurée par son équipe de développement pendant les 18 mois suivant sa release.
Les nouveautés d’Angular 15
Il est maintenant temps de parler d’Angular 15, et des nouveautés qu’il apporte !
Les standalone components
Introduits avec Angular 14, les standalone components évoluent, avec une meilleure intégration. Pour rappel, le but de cette fonctionnalité est de se passer, au moins en partie, des NgModules. Et cela dans un objectif : simplifier le développement et l’efficience des projets Angular. Cela passe notamment par l’utilisation de ce qui se rapproche plus des imports EcmaScript, que ceux des NgModules.
Pour définir un composant, une directive ou un pipe en standalone, il faudra ajouter cette propriété dans sa déclaration :
@Component({
standalone: true,
selector: 'photo-gallery',
imports: [ImageGridComponent],
template: `
... <image-grid [images]="imageList"></image-grid>
`,
})
export class PhotoGalleryComponent {
// component logic
}
L’autre avantage des standalone components est de faciliter la courbe d’apprentissage d’Angular, qui rebute souvent les débutants, lui préférant ainsi React ou Vue.
Les images directives, pour un chargement amélioré des images
La version 15 du framework incorpore aussi la possibilité d’utiliser les images directives pour améliorer l’intégration de celles-ci dans un projet Angular. Cela a plusieurs avantages :
- l’utilisation du lazy-loading, pour éviter de charger des images non visibles à l’écran ;
- la priorisation des images à afficher, pour charger celles critiques à l’UX en tout premier ;
- une configuration simplifiée des fournisseurs d’images externes via CDN ;
- un système de détection des problèmes éventuels des images : mauvais ratio, images trop lourdes ou trop denses.
Tout cela a pour effet d’améliorer le temps de chargement, à la fois des images, mais aussi de l’application web créée via Angular.
Incorporation du MDC Web
La prochaine version d’Angular incorporera nativement MDC Web. MDC Web Est une librairie créée par l’équipe Google Material Design, mettant à disposition des développeurs des composants graphiques compatibles avec le material design propre à Google. Ces composants seront donc intégrés dans Angular 15, ce qui permettra de les utiliser sans avoir à installer de dépendances tierces.
On retrouvera parmi ces éléments de design tout ce qui se trouve dans un formulaire (boutons, checkboxes, inputs, etc.). Y seront présents également des composants tels que des tabs, cards, chips, dialogs, etc.
Pour en savoir plus sur cette bibliothèque, voici un lien vers la documentation officielle.
Les autres nouveautés d’Angular 15
Angular 15 vient aussi avec d’autres fonctionnalités, toutefois moins importantes ou plus transparentes aux yeux du développeur. Parmi celles-ci, nous pouvons citer :
- un changement dans l’implémentation de zone.js (librairie permettant de gérer la persistance des données dans de l’asynchrone) pour le rendre optionnelle, et ainsi faciliter le framework et le déboggage ;
- une modification dans la CLI (command-line interface), pour cacher la configuration par défaut d’un projet Angular, lors de sa création ;
- l’implémentation du “tree shaking” dans le router Angular. Le tree shaking est un terme utilisé pour décrire la suppression du « code mort », fonctionnalité qui sera donc intégrée dans Angular 15.
Comment mettre à jour la version d’Angular ?
Si vous utilisez la version 14 d’Angular, migrer votre projet vers la version 15 se fera facilement, quand celle-ci sera disponible. Comme pour chaque nouvelle version de ce framework, il faudra simplement mettre à jour le core (Angular en lui-même), et sa CLI.
Cela se fait de la manière suivante, dans le terminal, à la racine du projet :
ng update @angular/core@15 @angular/cli@15
De cette manière, votre projet sera automatique mis à jour vers la dernière version d’Angular, et vous pourrez profiter des nouvelles fonctionnalités !
Attention toutefois, ces mises à jour viennent parfois avec des breaking changes. Cela signifie que des modifications dans votre code seront peut-être nécessaires pour que votre projet fonctionne normalement.
Tout sera expliqué dans la documentation une fois la nouvelle version officiellement disponible.
Conclusion
Nous l’avons vu, cette nouvelle version d’Angular vient avec des features clés, qui vont simplifier le framework et son développement. Cette simplification permettra également d’attirer plus de développeurs débutants, aujourd’hui rebutés par la complexité d’apprentissage du framework.
Si vous voulez suivre les nouveautés à venir d’Angular, référez-vous à la roadmap, présente sur le site officiel d’Angular, mise à jour régulièrement avec les futurs développements prévus !