Retour au blog

Quiz : Maîtrises-tu le Développement Web (MVC, API, Frameworks) ?

Le web ne se résume plus à du HTML/CSS. Es-tu à jour sur les architectures qui font tourner les géants du net ?

Cet article a été rédigé à des fins pédagogiques. Les informations présentées peuvent évoluer. Nous t’invitons à vérifier auprès de sources officielles.

L'essentiel à connaître

Le développement web moderne repose sur une séparation claire des responsabilités. L'architecture MVC (Modèle-Vue-Contrôleur) est le standard historique : le Modèle gère les données, la Vue s'occupe de l'affichage, et le Contrôleur fait le pont entre les deux. Cette structure permet de maintenir et d'étendre facilement des applications complexes. Aujourd'hui, on tend vers des architectures "découplées" où le Front-end (React, Vue, Angular) communique avec un Back-end via des API REST.

Une API REST (Representational State Transfer) utilise les méthodes HTTP standards (GET, POST, PUT, DELETE) pour manipuler des ressources, généralement au format JSON. C'est le langage universel du web. En parallèle, les frameworks ont révolutionné la productivité des développeurs. Que ce soit pour le Back-end (Express, Django, Laravel) ou le Front-end, ils offrent des structures prêtes à l'emploi et gèrent des tâches répétitives comme le routage ou la gestion d'état.

Définition : Un Framework est un ensemble d'outils et de bibliothèques qui définit une structure de travail pour développer une application de manière cohérente.

À retenir : Le format JSON est devenu le standard de fait pour l'échange de données sur le Web grâce à sa légèreté et sa lisibilité par l'humain.

Les points clés

Dans l'écosystème Front-end, la notion de "Virtual DOM" (utilisée par React) a permis d'optimiser les performances en ne mettant à jour que les parties nécessaires de la page. Les Single Page Applications (SPA) offrent ainsi une fluidité proche des applications mobiles. Côté Back-end, l'essor du Server-Side Rendering (SSR) et des générateurs de sites statiques (SSG) montre un retour vers l'optimisation pour le SEO et le temps de chargement initial.

Les pièges fréquents résident souvent dans la mauvaise utilisation des verbes HTTP. Par exemple, utiliser un GET pour modifier une donnée (ce qui devrait être un POST ou PUT) peut causer des problèmes de sécurité et de mise en cache. Un autre point de vigilance est le CORS (Cross-Origin Resource Sharing), un mécanisme de sécurité qui peut bloquer les requêtes entre domaines différents si le serveur n'est pas correctement configuré. Enfin, n'oublie pas l'importance des outils de versioning comme Git dans le flux de travail d'une équipe web.

Méthodes REST : GET (Lire), POST (Créer), PUT (Modifier), DELETE (Supprimer)

Piège classique : Confondre une Bibliothèque (ex: jQuery) et un Framework (ex: Angular). Le framework impose son architecture, alors que tu appelles la bibliothèque quand tu en as besoin.

Quiz : Teste tes connaissances

Question 1 : Dans l'architecture MVC, quel composant est responsable de l'affichage des données ?

A. Le Modèle
B. La Vue
C. Le Contrôleur
D. La Base de données

Réponse : B. La Vue reçoit les données du contrôleur et les présente à l'utilisateur sous forme de HTML/CSS.

Question 2 : Quelle méthode HTTP est utilisée pour créer une nouvelle ressource dans une API REST ?

A. GET
B. PUT
C. POST
D. DELETE

Réponse : C. POST est la méthode standard pour envoyer des données au serveur afin de créer un nouvel enregistrement.

Question 3 : Que signifie l'acronyme JSON ?

A. Java Simple Object Notation
B. Joint System Operational Network
C. Just Some Online Notes
D. JavaScript Object Notation

Réponse : D. C'est un format de données dérivé de la syntaxe des objets JavaScript, utilisé pour l'échange de données entre client et serveur.

Question 4 : Qu'est-ce qu'un "State" dans un framework comme React ?

A. Un objet qui contient les données dynamiques d'un composant
B. Le pays où se trouve le serveur
C. Une commande pour arrêter l'application
D. Le style CSS de la page

Réponse : A. Le State permet au composant de se "souvenir" d'informations et de se re-rendre automatiquement quand elles changent.

Question 5 : Quel est le rôle principal d'un "Routeur" dans une application Web ?

A. Connecter le Wifi
B. Associer une URL à une action ou un composant spécifique
C. Trier les mails
D. Chiffrer les mots de passe

Réponse : B. Le routage définit quelle partie de l'application doit s'afficher en fonction de l'adresse tapée dans le navigateur.

Question 6 : Quel code de statut HTTP indique la ressource demandée n'existe pas ?

A. 200
B. 500
C. 404
D. 301

Réponse : C. Le célèbre "404 Not Found" est le code d'erreur client standard pour une URL inexistante.

Question 7 : Quelle est la principale différence entre une bibliothèque et un framework ?

A. Le prix
B. Le framework est pour le back-end uniquement
C. La bibliothèque est plus grosse
D. L'inversion de contrôle (le framework appelle ton code)

Réponse : D. Avec une bibliothèque, tu gardes le contrôle du flux. Avec un framework, tu remplis des cases dans une structure préexistante.

Question 8 : Dans une API REST, à quoi sert le format "HATEOAS" ?

A. À accélérer les requêtes SQL
B. À inclure des liens de navigation dans les réponses JSON
C. À compresser les images
D. À sécuriser les accès admin

Réponse : B. Cela permet à l'API d'être auto-découvrable en fournissant au client les actions possibles via des liens.

Question 9 : Qu'est-ce que le "Virtual DOM" ?

A. Une copie légère du DOM réel pour optimiser les mises à jour
B. Un casque de réalité virtuelle pour coder
C. Un mode de navigation privée
D. Une base de données stockée dans le navigateur

Réponse : A. En comparant le Virtual DOM et le DOM réel, les frameworks ne modifient que ce qui a changé, ce qui booste les performances.

Question 10 : Quel outil permet de gérer les dépendances dans un projet Node.js ?

A. Composer
B. Pip
C. NPM (ou Yarn)
D. Maven

Réponse : C. NPM (Node Package Manager) est l'outil standard pour installer des bibliothèques externes en JavaScript.

Question 11 : Qu'est-ce qu'un "Middleware" ?

A. Un développeur de niveau moyen
B. Le matériel entre le PC et la prise
C. Un type de base de données
D. Une fonction qui s'exécute entre la requête et la réponse finale

Réponse : D. Les middlewares servent souvent à vérifier l'authentification, gérer les logs ou parser les données entrantes.

Question 12 : Quel est l'avantage du SSR (Server-Side Rendering) ?

A. Moins de travail pour le serveur
B. Meilleur référencement (SEO) et affichage initial plus rapide
C. Pas besoin de JavaScript
D. Le site fonctionne sans Internet

Réponse : B. En envoyant du HTML déjà construit, les moteurs de recherche indexent mieux le contenu qu'avec du rendu client pur.

Question 13 : Que signifie l'acronyme SPA en développement web ?

A. Single Page Application
B. Simple Program Architecture
C. Secure Port Access
D. Server Protocol Asset

Réponse : A. Une SPA charge une seule page HTML et met à jour dynamiquement le contenu sans recharger totalement la page.

Question 14 : Quelle technologie est souvent utilisée pour les communications en temps réel (ex: chat) ?

A. FTP
B. Emails
C. WebSockets
D. Cookies

Réponse : C. Les WebSockets permettent une connexion bidirectionnelle permanente entre le client et le serveur.

Question 15 : Dans MVC, que fait le Contrôleur si l'utilisateur demande à voir son profil ?

A. Il dessine l'image de profil
B. Il demande les infos au Modèle et les envoie à la Vue
C. Il modifie le mot de passe par sécurité
D. Il ferme la connexion

Réponse : B. Le contrôleur est le chef d'orchestre : il traite la demande, récupère les données et choisit comment les afficher.

Comment ORBITECH Peut T'aider

ORBITECH AI Academy met à ta disposition des outils concrets pour réviser plus efficacement et progresser à ton rythme.

Tous ces outils sont disponibles sur ta plateforme ORBITECH. Connecte-toi et explore ceux qui correspondent le mieux à tes besoins !

Contenu en libre diffusion — partage autorisé sous réserve de mentionner ORBITECH AI Academy comme source.

COMMENCE DÈS MAINTENANT

Cours approfondis, méthodologie et orientation pour réussir dans le supérieur.

Commencer gratuitement
🌍 ORBITECH AI Academy — Free education in 88 languages for 171 countries