ModularJS
Qu'est-ce que ModularJS ?
ModularJS (MJS) est un framework de composants compilé : la réactivité est résolue à la compilation, pas au runtime. Standalone — un compilateur Node.js et un CLI (mjs) suffisent, sans dépendance à un framework back particulier.
Un composant, un fichier
Un composant s'écrit dans un fichier .mjs unique qui réunit plusieurs blocs, tous optionnels : un <script module> et un <script> (logique, Civet par défaut — proche de CoffeeScript), le markup (le HTML), des blocs <theme> (variables de thème, cf. Thèmes et variables CSS), et un <style> (CSS scopé, SASS indenté). Le compilateur transforme ce fichier en Custom Element natif du navigateur, avec son style isolé en Shadow DOM.
<script>
$count = 0
</script>
<button @click={$count++}>Clics : {$count}</button>Ce fichier, une fois nommé hello.mjs, devient la balise <mjs-hello> — utilisable comme n'importe quel élément HTML. Détail complet des sections : anatomie d'un module.
Réactivité résolue à la compilation
Une variable préfixée par $ ($count) est réactive : le compilateur analyse le <script>, sait déjà quel nœud du DOM dépend de quelle variable, et génère un abonnement direct par nom — pas de re-rendu de composant, pas de diff de DOM virtuel, et pas de Proxy au runtime pour ce cas courant. Le travail qu'un framework à base de Proxy fait à chaque accès, en production, MJS le fait une fois, avant même que le code ne tourne chez le visiteur.
Positionnement
- Pas de virtual DOM — chaque mutation cible directement les nœuds concernés.
- Pas de runtime lourd — le code généré est du JavaScript natif standard, avec une petite couche
µ.*pour les runes. - Standards Web en première classe — Custom Elements, Shadow DOM, slots, ES modules. Pas de magie propriétaire.
- Standalone — le résultat compilé est un bundle statique, servable par n'importe quel serveur (nginx, Caddy, Express, ou un back existant). Voir Installation.
Parenté avec Svelte
MJS s'inspire de Svelte pour l'esprit général — compilateur plutôt que runtime, même forme de fichier composant — mais s'en écarte sur plusieurs points structurants : Civet plutôt que JavaScript, symbole $ auto-déclaré (pas de let ni de rune $state), Custom Elements + Shadow DOM natifs plutôt qu'un scope de style maison, @import plutôt que import … from.
Quand utiliser ModularJS
- Des composants Web réutilisables entre projets, sans dépendance à un framework front particulier.
- Une syntaxe concise (Civet) et un modèle mental simple — réactivité tracée à la compilation, pas de magie au runtime.
- Rester proche des standards du navigateur, pour la pérennité.
- Un front-end qui se pose sur n'importe quel back (ou aucun) via un bundle statique servi tel quel.
Structure d'un projet et convention de dossiers : Structure d'un projet. Panorama de la syntaxe : Vue d'ensemble de la syntaxe.