Nevermind

SolidJS: un framework JavaScript verdaderamente reactivo

3 min

1. El “santo grial” de los frameworks frontend: rendimiento y experiencia

Desde que React popularizó el DOM virtual (Virtual DOM), el VDOM parece haberse convertido en un elemento estándar de los frameworks frontend modernos. Al mantener en memoria una representación virtual de la interfaz y utilizar un algoritmo de diff para calcular el mínimo de actualizaciones del DOM, mejora tanto la experiencia de desarrollo como el rendimiento en la mayoría de los casos.

Pero el VDOM no es gratuito. Ocupa memoria y el proceso de diff también tiene un coste computacional. De ahí surge una pregunta: ¿podemos evitar el VDOM y aplicar los cambios de estado directamente y con precisión al DOM, sin renunciar a una experiencia de desarrollo declarativa similar a React?

SolidJS ofrece su respuesta.

2. El núcleo de SolidJS: reactividad granular (Fine-Grained Reactivity)

SolidJS es un framework JavaScript declarativo y reactivo. Aunque utiliza JSX y se parece mucho a React, sus principios internos son completamente diferentes.

El compilador de SolidJS transforma el código JSX en operaciones nativas del DOM óptimas. No utiliza un VDOM, sino que crea un grafo de dependencias formado por “señales” (Signals) reactivas. Cuando cambia el valor de una señal, solo vuelven a ejecutarse los “efectos” (Effects) o cálculos (Memos) suscritos a ella.

Un modelo mental revolucionario: ¡los componentes solo se ejecutan una vez!

En React, cuando cambian el state o las props, toda la función del componente vuelve a ejecutarse. En SolidJS, en cambio, la función del componente solo se ejecuta una vez de principio a fin.

import { createSignal } from 'solid-js';

function Counter() {
  console.log('Component function runs!'); // 这句话只会在组件挂载时打印一次

  const [count, setCount] = createSignal(0);

  const increment = () => setCount(count() + 1);

  return (
    <button type="button" onClick={increment}>
      Count: {count()}
    </button>
  );
}

Al pulsar el botón, solo se actualizan el lector de la señal count() y el nodo de texto del DOM que depende de ella. La propia función Counter no vuelve a ejecutarse. Esta actualización “quirúrgica” es la fuente del rendimiento excepcional de SolidJS.

3. APIs principales

El sistema reactivo de SolidJS se compone principalmente de tres primitivas fundamentales:

  • createSignal(initialValue): Crea una señal reactiva y devuelve un getter y un setter: [count, setCount].
  • createEffect(() => {}): Crea un “efecto” que rastrea automáticamente todas las señales leídas en su interior y vuelve a ejecutarse cuando cambia cualquiera de ellas. Es ideal para realizar efectos secundarios, como manipular el DOM manualmente.
  • createMemo(() => {}): Crea un valor calculado derivado y almacenado en caché. Solo vuelve a calcularse cuando cambia alguna de las señales de las que depende.
import { createSignal, createEffect } from 'solid-js';

function App() {
  const [firstName, setFirstName] = createSignal('John');
  const [lastName, setLastName] = createSignal('Smith');

  // createEffect 会在 firstName 或 lastName 变化时自动运行
  createEffect(() => {
    console.log(`Full name: ${firstName()} ${lastName()}`);
  });

  // ...
}

4. ¿Por qué elegir SolidJS?

  • Rendimiento excepcional: SolidJS suele ocupar los primeros puestos en distintas pruebas de rendimiento independientes, con resultados muy cercanos al código JavaScript nativo.
  • Tamaño de paquete extremadamente pequeño: Como no tiene un runtime de VDOM, su paquete principal es muy pequeño.
  • Experiencia de desarrollo familiar: Si conoces React Hooks, puedes aprender SolidJS con rapidez. La combinación de JSX y primitivas reactivas es potente e intuitiva.
  • Reactividad real: Su modelo se acerca más a MobX o a la Composition API de Vue, pero el compilador permite conseguirlo sin coste en tiempo de ejecución.

Conclusión

SolidJS representa una dirección importante en la evolución de los frameworks frontend: hacer más trabajo durante la compilación mediante el compilador para obtener menos código en tiempo de ejecución y un mayor rendimiento. Demuestra que es posible liberarse de las restricciones del DOM virtual sin sacrificar una experiencia de desarrollo declarativa. Para las aplicaciones que buscan el máximo rendimiento, SolidJS ofrece una opción muy atractiva.

SolidJS Framework Reactivity Performance