Parte 6 — La interfaz: del HTML del servidor al componente#
Cómo se pinta una pantalla y dónde vive el estado. Aquí el elenco cambia por completo.
Clases 79 a 92 · 14 en total · 14 construidas · 15 tecnologías en juego.
🧭 De qué va esta parte#
Catorce clases que recorren el camino que la industria recorrió en veinte años: del HTML generado en el servidor al componente que vive en el navegador.
Empieza por donde empezó todo —una plantilla y un formulario que funciona sin una línea de JavaScript— y llega a los tres modelos de reactividad que se reparten hoy el ecosistema. En medio, el puente: la mejora progresiva, que es lo que separa añadir comportamiento de exigirlo.
El recorrido no es nostálgico. Las primeras clases enseñan cosas que siguen siendo la mejor solución para muchas pantallas, y las últimas explican por qué el péndulo volvió con teoría y no por moda.
🎒 Qué da por sabido#
- HTML y CSS básicos.
- Las partes 1 y 2: cómo se responde y cómo se compone la respuesta.
- El escapado de la clase 073, que aquí se aplica en cada plantilla.
🎯 Qué sabrás hacer al terminarla#
- Renderizar la misma lista con seis motores de plantillas y decir dónde vive el escapado en cada uno.
- Construir un formulario que funcione sin JavaScript y mejorarlo sin romper el caso base.
- Escribir un componente con propiedades, eventos y estado local en cinco bibliotecas distintas.
- Elegir dónde vive un estado —local, elevado, en un contexto o en un almacén— y justificar el coste de cada opción.
- Tratar los datos del servidor como una caché y no como estado, con lo que eso implica.
- Distinguir los tres modelos de reactividad y predecir qué se vuelve a pintar en cada uno.
🧵 Por qué en este orden#
Las tres primeras son el suelo: plantillas de servidor (079), formularios que funcionan solos (080) y la mejora progresiva (081), que es el puente.
Las siete siguientes construyen el componente pieza a pieza: primero (082), propiedades y eventos (083), estado (084), listas (085), formularios (086), efectos (087) y estado compartido (088).
Las cuatro últimas son lo que distingue una aplicación de una página: estado del servidor, enrutado en el cliente, accesibilidad y los modelos de reactividad.
📚 Las clases#
| # | Clase | Qué resuelve | Nivel | Estado |
|---|---|---|---|---|
| 079 | Plantillas en el servidor | Generar HTML donde están los datos. | 🟢 introductorio | ✅ Construida |
| 080 | Formularios que funcionan sin JavaScript | Construir sobre lo que el navegador ya sabe hacer. | 🟢 introductorio | ✅ Construida |
| 081 | Mejora progresiva | Añadir comportamiento sin romper el caso base. | 🟡 intermedio | ✅ Construida |
| 082 | El primer componente | Encapsular marcado y comportamiento en una unidad reutilizable. | 🟢 introductorio | ✅ Construida |
| 083 | Propiedades y eventos | Comunicar hacia abajo con datos y hacia arriba con eventos. | 🟢 introductorio | ✅ Construida |
| 084 | Estado local | Guardar y actualizar un valor que pertenece a un componente. | 🟢 introductorio | ✅ Construida |
| 085 | Listas y claves | Renderizar una colección y entender por qué la identidad importa. | 🟡 intermedio | ✅ Construida |
| 086 | Formularios controlados | Decidir si la fuente de verdad es el DOM o el estado. | 🟡 intermedio | ✅ Construida |
| 087 | Efectos y ciclo de vida | Ejecutar trabajo fuera del renderizado y limpiarlo después. | 🟡 intermedio | ✅ Construida |
| 088 | Estado compartido | Sacar el estado del componente sin recurrir a variables globales. | 🟡 intermedio | ✅ Construida |
| 089 | Estado del servidor en el cliente | Distinguir el estado propio del que es copia de otro sitio. | 🔴 avanzado | ✅ Construida |
| 090 | Enrutado en el cliente | Cambiar de vista sin recargar y sin romper el navegador. | 🟡 intermedio | ✅ Construida |
| 091 | Accesibilidad del componente | Construir un control que funcione con teclado y lector de pantalla. | 🟡 intermedio | ✅ Construida |
| 092 | Los tres modelos de reactividad | Explicar por qué el mismo cambio actualiza cosas distintas en cada framework. | 🔴 avanzado | ✅ Construida |
🎬 Las tecnologías que aparecen#
Entre paréntesis, en cuántas clases de esta parte interviene cada una. Estar aquí no es una recomendación: es que el problema de esa clase existe de verdad para esa tecnología.
| Ecosistema | Tecnologías |
|---|---|
| JavaScript/TypeScript | React (12), Svelte (12), Vue (11), SolidJS (10), Lit (4) |
| JavaScript | Alpine.js (5), htmx (5) |
| Python | Django (2), Flask (1) |
| TypeScript | Angular (5) |
| PHP | Laravel (2) |
| Ruby | Ruby on Rails (2) |
| .NET | ASP.NET Core (1) |
| Node.js | Express (1) |
| JVM | Spring Boot (1) |
📖 Las palabras que esta parte define#
Escapado · Enviar-redirigir-mostrar · Mejora progresiva · Componente · Propiedad · Evento · Estado · Clave de lista · Formulario controlado · Efecto · Estado compartido · Estado del servidor · Reactividad · DOM virtual · Señal
Todas, con su definición, en el glosario.
✅ Cómo se ejecuta una clase de esta parte#
node scripts/run-class.mjs 079El verificador arranca cada implementación, la somete a su contrato.json y declara cuáles omitió por no encontrar su cadena de herramientas. Si te faltan cadenas, node scripts/doctor.mjs dice cuáles y cómo se instalan.
➡️ Y después#
La parte 7 junta los dos lados: dónde se genera el HTML y quién carga los datos.