Développement Full Stack à l'ère de l'IA

Module 1 · Module 1 — Architecture d'une application full-stack moderne · Leçon 1 sur 1

Architecture d'une application full-stack moderne

Bienvenue dans ce premier module de la formation Développement Full Stack à l'ère de l'IA. Avant d'écrire la moindre ligne de code, on va apprendre à voir. Voir une application comme un ensemble de couches qui communiquent entre elles. C'est la compétence la plus sous-estimée chez les développeurs débutants : savoir dessiner, sur un papier ou un tableau blanc, le chemin que parcourt une simple requête, depuis le clic de l'utilisateur jusqu'à la ligne enregistrée dans la base de données. Prenons un exemple concret. Tu ouvres une boutique en ligne sur ton téléphone. Tu cliques sur un produit. Que se passe-t-il, exactement ? D'abord, ton navigateur ou ton application envoie une requête. C'est un message qui dit, en gros : « donne-moi les informations du produit numéro tant ». Ce message part sur internet et arrive sur un serveur. Ce serveur fait tourner ce qu'on appelle le backend. Le mot backend désigne la partie invisible de l'application, celle qui tourne sur un ordinateur distant, pas sur l'écran de l'utilisateur. Le backend reçoit la requête, comprend ce qu'on lui demande, et va chercher l'information dans une base de données. La base de données, c'est l'endroit où sont stockées, de façon organisée, toutes les informations durables de l'application : les produits, les clients, les commandes. On y reviendra en détail dans le module quatre. Une fois l'information trouvée, le backend la renvoie au navigateur, sous une forme structurée. Et c'est là qu'intervient le frontend, la partie visible de l'application, celle que l'utilisateur voit et avec laquelle il interagit. Le frontend reçoit les données et les transforme en une belle page, avec une image, un prix, un bouton « ajouter au panier ». Trois grandes couches, donc : le frontend, le backend, et la base de données. Dans cette formation, on va ajouter une quatrième couche, transversale celle-là : la couche intelligence artificielle, ou I A. On développera plus tard comment un appel à un modèle de langage vient s'insérer dans ce circuit, généralement du côté du backend, pour des raisons de sécurité qu'on détaillera au module cinq. Maintenant, une question essentielle se pose dès qu'on conçoit une application : où est-ce que le rendu de la page se fait ? Il y a deux grandes familles de réponses. La première s'appelle le rendu côté client. Le navigateur télécharge une application JavaScript quasiment vide au départ, puis c'est cette application, une fois chargée dans le navigateur de l'utilisateur, qui va chercher les données et construit la page localement. C'est rapide une fois chargé, mais le tout premier chargement peut être lent, parce qu'il faut télécharger beaucoup de code avant de voir quoi que ce soit à l'écran. La deuxième s'appelle le rendu côté serveur. Le serveur construit la page complète, avec son contenu, avant même de l'envoyer au navigateur. L'utilisateur voit quelque chose s'afficher beaucoup plus vite, ce qui compte énormément quand la connexion internet est lente ou instable. C'est l'approche que permet Next.js, un framework construit au-dessus de React, qu'on utilisera dans cette formation. Pourquoi est-ce que ce choix compte particulièrement pour nous ? Parce qu'on va construire, tout au long de la formation, une application fictive nommée Sika Mode. Sika Mode est une boutique en ligne de vêtements en tissu pagne, basée à Kigali, qui livre localement. Ses clients se connectent parfois depuis une connexion mobile peu fiable. Si l'application met dix secondes à afficher le premier écran, une bonne partie des visiteurs abandonnera avant même de voir le catalogue. Le choix d'architecture n'est donc pas un détail technique abstrait : il a un impact direct sur le chiffre d'affaires de l'entreprise. Il y a aussi un autre choix structurant : est-ce qu'on sépare complètement le frontend et le backend, comme deux projets indépendants qui communiquent par une interface de programmation, ou est-ce qu'on construit un seul projet qui fait les deux, ce qu'on appelle un monolithe ? Pour une petite application comme Sika Mode, un monolithe bien organisé, comme celui que permet Next.js avec ses routes serveur intégrées, est largement suffisant, et beaucoup plus simple à déployer et à maintenir qu'une architecture éclatée en plusieurs services séparés. On réservera les architectures plus complexes à des besoins réels, pas par anticipation. On reparlera de ce principe, qu'on appelle éviter la sur-ingénierie, dans les pièges du domaine à la fin de la formation. Pour terminer ce module, retiens cette méthode simple, à appliquer à chaque nouveau projet avant d'écrire du code : dessine les couches, dessine les flux de données entre elles, identifie où va se faire le rendu, et pose-toi la question du niveau de complexité vraiment nécessaire compte tenu des contraintes réelles du projet, notamment les contraintes de connexion internet de tes utilisateurs finaux.

Aperçu gratuit, sans compte — la suite de ce module et les modules suivants s'ouvrent après inscription.