Marre de React ? Svelte 5 : moitié moins de code, double performance (tutoriel complet)

Pourquoi j’apprends encore un nouveau framework

En ouvrant la doc Svelte, j’étais sceptique. Tous les quelques ans un framework promet « cette fois c’est différent », souvent pour peu de changement. Mon projet React tournait bien — pourquoi s’embêter ?

Puis le premier exemple m’a figé. Compteur : React exige useState, setCount, et l’interdiction de muter le state directement. Svelte ? let count = $state(0), puis count++. C’est tout.

Cette simplicité m’a accroché trois heures de tutoriel d’affilée — pas par complexité, mais par clarté. Si vous avez la « fatigue des frameworks », cet article parle de la logique « optimisation à la compilation » de Svelte 5 — elle a changé ma façon de voir le frontend.

Qu’est-ce que Svelte ? L’essence d’un framework à la compilation

Une image pour compiler vs runtime :

React, c’est la livraison de repas : chaque livraison emporte couverts, serviettes, emballages — Virtual DOM, reconciliation — que vous les utilisiez ou non. Résultat : ~42 Ko de base React pour un « Hello World ».

Svelte, c’est la cuisine maison : ingrédients prêts (votre code), cuisson (compilation), assiette de pur JS (~1,6 Ko), sans surcharge.

J’ai mesuré la même app Todo en React et Svelte :

En 3G (beaucoup d’utilisateurs y sont encore), 300 ms peuvent signifier 5 à 10 % de rebond en plus sur e-commerce ou média.

Svelte 5 vs 4 ? Runes — nouvelle API réactive, bundle −15 à 30 %, code plus lisible.

Ne réécrivez pas React tout de suite. Ce ne sont pas des substituts mais des philosophies : React, écosystème et flexibilité ; Svelte, perf et simplicité. Le choix dépend du contexte.

Vultr - Serveur cloud NVMe haute performance, 32 emplacements mondiaux, déploiement Docker en un clic

Voir les tarifs →Pub

Runes en profondeur : la magie du compilateur

Le cœur de Svelte 5, ce sont les Runes — nom un peu fantaisiste, usage très concret.

$state : enfin sans setter

React :

// React : setter à chaque fois
const [count, setCount] = useState(0)
function increment() {
  setCount(count + 1) // attention aux pièges de closure
}

Svelte 5 :

// Svelte 5 : comme du JS natif
let count = $state(0)
function increment() {
  count++ // le compilateur gère la réactivité
}

Au début je cherchais le setter — inutile. Le compilateur insère traçage et mises à jour. En projet : 30 à 40 % de code en moins, surtout sur les formulaires sans handleXXXChange.

$derived : dépendances automatiques

Avec useMemo, le tableau de dépendances est un cauchemar : oubli → pas de mise à jour ; trop de deps → recalculs incessants.

Svelte :

// React : dépendances manuelles
const doubled = useMemo(() => count * 2, [count])
const quadrupled = useMemo(() => doubled * 2, [doubled])
// Svelte 5 : traçage automatique
let doubled = $derived(count * 2)
let quadrupled = $derived(doubled * 2)

Sur un devis multi-champs, React avait deux lignes de deps à surveiller ; Svelte, le compilateur s’en charge. Vous écrivez la logique, la réactivité suit.

$effect : effets de bord sans friction

useEffect est l’un des Hooks les plus déroutants : deps, cleanup, timing…

Svelte :

// React : cleanup manuel
useEffect(() => {
  const subscription = someAPI.subscribe()
  return () => {
    subscription.unsubscribe()
  }
}, [/* deps */])
// Svelte 5 : nettoyage automatique
$effect(() => {
  const subscription = someAPI.subscribe()
  // démontage géré par le compilateur
})

Polling, WebSocket, localStorage : fluide, sans crainte de fuite mémoire.

$props : props typées

// React
function TodoItem({ todo, onToggle }) {
  // PropTypes ou TS à la main
}
// Svelte 5
<script>
  let { todo, onToggle } = $props()
  // TypeScript intégré
</script>

Peu de différence en apparence, mais plus naturel à l’usage ; TS officiel sans config extra.

Svelte vs React/Vue : un choix, pas une guerre

Faut-il migrer ? Les outils ne font pas le projet — j’ai vu du jQuery élégant et du React brouillon.

Courbe d’apprentissage

Svelte : HTML + CSS + JS. Junior formé : tutoriel officiel, composants seuls en deux jours.

React : JSX, Hooks, immuabilité, reconciliation — 1 à 2 semaines pour bien comprendre. La profondeur se lit dans la masse d’articles « astuces React ».

🔥 Ne perdez plus des mois sur des produits sans demande ! Validez vos promesses SaaS avec Adsterra à petit budget →

Tester l'MVP →Pub

Vue : entre les deux ; templates clairs, mais directives, computed, watch…

Performance

Soyons honnêtes : sur un petit Todo, l’écart se sent peu.

Là où ça compte :

1. Grosses listes : catalogue e-commerce, chat. 10 000 lignes : Svelte ~58 FPS, React ~45 FPS.
2. Updates fréquents : dashboards, bourse — pas de diff Virtual DOM lourd.
3. Mobile en 3G : petit bundle = avantage net.

Source : benchmarks JS 2025, environnements standardisés — mesurez sur votre projet.

Écosystème : mature vs compact

Svelte reste en retrait face à React :

• npm/semaine : Svelte ~500 k vs React ~20 M
• Stack Overflow : Svelte ~12 k vs React ~500 k
• Bibliothèques UI : dizaines vs centaines

Mais la communauté est active — Rich Harris répond parfois sur Discord, rare côté React. Toolchain moderne : Vite, SvelteKit, TypeScript natif, sans montagne de loaders Webpack.

Quand choisir Svelte ?

Équipe déjà sur React : ne changez pas sans forte douleur perf. Nouveau projet, petite équipe ou curiosité : Svelte vaut le coup.

Tutoriel 30 min : Todo avec Svelte 5

Assez de théorie — construisons une app Todo pour sentir Runes.

Structure

svelte-todo/
├── src/
│   ├── lib/
│   │   └── TodoItem.svelte  // composant Todo
│   ├── App.svelte           // app principale
│   └── main.js              // entrée
└── package.json

App.svelte

<script>
  // Runes : concis et puissant
  let todos = $state([])
  let input = $state('')
  // $derived suit todos sans deps manuelles
  let remaining = $derived(
    todos.filter(t => !t.done).length
  )
  function addTodo() {
    if (input.trim()) {
      todos.push({
        id: Date.now(),
        text: input,
        done: false
      })
      input = ''
    }
  }
  function toggleTodo(id) {
    const todo = todos.find(t => t.id === id)
    if (todo) {
      todo.done = !todo.done
    }
  }
  function deleteTodo(id) {
    todos = todos.filter(t => t.id !== id)
  }
</script>
<div class="app">
  <h1>Mes tâches</h1>
  <div class="input-area">
    <input
      bind:value={input}
      placeholder="Ajouter une tâche..."
      onkeydown={(e) => e.key === 'Enter' && addTodo()}
    />
    <button onclick={addTodo}>Ajouter</button>
  </div>
  <p class="stats">
    Il reste {remaining} tâche(s) à terminer
  </p>
  <ul class="todo-list">
    {#each todos as todo}
      <TodoItem
        {todo}
        onToggle={() => toggleTodo(todo.id)}
        onDelete={() => deleteTodo(todo.id)}
      />
    {/each}
  </ul>
</div>
<style>
  .app {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .input-area {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background: #0066cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .stats {
    color: #666;
    margin-bottom: 10px;
  }
  .todo-list {
    list-style: none;
    padding: 0;
  }
</style>

TodoItem.svelte

<script>
  let { todo, onToggle, onDelete } = $props()
</script>
<li class="todo-item">
  <label>
    <input
      type="checkbox"
      checked={todo.done}
      onchange={onToggle}
    />
    <span class:done={todo.done}>
      {todo.text}
    </span>
  </label>
  <button class="delete-btn" onclick={onDelete}>
    Supprimer
  </button>
</li>
<style>
  .todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  .done {
    text-decoration: line-through;
    color: #999;
  }
  .delete-btn {
    padding: 5px 10px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
  }
</style>

Lancer

npm create vite@latest svelte-todo -- --template svelte
cd svelte-todo
npm install
npm run dev

Ouvrez http://localhost:5173 — Todo fonctionnelle.

Points clés

1. Réactivité naturelle : pas de setState ni dispatch.
2. Sans lib de state : pas de Redux/Context pour un projet moyen.
3. Styles isolés : CSS scoped par composant.
4. Build minuscule : npm run build → ~5 Ko.

Piège Svelte 4 : après todos.push(), réassignation obligatoire. Svelte 5 : push suffit — différence importante.

La simplicité n’excuse pas une mauvaise architecture sur gros projet ; en Svelte, concentrez-vous sur le métier, pas sur le paradigme de state.

Écosystème, communauté, avenir

État des lieux

Malgré l’écart avec React, l’essentiel est là :

KiloClaw - OpenClaw managé pour l’entreprise : orchestration d’agents IA et routage intelligent

Commencer →Pub

• SvelteKit : full-stack officiel (SSR, SSG, routes API) — rôle proche de Next.js.
• UI : Svelte Material UI, Carbon Components, Skeleton UI…
• Toolchain : Vite, Prettier, ESLint.
• Cas réels : Spotify, Square, NYT, projets internes Apple.

Communauté plus petite, très active — Harris et l’équipe core sur Discord.

Ressources

• Tutoriel officiel : interactif, ~80 % des concepts en une passe.
• Discord Svelte : réponses rapides et de qualité.
• Exemples GitHub : dépôt officiel riche.
• Contenus FR : articles sur Medium, dev.to et blogs francophones.

Tendances

Mon avis : Svelte ne sera pas le mainstream, mais reste un choix sérieux.

Le fossé React est profond en entreprise. Svelte brille en perf (UI de jeu, dashboards, mobile), petites équipes (startup, outils internes) et formation (syntaxe proche du Web).

Svelte 5 est prêt pour la prod ; TypeScript progresse. Apprendre Svelte n’enrichit pas toujours le CV, mais élargit la réflexion — revenu sur React, vous optimiserez autrement.

Conclusion : un week-end pour essayer

Svelte mérite un week-end d’exploration.

Pas de réécriture massive — plutôt :

1. 2 h de tutoriel officiel cette semaine.
2. Refaire un petit projet (calculatrice, météo…) en Svelte.
3. Ne pas imposer à l’équipe avant d’avoir validé le fit.

Chaque framework se dit « révolutionnaire » ; ce qui compte, ce sont les idées : compilation, API simples, perf. Applicables partout.

La technique sert le produit. React et Svelte résolvent souvent les mêmes problèmes — choisissez selon équipe, contexte, intuition.

Perf, lassitude du boilerplate, ou simple curiosité : ouvrez https://svelte.dev/tutorial.

Deux heures, le prix d’un repas — et peut-être l’outil qu’il vous fallait.