Solid.js | Glossaire

Solid.js est un framework JavaScript déclaratif pour la construction d'interfaces utilisateur qui repense fondamentalement l'approche de la réactivité. Contrairement aux frameworks populaires utilisant un Virtual DOM, Solid compile les templates en code JavaScript optimisé qui met à jour directement le DOM avec une granularité extrême. Cette approche combine la simplicité syntaxique de React avec des performances natives proches du JavaScript vanilla, tout en éliminant les problèmes de re-rendering inutiles.

Fondements techniques

Réactivité fine-grained basée sur des signals, memos et effects qui tracent automatiquement les dépendances
Compilation des templates JSX en instructions DOM natives sans couche d'abstraction runtime
Absence totale de Virtual DOM, éliminant le coût du diffing et de la réconciliation
Système de composants sans re-rendering : seules les parties réellement affectées se mettent à jour

Avantages stratégiques

Performances exceptionnelles : jusqu'à 10x plus rapide que React dans certains benchmarks, comparable au JavaScript vanilla
Bundle size minimal : ~7KB gzippé pour le runtime, grâce à l'approche par compilation
Syntaxe familière type React facilitant l'adoption pour les équipes existantes
Prévisibilité du comportement grâce au système de réactivité explicite sans règles complexes
Support natif du Server-Side Rendering (SSR) et du streaming avec SolidStart
Écosystème en croissance rapide avec des primitives réutilisables et des intégrations TypeScript de première classe

Exemple concret de réactivité

Counter.tsx

import { createSignal, createEffect } from 'solid-js';

function Counter() {
  // Signal: état réactif primitif
  const [count, setCount] = createSignal(0);
  const [multiplier, setMultiplier] = createSignal(2);

  // Memo: valeur dérivée calculée uniquement si les dépendances changent
  const doubled = () => count() * multiplier();

  // Effect: effet secondaire s'exécutant automatiquement
  createEffect(() => {
    console.log(`Count changed to: ${count()}`);
  });

  return (
    <div>
      <p>Count: {count()}</p>
      <p>Doubled: {doubled()}</p>
      <button onClick={() => setCount(count() + 1)}>
        Increment
      </button>
      <button onClick={() => setMultiplier(multiplier() + 1)}>
        Increase Multiplier
      </button>
    </div>
  );
}

export default Counter;

Dans cet exemple, seuls les éléments DOM affichant count() ou doubled() se mettent à jour lors des changements. Le composant lui-même ne se re-rend jamais entièrement, contrairement à React où chaque modification déclencherait un re-rendering complet du composant.

Mise en œuvre dans un projet

Initialiser un projet avec le template officiel : `npx degit solidjs/templates/ts nom-projet`
Configurer Vite ou le bundler choisi avec le plugin Solid pour la compilation JSX
Structurer l'application avec des composants fonctionnels et des signals pour l'état local
Utiliser createStore pour l'état complexe nécessitant une réactivité imbriquée
Implémenter le routing avec @solidjs/router pour les applications multi-pages
Optimiser avec lazy loading et Suspense pour le code-splitting automatique
Intégrer SolidStart pour le SSR, les API routes et le déploiement full-stack

Conseil pro : Migration depuis React

La syntaxe JSX de Solid ressemble à React mais avec des différences critiques : les props ne sont pas destructurées (pour préserver la réactivité), les composants ne re-rendent jamais, et les événements utilisent des propriétés natives comme onClick au lieu de callbacks synthétiques. Privilégiez une migration progressive en encapsulant les composants Solid dans votre application React existante via des web components.

Outils et écosystème associés

SolidStart : meta-framework full-stack pour SSR, routing et déploiement
Solid DevTools : extension navigateur pour inspecter le graphe de réactivité
@solidjs/router : système de routing déclaratif avec data loading
solid-primitives : collection de hooks réutilisables pour cas d'usage courants
Vite : bundler recommandé avec HMR optimisé pour Solid
TypeScript : support de première classe avec inférence de types complète
Astro : générateur de sites statiques avec support natif des composants Solid

Solid.js représente une évolution majeure dans l'architecture des frameworks frontend en démontrant qu'il est possible d'allier ergonomie développeur et performances maximales. Pour les applications nécessitant des interactions complexes, des mises à jour fréquentes ou fonctionnant sur des appareils moins puissants, Solid offre un avantage compétitif mesurable en termes de vitesse d'exécution, d'efficacité énergétique et d'expérience utilisateur. Son adoption croissante dans des projets à fort trafic valide son approche innovante de la réactivité compilée.