Solid.js

Frontend Web Components

Recursos y enlaces

Conceptos fundamentales

  • Librería orientada a la reactividad fina (fine-grained reactivity).
  • Sistema reactivo sin Virtual DOM, basado en señales.
  • Enfoque declarativo, derivaciones y dependencias calculadas dinámicamente.
  • Interoperabilidad con ecosistemas como react o integraciones con Web Components.

Reactivity System

  • Fine Grained Signals: actualización específica de nodos reactivos.
    • update: cambia el valor.
    • notify: comunica dependencias.
    • trigger: ejecuta efectos derivados.
  • get / set: acceso y mutación controlada del estado.
  • Side effects: ejecutados cuando las señales cambian.
  • createSignal: estado reactivo principal.
  • createEffect: efectos derivados automáticos.
  • createMemo: derivación basada en dependencias; optimiza cálculos costosos.
  • Dynamic Tracking:
    • Seguimiento automático de dependencias.
    • untrack: evita tracking.
    • batch: agrupa cambios para evitar renders innecesarios.
  • Reactive Streams: integración conceptual con Rx pero usando señales.
  • Dependences Graph: grafo interno que optimiza propagaciones.

Patrones comunes

  • Minimizar renders mediante señales atómicas.
  • Modelar flujos complejos usando efectos encadenados.
  • Dividir lógica derivada en createMemo para mejorar rendimiento.
  • Encapsular patrones reactivos en custom hooks (funciones reutilizables).

Web Components y solid

Señales y efectos básicos (Solid.js)

import { createSignal, createEffect } from "solid-js";

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

createEffect(() => {
	console.log("El valor cambió:", count());
});

setCount(count() + 1);

`

Memo y derivaciones

const [price, setPrice] = createSignal(10);
const [qty, setQty] = createSignal(2);

const total = createMemo(() => price() * qty());

console.log(total()); // 20

Custom Element básico

class MyElement extends HTMLElement {
	constructor() {
		super();
		const shadow = this.attachShadow({ mode: "open" });
		shadow.innerHTML = `<p>Hola Web Component</p>`;
	}
}

customElements.define("my-element", MyElement);

Solid.js — Conceptos avanzados y temas no cubiertos

Nuevos temas necesarios

A continuación se amplían áreas que aún no estaban presentes en tu nota anterior y que son esenciales para comprender Solid.js en profundidad sin repetir lo ya cubierto.

Compilación, Renderizado y Arquitectura Interna

Rendering basado en DOM Real

  • Solid ejecuta JSX en tiempo de compilación, generando directamente nodos DOM.
  • No usa Virtual DOM ni diffing; la reactividad dirige el update exacto.
  • Las dependencias se vuelven nodos reactivos conectados a fragmentos concretos del DOM.

Optimización por dom expressions

  • El compilador transforma JSX en instrucciones DOM eficientes.
  • Evita crear closures innecesarias.
  • Minimiza re-renderizaciones actualizando solo las partes afectadas.

Root, Dispose y Ciclos de Vida

  • createRoot(fn) crea un contexto reactivo aislado.
  • onCleanup(fn) permite ejecutar lógica al destruir un efecto o componente.
  • Evita fugas de memoria al trabajar con subscripciones, listeners o workers.

Control de Flujo Reactivo

Solid reemplaza el clásico control de flujo declarativo por uno imperativo-reactivo.

Show / For / Switch

<Show when={loggedIn()} fallback={<p>Invitado</p>}>
	<p>Bienvenido!</p>
</Show>

`

Control granular

  • Nada se vuelve a renderizar excepto el nodo dependiente.
  • For optimiza listas mediante reconciliation individual basada en valores clave.

Stores y Estado Estructurado

createStore

  • Estado anidado e inmutable por defecto, con actualizaciones profundas.
  • Ideal para modelos complejos o estructuras JSON.
import { createStore } from "solid-js/store";

const [user, setUser] = createStore({ name: "ana", scores: [1,2,3] });
setUser("scores", 1, 99);

Diferencias importantes respecto a Signals

  • Signals = valores primitivos / atómicos.
  • Stores = estado estructurado con proxies.

Context API

  • Sistema para compartir estado global sin pasar props.
  • Similar a React Context pero reactivo y más eficiente.
const UserContext = createContext();

<UserContext.Provider value={user}>
	<App />
</UserContext.Provider>

Control de ejecución y rendimiento

batch

  • Agrupa múltiples sets sin disparar efectos hasta el final.
  • Similar a un transaction.

untrack en profundidad

  • Evita que un cálculo quede vinculado al grafo de dependencias.
  • Útil para cálculos puntuales, logs, mediciones.

Suspense y recursos asíncronos

  • Manejo del estado de carga con createResource.
  • Ideal para peticiones HTTP integradas en el flujo reactivo.
const [data] = createResource(fetchUser);

Integración con SSR e Islas

SolidStart

  • Framework oficial para SSR y routing.
  • Soporta “islas” de interactividad con rehidratación mínima.
  • Optimiza envío de JS mediante splitting automático.

Streaming SSR

  • Se puede enviar HTML de forma progresiva.
  • Reduce el TTFB y mejora la carga en conexiones lentas.

Control de Eventos y Reactividad Estricta

Delegation de eventos

  • Solid hace event delegation automática al document.body.
  • Menos listeners → mejor rendimiento.

Reactividad estable

  • Nunca re-renderiza componentes completos.
  • Sólo se actualizan los nodos dependientes.
  • La UI siempre refleja exactamente el estado actual sin inconsistencias.

Component Patterns avanzados

Componentes sin estado

  • Si un componente solo recibe señales, no necesita su propio grafo.
  • Menor coste de inicialización.

Custom primitives

Ejemplo de hook reactivo reutilizable:

function createCounter(initial = 0) {
	const [count, setCount] = createSignal(initial);
	const inc = () => setCount(c => c + 1);
	return { count, inc };
}

Integraciones Externas y Edge Cases

Con Web Components

  • Solid puede renderizar dentro de custom elements sin conflictos.
  • Se recomienda usar señales para mapear props/atributos.

Con React / Vue / Svelte

  • Usar Solid para widgets aislados dentro de apps grandes.
  • Comportamiento ideal en microfrontends.

Integraciones gráficas

  • Solid funciona bien con Canvas/WebGL porque el DOM apenas se re-renderiza.
  • Signals pueden disparar repaints manuales sin coste extra.

Herramientas, pruebas y debugging

Devtools de Solid

  • Muestra grafo de dependencias.
  • Se pueden inspeccionar señales, efectos y memos individualmente.

Testing

  • @solidjs/testing-library similar a React Testing Library.
  • Testea comportamiento observable sin centrarse en implementación.

Temas avanzados sugeridos para notas futuras

  • Hydration Fine-tuning: hidratación parcial y nodos inertes.
  • Concurrent Patterns: control de latencia y prioridad (no es React Concurrent Mode).
  • Compiler Directives: /* @once */, /* @sample */ y optimizaciones internas.
  • Control de fugas de reacción en subscripciones complejas.
  • Creación de renders personalizados para Canvas, SVG intensivo o motores 2D.

Solid.js (2025) — Panorama actualizado y recursos recomendados

Qué es Solid.js hoy

  • Solid.js es una librería JavaScript para construir interfaces de usuario con reactividad fina (fine-grained reactivity), sin Virtual DOM: los templates se compilan a nodos reales del DOM y sólo se actualizan las partes estrictamente necesarias.
  • Gracias a su diseño: alto rendimiento, bajo uso de memoria/CPU, actualizaciones precisas y mínima sobrecarga, Solid sigue siendo considerada de las librerías más rápidas y eficientes en 2025.

Documentación y recursos oficiales

Tutoriales, cursos y recursos formativos actuales

  • Curso en español: Curso de SolidJS en Platzi — ideal para empezar con reactividad, señales, efectos, memos, stores, etc.
  • Libro (en inglés) actualizado en 2025: SolidJS: The Complete Guide — cubre desde lo básico hasta SSR, routing, integración con SolidStart, desarrollo real de aplicaciones.
  • Artículo contextual sobre su adopción en 2025: “The JavaScript Framework Revolution” — menciona Solid como alternativa a React por su rendimiento superior.

Características modernas y soporte técnico

Qué ofrece Solid

  • Actualizaciones reactivas finas: señales, efectos, memos, seguimiento automático de dependencias.
  • Renderizado directo al DOM real, con mínima abstracción: componentes como funciones, “run-once + reactividad dependiente”.
  • Soporte para características modernas: Context API, stores, estado estructurado, JSX/TypeScript, render isomórfico (cliente + servidor), Suspense, SSR, integración con Web Components, renderizadores personalizados.
  • Ecosistema vivo: librerías complementarias, utilidades, ejemplos, plantillas de inicio, comunidad activa.

Estado del proyecto y mantenimiento en 2025

  • Solid no sigue un esquema formal de “LTS / EOL”; no obstante, la librería core está bastante madura (versiones 1.x), con API estable.
  • El desarrollo activo se centra en meta-frameworks, herramientas, optimización y utilidades, más que en cambios radicales del core.

Qué hace a Solid relevante en 2025

  • Alternativa real a frameworks basados en Virtual DOM: comparable a React en mental model + JSX, pero con rendimiento cercano al vanilla JS.
  • Útil para proyectos que buscan rendimiento, experiencia fluida, bajo coste en renderizado y eficiencia, especialmente en aplicaciones grandes con mucha interactividad.
  • Con su ecosistema creciente, Solid permite crear SPAs, SSR, rutas, stores, apps isomórficas — completamente viable en producción en 2025.

Consejos para aprender y adoptar Solid.js hoy

  • Comienza por la documentación oficial y prueba los ejemplos en el playground.
  • Usa un curso estructurado (como el de Platzi) o el libro “SolidJS: The Complete Guide” si vienes de React/Vue.
  • Explora el ecosistema antes de implementar utilidades desde cero.
  • Para proyectos medianos/grandes, considera usar meta-frameworks desde el inicio (SSR, routing, modularización).

En resumen

Solid.js en 2025 es una librería moderna, madura y muy eficiente para el desarrollo frontend. Con documentación sólida, herramientas actuales, rendimiento sobresaliente y comunidad activa, es una opción excelente para proyectos nuevos que prioricen velocidad y claridad reactiva.