React est de loin le plus grand framework Javascript frontend du développement web moderne. Cependant, Svelte n'a cessé de gagner en popularité au cours des dernières années. Ce qui rend Svelte si spécial.

• Syntaxe très facile à apprendre
• Au lieu d'envoyer le framework au navigateur, le code est compilé en js standard, ce qui entraîne une taille de bundle BEAUCOUP plus petite et un code ultra-rapide.

SolidJS est un framework d'interface utilisateur dont la syntaxe est très similaire à React mais est compilé en javascript moderne, comme Svelte permet aux gens d'obtenir la vitesse et les tailles de bundle de Svelte mais utilisent la syntaxe React à laquelle ils sont habitués.

Configurer un projet SolidJS

Exécutez simplement la commande suivante pour générer un nouveau projet…

npm init solid app ProjectName

ou pour dactylographié

npm init solid app-ts ProjectName

Qu'est-ce que c'est pareil

• La structure de fichier du projet généré devrait ressembler à une application create-react-app
• JSX fonctionne toujours comme JSX

Donc, dans React, vous utiliseriez normalement le hook useState pour générer une variable d'état et le processus fonctionne toujours à peu près de la même manière dans SolidJS sauf que maintenant nous utilisons la fonction createSignal.

import {createSignal} from "solid-js"
import './App.css';
function App() {
// create state
  const [count, setCount] = createSignal(1)
// add function
  const add = () => {
    //notice in this context I must invoke the state to get the value (not in jsx)
    setCount(count() + 1)
  }
// JSX works like normal
  return (
    <div class="App">
      <h1>My Counter</h1>
      <h2>{count}</h2>
      <button onClick={add}>Add</button>
    </div>
  );
}
export default App;

Cycle de vie et createEffect

Voici où penser en solide est très différent de penser dans React. Dans React, le composant entier est une fonction qui s'exécute à chaque fois que vous définissez des mises à jour, ce qui rend possible des boucles infinies lors de la modification de l'état des appels de fonction dans le corps de la fonction du composant. Dans React, la solution à cela est de déplacer ce type de code dans sa propre fermeture avec le hook useEffect pour l'exécuter lorsque vous le souhaitez et non sur tous les rendus de la fonction du composant.

Solid n'utilise pas de DOM virtuel et lors des mises à jour d'état, il n'exécute pas à nouveau la fonction de composant. Au lieu de cela, le code réactif est enveloppé dans des appels createEffect qui réexécutent ensuite la fonction lorsqu'un signal à l'intérieur d'eux est mis à jour. L'avantage de ceci est…

• Vous pouvez effectuer des appels Fetch / Axios sans avoir à les envelopper dans useEffect pour éviter des boucles infinies
• JSX se compilera automatiquement en appels createEffect, c'est pourquoi ils se mettront à jour lorsque l'état sera mis à jour.

La bonne chose à ce sujet est que les mises à jour sont plus granulaires, ce qui rend inutile la dépense d'un dom virtuel (seul le code qui dépend des données mises à jour changera sans avoir à exécuter de comparaisons.)

En bout de ligne

Solid conserve ce qui est génial dans la syntaxe React, mais utilise également les approches d'amélioration des performances de Svelte. Je ne serais pas surpris de voir SolidJS grandir dans la même veine que des Frameworks comme Svelte et React!