Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Solid, une bibliothèque JavaScript déclarative pour créer des interfaces utilisateur
Avec un rendu effectué par la bibliothèque DOM Expressions

Le , par Bill Fassinou

98PARTAGES

3  1 
Solid est une bibliothèque Javascript déclarative pour créer des interfaces utilisateur. Le rendu de Solid est effectué par la bibliothèque DOM Expressions, un moteur d'exécution de rendu pour les bibliothèques réactives qui détectent les modifications à granularité fine. Sur sa page GitHub, il est écrit que Solid fournit un runtime optimisé générique pour les bibliothèques à grain fin, avec la possibilité d'utiliser un certain nombre d'API de rendu différentes. La meilleure option consiste à utiliser la pré-compilation JSX avec Babel Plugin JSX DOM Expressions pour donner la plus petite taille de code, la syntaxe la plus propre et le code le plus performant. Le compilateur convertit JSX en instructions d'élément DOM natif et encapsule des expressions dynamiques dans des calculs réactifs.


Il n'utilise pas de DOM virtuel. Au lieu de cela, il choisit de compiler ses modèles vers de vrais nœuds DOM et d'envelopper les mises à jour dans des réactions à grain fin. De cette façon, lorsque votre état met à jour uniquement le code qui en dépend, il s'exécute. Voici quelques principales caractéristiques de Solid :

  • DOM réel avec des mises à jour fines (pas de DOM virtuel, Pas de boucle de contrôle de vérification) ;
  • données déclaratives : primitives composables simples sans règles cachées, composants de fonction sans besoin de méthodes de cycle de vie ou d'objets de configuration spécialisés, rendre une fois le modèle mental ;
  • le compilateur de Solid ne comprendra que des parties de la bibliothèque que vous utilisez ;
  • prend en charge les fonctionnalités modernes telles que JSX, Fragments, Context, Portals, Suspense, SSR, Error Boundaries et Asynchronous Rendering ;
  • construit sur TypeScript ;
  • compatible avec les composants Web : API de contexte qui s'étend sur les éléments personnalisés, délégation d'événements implicite avec le reciblage du Shadow DOM, portails du DOM fantôme ;
  • débogage transparent : un <div> est juste un div.

La gestion des données de Solid repose sur un ensemble de primitives réactives flexibles. Semblable à React Hooks, sauf qu'au lieu de modifier la liste blanche d'un composant propriétaire, il est seul responsable de toutes les mises à jour. Grâce à l'utilisation de proxys et de setters explicites, cela donne le contrôle d'une interface immuable et les performances d'une interface mutable. Les setters prennent en charge une variété de formes, mais pour commencer, vous devez définir et mettre à jour l'état avec un objet.

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createState, onCleanup } from "solid-js";

const CountingComponent = () => {
  const [state, setState] = createState({ counter: 0 });

  const interval = setInterval(
    () => setState({ counter: state.counter + 1 }),
    1000
  );

  onCleanup(() => clearInterval(interval));

  return <div>{state.counter}</div>;
};
L’efficacité de Solid s'observerait avec des calculs (effets et mémos) qui suivent automatiquement les dépendances.

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
const [state, setState] = createState({ user: { firstName: "Jake", lastName: "Smith" }})

createEffect(() =>
  setState({
    displayName: `${state.user.firstName} ${state.user.lastName}`
  })
);

console.log(state.displayName); // Jake Smith
setState('user', {firstName: "Jacob" });
console.log(state.displayName); // Jacob Smith
Chaque fois qu'une dépendance change, la valeur d'état est mise à jour immédiatement. Chaque déclaration setState informera les abonnés de manière synchrone de toutes les modifications appliquées. Cela signifie que vous pouvez dépendre de la valeur définie sur la ligne suivante. Solid State expose également une méthode de réconciliation utilisée avec setState pour permettre une interaction automatique efficace avec des bibliothèques JavaScript de gestion d'état comme Redux, Apollo (GraphQL) ou RxJS.

Source : Solid

Et vous ?

Que pensez-vous de Solid ?

Voir aussi

Quels sont les coûts liés à l'utilisation de frameworks JavaScript pour le développement Web ? Une analyse des sites utilisant React, Vue.js ou Angular

L'historique de JavaScript : Brendan Eich l'a écrit en seulement 10 jours et c'est ainsi qu'il a changé le monde pour toujours

Le langage JavaScript est-il responsable de la lenteur des sites Web de nos jours ? Oui selon un expert

Faut-il migrer de JavaScript vers PureScript ? Oui, car JavaScript serait très limité pour la programmation fonctionnelle, selon Alex Kelley

État de JavaScript en 2019 : les développeurs aiment un peu plus React, Angular est en déclin, un groupe de développeurs pense que JS est « trop complexe »

Une erreur dans cette actualité ? Signalez-le nous !