Réactivité fine pour les frameworks JavaScript —

Dans cet article, nous allons découvrir comment utiliser les signaux dans Solid, une bibliothèque JavaScript moderne et réactive pour créer des interfaces utilisateur qui reposent principalement sur des composants.

Contenu:

1. Une introduction aux signaux
2. C’est quoi Solide ?
3. Qu’est-ce qu’un signal exactement ?
4. Un exemple de signaux
5. Signaux en angulaire
6. Autres caractéristiques du solide

Une introduction aux signaux

L’une des dernières tendances en matière de développement Web est l’utilisation de signaux, qui offrent une approche plus réactive pour mettre à jour les valeurs d’un programme sujet à changement. Lorsqu’une valeur est mise à jour, tout ce qui utilise cette valeur est également mis à jour. C’est ce qui rend les signaux si uniques.

La croissance des signaux, et l’intérêt qu’ils suscitent, rappelle toute l’agitation qui a accueilli la version 16.8 de React en 2019, lorsque l’équipe React a introduit les hooks. Le but de crochets était de rendre les mises à jour d’état (et éventuellement toutes les mises à jour) plus fonctionnelles dans leur approche et de s’éloigner de l’utilisation des classes. Bien que les signaux semblent presque identiques aux crochets, il existe quelques différences subtiles qui les distinguent (que nous explorons ci-dessous).

Où les signaux sont utilisés

C’est quoi Solide ?

Solide (également connu sous le nom de SolidJS) a été créé par Ryan Carniato en 2016 et publié en 2018. Selon ses propres mots, il « est né du désir de continuer à utiliser les modèles réactifs à grain fin que j’ai appris à aimer de Knockout.js .”

Il n’était pas fan de la direction que prenaient les bibliothèques comme React et Vue à l’époque, et « préférait simplement le contrôle et la composabilité qui accompagnent l’utilisation de primitives plus petites et indépendantes des composants ». Sa solution consistait à créer Solid, un cadre réactif qui utilise des signaux pour créer une réactivité à grain fin – un modèle pour les signaux qui peut maintenant également être vu dans de nombreux autres cadres.

À première vue, Solid ressemble beaucoup à React avec des crochets et des composants fonctionnels. Et à certains égards, c’est vrai : ils partagent tous les deux la même philosophie en matière de gestion des données, ce qui rend l’apprentissage de Solid beaucoup plus facile si nous connaissons déjà React.

Mais il y a quelques différences essentielles :

• Solid est pré-compilé, de la même manière que Svelte. Cela signifie que les gains de performances sont intégrés à la version finale et que, par conséquent, moins de code doit être expédié.
• Solid n’utilise pas de DOM virtuel, et même si les composants ne sont que des fonctions, comme dans React, ils ne sont appelés qu’une seule fois lors de leur premier rendu. (Dans React, ils sont appelés chaque fois qu’il y a une mise à jour de ce composant.)

Qu’est-ce qu’un signal exactement ?

Signaux reposent sur la modèle d’observateurqui est l’un des classiques Modèles de conception Gang of Four. En fait, Knockout utilise quelque chose qui ressemble beaucoup à des signaux, appelés « observables ».

Les signaux sont la partie la plus atomique d’une application réactive. Ce sont des valeurs observables qui ont une valeur initiale et fournissent des méthodes getter et setter qui peuvent être utilisées pour voir ou mettre à jour cette valeur respectivement. Cependant, pour tirer le meilleur parti des signaux, nous devons réactionsqui sont des effets qui s’abonnent au signal et s’exécutent en réponse au changement de valeur.

Lorsque la valeur d’un signal change, il émet effectivement un événement (ou « signal ») qui déclenche alors une réaction (ou « effet »). Il s’agit souvent d’un appel pour mettre à jour et restituer tous les composants qui dépendent de cette valeur. On dit que ces composants s’abonner au signal. Cela signifie que seuls ces composants seront mis à jour si la valeur du signal change.

Un concept clé dans Solid est que tout est un effet, même les rendus de vue. Chaque signal est très étroitement lié aux composants spécifiques qu’il affecte. Cela signifie que, lorsqu’une valeur change, la vue peut être restituée de manière très fine sans restituer la page complète et coûteuse.

Un exemple de signaux

Pour créer un signal dans Solid, nous devons utiliser le createSignal fonction et affectez deux variables à sa valeur de retour, comme ceci :

const [name, setName] = createSignal("Diana Prince");

Ces deux variables représentent une méthode getter et setter. Dans l’exemple ci-dessus, name est le getter et setName est le passeur. La valeur de 0 c’est passé à createSignal représente la valeur initiale du signal.

Pour les développeurs React, cela semblera bien sûr familier. Le code pour créer quelque chose de similaire à l’aide des crochets React peut être vu ci-dessous :

const [name, setName] = useState("Diana Prince");

Dans React, le getter (name) se comporte comme une variable et le setter (setName) est une fonction.

Mais même s’ils se ressemblent beaucoup, la principale différence est que name se comporte comme une variable dans React, alors que c’est une fonction dans Solid.

Ayant name en tant que fonction signifie que, lorsqu’elle est appelée à l’intérieur d’un effet, elle souscrit automatiquement cet effet au signal. Et cela signifie que, lorsque la valeur du signal change, l’effet fonctionnera en utilisant la nouvelle valeur.

Voici un exemple avec notre name() signal:

createEffect(() => console.log(`Hello ${name()}`))

Le createEffect La fonction peut être utilisée pour exécuter des effets basés sur la valeur de n’importe quel signal, comme l’enregistrement d’une valeur sur la console. Il s’abonnera à tous les signaux référencés dans la fonction. Si des valeurs du signal changent, le code d’effet sera exécuté à nouveau.

Dans notre exemple, si nous modifions la valeur de name signaler à l’aide du setName fonction setter, nous pouvons voir que le code de l’effet s’exécute et que le nouveau nom est enregistré dans la console :

setName("Wonder Woman")

Avoir le getter en tant que fonction signifie également que la valeur actuelle la plus à jour est toujours renvoyée, alors que d’autres frameworks peuvent souvent renvoyer une valeur «périmée» même après sa mise à jour. Cela signifie également que tous les signaux peuvent facilement être liés à des valeurs calculées et mémorisés :

const nameLength = createMemo(() => name().length)

Cela crée un signal en lecture seule accessible à l’aide de nameLength(). Sa valeur est mise à jour en réponse à toute modification de la valeur du name signal.

Si la name() signal est inclus dans un composant, le composant s’abonnera automatiquement à ce signal et sera restitué lorsque sa valeur changera :

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

const HelloComponent = () => {
  const [name, setName] = createSignal("Diana Prince");
  return <h1>Hello {name()}</h1>
}

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

Mise à jour de la valeur du name signal utilisant setName entraînera la HelloComponent en train d’être restitué. De plus, le HelloComponent La fonction n’est appelée qu’une seule fois pour créer le code HTML pertinent. Une fois qu’il a été appelé, il n’a plus besoin de s’exécuter à nouveau, même s’il y a des mises à jour de la valeur de name signal. Cependant, dans React, les fonctions de composant sont appelées chaque fois qu’une valeur qu’elles contiennent change.

Une autre différence majeure avec Solid est que, malgré l’utilisation de JSX pour sa logique de vue, il n’utilise pas du tout de DOM virtuel. Au lieu de cela, il compile le code à l’avance en utilisant le Vite outil de construction. Cela signifie que beaucoup moins de JavaScript doit être livré, et il n’a pas besoin de la bibliothèque Solid réelle pour être livré avec (tout à fait de la même manière que Svelte). La vue est construite en HTML. Ensuite, des mises à jour fines sont effectuées à la volée – en utilisant un système de littéraux de modèle pour identifier tout changement, puis effectuer une bonne manipulation DOM à l’ancienne.

Ces mises à jour isolées et fines des zones spécifiques du DOM sont très différentes de l’approche de React consistant à reconstruire complètement le DOM virtuel après tout changement. Faire des mises à jour directement sur le DOM réduit les frais généraux liés à la maintenance d’un DOM virtuel et le rend exceptionnellement rapide. En fait, Solid a des statistiques assez impressionnantes concernant la vitesse de rendu – juste derrière le JavaScript vanille.

Tous les repères peut être consulté ici.

Signaux en angulaire

Comme mentionné précédemment, Angular a récemment adopté des signaux pour effectuer des mises à jour précises. Ils fonctionnent de la même manière que les signaux dans Solid, mais sont créés d’une manière légèrement différente.

Pour créer un signal, le signal fonction est utilisée et la valeur initiale passe en argument :

const name = signal("Diana Prince")

Le nom de la variable à laquelle le signal a été attribué (name dans l’exemple ci-dessus) peut alors être utilisé comme getter :

console.log(name)
<< Diana Prince

Le signal a également un set méthode qui peut être utilisée pour mettre à jour sa valeur, comme ceci :

name.set("Wonder Woman")
console.log(name)
<< Wonder Woman

L’approche fine des mises à jour dans Angular est presque identique à l’approche dans Solid. Premièrement, Angular a un update() méthode qui fonctionne de la même manière que setmais dérive la valeur au lieu de la remplacer :

name.update(name => name.toUpperCase())

La seule différence ici est de prendre la valeur (name) en tant que paramètre et en exécutant une instruction dessus (.toUpperCase()). Ceci est très utile lorsque la valeur finale par laquelle le getter est remplacé n’est pas connue et doit donc être dérivée.

Deuxièmement, Angular a également le computed() fonction de création d’un signal de mémorisation. Cela fonctionne exactement de la même manière que Solid’s createMemo:

const nameLength = computed(() => name().length) 

Tout comme avec Solid, chaque fois que la valeur d’un signal dans la fonction de calcul est détectée comme ayant changé, la valeur du signal calculé changera également.

Enfin, Angular a le effect() fonction, qui fonctionne exactement comme la createEffect() fonction dans Solid. L’effet secondaire est ré-exécuté chaque fois qu’une valeur dont il dépend est mise à jour :

effect(() => console.log(`Hello`, name()))

name.update(name => name.toUpperCase())

Autres caractéristiques du solide

Ce ne sont pas seulement les signaux qui font que Solid vaut la peine d’être regardé. Comme nous l’avons déjà noté, il est extrêmement rapide à la fois pour créer et mettre à jour du contenu. Il a également une API très similaire à React, il devrait donc être très facile à comprendre pour quiconque a déjà utilisé React. Cependant, Solid fonctionne de manière très différente sous le capot et est généralement plus performant.

Une autre fonctionnalité intéressante de Solid est qu’il ajoute quelques touches astucieuses à JSX, telles que le flux de contrôle. Il nous permet de créer des boucles for en utilisant le <For> composant, et nous pouvons contenir des erreurs à l’intérieur des composants en utilisant <ErrorBoundary>.

De plus, le <Portal> est également pratique pour afficher du contenu en dehors du flux habituel (comme les modaux). Et réactivité imbriquée signifie que toute modification apportée à un tableau de valeurs ou à un objet restituera les parties de la vue qui ont été modifiées, plutôt que d’avoir à restituer la liste entière. Solid rend cela encore plus facile à réaliser en utilisant les magasins. Solid prend également en charge le rendu côté serveur, l’hydratation et le streaming prêts à l’emploi.

Pour tous ceux qui souhaitent essayer Solid, il existe un excellent tutoriel d’introduction sur le site Web de Solid, et nous pouvons expérimenter avec du code dans le Aire de jeux solide

Conclusion

Dans cet article, nous avons présenté le concept de signaux et comment ils sont utilisés dans Solid et Angular. Nous avons également examiné comment ils aident Solid à effectuer des mises à jour fines du DOM sans avoir besoin d’un DOM virtuel. Un certain nombre de frameworks adoptent maintenant le paradigme du signal, c’est donc définitivement une astuce qui vaut la peine d’avoir dans notre manche !