Angular : Vue d'ensemble

Vous avez déjà entendu parler d’Angular, mais ne savez pas de quoi il s’agit ? Vous vous demandez si c’est un bon choix pour votre prochain projet ? Dans cet article, nous allons faire un tour rapide du framework en abordant les points suivants :

Qu’est-ce que Angular ?
Pourquoi choisir Angular ?
Pourquoi considérer d’autres alternatives à Angular ?
AngularJS vs Angular

Qu’est-ce que Angular ?

Angular est un framework et une plateforme de développement qui permet de développer des Single Page Applications (SPA) en utilisant les technologies du Web comme le HTML, le CSS et le TypeScript.

Angular permet de développer des SPA

Une SPA est une application n’ayant qu’une seule et unique page qui n’est jamais rafraîchie lors de la navigation entre les différentes “pages” de l’application. Le contenu de cette page unique est principalement généré par le client qui est classiquement le navigateur : On parle de Client Side Rendering (CSR).

Lors d’une navigation, le serveur n’intervient pas pour renvoyer une nouvelle page, mais la SPA modifie dynamiquement son contenu pour afficher d’autres “pages”. Pour échanger des données avec le backend, la SPA effectue le plus souvent des requêtes HTTP.

Angular supporte d’autres stratégies de rendue des pages comme le Server Side Rendering (SSR) où les pages sont générées à la volée par le serveur puis envoyées au client, mais la principale stratégie de rendue des pages est le Client Side Rendering.

Si vous voulez en savoir plus sur les avantages et les inconvénients des différentes stratégies de rendue qui existent sur le Web, je vous conseille l’article CSR, SSR, SSG, ISR, WTF? de Damien Buchet.

Angular est un framework et une plateforme de développement Web

Contrairement à React qui est considéré comme une librairie, Angular est un framework. Concrètement cela veut dire que Angular vient avec plus de bagages et gère plus de choses pour les développeurs. Mais attention ! un framework n’est pas fondamentalement meilleur qu’une librairie. Les deux présentent chacun des avantages et des inconvénients et ce n’est pas le but de cet article que de détailler les avantages d’utiliser un framework ou une librairie. Concernant Angular, on détaillera les forces et les faiblesses du framework dans la suite de l’article.

Souvent le terme plateforme de développement est aussi utilisé pour décrire Angular car ce dernier vient avec une suite d’outils et de librairies qui fonctionnent en harmonie. Nous verrons quelques exemples dans la section qui suit.

Pourquoi choisir Angular ?

Dans cette section, nous allons voir les raisons pour lesquelles Angular est un excellent choix pour développer son application Web.

Une plateforme tout-en-un

Comme je le disais plus haut, Angular est une plateforme de développement tout-en-un. Voici quelques exemples d’outils et de librairies fournis nativement par Angular :

Description	Paquet npm
Un framework orienté composants : Angular Framework	`@angular/core`
Une bibliothèque de composants graphiques : Angular Material	`@angular/material`
Un ensemble de briques permettant de créer des composants graphiques complexes : Angular CDK	`@angular/cdk`
Une librairie de gestion des formulaires	`@angular/forms`
Un routeur pour gérer la navigation entre les pages	`@angular/router`
Un client HTTP pour communiquer avec des backends	`@angular/common`
Un outil en ligne de commande pour faciliter le développement d’applications : Angular CLI	`@angular/cli`
Une librairie permettant d’implémenter des animations Web	`@angular/animations`
Des outils permettant de gérer la localisation et l’internationalisation	`@angular/localize`
Une bonne intégration avec les IDEs avec un language server : Angular Language Service	`@angular/language-service`

La plupart des projets Angular se ressemblent

Cette approche tout-en-un d’Angular fait que la plupart des projets Angular ont la même structure. Ceci permet de gagner du temps lorsqu’un nouveau développeur rejoint un projet Angular existant : il est déjà familier avec la structure.

Un projet open source de Google

Angular est un projet open source maintenu par Google qui emploie une équipe dédiée au développement de nouvelles fonctionnalités, à la correction de bugs, à l’écriture de documentation, etc.

Angular est utilisé au sein de Google par plus de 2000 applications. Chaque commit qui atterrit sur GitHub déclenche les batteries de tests de l’ensemble de ces projets. Cela fait d’Angular une plateforme robuste.

Un framework dogmatique

Généralement dans Angular, il n’y a qu’une seule bonne façon de faire les choses. Vu que Angular fournit tout ce qu’il faut aux développeurs, la plupart des projets Angular utilisent les briques fournies par la plateforme, les mêmes librairies et la même manière d’implémenter des fonctionnalités. Avec Angular, pas besoin de réinventer la roue. Cela rend la maintenance des applications Angular beaucoup plus aisée.

Une plateforme evergreen

Tous les six mois, une nouvelle version majeure d’Angular sort, mais l’équipe Angular s’assure que la plupart des changements sont rétrocompatibles. Angular fournit aussi un outil qui permet d’effectuer automatiquement les montées de versions et les changements nécessaires dans notre code via la commande ng update. En mettant à jour régulièrement sa version d’Angular, on reste toujours à l’état de l’art du Web et on bénéficie sans faire d’effort des améliorations apportées par l’équipe Angular et la communauté.

Pourquoi considérer d’autres alternatives à Angular ?

J’adore Angular, mais toutes les technologies ont des pistes d’amélioration et Angular n’est pas différent. Dans cette section, nous allons discuter des inconvénients d’Angular. À vous de voir si vous pourriez vivre avec ces inconvénients ou pas.

Un framework dogmatique

J’avais mis cet aspect dans les avantages d’Angular, mais c’est aussi un de ses inconvénients. Vu que Angular fournit quasiment tout ce dont que le développeur a besoin, il n’y a pas un besoin récurrent d’inventer des librairies pour Angular. C’est bien, mais je pense que cela freine un peu l’innovation et la créativité des membres de la communauté Angular.

Aussi, dès qu’on veut dévier et faire différemment les choses, on peut se heurter à une rigidité pour sortir des paradigmes du framework, car il n’y a qu’une seule bonne façon de faire les choses avec Angular.

Un framework pas très adapté aux sites vitrine

Angular permet principalement de développer des SPA où le DOM est produit directement dans le navigateur. De ce fait les moteurs de recherche, qui pour la plupart ne supportent pas le JavaScript, ont du mal à indexer les applications Angular. Il est tout à fait possible malgré tout de faire du Server Side Rendering grâce à Angular Universal mais sa mise en œuvre reste encore un peu trop difficile. En somme, réaliser un site vitrine de qualité avec Angular est possible, mais il vaut mieux considérer des alternatives à Angular comme Next.js.

Une courbe d’apprentissage élevée

Un des reproches que j’entends le plus souvent sur Angular concerne sa courbe d’apprentissage élevée. Angular a principalement deux dépendances sur lesquels vous devrez être à l’aise :

TypeScript qui est le langage de programmation utilisé pour développer avec Angular.
RxJS qui est une librairie permettant de faire de la programmation réactive.

Il faut prendre le temps d’apprendre ces deux technologies pour vraiment avoir du succès avec le framework. Même si vous ne faites pas de l’Angular et ne voulez pas en faire, je vous conseille fortement d’apprendre RxJS et TypeScript, car ce sont des compétences qui vont au-delà du framework Angular.

Les outils de la communauté Web ont du mal à s’intégrer avec pour Angular

Généralement les nouveaux outils du Web ont du mal à s’intégrer avec Angular du fait de la complexité qui existe dans la toolchain d’Angular. Cette toolchain est très fermée et n’offre pas assez de points d’intégration aux développeurs. On est souvent condamné à utiliser ce qui est nativement fourni par le Angular CLI et l’équipe Angular. Ainsi, la plupart des nouveaux outils, même s’ils se déclarent “framework-agnostic” n’offre aucun support pour Angular comme le déplorent Brandon Roberts, Google Developer Expert en Angular et Oliver Combe, ancien membre de l’équipe Angular.

AngularJS ou Angular

Dernière petite chose : il ne faut pas confondre AngularJS et Angular. AngularJS (2010-2022) est l’ancien framework de Google. Il est obsolète et n’est plus maintenu depuis janvier 2022. Tous les projets sur AngularJS doivent migrer vers Angular ou une alternative à Angular. Angular (2006-Présent) est le framework actuel de Google.

Conclusion

Je vais conclure cet article en citant Miško Hevery, le créateur d’Angular :

En génie logiciel, il est rare que A soit toujours mieux que B. En général, A et B sont accompagnés d’une longue liste d’avantages et d’inconvénients. Votre travail d’ingénieur consiste à déterminer quels sont les avantages qui sont importants pour vous et quels sont les inconvénients avec lesquels vous pouvez vivre.

— Miško Hevery

La balle est dans votre camp concernant le choix du framework pour votre prochaine application. Pour ma part, j’ai choisi Angular pour tous mes projets sauf pour les sites vitrine.