Architecture web et JavaScript asynchrone

Informatique de gestion · Bachelor 3

Architecture client-serveur, DOM, événements, promesses, async/await et rendu serveur ou client.

Introduction

Une application web repose sur une architecture client-serveur : le navigateur affiche l'interface construite avec HTML (structure), CSS (présentation) et JavaScript (comportement), tandis que le serveur fournit des pages et des données. Le navigateur transforme le HTML en arbre d'objets, le DOM, que JavaScript peut lire et modifier en réponse aux événements (clic, saisie).

JavaScript s'exécute dans un seul fil d'exécution et repose sur une boucle d'événements : les opérations lentes (requêtes réseau, minuteries) sont déléguées et leurs résultats traités plus tard par des fonctions de rappel, des promesses ou la syntaxe async/await, sans bloquer l'interface. Une promesse représente une valeur future qui est soit tenue, soit rejetée ; fetch() renvoie une promesse pour appeler une API.

On distingue le rendu côté serveur (le serveur renvoie du HTML complet, favorable au référencement et à l'affichage initial) et le rendu côté client dans une application monopage (SPA), plus interactive mais exigeant davantage de JavaScript. Le choix dépend des besoins : site vitrine, intranet de gestion, application métier riche.

Objectifs d'apprentissage

Décrire les rôles de HTML, CSS et JavaScript et le DOM
Expliquer la boucle d'événements et le caractère non bloquant de JavaScript
Utiliser promesses et async/await pour appeler une API avec gestion d'erreurs
Comparer rendu côté serveur et SPA
Identifier les enjeux de performance et d'accessibilité

Concepts clés

HTML, CSS, JavaScript: HTML structure le contenu, CSS gère la présentation, JavaScript ajoute l'interactivité et manipule le DOM.
DOM et événements: Le DOM est la représentation en arbre de la page ; des écouteurs d'événements réagissent aux actions de l'utilisateur.
Boucle d'événements: JavaScript exécute un fil unique ; les tâches asynchrones sont mises en file et traitées lorsque la pile d'appels est libre.
Promesses et async/await: Une promesse est en attente, tenue ou rejetée. async/await écrit du code asynchrone de manière séquentielle, avec try/catch pour les erreurs.
Rendu côté serveur versus SPA: SSR : HTML généré côté serveur, bon pour le référencement et le premier affichage. SPA : navigation fluide mais chargement initial plus lourd.

Conclusion

Comprendre l'architecture du navigateur, le DOM et l'asynchronisme est la base de tout développement web moderne. Les promesses et async/await rendent le code asynchrone lisible, à condition de gérer systématiquement les erreurs.

Le choix entre rendu serveur et SPA doit découler des besoins du projet : performance, référencement, interactivité et coût de maintenance.

Cartes

Quel est le rôle de chacun de HTML, CSS et JavaScript ?: HTML : structure du contenu. CSS : mise en forme. JavaScript : comportement et interactivité.
Qu'est-ce que le DOM ?: La représentation en arbre d'objets de la page HTML, manipulable par JavaScript.
Qu'est-ce qu'un écouteur d'événement ?: Une fonction associée à un élément et exécutée lorsqu'un événement donné (clic, saisie) se produit.
Pourquoi JavaScript est-il dit non bloquant ?: Parce que les opérations lentes sont traitées de façon asynchrone via la boucle d'événements, sans geler l'interface.
Qu'est-ce qu'une promesse (Promise) ?: Un objet représentant le résultat futur d'une opération asynchrone, qui sera tenue (resolve) ou rejetée (reject).
Que fait le mot-clé await ?: Il suspend l'exécution de la fonction async jusqu'à ce que la promesse soit résolue, sans bloquer le fil principal.
Comment gérer les erreurs avec async/await ?: Avec try/catch autour des await, ou avec .catch() sur la promesse.
Que retourne fetch(url) ?: Une promesse de réponse HTTP ; il faut ensuite lire le corps, par exemple avec response.json().
Quel est un avantage du rendu côté serveur ?: Un premier affichage rapide et un meilleur référencement, car le HTML est déjà complet.
Quel est un inconvénient d'une SPA ?: Un chargement initial plus lourd et un référencement plus délicat si le contenu dépend entièrement de JavaScript.

Glossaire

DOM: Arbre d'objets représentant le document HTML chargé.
Boucle d'événements: Mécanisme qui orchestre l'exécution du code et des tâches asynchrones en JavaScript.
Promesse: Objet représentant la valeur future d'une opération asynchrone.
SPA: Application monopage qui charge une seule page puis met à jour l'interface côté client.
Rendu côté serveur (SSR): Génération du HTML complet par le serveur avant envoi au navigateur.
Accessibilité web: Conception permettant l'usage par toutes les personnes, y compris en situation de handicap.