Générer du code avec les schémas Angular

Comme disent la plupart des profs, un bon programmeur est un programmeur paresseux. Je vous propose donc aujourd’hui de pousser la paresse à son paroxysme en vous montrant comment utiliser les schémas (schematics) Angular pour créer des générateurs de code à partir de gabarits.

Pensez-y… vous avez, en entreprise, une suite d’applications bâties sur plus ou moins les mêmes bases. Il va de soi que le code va se répéter rapidement si vous avez aussi standardisé l’expérience utilisateur. Pensez par exemple à un composant de page avec un formulaire à soumettre. Vous aurez assurément besoin de FormBuilder.

Les schémas Angular

Lorsque vous générez un composant en utilisant Angular Cli, vous utilisez un schéma Angular.

Voir cet article pour plus de détails sur Angular Cli.

Le schéma en question va évidemment générer du code pré-fait, mais simple et propre, avouons-le. La question est : Est-ce que ça se customize pour mon équipe?

Schéma simple

Vous allez voir, vous allez comprendre assez vite! Installons en premier lieu schematics-cli de façon globale.

Puis, dans un répertoire où vous voulez créer le projet, exécuter :

Ici, on utilise le schéma blank qui est fourni de base avec schematics-cli. Notre projet s’appelle évidemment « hello ». Le schéma va alors nous générer l’arborescence pour notre schéma personnalisé. Deux fichiers principaux nous intéressent : collections.json et index.ts

Le fichier collection.json

Il est le fichier de définition de la librairie de schémas. En effet, il est possible de regrouper les schémas dans une librairie, un peu comme on regroupe des composants dans des modules.

On voit ici notre schéma « hello » qui a une description utilisée dans l’aide de notre schéma (option --help), mais ce qui nous intéresse, c’est la propriété factory (oui… le patron de conception!).

Le rôle d’un schéma, c’est de prendre l’arborescence de fichiers, d’appliquer des modifications, puis de passer la balle au schéma suivant comme une chaîne de responsabilités pourrait le faire (oui… le patron de conception (ang)!). Ceci se fait via la fabrique (factory) mentionnée ci-avant. La valeur de la propriété pointe vers le fichier index.ts, l’export « hello », sous le format folder/file#export.

Le fichier index.ts

Ce fichier, très près du fonctionnel pur, c’est le cœur de notre schéma. C’est ce bout de code qui sera exécuté :

Il faut comprendre qu’une règle, c’est une opération appliquée à un ou un ensemble de fichiers. Garder toujours en tête les principes OO. Votre règle ne devrait faire qu’une seule chose.  Essayons de créer un fichier :

Puisque schematics roulera le schéma par nodejs, il faut évidemment compiler le code TypeScript en JavaScript. Exécuter :

Pour, pour exécuter :

Lorsque qu’on exécute un schéma, on doit passer la collection (ou librairie) qui contient le schéma. Ici, puisqu’on a pas publié notre schéma, on l’exécute avec un accès direct aux fichiers compilés. Le point devant le deux-points représente le répertoire courant. Ceci a pour effet d’activer le mode debug par défaut, ce qui n’écrit rien sur le disque dur, d’où le paramètre debug à false.

Vous devriez alors pouvoir faire :

Et voir « Hello World! »

Fichiers gabarits

J’en entends déjà me crier dessus : « Sylvain! T’as du code JavaScript dans une string dans un fichier TypeScript, c’est pas très propre! ».

Je te l’accorde. Changeons ça. Par défaut, on peut se créer un répertoire « files » sous « hello » pour contenir des fichiers sources gabarits qui seront utilisés pour créer les fichiers générés. Ce répertoire fait partie par défaut des exclusions du fichier tsconfig.json. Son contenu ne sera donc pas compilé par tsc.

Créer le fichier hello.js dans le répertoire files, puis insérer le code du « Hello World ». Modifier ensuite le fichier index.ts afin de ne plus retourner l’arborescence directement, mais en y fusionnant les gabarits préalablement :

La fonction mergeWith retourne une nouvelle règle qu’on exécute en passant l’arborescence. À ce moment, si vous compilez et exécutez ( npm run build et schematics .:hello --debug=false), vous devriez voir votre fichier généré.

Paramétrisation avec des variables

Ultimement, on cherche à créer un outil qui va être pratique pour les développeurs. Par exemple, vous pourriez vous assurer que tous les composants sont créés dans un certain répertoire, ou encore créer des gabarits de classes. Ça nous prend donc une façon de paramétriser nos fichiers pour, par exemple, ajouter un nom de composant en faisant :

Supprimer donc le fichier « hello world » dans files pour en créer un nouveau qu’on pourra personnaliser. Nommez le nouveau fichier :

Ici, ce qui est entre les traits de soulignement sera traité comme une variable. Vous pouvez aussi voir l’utilisation d’un helper natif dans schematics qui permet de convertir le nom en kebab-case. Puis, ajouter le code suivant à son contenu :

On retrouve encore notre variable name , mais la syntaxe change un peu. On utilise maintenant <%= et %> pour faire le remplacement. Si vous faites la compilation et l’exécution avec la commande suivante :

Vous devriez vous retrouver avec un fichier hello-world.compoment.ts qui contient une classe HelloWorldComponent.

Note : Dans un gabarit, vous pouvez aussi appeler dasherize de cette façon :

Conclusion

Personnellement, dès que j’ai à répéter la même opération, je le script. Si vous faites le calcul, que vous arrivez à sauver quelques secondes par développeur par jour, à l’échelle d’une entreprise, ça chiffre assez vite! Restera juste à convaincre votre boss de vous inviter pour une bière avec les économies (ou venez travailler avec nous, on le fait déjà!).

Vous avez donc appris aujourd’hui à faire un générateur de code pour vos applications Angular. Pour poursuivre l’apprentissage, je vous propose d’explorer comment vous pourriez compiler et distribuer un schéma, ou encore à en créer plusieurs sous la même collections.

Merci de partager chaque semaine, vous êtes notre gaz 🙂