Architecture de projet

Lors de la création d’un projet, le framework génère automatiquement les bases d’une architecture de projet.

Dans ce chapitre, nous allons étudier comment s'organise cette architecture avant d'attaquer le développement dans la prochaine partie.

Modules et fichiers de configuration

Lors de la création d’un projet, le framework génère un certain nombre de fichiers de configuration présents dans le dossier racine du projet :

• .gitignore : il permet de gérer les fichiers/dossiers que vous ne souhaitez pas versionner si vous associez le projet à un repository Git. Par défaut, le framework ne versionne pas les librairies tierces dont dépend votre projet, présentes dans le dossier node_modules, ainsi que le dossier dist qui accueille généralement le build du projet. (documentation)
• package.json et package-lock.json : ces fichiers contiennent les informations sur les librairies tierces dont dépend le projet, ainsi que des infos générales et des configurations propres à tout projet Node.js. Vous trouverez plus de détails à leur sujet dans la fiche annexe sur Node.js.
• jsconfig.json : il est destiné à l'IDE (Visual Studio Code, par exemple). Il lui fournit notamment des informations sur le fonctionnement du projet (version de JavaScript utilisée, emplacement de vos fichiers sources, dépendances du projet, etc.). Cela lui permet notamment de vous fournir davantage de propositions d’auto-complétion durant le développement. Plus d’infos sur sa configuration dans cette référence.
• Le fichier vite.config.js permet de modifier la configuration par défaut du fonctionnement de Vite. Vite est la bibliothèque qui se charge du build du projet lors de sa mise en production. C'est également Vite qui gère la mise en place de l'environnement de développement. Plus d’infos dans cette référence.

La configuration par défaut de ces différents fichiers convient à la plupart des projets. Pour les besoins de ce cours, nous n'aurons pas à les modifier. Si vous souhaitez mettre en place une configuration plus avancée, référez-vous aux documentations respectives de chaque fichier.

Code source et partie statique

Reste trois dossiers à la racine du projet : node_modules, public et src.

Le dossier node_modules

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

Le dossier public

Le dossier public contient l’ensemble du code que vous souhaitez intégrer à votre projet sans qu’il soit nécessaire de le compiler lors de la mise en production. Autrement dit, une fois le projet compilé, le contenu du dossier public sera tout simplement copié à côté du code compilé. Aucun de ces dossiers ou fichiers ne sera renommé ou modifié. Ils pourront ainsi être accessibles directement via leur chemin de fichier sur le serveur de production.

NOTE

📌 Contrairement aux projets en JavaScript natif, les applications utilisant un framework moderne passent par une phase de build. Ce build consiste à transformer le code source du projet en d'autres fichiers de code plus compacts et plus légers, afin qu'ils puissent être téléchargés de façon optimisée une fois en production. On parle de minification du code. Le build concerne aussi bien les fichiers de code (JavaScript, CSS) que les médias (PNG, MP4, etc), qui peuvent eux aussi être optimisés lors de cette étape.
Cette étape permet également de traduire certains fichiers de code écrits dans une syntaxe spécifique au framework, comme nous le verrons. Lors du build, ce code est converti en JavaScript standard pour être interprétable par les navigateurs internet.
Le build de projet Javascript est un sujet à part entière qu'il n'est pas nécessaire de maîtriser pour débuter le développement d'un projet avec le framework. Nous ne l'aborderons donc pas davantage dans le début de ce cours.

Le dossier public est généralement peu exploité. Il peut être utilisé pour joindre des documents au projet, que les utilisateurs pourront télécharger. On y trouve également le favicon du site, et parfois le fichier index.html, qui sert de point d'entrée à l'application.

Le dossier src

Contrairement au dossier public, le contenu du dossier src sera compilé lors de la mise en production. C’est dans ce dossier que se concentre l’ensemble du code que nous allons produire.

Le fichier main

Dans le dossier src, on trouve tout d'abord le fichier main. Il sert à initialiser le framework dans l'application. Si vous regardez le fichier index.html, vous verrez que le fichier y est importé.

Contrairement à une application web classique, où le contenu de la page est décrit directement dans le fichier index.html, l'ensemble du contenu HTML est ici injecté via du code JavaScript.

import { StrictMode } from 'react' // Used for debug, not important
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Dans le code de ce fichier, l'application est initialisée à l'aide d'une fonction provenant de la bibliothèque du framework.

Lors de cette initialisation, la fonction a besoin de deux informations principales :

• L'emplacement dans le fichier index.html où le code de l'application doit être inséré : pour cela, le code fait référence à une balise <div> présente dans le fichier index.html, identifiée à l'aide de son attribut id. C'est dans cette balise que le contenu généré par le framework sera injecté.
• Le composant décrivant le contenu de l'application : ici, il s'agit du composant App, importé depuis le second fichier présent dans src. Les composants sont un concept introduit par le framework pour décrire le contenu HTML, CSS et JavaScript d'une application de manière modulaire et réutilisable. Ce concept et sa syntaxe seront abordés en détail dans la prochaine partie du cours.

En associant une balise HTML à un composant, ce fichier indique au framework comment injecter le contenu que nous développerons dans le fichier index.html, lequel sera interprété par le navigateur une fois en production.

Ce fichier est principalement utilisé pour la configuration initiale du framework. Par conséquent, il sera rarement nécessaire d'y revenir au cours du développement.

Le fichier App

Comme évoqué précédemment, c'est ce fichier qui est chargé de décrire le contenu de l'application. Le cœur du développement se fera dans ce type document. Nous verrons dans les prochains chapitres comment il se structure.

Conclusion

Ce chapitre pose quelques repères théoriques sur la façon dont s'architecture un projet JavaScript moderne utilisant un framework. Nous allons maintenant attaquer, dans la prochaine partie, le développement concret d'une application en explorant plus en détail le concept de composant.