Curso de Preact

Comprender el modelo de componentes y Virtual DOM desde una perspectiva práctica.

Revisar cómo Preact renderiza árboles de componentes y actualiza la interfaz.

Analizar diferencias de filosofía entre Preact y React: tamaño, compatibilidad, API y decisiones de diseño.

Entender qué forma parte del núcleo de Preact y qué se incorpora mediante librerías externas.

Diseñar aplicaciones pequeñas y medianas sin sobredimensionar arquitectura.

Separar UI, estado, servicios, adaptadores, hooks, componentes y estilos.

Evitar convertir Preact en una copia pesada de un stack React enterprise sin necesidad.

Identificar límites técnicos y funcionales antes de escoger dependencias.

Crear criterios de decisión para proyectos nuevos, migraciones y widgets.

Taller: analizar tres escenarios de empresa y decidir si Preact es buena elección.

Crear proyecto Preact con Vite y TypeScript.

Revisar configuración de `vite.config`, alias, plugins, entorno y build.

Separar variables de entorno públicas y privadas con criterio de seguridad.

Configurar rutas de importación, estructura de carpetas y convenciones del equipo.

Preparar scripts de desarrollo, build, preview, lint, test y análisis de bundle.

Ajustar configuración para assets, SVG, CSS modules, PostCSS o preprocessors si aplica.

Evitar configuraciones mágicas que nadie del equipo entiende.

Preparar entornos development, staging y production.

Documentar comandos y decisiones de configuración.

Taller: crear boilerplate corporativo Preact + Vite + TypeScript.

Entender cómo JSX se transforma en llamadas compatibles con Preact.

Revisar `h`, `Fragment`, `render` y el punto de montaje de la aplicación.

Configurar JSX con TypeScript usando transform clásico o automático.

Diferenciar atributos HTML, props, children, eventos y expresiones JSX.

Evitar errores habituales con `class`, `className`, estilos inline y valores booleanos.

Crear componentes pequeños y verificables desde el inicio.

Renderizar condicionales, listas, fragmentos y contenido dinámico.

Controlar claves en listas para evitar actualizaciones incorrectas.

Preparar patrones de composición sin generar anidamiento innecesario.

Taller: construir interfaz base con layout, navegación, cards, listas y estados vacíos.

Diseñar componentes funcionales con props claras, responsabilidad limitada y nombres expresivos.

Separar componentes de presentación, contenedores, páginas, layouts y widgets.

Usar composición mediante children, slots funcionales, render props o patrones equivalentes.

Evitar componentes gigantes con lógica, estilos, estado y llamadas a API mezcladas.

Definir contratos de props con TypeScript.

Crear componentes reutilizables sin convertirlos en abstracciones imposibles de mantener.

Gestionar estados visuales: loading, empty, error, success, disabled y pending.

Aplicar patrones de composición para dashboards, paneles y formularios.

Documentar componentes clave con ejemplos de uso.

Taller: crear biblioteca interna de componentes Preact reutilizables.

Gestionar props inmutables y estado local con `useState`.

Diseñar eventos de UI claros: clicks, cambios, submit, focus, teclado y gestos.

Evitar pasar funciones anónimas profundas sin criterio en árboles grandes.

Controlar formularios y eventos sintéticos desde la perspectiva de Preact.

Diseñar callbacks con nombres orientados a intención de negocio.

Sincronizar estado local con props sin duplicar datos innecesariamente.

Gestionar estados derivados sin caer en efectos redundantes.

Preparar componentes controlados y no controlados según contexto.

Medir impacto de actualizaciones frecuentes.

Taller: crear panel interactivo con filtros, selección, ordenación y acciones.

Usar `useState`, `useEffect`, `useMemo`, `useCallback`, `useRef`, `useReducer` y `useContext`.

Entender reglas de hooks y por qué no deben ejecutarse condicionalmente.

Diseñar hooks personalizados para lógica reutilizable.

Evitar efectos que realmente son cálculos derivados o lógica de render.

Controlar dependencias de `useEffect` sin silenciar avisos incorrectamente.

Gestionar referencias a DOM, timers, subscriptions y listeners.

Crear reducers para flujos con múltiples transiciones.

Separar hooks de datos, UI, formularios, storage y comunicación.

Probar hooks de forma aislada cuando aportan lógica crítica.

Taller: construir hooks para fetch, debounce, localStorage, permisos y formularios.

Entender Signals como primitivas reactivas para estado eficiente.

Diferenciar Signals de `useState`, Context, stores externos y observables.

Crear signals, leer valores, actualizar estado y derivar valores computados.

Usar Signals dentro y fuera de componentes con criterio.

Reducir renders innecesarios en interfaces con cambios frecuentes.

Evitar mezclar Signals y estado local sin una estrategia clara.

Crear stores simples basados en signals para UI, filtros, preferencias y sesión.

Analizar cuándo Signals mejoran arquitectura y cuándo añaden complejidad.

Depurar flujos reactivos y detectar dependencias ocultas.

Taller: refactorizar estado local y global hacia Signals en un dashboard.

Elegir entre estado local, Context, Signals, stores externos y caché de servidor.

Diferenciar estado de UI, estado de dominio, estado remoto y estado derivado.

Evitar meter toda la aplicación en un único store global.

Crear módulos de estado por dominio funcional.

Diseñar selectores, acciones y actualizaciones predecibles.

Mantener estado serializable cuando se necesita persistencia o depuración.

Gestionar preferencias, sesión, permisos, filtros, layout y datos compartidos.

Integrar estado con fetch, invalidación y actualizaciones optimistas.

Documentar decisiones de estado para que el equipo mantenga coherencia.

Taller: diseñar arquitectura de estado para una aplicación B2B.

Usar Context para dependencias transversales como tema, idioma, autenticación o configuración.

Evitar Context para datos que cambian continuamente y provocan renders excesivos.

Diseñar providers pequeños, claros y testeables.

Combinar Context con Signals cuando el caso lo justifica.

Crear hooks de acceso a contexto con errores explícitos si falta provider.

Separar configuración global de estado de negocio.

Gestionar contexto en tests y Storybook.

Preparar providers para SSR o prerendering sin fugas de estado.

Evitar acoplar toda la aplicación a un provider monolítico.

Taller: crear sistema de tema, usuario y permisos con Context y Signals.

Implementar navegación con soluciones habituales del ecosistema Preact.

Diseñar rutas públicas, privadas, anidadas, dinámicas y de error.

Gestionar parámetros de URL, query strings, filtros y deep links.

Sincronizar estado de página con URL para mejorar usabilidad.

Preparar navegación accesible y compatible con teclado.

Evitar routing excesivamente complejo en aplicaciones pequeñas.

Gestionar carga diferida por ruta con code splitting.

Crear páginas 404, forbidden, loading y error boundary funcional.

Integrar routing con analítica y trazabilidad de navegación.

Taller: construir aplicación multipágina con rutas protegidas y filtros persistentes.

Entender cuándo usar SSR, prerendering, SPA pura o islands architecture.

Usar `preact-iso` para facilitar hidratación y renderizado en proyectos Preact.

Diferenciar renderizado en servidor, renderizado en build e hidratación en cliente.

Preparar rutas prerenderizadas para mejorar SEO y carga inicial.

Evitar acceder a `window`, `document` o APIs de navegador durante SSR.

Gestionar datos iniciales, estado hidratado y diferencias cliente-servidor.

Revisar errores de hydration mismatch y cómo prevenirlos.

Medir impacto en performance, SEO y complejidad operativa.

Crear estrategia de renderizado por tipo de página.

Taller: prerenderizar páginas públicas y mantener interactividad en cliente.

Entender el patrón islands como forma de hidratar solo partes interactivas.

Identificar páginas donde la mayor parte del contenido es estático y pocos widgets son dinámicos.

Diseñar islas independientes con props serializables y estado local acotado.

Evitar hidratar toda una página si solo un formulario o menú necesita JavaScript.

Usar componentes Preact como widgets embebibles en HTML existente.

Gestionar múltiples roots, eventos y estilos sin colisiones.

Controlar accesibilidad y SEO en contenido prerenderizado.

Medir ahorro de JavaScript y mejora de Core Web Vitals.

Definir límites entre sitio estático, widget Preact y aplicación completa.

Taller: crear página estática con varias islas interactivas Preact.

Entender `preact/compat` como capa de compatibilidad para usar librerías del ecosistema React.

Configurar alias de `react` y `react-dom` hacia `preact/compat` en Vite.

Revisar compatibilidad de librerías, hooks, context, portals y APIs habituales.

Detectar dependencias React que no funcionan correctamente con Preact.

Analizar impacto de compatibilidad en bundle, rendimiento y mantenimiento.

Evitar asumir compatibilidad total sin pruebas reales.

Crear estrategia para migrar librerías progresivamente.

Preparar tests de regresión al sustituir React por Preact.

Documentar excepciones y librerías no compatibles.

Taller: migrar una pequeña app React a Preact usando `preact/compat`.

Auditar aplicación React: dependencias, APIs usadas, bundle, SSR, routing, tests y librerías UI.

Identificar código que funcionará con `preact/compat` y código que requiere adaptación.

Configurar alias, TypeScript, testing y tooling para migración controlada.

Revisar diferencias de eventos, props, lifecycle, children, refs y comportamiento de librerías.

Crear plan por fases: prueba técnica, módulo piloto, rutas críticas, regresión y rollout.

Medir impacto en bundle, tiempo de carga, errores y experiencia de usuario.

Evitar migrar por moda sin objetivos técnicos medibles.

Preparar rollback y feature flags si la migración afecta producción.

Documentar aprendizajes y guía interna de migración.

Taller: migrar módulo React realista y resolver incompatibilidades.

Configurar `tsconfig` para JSX compatible con Preact.

Tipar props, children, eventos, refs, context y componentes genéricos.

Crear tipos reutilizables para variantes, estados visuales y modelos de dominio.

Evitar `any` en componentes compartidos y hooks críticos.

Tipar formularios, handlers y eventos de forma precisa.

Definir contratos de API con tipos generados o esquemas validados.

Gestionar alias de tipos cuando se usa `preact/compat`.

Crear componentes polimórficos con prudencia y documentación.

Integrar TypeScript con tests, linting y CI.

Taller: tipar una biblioteca de componentes Preact con variantes y eventos.

Crear formularios controlados y no controlados con Preact.

Diseñar validación síncrona y asíncrona.

Gestionar errores por campo, errores globales, touched, dirty y submit pending.

Evitar renders excesivos en formularios grandes.

Integrar schemas de validación cuando el proyecto lo requiere.

Crear componentes de campo reutilizables y accesibles.

Gestionar formularios dinámicos, listas de campos y dependencias condicionales.

Controlar subida de ficheros, normalización y sanitización de entradas.

Preparar mensajes de error claros y útiles.

Taller: construir formulario empresarial con validación, borrador, envío y estados de error.

Consumir APIs REST con fetch, clientes tipados o abstracciones ligeras.

Separar capa de servicios, adaptadores, modelos y componentes.

Gestionar loading, error, retry, empty state, stale data y cancelación.

Diseñar caché, invalidación y actualizaciones optimistas si el caso lo exige.

Evitar llamar APIs directamente desde componentes profundos sin patrón común.

Controlar autenticación, tokens, expiración y errores 401/403.

Preparar manejo de errores de red, servidor y validación.

Integrar paginación, filtros, búsqueda y ordenación.

Medir impacto de waterfall requests y optimizar carga de datos.

Taller: crear dashboard con API, filtros, paginación, caché básica y errores.

Diseñar flujo de login, logout, refresh, expiración y recuperación de sesión.

Diferenciar autenticación, autorización, permisos y feature flags.

Guardar tokens de forma prudente según política de seguridad.

Proteger rutas y acciones según permisos de usuario.

Evitar exponer información sensible en cliente, localStorage o logs.

Gestionar roles, claims, permisos y estados de sesión con Context o Signals.

Controlar errores de autorización y experiencia de usuario.

Integrar SSO, OIDC o proveedores corporativos cuando aplique.

Preparar tests para rutas protegidas y permisos.

Taller: implementar sesión simulada con rutas protegidas y permisos por rol.

Elegir estrategia de estilos: CSS modules, CSS vanilla, utility CSS, design tokens o librería UI compatible.

Crear componentes visuales consistentes con estados, variantes y accesibilidad.

Separar tokens, layout, spacing, tipografía, colores y componentes.

Evitar CSS global descontrolado en aplicaciones modulares.

Gestionar dark mode, responsive design y preferencias del usuario.

Diseñar componentes compatibles con SSR y prerendering.

Integrar librerías de UI con `preact/compat` solo tras validar compatibilidad.

Crear documentación visual y ejemplos de uso.

Preparar estilos para widgets embebibles sin contaminar la página anfitriona.

Taller: construir mini design system con botones, inputs, cards, modales y tablas.

Aplicar semántica HTML correcta antes de añadir roles ARIA.

Diseñar navegación por teclado, foco visible y orden lógico.

Crear formularios con labels, errores asociados y mensajes accesibles.

Gestionar modales, menús, tooltips y componentes interactivos con foco controlado.

Revisar contraste, tamaño de texto, estados visuales y contenido dinámico.

Usar DevTools, linters y pruebas automáticas de accesibilidad.

Evitar componentes visualmente atractivos pero inaccesibles.

Incorporar accesibilidad en Definition of Done.

Preparar checklist WCAG aplicable al proyecto.

Taller: auditar y corregir accesibilidad de una interfaz Preact.

Analizar tamaño de bundle y dependencias con herramientas de inspección.

Aplicar code splitting por rutas, componentes pesados o funcionalidades no críticas.

Reducir JavaScript inicial mediante Preact, lazy loading, SSR, prerendering e islands.

Optimizar imágenes, fuentes, CSS y assets estáticos.

Evitar dependencias grandes cuando existen alternativas ligeras.

Medir LCP, INP, CLS, TTFB y métricas de experiencia real.

Detectar renders innecesarios, cálculos caros y actualizaciones frecuentes.

Usar Signals para mejorar eficiencia en estados de alta frecuencia.

Definir performance budgets por proyecto.

Taller: optimizar una app Preact midiendo antes y después.

Depurar componentes, props, estado, hooks y signals durante desarrollo.

Usar navegador, breakpoints, console, network, performance y memory tools.

Identificar errores de hydration, rutas, eventos, dependencias y renders inesperados.

Analizar problemas de estado compartido y actualizaciones no deseadas.

Crear mensajes de error útiles y boundaries cuando sea posible.

Depurar llamadas API, headers, CORS, auth y payloads.

Revisar sourcemaps y diferencias entre desarrollo y producción.

Evitar debugging basado solo en `console.log` sin hipótesis.

Documentar problemas recurrentes y soluciones del equipo.

Taller: resolver bugs preparados en hooks, signals, routing y API.

Configurar Vitest o herramienta equivalente para pruebas unitarias.

Probar funciones puras, hooks, servicios y componentes pequeños.

Usar Testing Library para validar comportamiento desde perspectiva de usuario.

Evitar tests acoplados a detalles internos de implementación.

Simular eventos, formularios, errores, loading y estados vacíos.

Preparar mocks de API y dependencias externas.

Medir cobertura con criterio, sin perseguir porcentaje vacío.

Integrar pruebas en pipeline CI.

Crear convenciones de nombres y organización de tests.

Taller: crear suite de tests para componentes, hooks y servicios Preact.

Diseñar pruebas E2E para flujos críticos con Playwright o herramienta equivalente.

Probar login, navegación, formularios, permisos, errores y operaciones clave.

Evitar E2E excesivos que duplican pruebas unitarias y ralentizan CI.

Preparar datos de prueba estables y entornos reproducibles.

Añadir regresión visual en componentes o páginas críticas cuando aporta valor.

Gestionar flakiness, timeouts y sincronización de UI.

Integrar accesibilidad básica en pruebas E2E.

Crear pipeline con ejecución por pull request y despliegue.

Documentar escenarios críticos de negocio.

Taller: crear pruebas E2E de un dashboard y formulario empresarial.

Identificar riesgos de XSS, inyección HTML, enlaces inseguros, tokens expuestos y datos sensibles en cliente.

Evitar uso peligroso de HTML sin sanitización y controles adecuados.

Aplicar Content Security Policy cuando el entorno lo permite.

Gestionar secretos: nunca incluir claves privadas ni credenciales en bundle frontend.

Validar entradas en cliente sin sustituir validación backend.

Controlar dependencias, vulnerabilidades y supply chain.

Revisar manejo de auth, localStorage, cookies, SameSite y CSRF según arquitectura.

Evitar logs con datos personales o tokens.

Preparar checklist de seguridad frontend.

Taller: auditar una app Preact con vulnerabilidades comunes y corregirlas.

Diseñar estrategia i18n para textos, fechas, números, monedas y pluralización.

Separar contenido traducible de lógica de componentes.

Cargar idiomas de forma eficiente y diferida.

Gestionar fallback language, detección de idioma y preferencias de usuario.

Evitar concatenar cadenas traducibles que rompen gramática.

Preparar componentes para textos largos y direcciones RTL si aplica.

Integrar traducciones con procesos de producto o herramientas externas.

Testear UI con idiomas reales y pseudo-localización.

Medir impacto de i18n en bundle.

Taller: internacionalizar una aplicación Preact con rutas y textos dinámicos.

Evaluar si la aplicación necesita instalación, cache, offline o notificaciones.

Configurar service worker con estrategia segura y mantenible.

Gestionar cache de assets, datos y actualizaciones de versión.

Evitar cachear información sensible sin política clara.

Diseñar experiencia offline parcial para formularios o consultas.

Preparar manifest, iconos, colores y comportamiento instalable.

Medir impacto en rendimiento y fiabilidad.

Controlar invalidación y actualización de service worker.

Probar PWA en navegadores y dispositivos reales.

Taller: añadir capacidades PWA a una app Preact sin comprometer seguridad.

Crear componentes Preact embebibles en páginas existentes.

Integrar Preact con Web Components, CMS, aplicaciones legacy o microfrontends.

Controlar estilos, Shadow DOM, eventos y comunicación con host.

Evitar colisiones de CSS, nombres globales o dependencias compartidas.

Diseñar API pública del widget mediante atributos, props o eventos.

Preparar build distribuible y documentación de integración.

Gestionar múltiples instancias del mismo widget en una página.

Medir peso y rendimiento del widget.

Controlar versión, compatibilidad y rollback.

Taller: crear widget Preact embebible en HTML legacy.

Evaluar cuándo Preact encaja como microfrontend, widget o isla dentro de plataformas mayores.

Diseñar límites de dominio, comunicación, routing, estado y despliegue independiente.

Evitar microfrontends por moda cuando una aplicación modular simple basta.

Gestionar contratos entre host y microfrontend.

Controlar dependencias compartidas, compatibilidad y CSS.

Preparar observabilidad, errores y métricas por módulo.

Diseñar estrategia de versionado y rollback.

Integrar Preact con aplicaciones React, Angular, Vue o legacy.

Revisar seguridad y permisos en módulos embebidos.

Taller: diseñar microfrontend Preact para un portal corporativo.

Entender límites SEO de una SPA renderizada solo en cliente.

Aplicar prerendering o SSR cuando el contenido público necesita indexación.

Gestionar title, meta description, canonical, Open Graph y datos estructurados.

Evitar contenido crítico que solo aparece tras JavaScript si SEO es prioritario.

Crear sitemap, robots y estrategias de rutas públicas.

Controlar rendimiento como factor de experiencia.

Gestionar errores 404, redirects y páginas no indexables.

Medir indexabilidad y renderizado con herramientas adecuadas.

Integrar SEO con i18n y contenido dinámico.

Taller: optimizar página pública Preact para SEO y rendimiento.

Capturar errores de cliente, métricas de rendimiento, eventos de usuario y trazas relevantes.

Diferenciar logs de desarrollo, logs de producción y eventos de negocio.

Evitar registrar datos personales, tokens o información sensible.

Integrar herramientas de error tracking y RUM cuando aplique.

Medir Core Web Vitals reales por usuario, navegador, dispositivo y ruta.

Crear alertas ante errores críticos o degradación de rendimiento.

Relacionar releases con cambios en métricas.

Preparar dashboards para frontend, producto y negocio.

Documentar proceso de respuesta ante incidencias frontend.

Taller: añadir reporting de errores y métricas básicas a una app Preact.

Crear pipeline para instalar dependencias, lint, test, build y análisis de bundle.

Generar artefactos de producción reproducibles.

Desplegar en hosting estático, CDN, contenedores, plataformas cloud o entornos corporativos.

Configurar variables de entorno por entorno sin exponer secretos.

Preparar previews por pull request y validación automática.

Añadir performance budgets y checks de accesibilidad o seguridad.

Crear rollback y versionado de releases.

Evitar despliegues manuales sin trazabilidad.

Documentar runbook de build, despliegue y recuperación.

Taller: crear pipeline completo para aplicación Preact.

Configurar ESLint, Prettier, TypeScript strict y reglas de proyecto.

Definir estructura de carpetas, nomenclatura, convenciones y patrones aceptados.

Crear Definition of Done para componentes, páginas, hooks, tests y accesibilidad.

Revisar pull requests con criterios técnicos y de producto.

Evitar abstracciones prematuras y deuda técnica invisible.

Documentar decisiones arquitectónicas con ADRs.

Mantener dependencias actualizadas con revisión de compatibilidad.

Preparar guía interna de Preact para el equipo.

Medir calidad mediante bugs, tiempo de revisión, cobertura útil y complejidad.

Taller: crear estándar corporativo de desarrollo Preact.

Revisar versiones de Preact, Vite, TypeScript, testing y dependencias críticas.

Preparar estrategia de actualización periódica y segura.

Analizar changelogs, breaking changes y compatibilidad de librerías.

Evitar lock-in de dependencias poco mantenidas.

Crear tests de regresión antes de actualizar.

Gestionar deuda técnica por componentes, estado, routing o build.

Revisar bundles y dependencias cada cierto tiempo.

Planificar migración de patrones antiguos a Signals, SSR o arquitectura más eficiente si procede.

Documentar decisiones y fechas de revisión.

Taller: actualizar proyecto Preact y resolver incompatibilidades controladas.

Crear dashboard interno con filtros, tablas, formularios y consumo de API.

Desarrollar widget embebible para portal corporativo con Preact.

Migrar módulo React pequeño hacia Preact usando `preact/compat`.

Crear página pública prerenderizada con islas interactivas.

Implementar estado con Signals en una UI de cambios frecuentes.

Diseñar formulario empresarial con validación, permisos y errores.

Optimizar bundle y Core Web Vitals de una aplicación existente.

Añadir testing unitario, E2E, accesibilidad y pipeline CI.

Integrar autenticación simulada y rutas protegidas.

Taller: seleccionar tres casos y resolverlos con arquitectura, código y métricas.

Elegir Preact solo por tamaño sin analizar compatibilidad, equipo y dependencias.

Usar `preact/compat` sin pruebas de regresión con librerías críticas.

Abusar de estado global para problemas locales.

Ignorar hidratación, SSR y diferencias cliente-servidor.

Construir componentes reutilizables demasiado genéricos y difíciles de mantener.

No medir bundle ni rendimiento después de añadir dependencias.

Tratar accesibilidad y testing como tareas finales.

Exponer tokens o datos sensibles en el frontend.

Migrar desde React sin plan, rollback ni métricas.

Taller: revisar una app Preact mal diseñada y convertirla en arquitectura mantenible.

Evaluar madurez frontend actual: React, legacy, bundle, rendimiento, equipo, tests y despliegue.

Identificar quick wins: widgets, micrositios, rutas públicas, dashboards ligeros o migraciones parciales.

Priorizar casos por impacto, riesgo, compatibilidad, ahorro de JavaScript y facilidad de adopción.

Definir fase piloto con métricas de bundle, rendimiento, bugs, productividad y mantenibilidad.

Preparar estándares: estructura, TypeScript, Signals, compat, tests, accesibilidad y CI/CD.

Seleccionar dependencias compatibles y descartar librerías problemáticas.

Formar al equipo con guías internas y ejemplos reales.

Medir resultados antes de escalar.

Crear plan a 30, 60, 90 y 180 días.

Taller: construir roadmap corporativo de adopción o migración a Preact.

Diseñar una aplicación Preact corporativa con rutas, layout, autenticación simulada, dashboard, formularios y consumo de API.

Configurar proyecto con Vite, TypeScript, ESLint, Prettier, tests, scripts de build y estructura profesional.

Crear biblioteca de componentes reutilizables con accesibilidad, variantes, estados visuales y documentación mínima.

Implementar gestión de estado combinando estado local, Context y Signals según responsabilidad.

Añadir routing, rutas protegidas, páginas de error, filtros en URL y carga diferida.

Construir formularios con validación, errores accesibles, estados de envío y manejo de respuestas de API.

Optimizar bundle, lazy loading, assets, métricas de rendimiento y performance budget.

Añadir tests unitarios, tests de componentes, E2E, auditoría básica de accesibilidad y revisión de seguridad frontend.

Preparar pipeline CI/CD, preview, build de producción, variables por entorno, logging de errores y checklist de despliegue.

Presentar arquitectura final, decisiones técnicas, métricas, riesgos, mejoras futuras y guía de mantenimiento.