Bonjour !
Introduction
Dans la leçon précédente, nous avons appris les verbes essentiels pour décrire le cycle de vie du code : développer, tester, déboguer, fusionner et déployer. Vous pouvez maintenant décrire les actions principales de votre travail de développeur.
Aujourd'hui, nous allons nous concentrer sur les "lieux" où ces actions se déroulent. L'objectif est d'apprendre à identifier et nommer les composants courants d'une architecture système en français. En tant que développeur full-stack, vous connaissez ces concepts sur le bout des doigts. Cette leçon vous donnera les mots français correspondants : serveur, base de données, API, front-end et back-end. C'est un vocabulaire fondamental pour toute discussion technique.
1. La grande image : Front-End et Back-End
Commençons par la distinction fondamentale entre ce que l'utilisateur voit et ce qui se passe en coulisses.
Pour introduire ces concepts en français, regardez cette courte vidéo qui utilise une excellente analogie.
Dev Front End vs Back End : quelles différences ?
Cette vidéo du canal Cookie connecté explique la différence entre le front-end et le back-end en utilisant l'analogie d'un magasin de vêtements. C'est un excellent moyen de commencer.
Regardez la première partie de la vidéo, de 0:27 à 1:13. Faites attention à la distinction entre 'la boutique' (le front-end) et 'l'arrière de la boutique' (le back-end).
Maintenant que vous avez l'analogie en tête, approfondissons la terminologie technique. La vidéo suivante explique plus en détail les technologies associées à chaque partie.
5 Min pour comprendre le Back End et le Front End
La vidéo '5 Min pour comprendre le Back End et le Front End' de Faiz Dev détaille les composants techniques de chaque partie. C'est un complément parfait à l'analogie que nous venons de voir.
Regardez les deux segments suivants : De 0:19 à 1:17 pour la définition du front-end. De 1:17 à 1:49 pour l'introduction au back-end et à ses composants principaux. Notez les mots 'serveur', 'API', et 'logique'.
Pour résumer et fixer le vocabulaire :
- Le Front-End : C'est la partie visible de l'application, l'interface utilisateur (user interface ou UI). On l'appelle aussi le "côté client" (client-side).
- Exemple : Je travaille sur le front-end avec React.
- Le Back-End : C'est la partie invisible qui gère la logique, les données et les traitements. On l'appelle le "côté serveur" (server-side).
- Exemple : La logique métier est implémentée dans le back-end.
2. Les composants clés du Back-End
Le back-end lui-même est composé de plusieurs éléments que vous manipulez tous les jours. Apprenons leurs noms en français.
Lexique IT - Dictionnaire informatique Sparks
Ce 'Lexique IT' est une ressource très utile pour trouver des définitions claires de termes techniques. Nous allons l'utiliser pour définir précisément les composants du back-end.
Veuillez lire les définitions des termes suivants dans le lexique : Serveur (dans la section 'S') Base de données (dans la section 'B') API (dans la section 'A')
Synthétisons ce que vous venez de lire :
-
Un serveur (masculin) : C'est l'ordinateur ou le système matériel et logiciel qui stocke l'application et répond aux requêtes des clients.
- Exemple : Nous devons déployer la nouvelle version sur le serveur de production.
-
Une base de données (féminin) : C'est un système structuré pour stocker, organiser et consulter de grandes quantités d'informations.
- Exemple : L'application se connecte à une base de données PostgreSQL pour récupérer les informations utilisateur.
-
Une API (féminin, pour Application Programming Interface) : C'est l'interface de programmation qui permet à différents logiciels de communiquer entre eux. Dans notre contexte, c'est le "pont" entre le front-end et le back-end.
- Exemple : Le front-end appelle une API REST pour obtenir la liste des produits.
3. Comment tout cela fonctionne ensemble ?
Vous savez comment ces éléments interagissent. Voyons maintenant comment décrire ce flux en français, en nous aidant de schémas.
Voici une première visualisation simple du flux de communication.
Ce deuxième schéma est plus détaillé et utilise une terminologie très proche de ce que vous utilisez dans votre travail quotidien, notamment avec les API REST.
Pour voir cette interaction "en direct", regardons la fin de la vidéo de Faiz Dev.
5 Min pour comprendre le Back End et le Front End
Cette partie de la vidéo explique concrètement comment le front-end et le back-end communiquent via l'API, en montrant un exemple de requête et de réponse au format JSON.
Regardez la section de 4:24 à 5:20. Observez comment le front-end 'appelle une route' de l'API et reçoit une réponse en 'format JSON'.
4. Mettez en pratique
Associez chaque définition à son terme correct.
| Définition | Terme |
|---|---|
| 1. L'interface visible par l'utilisateur (boutons, textes, images). | A. Le back-end |
| 2. L'ordinateur qui héberge l'application et traite les requêtes. | B. Le front-end |
| 3. L'ensemble organisé des données de l'application. | C. Une API |
| 4. La "partie cachée" qui contient la logique métier et les données. | D. Un serveur |
| 5. Le contrat de communication entre le client et le serveur. | E. Une base de données |
Voir les réponses
1. B (Le front-end) 2. D (Un serveur) 3. E (Une base de données) 4. A (Le back-end) 5. C (Une API)Conclusion
Félicitations ! Vous avez maintenant le vocabulaire essentiel pour décrire une architecture web de base en français.
Points clés à retenir :
- Le front-end (côté client) et le back-end (côté serveur) sont les deux parties principales d'une application web.
- Le back-end est généralement composé d'un serveur, d'une application, et d'une base de données.
- L'API (Interface de Programmation d'Application) sert de pont pour que le front-end et le back-end puissent communiquer de manière structurée.
Dans la prochaine leçon, nous allons zoomer sur une tâche très spécifique du développeur : le débogage. Nous apprendrons le vocabulaire nécessaire pour parler d'un bug, d'un point d'arrêt, d'une variable et d'une trace d'exécution.
À bientôt