Partie 7 — Frontend : JavaScript, React et Tailwind

Public : développeur web expérimenté (Next.js / React / TypeScript) en route vers l’expertise Moodle. Version de référence : Moodle 5.2 (Bootstrap 5, TinyMCE, modules ES6 transpilés en AMD via Grunt, et — nouveauté 5.2 — React intégré au core avec helper Mustache {{#react}} et importmaps).

Cette partie est probablement celle qui vous demandera le plus grand « déprogrammage » mental. Le frontend de Moodle n’est ni une SPA, ni un monolithe jQuery poussiéreux : c’est une architecture serveur-first avec des îlots de JavaScript, étonnamment proche dans l’esprit de ce que Next.js a réintroduit avec les React Server Components — mais avec quinze ans d’avance, du PHP, et des choix d’outillage qui vous surprendront. L’objectif de cette partie : que vous sachiez exactement quand utiliser Mustache + vanilla JS, quand dégainer core/reactive, quand React est justifié, et comment intégrer proprement React 19 + Tailwind dans un plugin sans casser le reste de la plateforme.

Sommaire

Fichier	Chapitre	Contenu
01-frontend-vu-de-react.md	Le frontend Moodle expliqué à un dev React	Historique YUI → jQuery/AMD → ES6 buildé → état 5.2 (React dans le core !), le modèle « rendu serveur PHP + îlots JS » comparé à l’App Router RSC, pourquoi le DOM appartient à PHP, conséquences pratiques (hydratation manuelle, event delegation), inventaire complet de ce que le core fournit déjà.
02-templates-mustache.md	Mustache en profondeur	Syntaxe complète (sections, inversion, partials, héritage `{{< }}`), helpers Moodle (`{{#str}}`, `{{#pix}}`, `{{#js}}`, `{{#userdate}}`, `{{#shortentext}}`, `{{uniqid}}`), contexte depuis PHP et depuis JS, documentation JSON des templates, surcharge par les thèmes, template designer mode, data-attributes.
03-javascript-moodle.md	JavaScript Moodle en profondeur	Écrire un module dans `amd/src/`, build npm + `grunt amd` + watch, structure init/main, JSDoc, `js_call_amd` et `{{#js}}`, modules essentiels avec exemples complets : `core/ajax`, `core/str`, `core/notification`, `core/modal` + `modal_form`, `core/fragment`, `core/templates`, `core/toast`, `core_form/changechecker`, pub/sub, prefetch, pièges (define caché, jQuery résiduel, top-level await).
04-react-dans-moodle.md	React dans Moodle — le tutoriel de bout en bout	Les deux stratégies (React natif core 5.2 via `{{#react}}` vs React embarqué dans un plugin via esbuild → AMD), toolchain complète (package.json, esbuild + wrapper `define`, tsconfig), passage de données PHP → React, tutoriel complet `local_reactdemo` avec React 19 + TypeScript + hooks + web services via interop AMD, instances multiples, cleanup, dev workflow, et le verdict honnête « quand React est-il justifié ? ».
05-tailwind-dans-moodle.md	Tailwind dans Moodle, honnêtement	Le problème (Bootstrap 5 global + preflight destructeur), Tailwind v4 avec prefix et sans preflight, scoping sous une classe racine, sources content vers Mustache + TSX, intégration au build du plugin du chap. 4, conflits de classes et solutions, Tailwind dans un thème entier (`$THEME->sheets`, post-process), verdict pragmatique.
06-core-reactive-et-ui-avancee.md	core/reactive et UI avancée	La bibliothèque réactive interne (StateManager, mutations, watchers, components) qui propulse l’éditeur de cours, quand l’utiliser, exemple complet, comparaison avec React ; drag & drop core, key events, accessibilité JS (ARIA, gestion du focus dans les modales), performance frontend.

Comment lire cette partie

Chapitres 1 à 3 : le socle. Ne les sautez pas, même si Mustache et AMD vous semblent « legacy » — 95 % du code frontend que vous écrirez pour Moodle passera par là, et le chapitre React s’appuie dessus (l’interop AMD est incontournable).
Chapitre 4 : le cœur de cible pour vous. Tutoriel copiable de bout en bout.
Chapitre 5 : à lire après le 4, le build Tailwind s’y greffe.
Chapitre 6 : la troisième voie entre vanilla et React, indispensable si vous touchez à l’éditeur de cours.

Conventions de cette partie

Les chemins de fichiers sont donnés en tête de chaque bloc de code (ex. // local/reactdemo/amd/src/loader.js).
$CFG->dirroot désigne la racine de l’installation Moodle ; les chemins relatifs s’y réfèrent.
Les encadrés :
- ⚠️ Piège — erreur classique qui coûte des heures.
- 💡 Pour un dev React — traduction directe d’un concept Moodle dans votre monde.
- 📚 Aller plus loin — références moodledev.io et code source à explorer.
Toutes les commandes shell sont données pour un environnement POSIX (WSL, macOS, Linux) ; sous Windows natif, adaptez les chemins.

Prérequis techniques

Une installation Moodle 5.2 de développement avec $CFG->debug = DEBUG_DEVELOPER; et $CFG->cachejs = false; (voir Partie 2).
Node.js dans la version imposée par le champ engines du package.json de Moodle (utilisez nvm use à la racine du dépôt : un .nvmrc est fourni).
Avoir lu la Partie 4 (architecture des plugins) et la Partie 6 (web services) — le chapitre 3 s’appuie massivement sur les services externes comme « pont de données ».