1 pièce(s) jointe(s)
Solid, une bibliothèque JavaScript déclarative pour créer des interfaces utilisateur
Solid, une bibliothèque JavaScript déclarative pour créer des interfaces utilisateur
avec un rendu effectué par la bibliothèque DOM Expressions
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:
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:
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 ?
:fleche: Que pensez-vous de Solid ?
Voir aussi
:fleche: 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
:fleche: 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
:fleche: Le langage JavaScript est-il responsable de la lenteur des sites Web de nos jours ? Oui selon un expert
:fleche: Faut-il migrer de JavaScript vers PureScript ? Oui, car JavaScript serait très limité pour la programmation fonctionnelle, selon Alex Kelley
:fleche: É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 »
