Angular, développé par Google, fait partie des nombreux frameworks front-end, à l’instar de ReactJS ou VueJS. Ces outils permettent de mieux organiser le code côté client, et de décorréler la partie client de la partie serveur, qui fait office de serveur d’API.
Angular JS et Angular 2+
Il existe deux versions du framework qui sont très différentes, tant au niveau de la syntaxe que de l’organisation d’un projet.
AngularJS 1.X est la première version, qui est toujours utilisée aujourd’hui, surtout pour maintenir des projets existants, mais de moins en moins sur de nouveaux. En tant que premier vrai framework front-end, AngularJS a eu beaucoup de succès à ses début.
Angular 2+ (comprendre la version 4, 5, 6, 7, 8 et 9 jusqu’à maintenant) est la version moderne d’Angular, elle est écrite en TypeScript et intègre un CLI permettant de créer facilement un projet, des composants, des services, etc…
Un projet Angular s’articule autour de briques élémentaires appelés composants, représentés par des dossiers comprenant :
- Un fichier TypeScript (.ts)
- Un ficher HTML (.html)
- Un fichier CSS (.css) ou SASS (.scss)
Les observables et opérateurs RxJS
Un observable est un objet qui émet des données et auquel on peut souscrire, on les utilise pour écouter des événements asynchrones, comme par exemple les requêtes HTTP. Les observables font partie de la bibliothèque RxJS, qui fournit différent opérateurs pour traiter les données émises (filter, map, etc…)
Server-Side Rendering (SSR)
Le principal problème de ces frameworks est qu’ils sont (très) mauvais pour le référencement naturel (SEO), c’est à dire l’indexation par les moteurs de recherche ou par les réseaux sociaux de l’application web.
En effet les pages web du client sont renvoyées en JavaScript pur et non en HTML, le JavaScript étant beaucoup plus difficile à parser (car il faut du temps et des ressources pour l’exécuter) que le HTML, ils en ignorent tout simplement le contenu.
Toutefois une parade existe, cela s’appelle de SSR (Server-Side Rendering), qui permet lors d’une requête de renvoyer du HTML statique, qui est ensuite remplacé par la vue JavaScript une fois qu’elle a finie de se charger. Outre que le fait que les pages web sont plus facilement crawlable, elles s’affichent aussi plus rapidement. Angular utilise Angular Universal pour faire du SSR.
Tests Unitaires
Les tests unitaires sont regroupés par composants et sont écrit dans un fichier portant l’extension spec.ts. C’est un large sujet car il est possible de tester beaucoup de choses, par exemple :
- Les méthodes des composants ou des services : on exécute la méthode (en y ajoutant éventuellement les paramètres) puis on voit si elle régit bien (par exemple si la valeur de retour est conforme au résultat attendu)
- Les formulaires : il sera plus aisé de tester un Model-Driven-Form (MDF) qu’un Template-Driven-Form (TDF), car un MDF instancie l’objet FormGroup dans le composant sous forme d’attribut, il est donc directement testable
- Savoir quant une méthode a été appelée : on utilise la méthode spyOn() pour tester si l’exécution d’une méthode entraîne bien l’exécution d’une autre méthode du composant (ou d’un service)
- Savoir quant le DOM a été modifié : par exemple pour tester si le changement d’une condition *ngIf se répercute bien dans le DOM
Tests e2e
Les tests e2e servent à simuler le parcours utilisateur en reproduisant les interactions avec l’application (clics, remplissage de formulaire). L’intérêt est la reproductibilité du test, qui peut-être exécuté par simple ligne de commande, par défaut Angular utilise Protractor. Pour sélectionner les éléments du DOM de manière unique, une bonne pratique est d’ajouter des attributs data-testid et d’y attacher une valeur unique.
Un autre outil, Puppeteer, permet de simuler l’application sous un navigateur Chrome, avec la possibilité de prendre des screenshots, pour documenter l’application par exemple. Puppeteer dispose d’une API puissante qui permet d’interagir finement avec les éléments du DOM.
Pattern Redux (ngrx/store)
Le pattern Redux a d’abord été implémenté avec React, car il était impossible de gérer la communication d’un composant enfant vers un composant parent (ce qui est possible avec Angular en utilisant les événements). L’intérêt d’utiliser ce pattern est d’éviter les événements spaghetti, c’est à dire une sur-utilisation des événements, rendant le code moins lisible. Par exemple avec Angular, si l’on veut remonter un événement dans un composant parent sur plusieurs niveaux, on est obligé de répliquer cet événements dans tous les composants traversés.
Le pattern Redux permet de simplifier la gestion des ces événements en les centralisant dans un store, qui est une sorte d’observable qui peut être écouté dans n’importe quel composant de l’application, les différent type d’événements sont listés sous forme d’actions.
Angular material
Angular material est une bibliothèque qui reprend les principes graphiques du material design, elle est intégrée à Angular depuis la version 7. Elle fournit des composants prêts à l’emploi, attention à ne pas oublier d’importer le module correspondant dans le projet.
