VueJS — Avanzado

Dirigido a desarrolladores frontend con experiencia consolidada en Vue 3 y la Composition API que necesitan llevar sus aplicaciones a producción con criterios de calidad profesional, este curso aborda los retos propios de proyectos de escala real: arquitectura escalable, rendimiento medible, gestión de estado avanzada y estrategias de despliegue. A lo largo de las 10 horas el participante aprenderá a diseñar la separación de capas de una aplicación Vue 3, a diagnosticar y resolver cuellos de botella de rendimiento, a estructurar stores Pinia por dominio, a automatizar pipelines de calidad con Vitest, Testing Library y Playwright, y a optimizar el bundle con Vite, obteniendo al final una aplicación auditada, testeada y lista para entornos de producción con métricas de rendimiento documentadas.

1. Describir los principios de separación de responsabilidades (presentación, dominio, infraestructura) y los trade-offs de las estrategias de renderizado CSR, SSR y SSG en términos de SEO y TTFB.
2. Evaluar el rendimiento de una aplicación Vue existente utilizando Vue DevTools y Lighthouse para identificar cuellos de botella de renderizado y de bundle.
3. Diseñar la arquitectura de gestión de estado global segmentando stores Pinia por dominio y aplicando el patrón composable-store, justificando las decisiones frente a soluciones centralizadas.
4. Optimizar el renderizado de componentes mediante shallowRef, v-memo y carga diferida, logrando una reducción medible de al menos el 20 % en tiempo de renderizado.
5. Optimizar el bundle de una aplicación Vite + Vue aplicando code splitting por ruta y librería, tree-shaking y compresión hasta reducir el chunk principal en al menos un 30 %.
6. Anticipar y corregir memory leaks en composables con efectos secundarios implementando cleanup explícito con onUnmounted y AbortController, verificado mediante pruebas de ciclo de vida.
7. Automatizar un pipeline de calidad frontend que integre pruebas unitarias, de componente y end-to-end en un workflow de CI reproducible.
8. Diseñar una aplicación Vue 3 de escala media con arquitectura en capas y documentar las decisiones de diseño en un registro de arquitectura entregable.

Bloque 1 — Arquitectura de aplicaciones Vue 3 a escala. Este bloque establece los fundamentos de diseño sobre los que se construye el resto del curso. Se analiza la separación de responsabilidades en tres capas —presentación, dominio e infraestructura— y se estudia cómo trasladar esos principios a la estructura de carpetas y módulos de un proyecto real. Se introduce la elaboración de un registro de decisiones de arquitectura (ADR) como herramienta para documentar y comunicar las elecciones de diseño al equipo.

Bloque 2 — Diagnóstico y optimización de rendimiento. Se trabaja el ciclo completo de mejora de rendimiento: auditoría con Vue DevTools y Lighthouse para localizar cuellos de botella, aplicación de técnicas de renderizado selectivo (shallowRef, v-memo, componentes diferidos con defineAsyncComponent) y medición del impacto. A continuación se aborda la optimización de bundle con Vite: code splitting estratégico por ruta y librería, configuración de tree-shaking y activación de compresión (Brotli/gzip), con verificación cuantitativa del tamaño del chunk principal.

Bloque 3 — Gestión de estado avanzada con Pinia. Se profundiza en la arquitectura de stores segmentados por dominio de negocio y en el patrón composable-store, que permite reutilizar lógica reactiva entre la capa de componentes y la capa de estado. Se evalúan los trade-offs de granularidad frente a cohesión y se comparan con enfoques de store centralizado, de modo que el participante pueda argumentar su elección ante distintos escenarios de equipo y producto.

Bloque 4 — Robustez: memory leaks, ciclo de vida y pruebas. Este bloque cubre la prevención de fugas de memoria en composables que registran listeners, peticiones o timers, implementando cleanup explícito con onUnmounted y AbortController. Se introduce el testing de ciclo de vida para verificar que el cleanup se ejecuta correctamente, y se integra ese conocimiento en la estrategia de calidad general del proyecto.

Bloque 5 — Pipeline de calidad y estrategias de renderizado. Se construye un workflow de CI que encadena pruebas unitarias con Vitest, pruebas de componente con Testing Library y pruebas end-to-end con Playwright, garantizando reproducibilidad entre entornos. El bloque cierra con una sesión de evaluación comparativa de estrategias de renderizado —CSR, SSR con Nuxt y SSG— aplicada a casos de negocio reales, analizando el impacto en SEO, TTFB y complejidad operativa para que el participante pueda seleccionar y argumentar la opción más adecuada.

• Node.js ≥ 18 LTS instalado localmente.
• pnpm ≥ 8 (o npm ≥ 9 / yarn ≥ 1.22) como gestor de paquetes.
• VS Code con las extensiones Volar (Vue - Official) y ESLint instaladas y habilitadas.
• Vue DevTools (extensión de navegador, versión para Vue 3) en Chrome o Firefox.
• Google Chrome ≥ 120 para las auditorías con Lighthouse integrado en DevTools.
• Git ≥ 2.40 y acceso a un repositorio remoto (GitHub, GitLab o equivalente) para los ejercicios de CI.
• Docker Desktop (opcional pero recomendado) para ejecutar el entorno de Playwright en modo headless con el mismo contenedor que se usará en CI.
• Navegador con soporte ES2022 nativo; no se proporciona polyfill para entornos legacy.

Para aprovechar este curso el participante debe dominar los contenidos equivalentes a VVJS02, lo que implica: uso fluido de la Composition API con ref, reactive, computed y watch; creación y consumo de composables; gestión de rutas con Vue Router (rutas dinámicas, guards y lazy loading básico); uso operativo de Pinia a nivel de store único; y configuración de un proyecto con Vite. Sin esos conocimientos la curva de entrada al material de arquitectura y optimización será significativamente más alta.