Solid js une bonne alternative à React ?

Qu’est-ce que Solid JS ?

Solid JS est une bibliothèque JavaScript open-source pour la création d’interfaces utilisateur (UI) basées sur des composants. C’est une alternative à React js avec une approche différente de la gestion des états et de la composition de composants.

En surface, Solid JS et React semblent être étroitement liés. Les frameworks côté client sont tous deux utilisés pour créer des applications monopage (SPA). Bien que l’expérience du développeur soit presque identique pour les deux, les mécanismes sous-jacents de chaque librairie présentent un contraste remarquable.

Les similitudes entre React et Solid

La partie JSX

JSX est simplement l’abréviation de “JavaScript XML” et vous pouvez le considérer comme du sucre syntaxique pour écrire des composants React ou Solid JS. Cela signifie que vous pouvez créer du code Solid ou React sans JSX en utilisant respectivement les fonctions document.createElement ou React.createElement.

JSX vous permet de décrire à quoi l’interface utilisateur devrait ressembler en HTML tout en vous donnant toute la puissance de JavaScript. En plus d’être une aide visuelle, l’utilisation de JSX dans Solid JS ou React est utile pour le débogage, car elle affiche des avertissements et des messages d’erreur plus intuitifs.

Exemple de JSX avec Solid JS :

import { render } from "solid-js/web";

function HelloWorld() {
  return <div>Hello World!</div>;
}

render(() => <HelloWorld />, document.getElementById("app"));

Programmation déclarative

Solid JS et React sont déclaratifs car ils se mettent à jour efficacement et restituent les bons composants lorsque les données changent.

Dans la programmation déclarative, vous ne décrivez que l’état final de l’interface utilisateur souhaitée et le moteur de rendu déterminera la meilleure façon d’exécuter l’affichage. Les composants déclaratifs sont plus faciles à déboguer et plus lisibles par opposition à la manière impérative d’écrire du code.

Flux de données unidirectionnel

Un modèle unidirectionnel de flux de données signifie que les données n’ont qu’une seule façon d’être transférées vers d’autres parties de l’application. Dans des bibliothèques telles que Solid JS et React, cela signifie que vous devrez souvent imbriquer des composants enfants dans des composants parents d’ordre supérieur.

Un modèle unidirectionnel de flux de données présente les avantages suivants :

• Vous avez plus de contrôle sur vos données, vous avez donc tendance à avoir moins d’erreurs
• Plus de contrôle signifie que le débogage est un jeu d’enfant
• Haut niveau d’efficacité, car le système a des limites et sait déjà quel composant possède quelle donnée

Les différences entre React et Solid

Solid et le virtual DOM

L’une des différences les plus frappantes entre Solid JS et React est l’absence de DOM virtuel. Contrairement à l’idée que l’utilisation du DOM principal ralentit une application, cela fait partie de ce qui rend Solid si performant.

Le DOM virtuel est une implémentation légère du DOM principal. Dans le passé, les bibliothèques JavaScript utilisaient le DOM virtuel car il était comparativement plus rapide que le DOM lui-même. Après tout, le DOM n’a pas été conçu pour gérer des mises à jour fréquentes à grande échelle, donc les bibliothèques JavaScript apportent des modifications au DOM virtuel, puis comparent les modifications au DOM réel et fusionnent les deux.

C’est la solution que de nombreuses bibliothèques et frameworks tels que React, Vue.js et Riot.js utilisent, mais aujourd’hui, les créateurs de Svelte et Solid ont décrit le DOM virtuel comme une surcharge pure qui ne fait que ralentir les performances de la bibliothèque. Ils ont recherché des options alternatives et plus rapides qui incluent l’utilisation du vrai DOM (qui bat le reste de la concurrence virtuelle du DOM).

La façon dont Solid atteint des vitesses aussi performantes sans l’utilisation d’un DOM virtuel consiste à compiler ses modèles jusqu’à de vrais nœuds DOM et à envelopper les mises à jour dans des réactions à grain fin. Ainsi, lorsque votre état est mis à jour, seul le code qui en dépend s’exécute.

Solid et le re-render

Les composants de Solid JS, contrairement à React, ne s’affichent qu’une seule fois, et seules les expressions et primitives JSX utilisées dans le composant sont mises à jour.

Cela apporte des gains de performances du côté de Solid JS car il n’est pas nécessaire de restituer un composant à chaque fois qu’il est utilisé. Solid JS est suffisamment réactif pour suivre les changements qui se produisent à l’intérieur du composant lui-même.

Solid et la réactivité

React en soi n’est pas entièrement réactif, ce que l’équipe React reconnaît. Cela ne devrait en aucun cas être un obstacle pour quiconque cherche à utiliser React, car il fait toujours le travail et est apprécié par des milliers de développeurs et d’entreprises à travers le monde.

Cependant, Solid JS a été conçu dans un souci de réactivité et l’utilise comme argument de vente. Il utilise le terme réactivité à grain fin pour décrire ses vitesses performantes et sa capacité à mettre à jour rapidement les données.

Exemple de l’utilisation d’un Signal avec Solid JS :

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);

  setInterval(() => setCount(count() + 1), 1000);

  // the count will be updated each seconds
  return <div>Count: {count()}</div>;
}

render(() => <Counter />, document.getElementById("app"));

Comparaison entre Solid JS et React

Pour cette section, nous comparerons les deux bibliothèques en fonction des caractéristiques suivantes :

• Expérience de développement
• Performance
• Communauté et écosystème
• Documentation et ressources

Expérience de développement

Solid JS et React ont tous deux d’excellentes expériences de développement. En effet, Solid JS et React partagent quelques-unes des mêmes philosophies, telles que le flux de données unidirectionnel, la ségrégation lecture/écriture et les interfaces immuables (à l’exception de l’implémentation du DOM virtuel, comme nous l’avons vu précédemment).

Solid JS fournit également une prise en charge JSX et TypeScript de première classe, ainsi que quelques fonctionnalités similaires à celles de React, telles que les Context, les portals, le SSR, l’hydratation et bien d’autres.

Performance

En termes de performances, Solid JS est meilleur que React et presque toutes les autres bibliothèques JavaScript.

Ne vous méprenez pas, React est très rapide, mais son potentiel est limité par sa mise en œuvre d’un DOM virtuel et sa quête d’une architecture de code propre.

Les vitesses performantes de Solid JS peuvent être attribuées à un principe de conception connu sous le nom de réactivité granulaire.

Communauté et écosystème

Sans conteste, React remporte ce point en raison de son vaste écosystème de bibliothèques, d’outils et de ressources de composants d’interface utilisateur tiers.

En ce qui concerne les bibliothèques tierces, Solid JS n’en a pas encore beaucoup, mais il a des bibliothèques propriétaires. Ses bibliothèques propriétaires sont l’équivalent d’autres bibliothèques populaires dans d’autres bibliothèques JavaScript, telles que Solid App Router pour le routage, Solid Testing Library pour l’écriture de tests de composants et Solid Transition Group pour les animations.

Documentation est ressources

Parce que React existe depuis plus longtemps, il dispose d’une bonne documentation ainsi que d’un vaste écosystème de ressources à suivre pour les débutants et les développeurs avancés.

Bien que Solid JS soit relativement nouveau, son créateur, Ryan Carniato, fait beaucoup de travail pour diffuser Solid JS en créant des vidéos et des articles de blog concernant le développement de Solid JS. Les membres de la communauté créent également de nombreuses ressources et guides utiles sur la bibliothèque. Solid JS a également une documentation appropriée sur son site Web pour les nouveaux arrivants.