Dans cet article, je te présente l’architecture la plus SIMPLE qui existe avec Angular et qui est EFFICACE sur l’énorme majorité des projets que tu vas rencontrer dans ta carrière.
En Angular, on utilise le mot architecture, principalement pour décrire la structure de tes dossiers et fichiers, car cette structure va influencer ta manière de coder.
On peut aussi utiliser le terme "architecture" lorsqu'on décrit les liens entre les modules, les composants ou les services. Mais dans cet article, on va rester sur la structure des dossiers et des fichiers.
Grâce à une bonne architecture, tu vas améliorer grandement la Developer Experience et la maintenabilité de ton application Angular.
Si vous préférez le format vidéo, voici la vidéo YouTube correspondant à cet article.
L’architecture la plus simple et efficace
Le principe de l'architecture que je vais te présenter est de regrouper tous les concepts/éléments techniques, d'un même type, dans un seul dossier.
Par exemple, tu vas regrouper les Composants dans le dossier components, tu vas regrouper les Services dans le dossier services.
Architecture avec un dossier par type d'élément technique
Cette structure te permet d'éviter d'avoir trop de sous-dossiers et te permet d'avoir une vision d'ensemble de ton projet très rapidement.
Le dossier components contient les Components, le dossier services contient les Services, etc.
Cette structure de dossier t'apporte plusieurs avantages
- Facile à comprendre
Il suffit d'un seul coup d'oeil pour comprendre la structure de notre application et où sont les éléments. Si je cherche un Component, je vais le trouver dans le dossier components. - Facile à utiliser
Les développeurs qui arrivent sur un projet avec cette structure savent instantanément comment l'utiliser. Si un développeur veut créer un Service, il va le mettre dans le dossier services. - Facile à maintenir
Comme cette structure est extrêmement simple, si tu reviens plusieurs mois après sur un projet, tu vas tout de suite reprendre tes marques. Aussi, si tu es Lead Dev dans une équipe de développeurs, si tu pars du projet, les développeurs sauront se débrouiller seuls. - Vision d'ensemble
La documentation Angular déconseille les arborescences de fichiers avec trop de sous-dossiers. Ici tu as très peu de niveaux de sous-dossier car tout est mis à l'horizontale.
Ajouter des sous-dossiers pour mieux s'organiser
Lorsque ton projet Angular grossit, ton nombre de composants va augmenter. Si tu commences à avoir trop d'éléments dans tes dossiers, tu peux créer des sous-dossiers fonctionnels pour mieux t'organiser.
Dossier components avec des sous-dossiers pour mieux organiser ses fichiers
Ensuite, tu n'es pas obligé d'ajouter ces sous-dossiers dans tous tes dossiers. Si tu as beaucoup de composants, tu vas créer des sous-dossiers pour les organiser, mais si tu as peu de services, tu peux les laisser en flat.
Variante pour des grosses séparations fonctionnelles
Je te montre enfin une dernière variante, qui peut être utile si tu as vraiment besoin de séparer des parties de ton application.
C'est le fait de créer des "dossiers parents" selon ton domaine fonctionnel et d'implémenter la structure que je t'ai montré à l'intérieur.
Application découpée en deux parties fonctionnelles avec des dossiers parents (admin et member)
Cette dernière version peut être un peu lourde, donc à utiliser, uniquement quand tu ressens le besoin.
Conclusion
Nous avons vu l'architecture la plus simple à mettre en place sur tes projets Angular avec quelques variantes.
N'oublie pas qu'une architecture peut évoluer avec le temps. Ce qui est important, c'est de partir sur quelque chose de simple au début. Et de modifier l'architecture SEULEMENT lorsque tu en as réellement besoin.
C'est grâce à cette architecture, que depuis des années, j'ai des retours ultra positifs des développeurs Front avec qui je travaille, qui me disent à chaque fois "C'est la première fois que je prend autant de plaisir à travailler sur Angular".
Tu peux retrouver les structures présentées sur mon repo GitHub :
Abonnez vous pour ne pas rater les nouveaux articles !
© Gaëtan Rouziès - Tous Droits Réservés