Expliquer comment fonctionne un produit web, du navigateur au serveur

Que vais-je savoir expliquer à la fin de ce cours, et dans quel ordre ?

1. Présentation du cours2 étapes

   Objectif · À la fin de cette présentation, vous saurez ce que vous serez capable d'expliquer (le parcours complet d'une requête dans un produit web), le livrable que vous produirez sur votre propre produit et par quels cinq modules le cours vous y conduit.

Que se passe-t-il entre le moment où l'on tape une adresse et celui où la page s'affiche ?

1. Le parcours d'une requête, en six étapes5 étapes

   Objectif · À la fin de cette leçon, vous serez capable de décomposer une URL et de décrire, dans l'ordre, les six étapes qui mènent de l'adresse tapée à la page affichée, en précisant ce qui se passe chez l'utilisateur et ce qui se passe sur les serveurs.

2. Trouver le serveur et sécuriser la connexion (DNS et HTTPS)6 étapes

   Objectif · À la fin de cette leçon, vous serez capable d'expliquer comment un nom de domaine est traduit en adresse IP, de lire les principaux enregistrements DNS et l'effet de leur TTL, et de dire ce que garantit, et ne garantit pas, une connexion HTTPS.

Que contient un échange HTTP, et comment le navigateur transforme-t-il la réponse en page ?

1. Lire une requête et sa réponse dans l'onglet Réseau5 étapes

   Objectif · À la fin de cette leçon, vous serez capable d'ouvrir l'onglet Réseau de votre navigateur, de lire une requête HTTP (méthode, URL, code de statut, en-têtes, cookies, durée) et d'en tirer un premier diagnostic à transmettre à l'équipe.

2. Du code reçu à la page affichée5 étapes

   Objectif · À la fin de cette leçon, vous serez capable d'expliquer comment le navigateur transforme HTML, CSS et JavaScript en page affichée, de distinguer rendu côté client, côté serveur et statique, et de relier ces choix aux Core Web Vitals.

Qui fait quoi dans un produit web, et où doit s'exécuter chaque règle ?

1. Frontend, backend et API, qui fait quoi5 étapes

   Objectif · À la fin de cette leçon, vous serez capable de répartir les responsabilités d'une fonctionnalité entre frontend, API et backend, de lire un échange de données en JSON et de justifier qu'une règle métier ou de sécurité soit vérifiée côté serveur.

2. Derrière l'API, données, fichiers et services tiers5 étapes

   Objectif · À la fin de cette leçon, vous serez capable de décrire ce qui se trouve derrière une API (base de données, stockage de fichiers, services tiers, traitements asynchrones, journaux) et de choisir, pour une fonctionnalité, ce qui doit se faire pendant la requête et ce qui peut se faire en arrière-plan.

Pourquoi le produit est-il rapide, pourquoi affiche-t-il parfois une donnée périmée, et pourquoi un bug n'apparaît-il qu'en production ?

1. CDN et caches, rapides mais parfois en retard5 étapes

   Objectif · À la fin de cette leçon, vous serez capable d'expliquer le rôle d'un CDN et des trois niveaux de cache (navigateur, CDN, serveur), de lire un en-tête Cache-Control et de proposer une façon d'éviter qu'une donnée affichée soit périmée.

2. Local, prévisualisation, staging, production5 étapes

   Objectif · À la fin de cette leçon, vous serez capable de distinguer les environnements d'un produit (local, prévisualisation, staging, production), de lister ce qui change de l'un à l'autre (configuration, données, secrets, services tiers) et d'en déduire des hypothèses quand un problème n'apparaît que dans l'un d'eux.

Comment me servir de tout cela pour qualifier un incident et décrire mon propre produit ?

1. Qualifier un incident couche par couche5 étapes

   Objectif · À la fin de cette leçon, vous serez capable de rattacher un symptôme (lenteur, page blanche, erreur, donnée périmée, action sans effet) à une couche probable du parcours, de réunir les preuves utiles et de rédiger un signalement qui permet à l'équipe d'agir vite.

2. Dessiner le parcours d'une requête dans votre produit6 étapes

   Objectif · À la fin de cette leçon, vous serez capable de produire le schéma annoté du parcours d'une requête dans votre propre produit (huit zones, cinq annotations par zone) et de le faire valider par un développeur.

3. Kit de sortie et plan d'application4 étapes

   Objectif · À la fin de cette leçon, vous disposerez des modèles, checklists et prompts du cours, et vous aurez planifié leur application à votre produit sur 7 et 30 jours.