Plan de Estudio 2026
Frontend
Architect
De desarrollador a arquitecto: domina React, Vue y Angular mientras construyes los fundamentos técnicos y de liderazgo que definen a un verdadero arquitecto frontend.
6
Fases
3
Frameworks
8
Pilares Arq.
24
Meses aprox.
Scroll
01 — Fundamentos Universales
La base de todo arquitecto
JavaScript profundo, TypeScript avanzado, CSS architecture y tooling moderno. Nivel Junior a Mid.
Mes 1–2
JavaScript Moderno Profundo
Universal · Fundamento base
La base de todo. Sin esto, los frameworks son cajas negras que no puedes dominar.
Mes 1–2
TypeScript Avanzado
Universal · Lenguaje de facto
Lenguaje de facto del ecosistema frontend moderno. Imprescindible en Angular, estándar en React y Vue.
Mes 1–2
CSS Architecture & Browser
Universal · Rendering y estilos
El DOM, CSSOM, rendering pipeline y estrategias modernas de CSS que cualquier arquitecto debe dominar.
Mes 1–2
Tooling & Build Systems
Universal · Ecosistema de herramientas
Entiende el ecosistema de herramientas que rodea cualquier proyecto frontend moderno.
02 — React & Next.js
Dominio Completo
Internals, state management, performance, Next.js App Router, testing y patterns avanzados. Nivel Mid.
Mes 3–5
React Internals & Fiber
React · Arquitectura interna
Entiende cómo React reconcilia el árbol de componentes bajo el hood para optimizar en los momentos correctos.
Mes 3–5
State Management Ecosystem
React · Estado global y server state
Más allá de useState: gestión de estado global, server state y patrones de composición.
Mes 3–5
Performance & Optimization
React · Rendimiento avanzado
React puede ser lento si no se gestiona bien. Aprende cuándo y cómo optimizar sin sobre-optimizar.
Mes 3–5
Next.js App Router Avanzado
React + Next.js · Meta-framework
El meta-framework dominante de React con su nuevo paradigma de rendering y arquitectura.
Mes 3–5
Testing en React
React · Estrategias de testing
Estrategias de testing que no te enlentezcan pero que den confianza real en los cambios.
Mes 3–5
Custom Hooks & Patterns
React · Composición avanzada
La composición es el superpoder de React. Aprende a construir abstracciones reutilizables y elegantes.
03 — Vue & Nuxt
Dominio Completo
Vue 3 internals, Pinia, directivas, Nuxt 3 full-stack. Nivel Mid a Senior.
Mes 6–8
Vue 3 Internals & Reactivity
Vue 3 · Sistema de reactividad
El sistema de reactividad de Vue 3 es elegante y poderoso. Comprenderlo te hace un desarrollador Vue superior.
Mes 6–8
State & Pinia
Vue 3 · Estado moderno
Pinia reemplazó a Vuex. Su integración con Vue DevTools y TypeScript lo hace el estándar moderno.
Mes 6–8
Directivas, Plugins & Render Functions
Vue 3 · Extensiones avanzadas
Extender Vue con el sistema de directivas y plugins para crear abstracciones potentes y reutilizables.
Mes 6–8
Nuxt 3 Full-Stack
Vue + Nuxt · Meta-framework
Nuxt 3 es uno de los mejores meta-frameworks del ecosistema. Dominar su arquitectura da ventaja competitiva real.
04 — Angular
Dominio Completo
Architecture, DI, RxJS, NgRx y enterprise patterns. Nivel Senior.
Mes 9–11
Angular Architecture & DI
Angular · Dependency Injection
Angular tiene el sistema de Dependency Injection más sofisticado del frontend. Es su superpoder para apps enterprise.
Mes 9–11
RxJS & Reactive Patterns
Angular · Programación reactiva
RxJS es central en Angular. Dominar observables y patrones reactivos es obligatorio para el nivel senior/architect.
Mes 9–11
NgRx & State Management
Angular · Estado enterprise
NgRx es el estándar para state management en Angular enterprise. Complejidad justificada en apps grandes.
Mes 9–11
Angular Enterprise Patterns
Angular · Patrones avanzados
Las características que hacen de Angular el framework preferido para grandes equipos y aplicaciones enterprise.
05 — Arquitectura Frontend Avanzada
Sistemas a escala
Micro-frontends, design systems, performance, API patterns, security, a11y, testing y CI/CD. Nivel Senior a Arquitecto.
Mes 12–18
Micro-Frontends
Arquitectura · Escalabilidad multi-equipo
Escalar el frontend a través de múltiples equipos independientes con distintas stacks y ciclos de release.
Proyecto Diseñar una arquitectura micro-frontend con shell app, routing compartido y deploy independiente por equipo.
Mes 12–18
Design Systems & Component Libraries
Arquitectura · Sistemas de diseño
Crear sistemas de diseño que escalen: uno de los aportes más impactantes de un arquitecto frontend.
Proyecto Crear un design system con tokens, componentes multi-framework, Storybook y publicación en npm.
Mes 12–18
Performance Architecture
Arquitectura · Web Vitals como KPI
Web Vitals como KPI. Un arquitecto diseña sistemas que son performantes por defecto, no por accidente.
Mes 12–18
API Integration Patterns
Arquitectura · Comunicación frontend-backend
Cómo el frontend se comunica con el backend de forma robusta, escalable y mantenible.
Mes 12–18
Security Frontend
Arquitectura · Seguridad del cliente
El arquitecto es el responsable de que el frontend no sea la puerta de entrada de las vulnerabilidades.
Mes 12–18
Accessibility (a11y) Architecture
Arquitectura · Accesibilidad sistémica
Accesibilidad sistémica, no como checklist. Diseñar para que sea imposible crear componentes inaccesibles.
Mes 12–18
Testing Architecture
Arquitectura · Estrategia de testing
Una estrategia de testing que da confianza real sin convertirse en un bloqueo para el equipo.
Mes 12–18
CI/CD & DevOps Frontend
Arquitectura · Pipeline de producción
El arquitecto define el pipeline que lleva código a producción de forma segura y rápida.
06 — Liderazgo Técnico & Visión
Nivel Arquitecto
Technical decision making, observabilidad, DX, i18n y soft skills del arquitecto. Mes 18–24.
Mes 18–24
Technical Decision Making
Architect · Decisiones de impacto
Cómo tomar y comunicar decisiones técnicas que impactan todo el equipo y el producto a largo plazo.
Proyecto Crear un ADR template y documentar 3 decisiones técnicas reales con trade-offs y alternativas evaluadas.
Mes 18–24
Observabilidad Frontend
Architect · Métricas y monitoreo
Si no lo mides, no lo puedes mejorar. El arquitecto diseña el sistema de observabilidad del frontend.
Mes 18–24
Developer Experience (DX)
Architect · Productividad del equipo
El arquitecto hace que el equipo sea productivo. El DX es tan importante como el UX.
Mes 18–24
Internacionalización & Localización
Architect · Productos globales
Para productos globales, la i18n debe ser una decisión de arquitectura, no un afterthought.
Mes 18–24
Soft Skills del Arquitecto Frontend
Architect · Liderazgo e influencia
El título de arquitecto se gana por influencia técnica, no solo por conocimiento. Estos skills son los que separan a un senior de un arquitecto real.
Proyecto Liderar una migración técnica real documentando ADRs, RFCs y estableciendo estándares de calidad para el equipo.
07 — Fundamentos del rol
Los 8 Pilares del Arquitecto Frontend
Un arquitecto frontend no es solo un senior que sabe más. Es alguien que diseña sistemas, habilita equipos y toma decisiones que perduran en el tiempo.
Pilar 1
Systems Design
Diseño de sistemas escalables
Diseñar la estructura de aplicaciones que crecen y evolucionan con el tiempo sin convertirse en legacy.
Pilar 2
Performance
Rendimiento por diseño
Web Vitals como KPI de negocio. Rendimiento por diseño, no como afterthought.
Pilar 3
Security
Frontend como primera línea
El frontend como primera línea de defensa, no como vector de ataque involuntario.
Pilar 4
Accessibility
Accesibilidad sistémica
Accesibilidad sistémica como parte del proceso, no como checklist final.
Pilar 5
Design Systems
Lenguaje unificado
Sistemas de diseño que unifican producto, diseño y desarrollo en un solo lenguaje.
Pilar 6
Testing Strategy
Confianza sin fricción
Definir qué testear, cómo y cuándo para maximizar confianza sin frenar la velocidad.
Pilar 7
Observabilidad
Datos accionables en producción
Saber qué pasa en producción en tiempo real con datos accionables, no solo logs.
Pilar 8
Liderazgo Técnico
Influencia y dirección
Influir en la dirección técnica del equipo y la organización. El skill más subestimado.
