Pourquoi je suis passé de React à Svelte

Si on le compare à Angular, Vue, React (les trois mousquetaires), Svelte est jeune voir meme très jeune. Je crois que c'est dans James Bond "Skyfall" qu'il disait que la vieillesse n'est pas gage de sagesse et la jeune n'est pas gage d'originalité, un truc dans le genre, m'enfin bon (bond, qu'est ce qu'on se marre).

Je vais d'abord faire une comparaison, puis donner mon avis honnete et tout à fait objectif (oui, bien-sur on te croit...)

Commencons par un classique qui m'a sauvé la vie dans ma carriere de developpeur et qui m'a permis de me surpasser: le "Hello world!"

"Hello world" en React

// HelloWorld.jsx
import { useState } from 'react';

export default function HelloWorld() {
    return <h1>Hello world!</h1>
}

<!-- HelloWorld.svelte -->
<h1>Hello world!</h1>

Rien là, tu dois commencer à voir un avantage qui est celui de la concision. La taille compte (eh oui!). Moins j'ai de code et moi j'ai de choses à lire lorsque je debug.

La réactivité

// Counter.jsx
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Le compte est: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

<!-- Counter.svelte -->
<script>
let count = 0;
</script>
<div>
    <p>Le compte est: {count}</p>
    <button on:click={()=> count++}>+</button>
</div>

On est d'accords qu'il n'y a pas photos ? est-ce que j'arrete les frais là ? mais bien-sur que non!

(Je rentrerai plus dans le détails en faisant un tuto de chaque truc (les plus importants) qu'offre Svelte, du coup il ne faut pas se choquer si je passe du coq à l'ane)

Le global state management

Alors ca c'est vraiment ma partie préférée!
Déjà, je pose une petite question qui sera probablement la raison du démmarrage d'une 3eme guerre mondiale:

"Comment je fais du global statement management en React ?"

Context API (interne)
Redux
MobX
Recoil

Allez comment fait-on maintenant ?
Quoi que tu utilises, je te laisse faire un code dans ta tete qui faire un state global d'accord ?

(Ce n'est pas du tout parce que j'ai la flemme de les comparer 1 à 1, promis...)

le store de Svelte

// store.js
import { writable } from 'svelte/store'

export const count = writable(0)

<!-- Counter.svelte -->
<script>
    import { count } from './stores.js';
</script>
<div>
    <p>Le compte est: {$count}</p>
    <button on:click={()=> $count++}>+</button>
</div>

<script>
    import { count } from '../../stores.js';
</script>
<!-- UnComposantQuelconqueQuelquePartDansLarbo.svelte -->
<p>Je connais le count, c'est: {$count}</p>

Un simple $, un simple putain de $...

Plus sérieusement, Svelte bat vraiment React

Pas de VirtualDOM, une rapidité d'éxecution inégalée comparée aux Frameworks VirtuaDOMés (React, Vue...)
Pas de librarie Svelte, il compile du pur JavaScript, donc ultra léger
Une simplicité hors norme (ai-je besoin de le préciser), très bon pour la prise en main et l'onboarding des Juniors
Un framework référence par l'équipe de Svelte (écrit par l'équipe elle-meme): SvelteKit (on en reparlera de ce petit bijou)

React reste quand meme le patron car...

React Native, qui ne doit plus faire ses preuves tellement ce truc déchire pour faire du Mobile (Quoique... nous parlerons de Flutter un de ces jours)
Une communauté gigantesque! Absolument tous tes problemes auront été résolus avant que tu ne les rencontres
Une infinité de libraries
Des offres d'emploi à tout va! sauf si tu veux venir travailler avec une équipe qui déglingue et qui utilise justement Svelte (Décathlon 💙) je dis ca je dis rien 🤫

Plus loins

Si tu veux t'amuser un peu plus avec les syntaxes, je te conseille ce très beau projet fait par un Francais en plus 🇫🇷:Component Party

Aussi, la très bonne documentation de Svelte.

En plus de la doc, on a carrément t'as un beau petit tuto qui te permetteras de maitriser le B-A BA et meme plus sur Svelte.
Le tuto Svelte officiel

Bon évidemment, mais perso meme si j'ai un très bon Anglais, je reste un grand fan de la francophonie. Donc je continuerai à écrire en Francais tant qu'il y aura de l'interet chez vous les lecteurs.

À très vite

Blog