Module 3 : Frontend vs Backend

Objectif du module

Comprendre la différence entre ce que vous voyez à l'écran (le frontend) et ce qui se passe en coulisses (le backend), et pourquoi cette distinction est importante.

Explication simple

Quand vous utilisez un site web ou une application, il y a deux mondes qui travaillent ensemble :

Le Frontend — Ce que vous voyez

Le frontend (ou "côté client"), c'est tout ce qui s'affiche sur votre écran et avec quoi vous interagissez directement :

Les boutons sur lesquels vous cliquez
Les menus que vous ouvrez
Les formulaires que vous remplissez
Les animations que vous voyez
La mise en page, les couleurs, les images

Le frontend, c'est la vitrine du magasin. C'est la partie visible, celle que le visiteur touche et regarde.

Il est construit avec les trois briques que nous avons vues : HTML, CSS et JavaScript.

Le Backend — Ce qui travaille en coulisses

Le backend (ou "côté serveur"), c'est tout ce qui se passe derrière le rideau, sur le serveur :

Vérifier que votre mot de passe est correct
Chercher les produits qui correspondent à votre recherche
Enregistrer votre commande
Envoyer un email de confirmation
Calculer le prix avec la réduction appliquée

Le backend, c'est l'arrière-boutique du magasin : la réserve, la caisse, le bureau du gérant. Le client ne le voit jamais, mais sans lui, rien ne fonctionne.

Comment ils communiquent

graph LR
    subgraph Vous["Ce que vous voyez"]
        F["Frontend (votre navigateur)"]
    end
    subgraph Serveur["Ce que vous ne voyez pas"]
        B["Backend (le serveur)"]
        D["Base de données"]
    end
    F -->|"Demande : je veux voir mes commandes"| B
    B -->|"Va chercher les données"| D
    D -->|"Voici les commandes"| B
    B -->|"Réponse : voici vos commandes"| F

Le frontend et le backend dialoguent en permanence. À chaque fois que vous cliquez sur un bouton qui nécessite des données (se connecter, chercher un produit, passer commande), le frontend envoie une demande au backend, qui fait le travail et renvoie la réponse.

En résumé

Aspect	Frontend	Backend
Où ?	Sur votre ordinateur/téléphone	Sur un serveur distant
Visible ?	Oui — c'est ce que vous voyez	Non — ça travaille en coulisses
Rôle	Afficher et interagir	Traiter, calculer, stocker
Outils	HTML, CSS, JavaScript	Langages serveur, base de données
Analogie	La salle du restaurant	La cuisine du restaurant

Exemple concret

Vous vous connectez à votre boîte email :

Frontend : vous voyez un formulaire avec deux champs (email et mot de passe) et un bouton "Se connecter". Vous tapez vos informations et cliquez.
Backend : le serveur reçoit votre email et votre mot de passe. Il vérifie dans sa base de données si le compte existe et si le mot de passe est correct. Si oui, il récupère vos emails et les renvoie.
Frontend : votre navigateur reçoit la liste de vos emails et les affiche joliment à l'écran, avec les noms des expéditeurs, les objets, les dates.

Tout ce processus prend moins d'une seconde, et vous ne voyez que le résultat final.

Métaphore

Pensez à un restaurant :

Le frontend, c'est la salle : la décoration, les tables, le menu, le serveur qui prend votre commande. C'est tout ce que le client voit et touche.
Le backend, c'est la cuisine : les chefs qui préparent le plat, le réfrigérateur où sont stockés les ingrédients, la recette qui est suivie. Le client ne voit jamais la cuisine, mais c'est là que le vrai travail se fait.

Le serveur (la personne) fait la liaison entre les deux : il prend votre commande en salle et la transmet à la cuisine, puis il revient avec votre plat. Dans le web, ce "serveur" qui fait la liaison, c'est le réseau internet.

Et si l'un des deux ne fonctionne pas ?

Frontend en panne : la page ne s'affiche pas correctement, les boutons ne marchent pas. Vous voyez quelque chose, mais c'est cassé ou moche. C'est comme un restaurant avec une salle dans le noir.
Backend en panne : la page s'affiche, mais rien ne fonctionne — vous ne pouvez pas vous connecter, pas chercher, pas commander. C'est comme un restaurant avec une belle salle, mais personne en cuisine.

Résumé en 3 points clés

Le frontend est ce que vous voyez et touchez — le backend est ce qui travaille en coulisses
Ils communiquent en permanence : le frontend envoie des demandes, le backend répond avec des données
Un site web a besoin des deux pour fonctionner — comme un restaurant a besoin d'une salle ET d'une cuisine