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>;
}; |
| 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 |
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 »