React es, con mucho, el marco de Javascript frontend más grande en el desarrollo web moderno. Aunque, Svelte ha ido creciendo de manera constante en popularidad durante los últimos años. ¿Qué hace a Svelte tan especial?

• Sintaxis muy fácil de aprender
• En lugar de enviar el marco al navegador, el código se compila en js estándar, lo que da como resultado un tamaño de paquete MUCHO más pequeño y un código increíblemente rápido.

SolidJS es un marco de interfaz de usuario de interfaz cuya sintaxis es muy similar a React, pero está compilado en javascript moderno, como Svelte, que permite a las personas obtener la velocidad y los tamaños de paquete de Svelte pero usan la sintaxis de React a la que están acostumbrados.

Configuración de un proyecto de SolidJS

Simplemente ejecute el siguiente comando para generar un nuevo proyecto ...

npm init solid app ProjectName

o para mecanografiar

npm init solid app-ts ProjectName

Lo que es lo mismo

• La estructura de archivos del proyecto generado debería parecerse mucho a una aplicación de creación-reacción
• JSX todavía funciona como JSX

Entonces, en React, normalmente usaría el gancho useState para generar una variable de estado y el proceso todavía funciona prácticamente igual en SolidJS, excepto que ahora usamos la función createSignal.

import {createSignal} from "solid-js"
import './App.css';
function App() {
// create state
  const [count, setCount] = createSignal(1)
// add function
  const add = () => {
    //notice in this context I must invoke the state to get the value (not in jsx)
    setCount(count() + 1)
  }
// JSX works like normal
  return (
    <div class="App">
      <h1>My Counter</h1>
      <h2>{count}</h2>
      <button onClick={add}>Add</button>
    </div>
  );
}
export default App;

Ciclo de vida y createEffect

Aquí es donde Thinking in Solid es muy diferente al pensar en React. En React, el componente completo es una función que se vuelve a ejecutar cada vez que se actualiza el estado, lo que hace posibles bucles infinitos al cambiar el estado de las llamadas a funciones en el cuerpo de la función del componente. En React, la solución a esto es mover este tipo de código a su propio cierre con el gancho useEffect para que se ejecute cuando se desee, no en cada representación de la función del componente.

Solid no usa un DOM virtual y en las actualizaciones de estado no vuelve a ejecutar la función del componente. En cambio, el código reactivo está envuelto en llamadas createEffect que luego vuelven a ejecutar la función cuando se actualiza cualquier señal dentro de ellos. El beneficio de esto es ...

• Puede realizar llamadas Fetch / Axios sin tener que ajustarlas en useEffect para evitar bucles infinitos
• JSX se compilará automáticamente en llamadas createEffect, por lo que se actualizarán cuando se actualice el estado.

Lo bueno de esto es que las actualizaciones son más granulares, lo que hace innecesario el gasto de un dom virtual (solo el código que depende de los datos actualizados cambiará sin tener que ejecutar ninguna comparación).

Línea de fondo

Solid conserva lo bueno de React Syntax, pero también hace uso de los enfoques de mejora del rendimiento de Svelte. ¡No me sorprendería ver a SolidJS crecer en la misma línea de Frameworks como Svelte y React!