DĂ©couvrir Un Nouveau Framework : SolidJS đŸ§‘â€đŸ’»

Le monde du développement Web est en perpétuelle évolution, et voit apparaßtre de nouvelles librairies JavaScript (toujours plus intéressantes), jour aprÚs jour


Cette annĂ©e (une fois encore), je me suis lancĂ© le dĂ©fi d’expĂ©rimenter une nouvelle technologie. Le Web Ă©voluant constamment, il est important de se mettre Ă  la page tous les 6 mois. C’est Ă  l’issue des rĂ©sultats du dernier sondage “State Of JS”, que j’ai repĂ©rĂ© deux nouveaux frameworks que me semblaient prometteurs : AlpineJS x SolidJS

NB : Je suis passionnĂ©, j’ai soif de connaissances, et rĂ©cemment j’avais envie d’apprendre quelque chose de frais, Ă  l’image de la dĂ©couverte de Svelte en 2019.

AprĂšs avoir lu deux ou trois documentations, et analysĂ© plusieurs dizaines de lignes de code, mon choix s’est trĂšs vite orientĂ©e vers SolidJS, notamment du fait de l’omniprĂ©sence du JSX, ainsi que de concepts similaires Ă  mon outil de tous les jours, Ă  savoir : React !

Dans cet article, je vais Ă©videmment parler de ce qu’est SolidJS, mais surtout de la maniĂšre dont j’ai apprĂ©hendĂ© ce nouveau framework dans une dĂ©marche d’apprentissage (de la thĂ©orie Ă  la pratique). Je ne manquerais pas d’évoquer les dĂ©pendances qui gravitent autour de son Ă©cosystĂšme. Enfin, nous verrons si ce dernier tient sa promesse de “rĂ©activitĂ© fine”, tout en Ă©tant simple et performant.

SolidJS, c’est quoi !?

NB : Avant d’entrer dans le vif du sujet, une brĂšve explication
 Dans le cadre de travaux autour de la mise en place d’un rĂ©seau de pair-Ă -pair en JavaScript (article Ă  venir
), j’ai souhaitĂ© disposer d’une interface / d’une application de contrĂŽle des actions relatives Ă  un noeud (autre que Postman). PlutĂŽt que de dĂ©velopper cela Ă  partir de bases dĂ©jĂ  connues, j’ai commencĂ© Ă  apprendre plus en dĂ©tail ce qu’est rĂ©ellement SolidJS, et Ă  la mettre en oeuvre dans un projet d’ampleur. Voici ma dĂ©marche d’apprentissage !

Tout comme une multitude de librairies JavaScript avant lui, SolidJS est un framework orientĂ© composants permettant de construire des interfaces Web. Bien que proche de React dans certains de ses concepts (et sa syntaxe), il se veut plus lĂ©ger et rĂ©actif que ce dernier, Ă  l’instar de Svelte. En effet, SolidJS prĂŽne la “rĂ©activitĂ© fine” en opĂ©rant les changements directement depuis le DOM, plutĂŽt qu’à travers un DOM virtuel.

De ce fait (et d’aprĂšs les tests de performance de la communautĂ© open-source), cette nouvelle monture serait Ă  la fois plus rapide que React, Vue, Preact (qui possĂšde pourtant d’un DOM virtuel plus lĂ©ger que React), ainsi que Svelte, et arriverait en tĂȘte des scores !

Création de 1 000 / 10 000 éléments, et modification de 100 éléments (millisecondes)
Allocation mémoire au chargement, à la création et à la modification (mégabytes)

DĂ©buter avec SolidJS

DĂ©buter avec SolidJS est un jeu d’enfant (je recommande malgrĂ© tout d’avoir les bases de JavaScript, ainsi que la maitrise de certaines notions de framework orientĂ© composants, pour bien comprendre ce qu’est la rĂ©activité ). Il suffit de faire appel Ă  la librairie de Rich Harris (degit), afin d'Ă©chafauder le projet. Ainsi, l'environnement JavaScript sera prĂ©-configurĂ©e pour fonctionner Ă  partir d’un bundler, non pas Webpack cette fois-ci, mais bien Vite !

PropulsĂ© majoritairement par la communautĂ© de Vue, Vite est un outil JavaScript d’un nouveau genre, vous permettant de dĂ©marrer un nouveau projet Web extrĂȘmement rapidement, tout en proposant un environnement moderne. InspirĂ© de RollupJS (mais aussi ESBuild), Vite se dote de nombreuses fonctionnalitĂ©s, Ă  savoir :

  • La gestion des dĂ©pendances NPM
  • La pre-compilation des sources (lui permettant de gagner Ă©normĂ©ment de temps au dĂ©marrage)
  • Le remplacement des modules Ă  chaud (HMR)
  • Le support natif de TypeScript
  • La transpilation de JSX Ă  la volĂ©e
  • Le support des modules CSS
  • La gestion dynamique des imports
  • L’optimisation de la compilation, etc


NB : L’écosystĂšme de Vite apporte Ă©galement Vitest pour les tests unitaires, en alternative Ă  Jest.

SolidJS offre une large palette de templates permettant d’initialiser un nouveau projet, avec le choix du langage : soit JavaScript, soit TypeScript ; l’intĂ©gration d’une librairie UI prĂȘte Ă  l’emploi (notamment l’excellentissime TailwindCSS), mais aussi l’implĂ©mentation d’un moteur de tests unitaires : Jest / Vitest (au choix).

Composant de compteur avec SolidJS
Composant de compteur avec React

Ci-dessus, voici Ă  quoi peut ressembler un premier composant de compteur simple avec SolidJS, et son opposĂ© cĂŽtĂ© React. On s’aperçoit trĂšs vite des similitudes qui existent entre ces deux librairies. Et pourtant, SolidJS se veut plus explicite et simple !

En effet, plutĂŽt que d’avoir un hook useEffect qui permet Ă  la fois de gĂ©rer le montage et le dĂ©montage du composant (au travers une fonction de cleanup), SolidJS expose ses actions avec les fonctions de son cycle de vie : onMount et onCleanup.

De mĂȘme, l’API createSignal est relativement identique au hook useState de React dans son fonctionnement, puisque le flux de donnĂ©es est unidirectionnel. D’un cĂŽtĂ© l’accesseur (immutable), et de l’autre le "setter". Pourtant, il existe une diffĂ©rence non nĂ©gligeable avec SolidJS ! La notion de "rĂ©activitĂ© fine" pars du principe que les composants ne se rendent qu’une fois, et que les fonctions associĂ©es aux Signals sont exĂ©cutĂ©es dĂšs lors que ces derniers sont mis Ă  jour. Les changements seront ensuite impactĂ©s directement dans le DOM. Puisque l’accĂšs Ă  la valeur d’un Signal ne se fait qu’en l’appelant (prĂ©sence des parenthĂšses), je considĂšre davantage l’accesseur comme un "getter", plutĂŽt qu’une constante... Les Signals sont le concept clĂ© de SolidJS !

Dans l’ensemble SolidJS est vraiment simple Ă  prendre en main, l’apprentissage de son API est Ă©galement facilitĂ© du fait d’une documentation enrichie et d’une partie “playground” permettant de comprendre chaque aspect de cette librairie, et de monter en compĂ©tence petit Ă  petit.

Bien qu’élĂ©mentaire, SolidJS est un framework complet, puisqu’il propose aussi une solution de routage (npm install solid-app-router), une fonctionnalitĂ© de "code splitting" grĂące au chargement asynchrone des composants (rendu possible grĂące au bundler), ou encore la possibilitĂ© de rendre son application cĂŽtĂ© serveur (SSR). Ainsi SolidJS, se classe parmi les grands (React, Vue, etc...) en tant que librairie Web pour crĂ©er des interfaces utilisateurs.

Construire des interfaces utilisateurs

Assez de thĂ©orie, passons maintenant Ă  la pratique ! Et quoi de mieux que la mise en pratique que d’évoluer dans un cas concret
 Pour cela, je vous propose de crĂ©er un nouveau projet, pour gĂ©rer l’alimentation et l’affichage d’une modale, afin d’aborder les notions de rĂ©activitĂ© de SolidJS. C’est parti !

npx degit solidjs/templates/js-vitest my-awesome-app
cd my-awesome-app
npm install

Et voilà ! Vous devriez voir apparaitre un nouveau répertoire (my-awesome-app dans mon cas), léger en termes de dépendances, mais déjà pré-configuré pour fonctionner /vit/ !

NB : Dans le cadre de mes travaux, j’ai aussi ajoutĂ© le support de TailwindCSS Ă  l’initialisation du projet (npx degit solidjs/templates/js-tailwindcss), puis fusionnĂ© les deux configurations de Vite manuellement.

Modal.jsx

La modale reprĂ©sente un composant stateless qui s’étend visuellement sur tout l’écran (si on considĂšre l’arriĂšre-plan assombri et le centrage de l’élĂ©ment principal), et qui n’attend que des valeurs via les props pour prendre vie. Ceci facilite aussi les tests unitaires avec Vitest (et Testing Library).

L’API de SolidJS peut rendre la syntaxe un peu verbeuse Ă  premiĂšre “Vue” 😉, mais ses composants sont indispensables afin d’opĂ©rer un changement dans le DOM, en l’absence de DOM virtuel. Ainsi sa simplicitĂ© repose sur une combinaison astucieuse de Signals (immutables) et de composants (<Show>, <Switch>, <For>, etc...) pour rendre le DOM rĂ©actif aux endroits souhaitĂ©s !

NB : À noter qu’ici, on utilise l’API mergeProps afin d'imposer des valeurs par dĂ©faut aux props. LĂ  encore, il est important d'utiliser cette fonction pour conserver la rĂ©activitĂ©, plutĂŽt que d'initialiser ces mĂȘmes valeurs directement depuis la signature du composant (comme avec React).

main.jsx

Pour ce qui est de l’usage, le dĂ©clenchement de l’affichage de la modale (ainsi que son alimentation) s’opĂšre via des Signals, depuis le composant parent. Ci-dessus, je me suis amusĂ© Ă  changer l’aspect de la modale en fonction du temps, pour observer la rĂ©activitĂ©. À nouveau, cela peut sembler verbeux, et pourtant c’est simple et efficace !

Ce mode de fonctionnement, n’est parfois pas suffisant, notamment lors du dĂ©veloppement d’une application Ă  l’échelle, ou bien lorsqu’on utilise un systĂšme de routage (npm install solid-app-router), pour sĂ©parer les pages de son application. La gestion de la modale, serait possible en utilisant une logique de "props drilling" (parent vers enfant, enfant vers sous-enfant, etc...), mais on tomberait vite dans une complexitĂ© liĂ©e Ă  l’imbrication de composants, ainsi qu’à leur maintenance... Pas de problĂšme ! Pour ce qui est des modales, il y a le composant <Portal> ; pour tout le reste, il y a l’API "Context" !

Modal.jsx

L’API Context

NB : Dans un prĂ©cĂ©dent article, j’explique comment il est possible de mettre en oeuvre un Redux “maison”, avec l’API Context de React, ici la logique est la mĂȘme


StateProvider.jsx
StateConsumer.jsx

Le State Management (via l’API Context), est un paradigme de programmation rĂ©active idĂ©al pour les dĂ©veloppements volumineux, permettant d’éviter le problĂšme de “props drilling”, mais aussi de prĂ©sence de donnĂ©es en double / triple
 De cette maniĂšre, on dit que le "store" est unique source de vĂ©ritĂ© de l’application.

NB : Pour en savoir plus sur ce sujet, n’hĂ©sitez pas Ă  consulter le code source de mon projet sur Gitlab (et Vercel).

Vous reprendrez bien un supplément de tests unitaires ?

L’écosystĂšme propulsĂ© par SolidJS, prĂŽne des technologies modernes telles que PNPM, Vite, Vitest mais aussi Testing Library. En s’appuyant sur l’implĂ©mentation de Preact, l’équipe de SolidJS apporte le framework de tests unitaires orientĂ©s composants, qui a dĂ©jĂ  fait ses preuves avec React, Vue, Angular, Cypress, etc


Modal.test.jsx

Simplicité + Réactivité === Performance

J’ai vraiment apprĂ©ciĂ© jouer avec ce nouveau framework (comme souvent avec les technologies JavaScript). On y retrouve beaucoup de notions de ses homologues, ainsi que des nouvelles telles que les Signals, ou encore la fonction createResource (trĂšs pratique pour le requĂȘtage d’API). Je n’ai pas eu de grandes difficultĂ©s Ă  crĂ©er mon application de contrĂŽle de noeud (de A Ă  Z), puisque ce dernier offre une grande flexibilitĂ© dans l’organisation du projet. L’expĂ©rience dĂ©veloppeur est donc optimale !

NB : À l’inverse de React (ou Vue), SolidJS compile son code dĂšs la phase de dĂ©veloppement (comme Svelte). De cette maniĂšre, il est en capacitĂ© d’opĂ©rer efficacement et rapidement les changements dans le “vrai” DOM ; un point supplĂ©mentaire en faveur de l’expĂ©rience dĂ©veloppeur ! 👍

Ce premier tour d’horizon me donne envie d’en savoir plus et de proposer la dĂ©marche dans un cas d’entreprise. Peut-ĂȘtre en remplacement de Preact, ou mĂȘme de React
 SolidJS ne propose pas que les composants et fonctionnalitĂ©s dĂ©montrĂ©s ci-dessus. Si je devais faire une liste (non exhaustive), cette librairie propose Ă©galement :

  • Le rendu dynamique d’une liste d’élĂ©ments, depuis (non pas Array.prototype.map mais) son composant <For>
  • L’encapsulation des appels asynchrones (en tant que ressources), pour une meilleure visibilitĂ© de l’état de chargement, ainsi que la prĂ©sence (ou non) d’erreur(s)
  • L’affichage d’interfaces en cas de chargement lĂąche (composants ou ressources), via le composant <Suspense>
  • L’affichage d’interfaces en cas d’erreur(s), afin d’éviter le crash de l’application
  • Le mode de fonctionnement SSR, pour des gains de performance, mais aussi pour un meilleur SEO (ici SolidJS, marche sur les plate-bandes de Nuxt, Next ou encore SvelteKit)
  • Ou encore, la rĂ©conciliation de “store”, permettant de faire cohabiter Redux dans une application Ă  l’échelle

Du fait de ses concepts simples Ă  apprĂ©hender, et malgrĂ© l’absence de DOM virtuel, SolidJS a su prouver sa force et sa stabilitĂ© (en 5 ans de dĂ©veloppement), en poussant la rĂ©activitĂ© en sa forme la plus pure : les Signals ! Tout comme Svelte, ce framework tournĂ© vers l’avenir a de beaux jours devant lui. Coup de ❀ de l’annĂ©e !

--

--

𝕊𝚘𝚏𝚝𝚠𝚊𝚛𝚎 đ”Œđš—đšđš’đš—đšŽđšŽđš› | đ”ŸđšŽđšŽđš” | 𝕊𝚎𝚛𝚒𝚎𝚜 𝔾𝚍𝚍𝚒𝚌𝚝 | 𝕄𝚞𝚜𝚒𝚌 𝕃𝚘𝚟𝚎𝚛 | 𝕎𝚎𝚋 đ”Œđš—đšđš‘đšžđšœđš’đšŠđšœđš

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Damien Chazoule

𝕊𝚘𝚏𝚝𝚠𝚊𝚛𝚎 đ”Œđš—đšđš’đš—đšŽđšŽđš› | đ”ŸđšŽđšŽđš” | 𝕊𝚎𝚛𝚒𝚎𝚜 𝔾𝚍𝚍𝚒𝚌𝚝 | 𝕄𝚞𝚜𝚒𝚌 𝕃𝚘𝚟𝚎𝚛 | 𝕎𝚎𝚋 đ”Œđš—đšđš‘đšžđšœđš’đšŠđšœđš