3. Architecture de projet

Présentation

Lors de la création d’un projet, Vue.js génère automatiquement les bases d’une architecture de projet. Cette architecture permet tout d’abord de dissocier les fichiers qui seront compilés des fichiers dit statiques. Mais plus important encore, elle suggère la manière dont s’organise conventionnellement un projet Vue.js, dans l’objectif de respecter un principe d’algorithme fort, celui de séparation des préoccupations (separation of concerns), qui rejoint plus généralement le principe de responsabilité unique (Single responsability principle).

Dans cette partie, nous allons étudier comment s’organise généralement l’architecture d’un projet Vue.js et comment étendre intelligemment cette architecture durant notre développement. Bien sûr, vous êtes libre de faire des choix vous éloignant de cette architecture, en fonction des besoins de votre projet, mais assurez vous de toujours respecter les principes vous garantissant une architecture saine.

Le principe de responsabilité unique

Le principe de responsabilité unique invite à ce que chaque responsabilité assurée par votre programme soit le plus distinctement possible séparée des autres. Cela vaut au niveau de vos dossiers, de vos fichiers, de vos classes, et de vos fonctions et méthodes. Si votre programme est par exemple capable de récupérer des données d’une API et est capable de les afficher dans un tableau, il s’agit de responsabilité de nature particulièrement différentes. Vous gagnerez donc beaucoup en clarté au sein de votre projet en implémentant ces deux fonctionnalités dans des sections bien séparées de votre code, même si elles seront appelées ensuite l’une après l’autre dans votre projet.

De cette séparation découle beaucoup de bienfait pour votre projet. Premièrement, la séparation évite le couplage de certaines logiques au sein de votre code, associant systématiquement une action de votre code à une autre. Lors de l’évolution de votre projet, ce couplage risque de vous obliger à remanier régulièrement votre code pour s’adapter à vos nouveaux besoins. En réduisant le couplage, vous aurez plus souvent à simplement étendre le contenu de votre code sans avoir à réorganiser l’existant. Vous êtes ainsi moins tenté de vous répéter dans votre code, car plus facilement en mesure de factoriser vos implémentations. Vous assurez ainsi une maintenance plus facile de votre code en honorant le principe de non-redondance (Don’t Repeat Yourself). Enfin, un code bien séparé est plus facile à déboguer et à tester.

L’architecture par défaut du projet

Modules et fichiers de configuration

Lors de la création d’un projet, Vue.js vous génère un certain nombre de fichiers de configuration à la racine :

• .gitignore : il vous permet de gérer les fichiers/dossiers que vous ne souhaitez par versionner sur votre repository git. Par défaut Vue.js ne versionne pas les modules dont dépend votre projet et le dossier dist qui accueille généralement la compilation de votre projet.
• package.json : il contient les informations sur les dépendances de votre projet, ainsi que des infos générales et des configurations propres à Node.js.
• packages-lock.json : il contient des données plus précises sur les dépendances du projet exploitées par Node.js, et que vous n’avez pas besoin de considérer.
• jsconfig.json : il est destiné à votre IDE (Visual Studio Code par exemple). Il lui fournit notamment des informations sur le fonctionnement de votre projet (version de Javascript utilisée, emplacement de vos fichiers sources, dépendances du projet, etc.). Cela lui permet de vous fournir davantage de propositions d’auto-complétions durant le développement. Plus d’infos sur sa configuration dans cette référence.
• vite.config.js : il permet de modifier la configuration par défaut du fonctionnement de Vite. Les configurations peuvent être d’ordres diverses : définir l’emplacement des fichiers à inclure dans le projet, l’emplacement des fichiers générés par un build, etc. Plus d’infos dans cette référence.
• index.html : c'est le fichier HTML servant de point d'entrée à l'application, comme dans n'importe quelle application Web.

Dans ce cours, vous n’aurez pas à revenir sur ces fichiers de configuration.

Le dossier node_modules concentre le code des bibliothèques tierces de votre projet. Vous n’aurez donc pas à coder dans ce dossier. Plus d’infos dans l'annexe de cours sur Node.js.

Code source et partie statique

Il nous reste donc deux dossiers à la racine de notre projet : public et src.

Le dossier public

Le dossier public va simplement contenir l’ensemble du code que vous souhaitez intégrer à votre projet sans qu’il ne soit compilé par Vite. Si vous compilez votre projet, ce code sera tout bonnement copié en l’état à la racine du dossier contenant le code compilé. Si vous incluez des sous-dossiers, ils seront également copiés avec leur contenu. Aucun de ces dossiers/fichiers ne sera renommé ou modifié. Ils pourront ainsi être appelés directement via leur chemin de fichier sur votre serveur.

Par défaut, ce dossier contient le favicon du site. Pour ce cours, vous n’aurez probablement rien d’autre à ajouter à ce dossier.

INFO

Notez que le fichier HTML situé à la racine du projet sera également copié. Mais des informations pourrons y être injectée par Vite lors de la compilation, ce qui rend son traitement plus particulier.

Le dossier src

Contrairement à public, le contenu du dossier src sera modifié à la compilation : les fichiers Javascript et Vue seront transformés, regroupés et minifiés dans un seul fichier Javascript. Même chose pour le code CSS. Les images et autres médias seront également renommés et minifiés (plus d’infos dans la partie sur l'annexe de cours sur les bundlers).

C’est dans ce dossier que va se concentrer l’ensemble du code que nous allons produire.

Le contenu du dossier src

Le fichier main.js

Ce fichier est le point d’entrée de notre application. De façon assez similaire à un compilateur C++, c’est de ce fichier que partira Vite pour effectuer la compilation de votre projet. Il est donc important de ne pas déplacer ou renommer ce fichier sans changer la configuration de Vite en conséquence.

Comme pour les include en C++, Vite récupérera récursivement tous les autres fichiers importés dans le fichier main.js pour disposer de toutes les dépendances nécessaires au projet. (plus d’infos dans l'annexe de cours sur les bundlers).

Vous trouverez plus d’infos sur le contenu de ce fichier dans le chapitre suivant.

Le dossier assets

Conventionnellement, les différents assets (images, vidéos, gifs, objets 3D, etc.) présents dans le projet sont regroupés dans ce dossier pour ne pas encombrer le code. Pour pouvez bien sûr y organiser vos assets en sous-dossiers.

Le fichier App.vue

Ce fichier représente le contenu de la page principale de votre site. Il s’agit d’un Single File Component, que nous détaillerons dans la prochaine partie du cours. Cette page sera probablement amenée à faire appel à différents composants présents dans le dossier components.

REMARQUE

⚠️ Il est important de bien saisir la différence entre le concept de page, et celui de composant au sein d’une application Vue.js. Ces deux éléments vont techniquement s’implémenter de façon similaire, mais ne vont pas représenter la même chose. Une composant est un élément constitutif d’une ou plusieurs pages. Un bouton animé, un menu de navigation ou un graphique sont des éléments qui peuvent être organisés chacun au sein d’un composant différent, ce qui vous permettra de mieux les isoler et également les réutiliser plus facilement à divers endroits. Ces composants seront ensuite appelés pour faire partie de pages. Un page peut se voir comme une forme de super-composant, mais elle est surtout liée à des mécanismes différents. Si votre site possède plusieurs pages, vos pages seront associées à un mécanisme de routage, associant chaque page à une url différente par exemple. (plus d’infos dans le chapitre sur le routage). A contrario, une page n’est par nature pas appelée à faire partie d’une autre page, comme peut l’être un composant.

Si votre site présente plusieurs pages, vous pourrez placer ses pages dans un dossier nommé pages par exemple, dissocié de celui de vos composants.

Le dossier components

Ce dossier contient enfin l’ensemble des composants Vue.js constitutifs de vos pages. C’est composants sont généralement des Single File Components, traités dans ce chapitre du cours. Les composants d’un projet concentrent l’ensemble du code gérant un élément visuel spécifique de votre site (HTML, CSS et JS). Ils sont au cœur de l’organisation selon le principe de séparation des préoccupations. Un component peut représenter une grande diversité d’éléments visuels différents : un bouton personnalisé, une fenêtre modale, une diaporama, etc. Suivant une logique d’imbrication, vous avez généralement dans votre site différents niveaux de détails dans vos composants : un composant gérant votre pied de page, pourra faire appel à un composant gérant l’inscription à votre newsletter, lui-même appelant un composant gérant un formulaire, etc.

Lorsqu’ils se multiplient, veillez à bien les organiser en sous-dossiers, en les catégorisant d’une manière qui fasse sens au sein de votre projet.

TIP

👉 Veillez à ce que le nom de vos composants soit toujours très équivoque vis-à-vis de ce qu’il contient. Si vous peinez à identifier le nom à donner à votre composant, c’est sans doute le signe que son contenu n’est pas bien défini, et qu’il mériterait sans doute d’être divisé en plusieurs composants.

Clean du projet par défaut

Par défaut, Vue.js génère une interface Web présentant des exemples d'utilisations de plusieurs concepts que nous verrons par la suite.

Pour repartir sur un projet vierge, vous pouvez simplement :

1. Supprimer le dossier src/components
2. Remplacer le contenu du fichier src/App.vue par :

<template>
    Hello World
</template>

<script>
export default {}
</script>

Si vous lancez votre environnement de développement, vous devriez avoir une interface blanche avec inscrit "Hello World"

Au delà de l’architecture par défaut

L’architecture par défaut présentée plus haut couvre bien l’organisation nécessaire pour séparer proprement les différentes parties constituantes de l’interface de votre site. Toutefois, une application front-end n’est généralement pas seulement responsable de générer ce qu’on appelle la vue de notre application.

Votre application à souvent besoin de récupérer des données de certaines API. Elle peut aussi avoir besoin de gérer certaines données assez globalement dans l’application à l’aide d’un store. Plus rarement, l’application peut avoir certains calculs à faire, pour générer des éléments 3D, ou satisfaire les besoins d’un certain service.

Dans notre soucis de séparation des préoccupations, il est bien de veiller à garder ce code à distance de celui gérant votre interface graphique. Mais alors où mettre ce code ?

Une convention répandue est de disposer dans le dossier src, d’un dossier supplémentaire, souvent nommé services. Vous pourrez dans ce dossier organiser les implémentations de votre application qui ne sont pas directement liées à votre vue. Vous pourrez par exemple y avoir un sous-dossier api, contenant différents fichiers Javascript qui concentreront les requêtes que vous faites en direction de différentes API.

Conclusion

Vous connaissez maintenant les bases de l’architecture d’un projet Vue.js et la façon d’y organiser la répartition de votre code.

Avant d’aborder le développement de nos premiers composants, nous allons plus spécifiquement nous intéresser dans le prochain chapitre au contenu du fichier main.js .

Aller plus loin

• Sur l’architecture d’une application : Openclassrooms
• Sur le principe de séparation de responsabilités :
  • la doc de Vue.js
  • Wikipedia
• Sur le principe de responsabilité unique : Wikipedia
• Sur les principes SOLID :
  • Le blog de Robert C. Martin
  • Wikipedia