wandres.dev
Reactividad fina, del signal al fullstack

Domina SolidJS
hasta nivel dios

Reactividad de grano fino: signals, efectos, memos, stores, control flow, createResource, Solid 2.0 (async first-class) y SolidStart.

La ruta

42 niveles, de novato a dios

Cada nivel construye sobre el anterior. Sin saltos, sin huecos.

Ontología Nivel 0 · El mapa de Solid

La visión aérea de SolidJS: reactividad de grano fino, el grafo, componentes que corren una vez, stores, async y SolidStart. El mapa mental completo.

Mapa mentalReactividad

Por qué Solid Nivel 1 · grano fino vs VDOM

La idea central: reactividad de grano fino sin virtual DOM ni re-render. Comparación honesta con React y por qué Solid es tan rápido.

fine-grainedno VDOMfilosofía

Setup y JSX de Solid Nivel 2 · no es React

Crear un proyecto, el JSX de Solid (se compila a DOM real), y las diferencias sutiles pero críticas con el JSX de React.

setupJSXVite

createSignal Nivel 3 · el átomo reactivo

El primitivo fundamental: getter/setter, lectura reactiva vs no reactiva, y por qué un signal es una función.

createSignalgettersetter

createEffect Nivel 4 · reacciones a los signals

Efectos que se re-ejecutan cuando sus dependencias cambian: tracking automático, timing, y el primer render.

createEffecttrackingdependencias

createMemo Nivel 5 · valores derivados

Memos: derivaciones cacheadas que solo recalculan cuando cambian sus fuentes; cuándo un memo y cuándo una función.

createMemoderivadocache

El modelo de ejecución Nivel 6 · el componente corre una vez

La diferencia mental clave: el cuerpo del componente se ejecuta UNA sola vez; la reactividad vive en el JSX y los efectos.

run oncerendermodelo

Props Nivel 7 · mergeProps, splitProps

Las props son reactivas: por qué NO destructurarlas, mergeProps para defaults, splitProps para separar, y la reactividad que se pierde.

propsmergePropssplitProps

children() Nivel 8 · resolver hijos

El helper children(): resolver y memoizar los hijos, evitar re-crearlos, y manipular el árbol de forma segura.

childrenslotscomposición

Eventos y binding Nivel 9 · on:, delegación, refs

Manejo de eventos (delegados y nativos), binding de atributos y propiedades, classList, style, y el atributo ref.

eventosclassListref

El grafo reactivo Nivel 10 · observers y sources

Cómo funciona por dentro: nodos, observers y sources, propagación push/pull, y por qué no hay diffing.

grafoobserversinternals

Ownership y cleanup Nivel 11 · onCleanup, getOwner

El árbol de ownership: onCleanup, getOwner, runWithOwner; cómo Solid libera recursos automáticamente.

ownershiponCleanupdisposal

untrack, batch, on Nivel 12 · controlar el tracking

Leer sin trackear (untrack), agrupar cambios (batch), y dependencias explícitas con on() y defer.

untrackbatchon()

createRoot y disposal Nivel 13 · raíces reactivas

createRoot para crear un scope reactivo manual, cuándo hace falta, y el ciclo de vida de disposición.

createRootscopedispose

Signals avanzados Nivel 14 · equals y opciones

Igualdad personalizada (equals: false), signals sin comparación, y patrones para señales que siempre notifican.

equalsoptionspatrones

Control flow: Show y Switch Nivel 15 · condicionales reactivos

Renderizado condicional eficiente: Show con fallback y keyed, Switch/Match, y por qué no usar ternarios crudos.

ShowSwitchMatch

Control flow: For e Index Nivel 16 · listas keyed vs por índice

For (keyed por referencia) vs Index (por posición): cuándo cada uno, el coste de reconciliación y errores típicos.

ForIndexlistas

Dynamic, Portal, ErrorBoundary Nivel 17 · componentes especiales

Dynamic para componentes en runtime, Portal para renderizar fuera del árbol, y ErrorBoundary para capturar errores.

DynamicPortalErrorBoundary

Lifecycle y refs Nivel 18 · onMount, ciclo de vida

onMount y el ciclo de vida real de Solid, refs al DOM, forward refs, y cuándo el DOM está disponible.

onMountrefsciclo

createStore Nivel 19 · reactividad anidada

Stores: objetos reactivos de grano fino y anidados, acceso por proxy, y por qué escalan mejor que muchos signals.

createStoreproxyanidado

setStore y produce Nivel 20 · mutaciones inmutables

Actualizar stores: paths, funciones, arrays, y produce()/modifyMutable para un estilo mutable seguro (tipo Immer).

setStoreproducepaths

reconcile y unwrap Nivel 21 · diff de datos externos

reconcile() para fusionar datos externos preservando referencias, unwrap() para obtener el objeto crudo, y sus usos.

reconcileunwrapdiff

Estado global Nivel 22 · stores compartidos

Patrones de estado global sin librerías: un store en un módulo o createRoot, y cómo compartirlo entre componentes.

globalmódulopatrón

Context Nivel 23 · createContext, useContext

La API de contexto de Solid: proveer y consumir estado por el árbol, con reactividad intacta y sin prop drilling.

createContextuseContextprovider

createMutable Nivel 24 · el store mutable

createMutable para un proxy de escritura directa; su potencia, sus peligros, y cuándo (casi nunca) usarlo.

createMutableproxycuidado

Integrar librerías Nivel 25 · interoperar con JS

Envolver librerías no reactivas: from()/observable, integrar con Web APIs, y crear tus propios primitivos reactivos.

frominteropprimitivos

createResource Nivel 26 · async como primitivo

El async first-class de Solid: createResource, estados (loading/error), refetch, y el source reactivo que lo dispara.

createResourceasyncloading

Suspense Nivel 27 · coordinar la carga

Suspense y SuspenseList: coordinar múltiples resources, fallbacks, y evitar cascadas de spinners.

Suspensefallbackcoordinación

Transitions Nivel 28 · startTransition, useTransition

Transiciones concurrentes: mantener la UI vieja mientras carga la nueva, useTransition y su estado pending.

transitionspendingconcurrente

ErrorBoundary a fondo Nivel 29 · errores en async

Manejo de errores con async: cómo se propagan a ErrorBoundary, reset, y patrones de reintento robustos.

erroresresetretry

Derivaciones async Nivel 30 · createAsync y el futuro

El nuevo modelo de datos: createAsync (Solid Router / 2.0), señales async, y hacia dónde va la reactividad async.

createAsyncSolid 2.0datos

Patrones de data fetching Nivel 31 · cache, dedup, prefetch

Patrones reales: deduplicación, cache, prefetch en navegación, mutaciones optimistas y revalidación.

cacheprefetchoptimista

SolidStart Nivel 32 · el meta-framework

SolidStart sobre Vinxi/Nitro: crear el proyecto, la estructura, y qué añade sobre Solid puro.

SolidStartNitrosetup

File routing Nivel 33 · rutas y layouts

El enrutado por archivos de Solid Router: rutas anidadas, layouts, rutas dinámicas y route data.

routinglayoutsnested

Modos de render Nivel 34 · SSR, streaming, CSR, SSG

Los modos de renderizado: SSR síncrono y en streaming, CSR, y prerender/SSG; cuándo cada uno.

SSRstreamingSSG

Server functions Nivel 35 · "use server"

Funciones que solo corren en el servidor con "use server": RPC type-safe, serialización, y la frontera cliente/servidor.

use serverRPCserver

Actions y forms Nivel 36 · mutaciones progresivas

Actions para mutaciones, formularios con progressive enhancement, useSubmission, y estado optimista.

actionsformssubmission

Data loading Nivel 37 · query, cache, createAsync

Cargar datos con query() y cache, preload en el router, createAsync, y revalidación tras una action.

querypreloadrevalidate

Auth y middleware Nivel 38 · sesiones y protección

Sesiones y auth en SolidStart, middleware de peticiones, cookies, y proteger rutas y server functions.

authsessionsmiddleware

El compilador de Solid Nivel 39 · jsx-dom-expressions

Cómo Solid compila JSX a DOM real y a expresiones reactivas: babel-plugin-jsx-dom-expressions, y por qué compilar gana.

compiladordom-expressionsinternals

Rendimiento y Solid 2.0 Nivel 40 · lo que viene

Optimización extrema, el nuevo runtime reactivo (async transparente) de Solid 2.0, y benchmarks frente al ecosistema.

performanceSolid 2.0futuro

Nivel Dios: síntesis Nivel 41 · arquitectura y trade-offs

El modelo mental completo, arquitectar una app real de principio a fin, comparación con el ecosistema y cuándo Solid NO es la elección.

síntesisarquitecturaPhD
206lecciones
42niveles
0→∞de cero a dios

¿Listo para dominar SolidJS?

Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.

Comenzar el camino →