# Architecture front-end — Pattern MVC en JavaScript natif ## Vue d'ensemble Les deux applications front-end (`backoffice` et `client`) partagent exactement la même organisation. Chacune applique le patron de conception **MVC (Modèle — Vue — Contrôleur)** en répartissant le code en trois zones aux responsabilités bien définies. ``` application/ │ ├── index.html ◄── CONTRÔLEUR (logique, événements, coordination) │ ├── data/ │ └── dataMenu.js ◄── MODÈLE (dialogue avec l'API serveur) │ ├── component/ │ ├── Menu/ ◄── VUE (affichage, un composant par entité) │ │ ├── script.js │ │ ├── template.html │ │ └── style.css │ └── NewMenuForm/ │ ├── script.js │ ├── template.html │ └── style.css │ ├── css/ (styles globaux) └── assets/ (images, polices...) ``` Chaque couche ne connaît que la suivante — jamais les détails internes des autres. C'est ce cloisonnement qui donne à cette architecture toute sa valeur. --- ## Le Modèle — `data/` ### Rôle Le dossier `data/` concentre **tout le dialogue avec l'API serveur**. C'est le seul endroit de l'application où l'on trouvera des `fetch`. Ni les composants, ni `index.html` n'ont connaissance de l'URL du serveur ou du protocole d'échange. Un fichier = une entité. Aujourd'hui il n'y a que `dataMenu.js`. Si demain on devait gérer des utilisateurs, on créerait `dataUser.js` sans toucher à l'existant. ### Anatomie d'un module de données ``` data/dataMenu.js │ ├── HOST_URL ← URL de base du serveur (seul endroit à modifier si le serveur change) ├── DataMenu.request() ← lecture d'un menu (requête GET) ├── DataMenu.update() ← écriture d'un menu (requête POST) └── export {DataMenu} ← seul DataMenu est exposé ``` ### Exemple : `DataMenu.request()` (application client) ```js DataMenu.request = async function(week, day){ let answer = await fetch(HOST_URL + "/server/script.php?todo=read&semaine=" + week + "&jour=" + day); let data = await answer.json(); // JSON → objet JavaScript automatiquement return data; } ``` La fonction reçoit des paramètres simples (`week`, `day`), construit l'URL nécessaire, attend la réponse, la convertit en objets JS et retourne le résultat. L'appelant n'a aucun besoin de savoir comment le serveur fonctionne. ### Exemple : `DataMenu.update()` (application backoffice) ```js DataMenu.update = async function (fdata) { let config = { method: "POST", body: fdata // FormData directement dans le corps de la requête }; let answer = await fetch(HOST_URL + "/server/script.php?todo=update", config); let data = await answer.json(); return data; } ``` L'objet `FormData` (construit automatiquement à partir d'un `

`) est placé tel quel dans le corps de la requête POST — le nom des champs du formulaire devient les paramètres reçus côté serveur. ### `async` / `await` : pourquoi ? Un `fetch` prend un temps impossible à prédire (le serveur peut être lent, voire hors ligne). Sans `await`, on essayerait de lire les données avant de les avoir reçues. Le mot-clé `await` suspend l'exécution **uniquement à l'intérieur de la fonction** et rend la main au navigateur le temps d'attendre la réponse — sans bloquer le reste de la page. ``` async function → autorise l'utilisation de await à l'intérieur await fetch(…) → attend la réponse réseau avant de continuer await .json() → attend la désérialisation JSON avant de continuer ``` --- ## La Vue — `component/` ### Rôle Le dossier `component/` regroupe les **briques d'interface**. Chaque composant sait uniquement **afficher des données** qu'on lui transmet — il n'appelle jamais le serveur, ne prend aucune décision applicative. Un composant = un dossier dédié, avec trois fichiers : ``` component/NomComposant/ ├── template.html ← structure HTML avec des marqueurs {{placeholder}} ├── style.css ← styles propres à ce composant └── script.js ← logique de rendu (remplacement des placeholders) ``` ### Le mécanisme de rendu par template Le fichier `template.html` est un fragment HTML avec des **marqueurs** (`{{entree}}`, `{{plat}}`, etc.). Le `script.js` du composant le charge une seule fois au démarrage, puis expose une fonction `format()` qui remplace les marqueurs par les données réelles. ``` template.html script.js ┌────────────────────────┐ ┌──────────────────────────────────────┐ │

│ ─── fetch ►│ let template = await fetch(...) │ │ {{entree}}{{plat}} │ │ Menu.format = function(menu){ │ │ {{dessert}} │ │ html = html.replace('{{entree}}', │ └────────────────────────┘ │ menu.entree) │ │ return html ← du HTML prêt │ │ } │ └──────────────────────────────────────┘ ``` ### Exemple : composant `Menu` (client) ```js Menu.format = function(menu){ let html = template; html = html.replace('{{entree}}', menu.entree); html = html.replace('{{plat}}', menu.plat); html = html.replace('{{dessert}}', menu.dessert); return html; // chaîne HTML, prête à injecter dans le DOM } Menu.formatMany = function(menus){ let html = ''; for (const menu of menus) { html += Menu.format(menu); } return html; } ``` Le composant expose deux fonctions : une pour formater un menu, une pour en formater plusieurs. Rien d'autre n'est exporté. ### Encapsulation : exemple avec le composant `Log` (backoffice) ```js let history = []; // interne, non exporté let add = function(txt){ ... } // interne, non exporté let formatHistory = function(){ ... } // interne, non exporté Log.format = function(txt){ // seule fonction publique add(txt); let html = template; html = html.replace("{{logs}}", formatHistory()); return html; } export {Log}; // seul Log est visible de l'extérieur ``` L'historique des logs et les fonctions internes sont **encapsulés** dans le module : personne en dehors du composant ne peut y accéder directement. C'est un exemple simple mais concret d'encapsulation. ### Passage de gestionnaire d'événement par injection Le composant `NewMenuForm` illustre une technique utile : le `handler` (la fonction à appeler au clic) lui est passé sous forme de **chaîne de caractères** : ```js // Dans index.html (contrôleur) NewMenuForm.format("C.handlerUpdate()"); // Dans template.html // Résultat dans le DOM ``` Le composant n'a jamais connaissance de l'existence de `C.handlerUpdate`. Il injecte la chaîne et le navigateur s'occupe de l'appeler au bon moment. Le composant reste ainsi totalement découplé du contrôleur. --- ## Le Contrôleur — `index.html` ### Rôle `index.html` est **l'application elle-même**. C'est là que le Modèle et la Vue sont importés et connectés. Le ` ``` ### Le flux d'un événement ``` [Utilisateur clique "Lundi"] │ ▼ C.getMenu('lundi') ← Contrôleur reçoit l'événement │ ▼ DataMenu.request(semaine, 'lundi') ← appel Modèle │ (fetch + await) ▼ [ API serveur répond avec du JSON ] │ ▼ data = [{entree:..., plat:..., dessert:...}] │ ▼ V.renderMenu(data) ← Contrôleur délègue à la Vue │ ▼ Menu.formatMany(data) ← composant formate en HTML │ ▼ content.innerHTML = html ← DOM mis à jour │ ▼ [Page affiche le menu] ``` ### `window.C` et `window.V` plutôt que `let C` À l'intérieur d'un `