Chapitre 19 — 100 QCM de Validation

---

Q01 — Quel langage a popularisé le concept de « styles en cascade » pour le web ?

A. HTML
B. CSS
C. JavaScript
D. XML

Réponse : B
Explication : CSS (Cascading Style Sheets) a introduit la notion de cascade où plusieurs règles peuvent s'appliquer à un même élément, avec un algorithme de précédence basé sur la spécificité et l'ordre. HTML structure, JavaScript rend interactif, XML transporte des données — aucun n'utilise le concept de cascade.
Chapitre : 00 — Introduction

---

Q02 — Quel inventeur a créé le World Wide Web en 1989 ?

A. Vint Cerf
B. Tim Berners-Lee
C. Robert Cailliau
D. Marc Andreessen

Réponse : B
Explication : Tim Berners-Lee a proposé le système de gestion de l'information qui deviendra le Web, alors qu'il travaillait au CERN. Robert Cailliau a co-proposé le projet. Vint Cerf a co-inventé TCP/IP. Marc Andreessen a créé Mosaic, le premier navigateur graphique.
Chapitre : 01 — Histoire du Web

---

Q03 — Quelle était la principale innovation du navigateur Mosaic (1993) ?

A. Le support du JavaScript
B. L'affichage d'images inline avec le texte
C. Les onglets de navigation
D. Les extensions navigateur

Réponse : B
Explication : Mosaic a été le premier navigateur à afficher les images directement dans le texte (inline), contre les navigateurs précédents qui ouvraient les images dans une fenêtre séparée. JavaScript est arrivé avec Netscape (1995), les onglets avec Opera (2000), les extensions avec Firefox (2004).
Chapitre : 01 — Histoire du Web

---

Q04 — Quelle guerre des navigateurs a opposé Netscape et Microsoft ?

A. La guerre des standards
B. La première guerre des navigateurs (1995-2001)
C. La seconde guerre des navigateurs (2004-2017)
D. La guerre des protocoles

Réponse : B
Explication : La première guerre des navigateurs (1995-2001) oppose Netscape Navigator à Internet Explorer. Microsoft inclut IE gratuitement avec Windows, utilise des APIs propriétaires, et finit par marginaliser Netscape. La seconde guerre (2004-2017) voit Firefox, Chrome, et Safari défier la domination d'IE.
Chapitre : 01 — Histoire du Web

---

Q05 — Quel événement a marqué la fin de la première guerre des navigateurs ?

A. La sortie de Firefox 1.0
B. La sortie de Chrome
C. La sortie de Netscape 6
D. L'arrêt officiel de Netscape Navigator en 2007

Réponse : D
Explication : Netscape Navigator, racheté par AOL, a officiellement cessé d'être supporté en 2007, marquant la fin définitive de la première guerre des navigateurs. Firefox (2004) et Chrome (2008) appartiennent à la seconde ère.
Chapitre : 01 — Histoire du Web

---

Q06 — Quel est le principal objectif des Web Standards promus par le W3C ?

A. Accélérer l'exécution JavaScript
B. Standardiser les technologies web pour l'interopérabilité
C. Créer des plugins propriétaires
D. Remplacer les applications natives

Réponse : B
Explication : Le W3C (World Wide Web Consortium) a pour mission de standardiser les technologies web (HTML, CSS, DOM, etc.) pour garantir qu'elles fonctionnent de manière cohérente dans tous les navigateurs. Les plugins (Flash, ActiveX) sont à l'opposé de cette philosophie.
Chapitre : 01 — Histoire du Web

---

Q07 — Quel processus du navigateur est responsable de la transformation HTML → DOM ?

A. Le Renderer Process
B. Le GPU Process
C. Le Network Process
D. Le Plugin Process

Réponse : A
Explication : Le Renderer Process (ou processus de rendu) est chargé de parser le HTML, construire le DOM, appliquer les styles, calculer le layout, et peindre la page. Chaque onglet Chrome a son propre Renderer Process pour l'isolation. Les autres processus ont des rôles distincts (réseau, accélération graphique, plugins).
Chapitre : 02 — Comment fonctionne le navigateur

---

Q08 — Quelle est la première étape du Critical Rendering Path ?

A. Paint
B. Layout
C. HTML Parsing → DOM
D. Composite

Réponse : C
Explication : Le Critical Rendering Path commence par le parsing HTML qui construit le DOM (Document Object Model). Ensuite : CSSOM → Render Tree → Layout → Paint → Composite. Le Paint ne peut commencer qu'après le Layout, qui nécessite le Render Tree.
Chapitre : 02 — Comment fonctionne le navigateur

---

Q09 — Que se passe-t-il quand le navigateur rencontre une balise <script> sans async ni defer ?

A. Le parsing HTML continue en parallèle
B. Le parsing HTML est bloqué jusqu'à l'exécution du script
C. Le script est exécuté après le rendu complet
D. Le script est mis en file d'attente pour le prochain frame

Réponse : B
Explication : Les scripts sans async/defer sont bloquants : le parsing HTML s'arrête, le script est téléchargé et exécuté immédiatement. async télécharge en parallèle et exécute dès que prêt. defer télécharge en parallèle et exécute après le parsing complet.
Chapitre : 02 — Comment fonctionne le navigateur

---

Q10 — Quel est le rôle de la CSSOM (CSS Object Model) ?

A. Représenter les règles CSS sous forme d'arbre accessible en JavaScript
B. Stocker les polices téléchargées
C. Gérer les animations CSS
D. Optimiser les sélecteurs CSS

Réponse : A
Explication : La CSSOM est une représentation arborescente des règles CSS, construite par le navigateur après avoir parsé toutes les feuilles de style. Elle est combinée avec le DOM pour former le Render Tree, qui détermine le rendu visuel.
Chapitre : 02 — Comment fonctionne le navigateur

---

Q11 — Quelle est la différence entre un reflow et un repaint ?

A. Reflow modifie la géométrie, repaint modifie l'apparence
B. Reflow est plus rapide que repaint
C. Repaint recalcule le layout, reflow change les couleurs
D. Il n'y a pas de différence

Réponse : A
Explication : Le reflow (ou layout) recalcule la position et la taille des éléments — c'est coûteux. Le repaint applique les changements visuels (couleur, visibilité) sans modifier la géométrie. Les animations avec transform et opacity déclenchent uniquement du composite, pas de reflow.
Chapitre : 02 — Comment fonctionne le navigateur

---

Q12 — Quelle balise HTML5 est utilisée pour regrouper des liens de navigation ?

A. <links>
B. <navigation>
C. <nav>
D. <menu>

Réponse : C
Explication : <nav> est la balise sémantique HTML5 pour les blocs de navigation. <menu> est obsolète. <links> n'existe pas et <navigation> n'est pas une balise HTML valide. Les balises sémantiques améliorent l'accessibilité et le SEO.
Chapitre : 03 — HTML

---

Q13 — Quel attribut HTML permet d'associer un label à un champ de formulaire ?

A. name
B. id
C. for
D. ref

Réponse : C
Explication : L'attribut for sur <label> correspond à l'id du champ de formulaire. C'est essentiel pour l'accessibilité : le lecteur d'écran associe le label au champ, et cliquer sur le label donne le focus au champ.
Chapitre : 03 — HTML

---

Q14 — Que signifie l'attribut alt sur une balise <img> ?

A. Le titre de l'image affiché au survol
B. Le texte alternatif pour les lecteurs d'écran et les images non chargées
C. La légende affichée sous l'image
D. Le nom du fichier image

Réponse : B
Explication : L'attribut alt fournit un texte alternatif : lu par les lecteurs d'écran (accessibilité), affiché si l'image ne charge pas, et utilisé par les moteurs de recherche. Le title affiche une infobulle au survol.
Chapitre : 03 — HTML

---

Q15 — Quelle est la spécificité du sélecteur #header .nav a:hover ?

A. (0, 1, 2, 1)
B. (0, 1, 1, 1)
C. (0, 1, 2, 2)
D. (0, 0, 2, 2)

Réponse : A
Explication : Spécificité = (0, 1, 2, 1) : 1 ID (#header), 2 classes/pseudo-classes (.nav, :hover), 1 élément (a). Les styles inline auraient (1, 0, 0, 0). !important override tout (à éviter).
Chapitre : 04 — CSS

---

Q16 — Quelle propriété Flexbox centre un élément sur l'axe principal ?

A. align-items: center
B. justify-content: center
C. align-self: center
D. text-align: center

Réponse : B
Explication : justify-content agit sur l'axe principal (défini par flex-direction). align-items agit sur l'axe secondaire. align-self surcharge align-items pour un item spécifique. text-align n'a aucun effet sur les conteneurs flex.
Chapitre : 04 — CSS

---

Q17 — Quelle unité CSS est relative à la taille de la police de l'élément racine (<html>) ?

A. em
B. rem
C. vh
D. %

Réponse : B
Explication : rem (root em) est relatif à la police du <html> (généralement 16px). em est relatif à la police du parent. vh est relatif à la hauteur du viewport. % est relatif au parent pour la plupart des propriétés.
Chapitre : 04 — CSS

---

Q18 — Quelle propriété CSS Grid définit le nombre et la taille des colonnes ?

A. grid-columns
B. grid-template-columns
C. grid-auto-columns
D. grid-column-gap

Réponse : B
Explication : grid-template-columns définit la structure explicite des colonnes (ex: 1fr 1fr 1fr, repeat(3, 1fr), 200px auto). grid-auto-columns gère les colonnes implicites. grid-column-gap est l'espacement entre colonnes (renommé gap).
Chapitre : 04 — CSS

---

Q19 — Quelle est la différence entre display: none et visibility: hidden ?

A. display: none supprime l'élément du flux, visibility: hidden le masque mais garde l'espace
B. visibility: hidden supprime l'élément du flux, display: none garde l'espace
C. Les deux sont identiques
D. display: none est accessible, visibility: hidden ne l'est pas

Réponse : A
Explication : display: none retire l'élément du flux du document — il n'occupe plus d'espace et n'est pas rendu. visibility: hidden rend l'élément invisible mais conserve son espace dans le layout. Les deux rendent l'élément invisible aux lecteurs d'écran.
Chapitre : 04 — CSS

---

Q20 — Quelle media query cible les écrans de largeur inférieure à 600px ?

A. @media (min-width: 600px)
B. @media (max-width: 599px)
C. @media (width < 600px)
D. @media screen and (max-width: 600px)

Réponse : B
Explication : max-width: 599px cible les écrans de 599px et moins (donc < 600px). L'option D inclut 600px. L'option C (Range Syntax) est une nouveauté récente non supportée partout. La règle mobile-first préfère min-width (styles de base mobile, breakpoints vers le haut).
Chapitre : 04 — CSS

---

Q21 — Quelle fonction CSS permet d'utiliser une variable CSS ?

A. var(--ma-variable)
B. get(--ma-variable)
C. css(--ma-variable)
D. ref(--ma-variable)

Réponse : A
Explication : La fonction CSS var(--nom, fallback) permet d'utiliser une Custom Property. Les variables CSS sont définies avec --nom: valeur (souvent sur :root). Elles sont dynamiques et héritables, contrairement aux variables préprocesseur (Sass, Less) qui sont compilées.
Chapitre : 04 — CSS

---

Q22 — Quelle est la priorité des styles CSS (du plus fort au plus faible) ?

A. User Agent > Author > User > !important
B. Author > User > User Agent
C. !important > Inline > ID > Class > Element
D. Inline > !important > ID > Class > Element

Réponse : C
Explication : L'ordre de priorité (spécificité) est : 1) !important (override), 2) styles inline, 3) IDs, 4) classes/pseudo-classes/attributes, 5) éléments/pseudo-éléments. La cascade se base d'abord sur l'origine puis la spécificité.
Chapitre : 04 — CSS

---

Q23 — Quelle est la différence entre let et const en JavaScript ?

A. let est immuable, const est mutable
B. const ne peut pas être réassigné, let peut l'être
C. let est block-scoped, const est function-scoped
D. Il n'y a pas de différence

Réponse : B
Explication : const empêche la réassignation de la référence (le contenu d'un objet const peut être modifié). let et const sont tous deux block-scoped. var est function-scoped et hoisté avec valeur undefined.
Chapitre : 05 — JavaScript

---

Q24 — Quel type de boucle est exécuté au moins une fois ?

A. for
B. while
C. do...while
D. for...of

Réponse : C
Explication : do { ... } while (condition) exécute le bloc avant de vérifier la condition, garantissant au moins une exécution. while et for vérifient la condition avant chaque exécution. for...of itère sur les itérables.
Chapitre : 05 — JavaScript

---

Q25 — Que retourne typeof null en JavaScript ?

A. "null"
B. "object"
C. "undefined"
D. "number"

Réponse : B
Explication : C'est un bug historique de JavaScript (depuis la première version) qui n'a jamais été corrigé pour cause de rétrocompatibilité. null est une valeur primitive de type null, mais typeof retourne "object". Pour vérifier null : x === null.
Chapitre : 05 — JavaScript

---

Q26 — Quelle est la valeur de 0.1 + 0.2 === 0.3 ?

A. true
B. false
C. undefined
D. NaN

Réponse : B
Explication : En virgule flottante IEEE 754, 0.1 + 0.2 = 0.30000000000000004 ≠ 0.3. Ce n'est pas un bug JavaScript mais une limitation de la représentation binaire des nombres décimaux. Solution : utiliser Number.EPSILON ou une librairie comme decimal.js.
Chapitre : 05 — JavaScript

---

Q27 — Quelle méthode JavaScript crée une nouvelle copie superficielle d'un tableau ?

A. Array.copy()
B. Array.duplicate()
C. Array.slice()
D. Array.clone()

Réponse : C
Explication : Array.slice() (sans arguments) retourne une copie superficielle du tableau. Array.from() et le spread operator [...arr] aussi. Array.copy() et Array.clone() n'existent pas. La copie superficielle ne clone pas les objets imbriqués.
Chapitre : 05 — JavaScript

---

Q28 — Quelle est la portée d'une variable déclarée avec var à l'intérieur d'une fonction ?

A. Block-scoped
B. Function-scoped
C. Global-scoped
D. Module-scoped

Réponse : B
Explication : var a une portée de fonction (function-scoped), contrairement à let et const qui sont block-scoped. var est également hoisté (remonté en haut de la fonction) avec une valeur undefined, ce qui peut causer des bugs subtils.
Chapitre : 05 — JavaScript

---

Q29 — Que fait Array.prototype.reduce ?

A. Filtre les éléments du tableau
B. Réduit le tableau à une seule valeur en appliquant une fonction accumulateur
C. Trie les éléments du tableau
D. Concatène le tableau avec un autre

Réponse : B
Explication : reduce(callback, initialValue) exécute une fonction sur chaque élément du tableau, avec un accumulateur, pour produire une seule valeur. filter crée un nouveau tableau avec les éléments qui passent un test. sort trie. concat fusionne des tableaux.
Chapitre : 05 — JavaScript

---

Q30 — Quelle différence entre == et === en JavaScript ?

A. == compare les valeurs après conversion de type, === compare sans conversion
B. == compare les objets, === compare les primitives
C. Il n'y a pas de différence
D. === est plus lent que ==

Réponse : A
Explication : == (égalité abstraite) convertit les types avant comparaison (ex: 1 == "1" → true). === (égalité stricte) compare sans conversion de type. La règle est de toujours utiliser === sauf cas très spécifique (ex: x == null vérifie null et undefined).
Chapitre : 05 — JavaScript

---

Q31 — Quelle est la différence entre interface et type en TypeScript ?

A. interface peut être étendue, type ne peut pas
B. type peut représenter des unions/intersections, interface non
C. Il n'y a aucune différence
D. interface est plus rapide à la compilation

Réponse : B
Explication : type peut représenter des unions (type Status = 'active' | 'inactive'), des tuples, et des types primitifs. interface ne peut que décrire des objets. Les interfaces sont extensibles (déclaration merging), les types sont fermés. Le choix dépend du cas d'usage.
Chapitre : 06 — TypeScript

---

Q32 — Quelle est la valeur de type A = "hello" | "world" en TypeScript ?

A. Un enum
B. Un union type
C. Un tuple
D. Un type conditionnel

Réponse : B
Explication : Le pipe | crée un union type : A peut valoir soit "hello" soit "world". Les union types sont l'un des piliers du typage nominal de TypeScript, permettant de modéliser des valeurs qui peuvent prendre plusieurs formes.
Chapitre : 06 — TypeScript

---

Q33 — Que fait la contrainte <T extends { id: string }> ?

A. Rend T optionnel
B. Exige que T ait une propriété id de type string
C. Définit la valeur par défaut de T
D. Rend T readonly

Réponse : B
Explication : extends dans les génériques est une contrainte (constraint) : T doit avoir au moins la structure spécifiée. C'est le principe de type minimal : on exige le minimum nécessaire pour que le code fonctionne, pas plus.
Chapitre : 06 — TypeScript

---

Q34 — Quelle est la différence entre any et unknown ?

A. any désactive le type checking, unknown exige une vérification avant utilisation
B. Ils sont identiques
C. unknown est un alias de any
D. any est plus sécurisé que unknown

Réponse : A
Explication : any désactive complètement le type checker (on peut lui assigner n'importe quoi et l'utiliser sans vérification). unknown est le type « je ne sais pas encore ce que c'est » — on doit le vérifier (type guard) avant de l'utiliser. unknown est le type-safe any.
Chapitre : 06 — TypeScript

---

Q35 — Qu'est-ce que Declaration Merging en TypeScript ?

A. La fusion de plusieurs fichiers TypeScript en un seul
B. La capacité de déclarer deux fois la même interface pour étendre ses propriétés
C. La compilation de TypeScript vers JavaScript
D. L'importation multiple de modules

Réponse : B
Explication : Declaration Merging permet de déclarer une interface plusieurs fois — TypeScript fusionne automatiquement les déclarations. Utile pour étendre des types de librairies tierces. Les type ne supportent pas le merging, contrairement aux interface.
Chapitre : 06 — TypeScript

---

Q36 — Quel utilitaire TypeScript rend toutes les propriétés d'un type optionnelles ?

A. Required<T>
B. Partial<T>
C. Omit<T, K>
D. Pick<T, K>

Réponse : B
Explication : Partial<T> transforme chaque propriété en optionnelle (?). Required<T> fait l'inverse. Pick<T, K> sélectionne certaines propriétés. Omit<T, K> exclut certaines propriétés. Ces utilitaires sont implémentés avec des mapped types.
Chapitre : 06 — TypeScript

---

Q37 — Quelle est la syntaxe pour annoter le type des paramètres d'une fonction fléchée ?

A. (a: number, b: number) => number
B. (a, b) => number
C. function(a: number, b: number): number
D. (a: number, b: number): number =>

Réponse : A
Explication : La syntaxe correcte pour le type d'une fonction fléchée est (params) => ReturnType. Les paramètres sont typés individuellement, et le type de retour est après la flèche. L'option D utilise la syntaxe d'implémentation, pas de type.
Chapitre : 06 — TypeScript

---

Q38 — Quel est le concept clé qui permet à TypeScript de déduire automatiquement les types ?

A. Type casting
B. Type inference
C. Type assertion
D. Type narrowing

Réponse : B
Explication : L'inférence de types permet à TypeScript de déduire le type d'une expression sans annotation explicite (ex: let x = 5 → x est number). Le narrowing est le raffinement d'un type union dans une branche conditionnelle. L'assertion (as) force un type.
Chapitre : 06 — TypeScript

---

Q39 — Quelle est la principale innovation de React Fiber ?

A. Le Virtual DOM
B. Le rendu incrémental et la priorisation des mises à jour
C. Le JSX
D. Les hooks

Réponse : B
Explication : React Fiber (React 16+) permet le rendu incrémental : découper le travail en unités et le répartir sur plusieurs frames. Il introduit la priorisation des mises à jour (les interactions utilisateur passent avant les animations). Le Virtual DOM existait depuis React 1. Les hooks sont arrivés en React 16.8.
Chapitre : 07 — React

---

Q40 — Quelle est la différence entre un composant contrôlé et non contrôlé en React ?

A. Contrôlé : l'état est géré par React. Non contrôlé : l'état est géré par le DOM natif
B. Contrôlé : utilise class components. Non contrôlé : function components
C. Il n'y a pas de différence
D. Contrôlé : plus lent que non contrôlé

Réponse : A
Explication : Dans un composant contrôlé, React gère la valeur via value + onChange. Dans un composant non contrôlé, le DOM gère l'état, et on y accède via ref. Les composants contrôlés sont recommandés car ils offrent un contrôle total et une validation en temps réel.
Chapitre : 07 — React

---

Q41 — Que retourne useState ?

A. Un tableau avec la valeur actuelle et une fonction pour la mettre à jour
B. Un objet avec value et setValue
C. La valeur uniquement
D. Une promesse qui résout avec la valeur

Réponse : A
Explication : useState(initialValue) retourne un tuple [value, setValue]. Le déstructurer est idiomatique : const [count, setCount] = useState(0). setCount peut prendre une valeur ou une fonction (prev) => newValue.
Chapitre : 07 — React

---

Q42 — Quand utiliser useCallback plutôt que useMemo ?

A. useCallback mémoïse une fonction, useMemo mémoïse une valeur calculée
B. Ils sont interchangeables
C. useMemo est obsolète
D. useCallback est plus performant que useMemo

Réponse : A
Explication : useCallback(fn, deps) mémoïse la fonction elle-même (évite une nouvelle création à chaque render). useMemo(() => value, deps) mémoïse le résultat d'un calcul coûteux. useCallback(fn) = useMemo(() => fn). Les deux ne doivent être utilisés qu'en cas de besoin avéré.
Chapitre : 07 — React

---

Q43 — Quel hook permet d'effectuer des effets de bord dans un composant React ?

A. useEffect
B. useLayoutEffect
C. useInsertionEffect
D. Les trois

Réponse : D
Explication : Les trois hooks permettent des effets de bord mais à des moments différents : useEffect après le rendu et le paint (asynchrone), useLayoutEffect après le rendu mais avant le paint (synchrone), useInsertionEffect avant les mutations DOM (pour CSS-in-JS). Pour la majorité des cas, useEffect suffit.
Chapitre : 07 — React

---

Q44 — Que se passe-t-il si on omet le tableau de dépendances dans useEffect ?

A. L'effet s'exécute à chaque rendu
B. L'effet ne s'exécute jamais
C. L'effet s'exécute une seule fois
D. React lance une erreur

Réponse : A
Explication : Sans tableau de dépendances, useEffect(fn) s'exécute après chaque rendu. Avec [], il s'exécute une seule fois (montage). Avec [dep], il s'exécute quand dep change. [] est à utiliser avec précaution car il peut causer des bugs de stale closure.
Chapitre : 07 — React

---

Q45 — Quel est l'avantage de React.memo ?

A. Il empêche le re-rendu si les props n'ont pas changé (comparaison superficielle)
B. Il accélère le rendu initial
C. Il réduit la taille du bundle
D. Il améliore le SEO

Réponse : A
Explication : React.memo est un HOC (Higher-Order Component) qui mémoïse un composant : il ne re-rend que si ses props changent (comparaison superficielle par défaut). Utile pour les composants lourds qui re-rendent souvent avec les mêmes props.
Chapitre : 07 — React

---

Q46 — Quelle est la règle des hooks React ?

A. Les hooks doivent être appelés dans des boucles
B. Les hooks doivent être appelés au même niveau (top-level) de chaque rendu
C. Les hooks peuvent être appelés dans des conditions
D. Les hooks ne peuvent être utilisés que dans des classes

Réponse : B
Explication : Les hooks doivent être appelés au top-level du composant (pas dans des boucles, conditions, ou fonctions imbriquées) pour garantir le même ordre d'appel à chaque rendu. React s'appuie sur l'ordre d'appel des hooks pour associer l'état à chaque hook.
Chapitre : 07 — React

---

Q47 — Quelle est la différence entre useEffect et useLayoutEffect ?

A. useEffect est synchrone, useLayoutEffect est asynchrone
B. useLayoutEffect s'exécute avant le paint du navigateur, useEffect après
C. useLayoutEffect est obsolète
D. useEffect s'exécute avant useLayoutEffect

Réponse : B
Explication : useLayoutEffect s'exécute de manière synchrone après les mutations DOM mais avant que le navigateur n'affiche (paint). useEffect s'exécute après le paint. Utilisez useLayoutEffect pour lire le layout (mesures) ou appliquer des mutations visuelles synchrones.
Chapitre : 07 — React

---

Q48 — Comment passer des données d'un parent à un enfant en React ?

A. Via les props
B. Via le Context
C. Via les deux
D. Via useRef

Réponse : C
Explication : Les props sont le mécanisme principal (passage explicite, descendant direct). Le Context (React.createContext + Provider/Consumer) est utilisé pour les données globales (thème, auth, locale) sans prop drilling. Les deux sont valides selon le cas d'usage.
Chapitre : 07 — React

---

Q49 — Quel hook React est équivalent à componentDidMount + componentDidUpdate + componentWillUnmount en classe ?

A. useState
B. useEffect
C. useMemo
D. useReducer

Réponse : B
Explication : useEffect remplace les trois méthodes de cycle de vie : la fonction elle-même = componentDidMount/Update, la fonction de nettoyage retournée = componentWillUnmount. La gestion des dépendances détermine si l'effet s'exécute au montage, à la mise à jour, ou aux deux.
Chapitre : 07 — React

---

Q50 — Quelle propriété de JSX est équivalente à class en HTML ?

A. className
B. htmlClass
C. class
D. cssClass

Réponse : A
Explication : class est un mot réservé en JavaScript. JSX utilise className pour définir les classes CSS. htmlFor remplace for sur les labels. React transforme JSX en React.createElement, qui ne peut pas utiliser class.
Chapitre : 07 — React

---

Q51 — Quel pattern architectural sépare la logique métier de l'infrastructure en couches concentriques ?

A. MVC
B. Clean Architecture
C. Flux
D. Event-Driven Architecture

Réponse : B
Explication : Clean Architecture (Robert C. Martin) organise le code en couches concentriques : Domain (entités) → Application (use cases) → Infrastructure (API, DB) → Presentation (UI). La règle de dépendance va vers l'intérieur : les couches internes ne connaissent pas les couches externes.
Chapitre : 08 — Architecture

---

Q52 — Quel est l'avantage du pattern Container/Presentational en React ?

A. Il sépare la logique (container) du rendu (presentational)
B. Il améliore les performances
C. Il réduit le nombre de composants
D. Il remplace les hooks

Réponse : A
Explication : Le pattern Container/Presentational sépare les préoccupations : le container gère la logique, l'état, les appels API ; le presentational ne fait qu'afficher les props. Avec les hooks, cette séparation est moins nécessaire (les hooks encapsulent la logique directement dans des composants fonctionnels).
Chapitre : 08 — Architecture

---

Q53 — Qu'est-ce que le prop drilling ?

A. Le passage de props à travers plusieurs niveaux de composants intermédiaires
B. L'injection de dépendances dans les composants
C. La validation des props avec TypeScript
D. L'optimisation des performances des props

Réponse : A
Explication : Le prop drilling est le passage de props d'un composant parent à travers plusieurs composants intermédiaires qui n'utilisent pas ces props. Solutions : Context, Composition, ou state management global. C'est un signe qu'il faut repenser l'architecture.
Chapitre : 08 — Architecture

---

Q54 — Quel est le rôle d'un use case dans la Clean Architecture ?

A. Représenter une entité métier
B. Orchestrer une action métier spécifique (inscription, paiement, etc.)
C. Gérer la persistance des données
D. Afficher l'interface utilisateur

Réponse : B
Explication : Un use case (ou interactor) encapsule une action métier spécifique : il orchestre les entités et les repositories pour accomplir une tâche. Il ne dépend ni de l'UI ni de l'infrastructure. Chaque use case fait une seule chose (SRP).
Chapitre : 08 — Architecture

---

Q55 — Quelle est la responsabilité d'un repository dans l'architecture hexagonale ?

A. Définir le contrat d'accès aux données sans dépendre d'une technologie spécifique
B. Implémenter la logique métier
C. Gérer l'authentification utilisateur
D. Ordonnancer les tâches asynchrones

Réponse : A
Explication : Un repository est une interface (contrat) qui définit les opérations d'accès aux données sans spécifier la technologie (API REST, GraphQL, IndexedDB, etc.). L'implémentation concrète est dans l'infrastructure layer, ce qui permet de changer de technologie sans impacter le métier.
Chapitre : 08 — Architecture

---

Q56 — Comment s'appelle le principe d'architecture où chaque module expose une API bien définie et cache son implémentation ?

A. Single Responsibility Principle
B. Encapsulation / Information Hiding
C. Dependency Inversion
D. Open/Closed Principle

Réponse : B
Explication : L'encapsulation (ou information hiding) consiste à cacher les détails d'implémentation derrière une interface publique. Les autres modules ne peuvent interagir que via l'API exposée, ce qui permet de modifier l'implémentation sans casser les dépendants.
Chapitre : 08 — Architecture

---

Q57 — Quel est l'inconvénient principal de l'architecture micro-frontends ?

A. La complexité de la communication inter-applications
B. Les performances réduites
C. L'impossibilité d'utiliser React
D. Le manque d'outillage

Réponse : A
Explication : Le principal défi des micro-frontends est la communication entre les différentes applications : partage d'état, routage distribué, coordination des styles. La complexité opérationnelle (déploiements multiples, versioning, monitoring) est également plus élevée que pour une SPA monolithique.
Chapitre : 08 — Architecture

---

Q58 — Que signifie le principe DRY en architecture logicielle ?

A. Don't Repeat Yourself — éviter la duplication de code
B. Dynamic Rendering Yield — optimiser le rendu
C. Data Retention Yearly — politique de rétention
D. Distributed Runtime Yarn — outil de déploiement

Réponse : A
Explication : DRY (Don't Repeat Yourself) est un principe fondamentain visant à éviter la duplication de logique. Chaque concept doit avoir une représentation unique et non redondante dans le code. L'excès de DRY peut toutefois mener à une abstraction prématurée.
Chapitre : 08 — Architecture

---

Q59 — Quel outil est le plus adapté pour documenter un design system ?

A. JSDoc
B. Storybook
C. Swagger
D. TypeDoc

Réponse : B
Explication : Storybook est l'outil de référence pour développer, documenter et tester les composants UI de manière isolée. Il supporte les stories, les docs auto-générées, les tests d'interaction, et l'intégration avec des outils de design (Figma). Swagger est pour les APIs, JSDoc/TypeDoc pour le code.
Chapitre : 09 — Design System

---

Q60 — À quoi servent les design tokens ?

A. À stocker des jetons d'authentification
B. À centraliser les décisions de design (couleurs, espacements, polices) en variables réutilisables
C. À tokeniser les chaînes de caractères
D. À générer des tokens de sécurité pour le design

Réponse : B
Explication : Les design tokens sont les atomes du design system : couleurs, typographie, espacements, breakpoints, ombres, etc. Ils sont stockés dans un format neutre (JSON/YAML) et transformés en variables CSS, tokens Tailwind, ou variables de préprocesseur selon la cible.
Chapitre : 09 — Design System

---

Q61 — Quelle est la différence entre un composant headless et un composant styled ?

A. Headless : sans style, styled : avec style intégré
B. Headless : sans logique, styled : avec logique
C. Ils sont identiques
D. Headless : pour mobile, styled : pour desktop

Réponse : A
Explication : Un composant headless fournit la logique et l'accessibilité sans style (ex: Radix UI, React Aria). Un composant styled a un design intégré (ex: Material UI, Chakra UI). Les composants headless offrent plus de flexibilité mais nécessitent plus de travail de styling.
Chapitre : 09 — Design System

---

Q62 — Quelle est la méthodologie de nommage CSS la plus courante dans les design systems ?

A. BEM (Block Element Modifier)
B. OOCSS
C. SMACSS
D. ITCSS

Réponse : A
Explication : BEM (Block__Element--Modifier) est la convention de nommage la plus répandue pour les composants : .card__title--highlighted. Elle offre une bonne isolation et évite les conflits de noms. Les autres méthodologies existent mais BEM domine dans les design systems.
Chapitre : 09 — Design System

---

Q63 — Quel outil de build est utilisé par Storybook 7+ en configuration par défaut ?

A. Webpack
B. Vite
C. esbuild
D. Parcel

Réponse : B
Explication : Storybook 7+ utilise Vite comme build tool par défaut (optionnellement Webpack). Vite offre des temps de démarrage et de build plus rapides que Webpack grâce à esbuild pour le dev et Rollup pour le build de production.
Chapitre : 09 — Design System

---

Q64 — Qu'est-ce qu'un design system ?

A. Un ensemble de composants réutilisables, de tokens, de patterns et de guidelines
B. Un thème CSS
C. Une librairie de composants uniquement
D. Un framework CSS comme Tailwind

Réponse : A
Explication : Un design system va bien au-delà d'une simple librairie de composants : il inclut les tokens de design, les patterns d'interaction, les guidelines d'accessibilité, la documentation, et les principes de design. Tailwind est un framework utility-first, pas un design system.
Chapitre : 09 — Design System

---

Q65 — Quelle est la différence entre un test unitaire et un test d'intégration ?

A. Unitaire : teste une seule unité isolée. Intégration : teste l'interaction entre plusieurs unités
B. Unitaire : plus lent. Intégration : plus rapide
C. Unitaire : test E2E. Intégration : test API
D. Ils sont identiques

Réponse : A
Explication : Les tests unitaires isolent une fonction ou un composant (mocking des dépendances). Les tests d'intégration vérifient que plusieurs unités fonctionnent ensemble (ex: composant + API mockée). La pyramide des tests recommande : 70% unitaires, 20% intégration, 10% E2E.
Chapitre : 10 — Testing

---

Q66 — Quel est l'avantage de Testing Library par rapport à Enzyme ?

A. Testing Library teste le comportement utilisateur, pas les détails d'implémentation
B. Testing Library est plus rapide
C. Enzyme ne supporte pas React
D. Testing Library a moins de dépendances

Réponse : A
Explication : Testing Library encourage les tests centrés sur l'utilisateur : on interagit avec l'UI comme le ferait un utilisateur (via le texte, les rôles ARIA), pas via les détails d'implémentation (state, props). Les tests sont ainsi plus résistants aux refactoring.
Chapitre : 10 — Testing

---

Q67 — Quel outil est idéal pour les tests E2E (End-to-End) ?

A. Jest
B. Playwright
C. Vitest
D. Mocha

Réponse : B
Explication : Playwright est l'outil de référence pour les tests E2E : multi-navigateur (Chromium, Firefox, WebKit), cross-platform, avec des fonctionnalités avancées (réseau mock, mobile, téléchargement). Jest, Vitest, et Mocha sont des test runners, pas des outils E2E.
Chapitre : 10 — Testing

---

Q68 — Quel est le principe du test pyramid ?

A. Beaucoup de tests unitaires, moins de tests d'intégration, peu de tests E2E
B. Beaucoup de tests E2E, moins de tests unitaires
C. Tous les tests doivent être au même niveau
D. Les tests doivent être exécutés en parallèle

Réponse : A
Explication : La pyramide des tests (Mike Cohn) recommande : 70% de tests unitaires (rapides, fiables), 20% de tests d'intégration, 10% de tests E2E (lents, fragiles). Les tests E2E couvrent les parcours critiques mais sont coûteux à maintenir.
Chapitre : 10 — Testing

---

Q69 — Quel type de test vérifie l'accessibilité d'un composant ?

A. Snapshot test
B. Accessibility test (axe-core)
C. Performance test
D. Integration test

Réponse : B
Explication : Les tests d'accessibilité utilisent axe-core (ou jest-axe) pour vérifier les règles WCAG automatiquement : contrastes, labels ARIA, structure de titres, etc. Les snapshot tests capturent le rendu, les tests de performance mesurent les métriques.
Chapitre : 10 — Testing

---

Q70 — Que permet MSW (Mock Service Worker) dans les tests ?

A. Mocker les appels réseau au niveau Service Worker sans modifier le code
B. Stubber des fonctions asynchrones
C. Simuler des événements utilisateur
D. Gérer les états de composants

Réponse : A
Explication : MSW intercepte les requêtes réseau au niveau du Service Worker, permettant de tester les composants avec des réponses mockées sans modifier le code de l'application. Il supporte REST et GraphQL, et fonctionne en développement et en test.
Chapitre : 10 — Testing

---

Q71 — Qu'est-ce qu'un Test Coverage de 100% signifie ?

A. Toutes les lignes de code sont exécutées par les tests
B. Il n'y a plus aucun bug dans l'application
C. Les tests sont inutiles
D. L'application est prête pour la production

Réponse : A
Explication : 100% de coverage signifie que toutes les lignes de code sont exécutées par au moins un test. Cela ne garantit pas l'absence de bugs : les tests peuvent ne pas vérifier les bonnes assertions, ou manquer des scénarios. Coverage ≠ qualité des tests.
Chapitre : 10 — Testing

---

Q72 — Quelle assertion Testing Library est préférée pour vérifier qu'un élément est présent ?

A. expect(element).toBeInTheDocument()
B. expect(element).toExist()
C. expect(element).toBeVisible()
D. expect(element).isRendered()

Réponse : A
Explication : toBeInTheDocument() (de @testing-library/jest-dom) vérifie que l'élément est dans le DOM. toBeVisible() vérifie de plus qu'il est visible (CSS). Les autres méthodes n'existent pas dans jest-dom.
Chapitre : 10 — Testing

---

Q73 — Quelle métrique Core Web Vitals mesure la rapidité d'affichage du contenu principal ?

A. FID (First Input Delay)
B. LCP (Largest Contentful Paint)
C. CLS (Cumulative Layout Shift)
D. TTFB (Time To First Byte)

Réponse : B
Explication : LCP mesure le temps d'affichage du plus grand élément visible (image, bloc de texte). Seuil : < 2.5s (bon), 2.5-4s (à améliorer), > 4s (mauvais). FID mesure l'interactivité, CLS mesure la stabilité visuelle. TTFB est un métrique réseau.
Chapitre : 11 — Performance

---

Q74 — Quelle pratique réduit le CLS (Cumulative Layout Shift) ?

A. Définir des dimensions explicites (width/height) sur les images
B. Utiliser des animations CSS
C. Charger les scripts en async
D. Minifier le CSS

Réponse : A
Explication : Le CLS est causé par des éléments qui se déplacent après le rendu initial. Définir width et height sur les images, les iframes, et les ads permet au navigateur de réserver l'espace. Les skeleton screens aident aussi. Les animations CSS n'affectent pas le CLS si elles utilisent transform.
Chapitre : 11 — Performance

---

Q75 — Quelle technique permet de charger un script sans bloquer le parsing HTML ?

A. Placer le script dans le <head>
B. Ajouter l'attribut async ou defer
C. Utiliser un CDN
D. Minifier le script

Réponse : B
Explication : async et defer permettent de télécharger le script en parallèle du parsing HTML. async exécute dès que le script est téléchargé. defer exécute après le parsing complet (dans l'ordre des scripts). Les deux évitent le blocage du parsing.
Chapitre : 11 — Performance

---

Q76 — Qu'est-ce que le Tree Shaking ?

A. L'élimination du code mort à la compilation par le bundler
B. L'optimisation des images
C. La mise en cache des modules
D. La réorganisation du code source

Réponse : A
Explication : Le Tree Shaking est une technique d'élimination du code mort (dead code elimination) réalisée par les bundlers (Webpack, Rollup, esbuild) lors du build. Les exports non utilisés sont supprimés du bundle final. Il fonctionne grâce aux modules ES6 statiques.
Chapitre : 11 — Performance

---

Q77 — Quelle est la différence entre Optimistic UI et Pessimistic UI ?

A. Optimistic : met à jour l'UI avant la réponse serveur. Pessimistic : attend la confirmation
B. Optimistic : plus lent. Pessimistic : plus rapide
C. Optimistic : pour les lectures. Pessimistic : pour les écritures
D. Ils sont identiques

Réponse : A
Explication : L'Optimistic UI met à jour l'interface immédiatement (avant la réponse serveur) puis rollback en cas d'erreur. Le Pessimistic UI attend la confirmation du serveur avant de mettre à jour. Optimistic offre une meilleure UX (instantané) mais nécessite une gestion des erreurs robuste.
Chapitre : 11 — Performance

---

Q78 — Quel est le rôle de Docker dans le déploiement front-end ?

A. Conteneuriser l'application pour garantir un environnement d'exécution identique partout
B. Compiler le code JavaScript
C. Gérer les dépendances npm
D. Héberger le site web

Réponse : A
Explication : Docker permet d'empaqueter l'application avec toutes ses dépendances dans une image conteneur. L'application s'exécute à l'identique sur la machine du développeur, en CI/CD, et en production. Nginx est souvent utilisé comme serveur web dans le conteneur pour servir les fichiers statiques.
Chapitre : 12 — DevOps

---

Q79 — Quel fichier définit les jobs d'un pipeline GitHub Actions ?

A. Makefile
B. .github/workflows/*.yml
C. Dockerfile
D. Jenkinsfile

Réponse : B
Explication : Les workflows GitHub Actions sont définis dans des fichiers YAML dans .github/workflows/. Chaque fichier peut contenir un ou plusieurs jobs, avec des steps, des triggers (push, PR, schedule), et des matrices de test.
Chapitre : 12 — DevOps

---

Q80 — Quelle commande npm permet d'exécuter des scripts définis dans package.json ?

A. npm run
B. npm exec
C. npm start
D. npm run script

Réponse : A
Explication : npm run <script> exécute un script personnalisé défini dans la section "scripts" du package.json. npm start est un raccourci pour npm run start. npm exec exécute une commande depuis le contexte du projet.
Chapitre : 12 — DevOps

---

Q81 — Quelle est la principale différence entre SSR (Server-Side Rendering) et CSR (Client-Side Rendering) ?

A. SSR : HTML généré sur le serveur. CSR : HTML généré dans le navigateur avec JavaScript
B. SSR : plus lent que CSR
C. SSR : ne supporte pas React
D. CSR : meilleur pour le SEO

Réponse : A
Explication : En SSR, le serveur génère le HTML complet et l'envoie au navigateur (meilleur SEO, First Paint plus rapide). En CSR, le navigateur reçoit un HTML vide et exécute JavaScript pour générer le contenu (meilleure interactivité après chargement). Next.js et Remix sont des frameworks SSR pour React.
Chapitre : 13 — SSR

---

Q82 — Qu'est-ce que l'hydratation (hydration) en SSR ?

A. Le processus où React attache les event listeners au HTML généré par le serveur
B. Le chargement des images
C. La compilation du code serveur
D. L'optimisation des polices

Réponse : A
Explication : L'hydratation est le processus où React reprend le contrôle du HTML statique généré par le serveur. React attache les event listeners, initialise l'état, et rend l'application interactive. Si le HTML serveur et le premier rendu client ne correspondent pas, React affiche une erreur d'hydratation.
Chapitre : 13 — SSR

---

Q83 — Qu'est-ce que l'ISR (Incremental Static Regeneration) dans Next.js ?

A. La génération statique de pages avec mise à jour périodique sans rebuild complet
B. La régénération incrémentale du CSS
C. L'optimisation des images statiques
D. La compilation incrémentale du JavaScript

Réponse : A
Explication : ISR permet de générer des pages statiquement au build, puis de les régénérer périodiquement (toutes les X secondes) sans rebuild complet du site. Combine les avantages du SSG (performance) et du SSR (fraîcheur des données). Utilise revalidate dans getStaticProps ou dans l'App Router.
Chapitre : 13 — SSR

---

Q84 — Quelle directive de Next.js 14 App Router permet de rendre une page dynamique ?

A. export const dynamic = 'force-dynamic'
B. export const static = true
C. export const render = 'server'
D. export const mode = 'dynamic'

Réponse : A
Explication : Dans l'App Router de Next.js 14+, export const dynamic = 'force-dynamic' force le rendu dynamique (SSR) pour une route. Par défaut, Next.js essaie de rendre statiquement. Les autres options sont : force-static, auto, error.
Chapitre : 13 — SSR

---

Q85 — Quel est l'inconvénient principal du SSR pur par rapport au SSG ?

A. Le temps de réponse du serveur pour chaque requête
B. L'impossibilité d'utiliser React
C. Le manque de support SEO
D. L'absence de caching possible

Réponse : A
Explication : En SSR pur, chaque requête nécessite une exécution complète sur le serveur (fetch data + render React), ce qui augmente le TTFB et la charge serveur. SSG génère les pages au build (temps de réponse minimal). Les solutions hybrides (Next.js ISR, Nuxt Hybrid) combinent les avantages des deux.
Chapitre : 13 — SSR

---

Q86 — Quelle est la différence entre SSG (Static Site Generation) et SSR ?

A. SSG : pages générées au build. SSR : pages générées à chaque requête
B. SSG : pages dynamiques. SSR : pages statiques
C. SSG : utilise JavaScript. SSR : ne l'utilise pas
D. Ils sont identiques

Réponse : A
Explication : SSG (Static Site Generation) génère les pages HTML au moment du build (une seule fois). SSR génère le HTML à chaque requête (à chaque visite). SSG offre les meilleures performances (serveur CDN) mais nécessite un rebuild pour mettre à jour le contenu.
Chapitre : 13 — SSR

---

Q87 — Comment communiquent les micro-frontends entre eux ?

A. Via un event bus partagé ou window.postMessage
B. Via des appels API REST
C. Via WebSocket uniquement
D. Ils ne peuvent pas communiquer

Réponse : A
Explication : Les micro-frontends communiquent via un event bus (pub/sub in-process) ou window.postMessage pour la communication cross-origin. Chaque micro-frontend a son namespace pour éviter les collisions. Les appels API REST sont pour la communication avec le backend, pas entre micro-frontends.
Chapitre : 14 — Micro-Frontends

---

Q88 — Quel plugin Webpack permet l'intégration de micro-frontends ?

A. ModuleFederationPlugin
B. MiniCssExtractPlugin
C. HtmlWebpackPlugin
D. BundleAnalyzerPlugin

Réponse : A
Explication : ModuleFederationPlugin (Webpack 5) permet à une application d'exposer des modules (composants, pages) et d'en consommer depuis d'autres applications au runtime. C'est la technologie clé des micro-frontends avec Webpack. Les autres plugins ont des rôles différents (CSS, HTML, analyse).
Chapitre : 14 — Micro-Frontends

---

Q89 — Quel est le rôle du shell dans une architecture micro-frontends ?

A. L'application hôte qui orchestre l'affichage et la navigation des micro-frontends
B. Le conteneur Docker qui exécute les micro-frontends
C. Le script de build qui compile les micro-frontends
D. Le serveur qui héberge les micro-frontends

Réponse : A
Explication : Le shell (ou host, ou container) est l'application principale qui : gère le routing global, l'authentification, le layout commun (header, sidebar), et orchestre le chargement des micro-frontends distants via Module Federation ou iframes.
Chapitre : 14 — Micro-Frontends

---

Q90 — Quel est l'avantage des micro-frontends par rapport à une SPA monolithique ?

A. Déploiement indépendant de chaque micro-frontend
B. Performances accrues
C. Taille de bundle réduite
D. Développement plus rapide

Réponse : A
Explication : Le principal avantage des micro-frontends est le déploiement indépendant : chaque équipe peut déployer son micro-frontend sans coordination avec les autres. Cela permet des cycles de release plus courts, une scalabilité organisationnelle, et une isolation des erreurs.
Chapitre : 14 — Micro-Frontends

---

Q91 — Quel langage est le plus couramment compilé vers WebAssembly (WASM) ?

A. Rust
B. Python
C. Java
D. Ruby

Réponse : A
Explication : Rust est le langage le plus utilisé pour le développement WebAssembly grâce à son écosystème mature (wasm-pack, wasm-bindgen) et ses performances. C/C++ via Emscripten est également courant. Python, Java, et Ruby peuvent compiler vers WASM mais avec des limitations.
Chapitre : 15 — WebAssembly

---

Q92 — Quel est le format de sortie de wasm-pack ?

A. Un module WASM + un wrapper JS + des types TypeScript
B. Un seul fichier .wasm
C. Un fichier .wat (texte)
D. Un bundle JavaScript

Réponse : A
Explication : wasm-pack génère trois artéfacts : le binaire WASM, un fichier JavaScript de glue (wrapper), et des déclarations TypeScript (.d.ts). Ceci permet une intégration facile dans des projets front-end. Le binaire WASM seul n'est pas directement utilisable depuis JavaScript.
Chapitre : 15 — WebAssembly

---

Q93 — Pourquoi WebAssembly est-il plus rapide que JavaScript pour le calcul intensif ?

A. WASM est compilé en bytecode proche du code machine, sans overhead d'interprétation
B. WASM a accès direct au GPU
C. WASM utilise moins de mémoire
D. WASM est exécuté sur un thread dédié

Réponse : A
Explication : WebAssembly est compilé en bytecode bas niveau qui est exécuté très efficacement par le moteur JavaScript (pratiquement du code natif). JavaScript doit être parsé, interprété, et optimisé par le JIT. WASM n'a pas de garbage collection (en l'absence de GC intégré) et a une sémantique plus prévisible.
Chapitre : 15 — WebAssembly

---

Q94 — Quel concept de sécurité est important quand on utilise WebAssembly dans le navigateur ?

A. WASM s'exécute dans le même sandbox que JavaScript (pas d'accès direct au système)
B. WASM a un accès illimité au système de fichiers
C. WASM peut contourner les restrictions CORS
D. WASM n'a pas besoin de HTTPS

Réponse : A
Explication : WASM s'exécute dans le même sandbox de sécurité que JavaScript : pas d'accès direct au système de fichiers, au réseau, ou aux APIs système. Il doit passer par les APIs JavaScript pour toute interaction. Les restrictions CORS et HTTPS s'appliquent normalement.
Chapitre : 15 — WebAssembly

---

Q95 — Qu'est-ce qu'un ADR (Architecture Decision Record) ?

A. Un document qui capture une décision architecturale importante et son contexte
B. Un outil de build pour l'architecture
C. Une librairie de composants
D. Un type de test d'architecture

Réponse : A
Explication : Un ADR est un document court qui capture une décision architecturale : le contexte, la décision prise, les alternatives considérées, et les conséquences. Les ADRs sont versionnés dans le repository (généralement dans docs/adr/) pour servir de mémoire organisationnelle.
Chapitre : 16 — Architecture Entreprise

---

Q96 — Quelle est la structure de base d'un ADR selon le format Michael Nygard ?

A. Titre, Statut, Contexte, Décision, Conséquences
B. Titre, Auteur, Date, Code, Tests
C. Titre, Problème, Solution, Code, Tests
D. Titre, Résumé, Détails, Annexe

Réponse : A
Explication : Le format standard d'un ADR (Michael Nygard) comporte : Titre (ADR-NNN-titre), Statut (Proposed, Accepted, Deprecated, Superseded), Contexte (pourquoi cette décision), Décision (ce qui a été décidé), et Conséquences (impact positif et négatif).
Chapitre : 16 — Architecture Entreprise

---

Q97 — Quel est le rôle d'un architecte front-end dans une équipe enterprise ?

A. Définir les standards techniques, l'architecture, et guider l'équipe
B. Écrire tout le code lui-même
C. Gérer les ressources humaines
D. Tester toutes les fonctionnalités

Réponse : A
Explication : L'architecte front-end définit la vision technique (choix technologiques, patterns, conventions), conçoit l'architecture (monorepo, micro-frontends, design system), et accompagne l'équipe via des ADRs, des code reviews, et du mentoring. Il n'écrit pas tout le code mais valide la cohérence technique.
Chapitre : 16 — Architecture Entreprise

---

Q98 — Quelle stratégie de versioning est la plus courante dans les projets enterprise ?

A. Semantic Versioning (SemVer) — MAJOR.MINOR.PATCH
B. Date-based versioning (2025.01.01)
C. Hash-based versioning (git commit hash)
D. Aucun versioning

Réponse : A
Explication : Semantic Versioning (SemVer) est le standard : MAJOR (breaking changes), MINOR (nouvelles fonctionnalités), PATCH (bugs). Il permet de communiquer clairement l'impact des changements. Les outils comme semantic-release automatisent le versioning basé sur les commits conventionnels.
Chapitre : 16 — Architecture Entreprise

---

Q99 — Dans le Projet Fil Rouge (Enterprise ProjectHub), quelle librairie est utilisée pour le drag & drop du Kanban ?

A. react-beautiful-dnd
B. @dnd-kit
C. react-dnd
D. interact.js

Réponse : B
Explication : Enterprise ProjectHub utilise @dnd-kit pour le drag & drop du module Kanban. Cette librairie moderne offre des performances accrues, une meilleure accessibilité, et un support TypeScript complet par rapport à react-beautiful-dnd (maintenant en maintenance).
Chapitre : 17 — Projet Fil Rouge

---

Q100 — Dans l'architecture d'Enterprise ProjectHub, comment sont envoyées les notifications en temps réel ?

A. Polling HTTP toutes les 5 secondes
B. WebSocket avec reconnexion exponential backoff
C. Server-Sent Events uniquement
D. Long polling

Réponse : B
Explication : Le Projet Fil Rouge utilise WebSocket pour les notifications temps réel, avec une stratégie de reconnexion exponential backoff (1s, 2s, 4s... max 30s). Un hook useWebSocket personnalisé gère la connexion, les souscriptions par événement, et la file d'attente des messages pendant les déconnexions.
Chapitre : 17 — Projet Fil Rouge

---

Corrigé Complet