Plan de Estudio 2026
Frontend
Architect
Ruta acelerada para desarrolladores senior: profundiza en React y Angular, domina arquitectura avanzada y lidera decisiones técnicas de alto impacto.
36
Semanas
540h
Totales
5
Fases
15h
Por semana
Scroll
01 — Profundización Core
Consolidar los fundamentos avanzados
JavaScript internals, TypeScript avanzado, patrones de arquitectura frontend y tooling moderno. Las bases mentales que un arquitecto necesita antes de entrar a los frameworks.
Mes 1
JavaScript Internals & Patterns
Core · Profundización
Con 8 años de experiencia ya usas JS a diario, pero dominar los internals te permite debuggear y optimizar a otro nivel.
Mes 1
TypeScript Avanzado
Core · Type-level programming
Ir más allá de los tipos básicos: crear type systems que prevengan bugs en compile time y documenten la arquitectura.
Mes 1
Architecture Fundamentals
Core · Patrones de diseño de sistemas
Los marcos mentales que un arquitecto usa para organizar cualquier aplicación frontend, independiente del framework. Aprender esto antes de los frameworks cambia cómo los usas.
Mes 1
Tooling & Build Systems
Core · Ecosistema moderno
Entender el build pipeline a nivel arquitectónico: cuándo elegir cada herramienta y cómo configurar monorepos.
02 — React Avanzado
Dominio profundo
Internals, state management avanzado, performance, testing y patterns de composición. Sin meta-frameworks.
Mes 2–3
React Internals & Fiber
React · Arquitectura interna
Entiende cómo React reconcilia el árbol de componentes para optimizar en los momentos correctos.
Mes 2–3
State Management Ecosystem
React · Estado global y server state
Más allá de useState: cuándo usar cada solución y cómo combinarlas en arquitecturas reales.
Mes 2–3
Performance & Patterns
React · Rendimiento y composición
Optimización avanzada y patrones de composición que separan un dev senior de un arquitecto React.
Mes 2–3
Testing en React
React · Estrategias de testing
Testing que da confianza real sin enlentecerte. Enfoque pragmático para proyectos reales.
03 — Angular Avanzado
Dominio enterprise
Architecture, DI avanzado, Signals, RxJS, NgRx y enterprise patterns. El framework que domina el mundo corporativo.
Mes 4–5
Angular Architecture & Signals
Angular · DI y reactividad moderna
El sistema de DI más sofisticado del frontend combinado con Signals, el futuro reactivo de Angular.
Mes 4–5
RxJS & Reactive Patterns
Angular · Programación reactiva
RxJS sigue siendo central en Angular. Dominar observables y saber cuándo migrar a Signals es clave.
Mes 4–5
NgRx & State Management
Angular · Estado enterprise
NgRx es el estándar en Angular enterprise. Dominar el patrón Redux adaptado a Signals es el siguiente nivel.
Mes 4–5
Angular Enterprise Patterns
Angular · Patrones avanzados
Las características que hacen de Angular el framework preferido para grandes equipos y aplicaciones enterprise.
Mes 5
Angular Testing
Angular · Estrategia de testing enterprise
Testing en Angular va más allá de TestBed. Marble testing para RxJS, testing de Signals y estrategias pragmáticas para apps enterprise.
04 — Arquitectura Frontend Avanzada
Sistemas a escala
Micro-frontends, design systems, performance, API patterns, security, a11y, testing y CI/CD. El salto de senior a arquitecto.
Mes 6
Rendering Strategies
Arquitectura · Decisión de renderizado
Elegir la estrategia de renderizado correcta es una de las decisiones arquitectónicas más impactantes. SSR, CSR, SSG, ISR e Islands tienen trade-offs reales que afectan performance, SEO y complejidad operacional.
Mes 6–8
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 6–8
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 para Angular y React, Storybook y publicación en npm.
Mes 6–8
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 6–8
API Integration Patterns
Arquitectura · Comunicación frontend-backend
Cómo el frontend se comunica con el backend de forma robusta, escalable y mantenible.
Mes 6–8
Security & Accessibility
Arquitectura · Seguridad y accesibilidad sistémica
El arquitecto es responsable de que el frontend sea seguro y accesible por diseño, no como afterthought.
Mes 6–8
Testing & CI/CD Architecture
Arquitectura · Pipeline completo
Estrategia de testing y pipeline de delivery que da confianza real sin frenar al equipo.
05 — Liderazgo Técnico & Visión
Nivel Arquitecto
Technical decision making, observabilidad, DX y soft skills. Lo que separa a un senior de un arquitecto real.
Mes 8
i18n Architecture
Architect · Internacionalización enterprise
La internacionalización mal diseñada se convierte en deuda técnica enorme. El arquitecto define la estrategia desde el inicio: namespaces, lazy loading de traducciones, pluralización y RTL.
Mes 8–9
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 8–9
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 8–9
Developer Experience (DX)
Architect · Productividad del equipo
El arquitecto hace que el equipo sea productivo. El DX es tan importante como el UX.
Mes 8–9
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.
06 — 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.
07 — Semana tipo
Distribucion semanal
15 horas semanales divididas en bloques diarios de 3 horas (Lunes a Viernes). Ritmo acelerado para un perfil senior con 8 años de experiencia.
Distribucion diaria · 3h
📖 Lectura / documentacion / cursos1h
⌨️ Practica en proyecto real o POC1h 30m
📝 Notas / blog post / documentar30m
| Semana | Fase | Tema principal | Horas |
|---|---|---|---|
| W01 | Core | JS Internals: Event Loop deep-dive, Microtasks vs Macrotasks, Generators, Proxy, WeakRef, Memory Leaks | 15h |
| W02 | Core | TypeScript Avanzado: Generics, Conditional Types, Mapped Types, Template Literal Types, Branded Types | 15h |
| W03 | Core | Architecture Fundamentals: Feature-Sliced Design, DDD Frontend, SOLID, Hexagonal Architecture, Vertical Slices | 15h |
| W04 | Core | Tooling & Build: Vite internals, esbuild, Nx, Turborepo, monorepo setup, Changesets, ESLint flat config | 15h |
| W05 | React | React Fiber, Reconciliation, Concurrent Mode, useTransition, useDeferredValue, Virtual DOM internals | 15h |
| W06 | React | RSC, Server Actions, Suspense, Lazy Loading — con Next.js App Router como referencia arquitectónica | 15h |
| W07 | React | State Management cliente: Zustand, Redux Toolkit, Jotai, Context + useReducer — criterios de elección | 15h |
| W08 | React | State Management servidor: TanStack Query, SWR, XState — cuándo y por qué cada uno | 15h |
| W09 | React | React Performance: React Compiler, memo/useMemo/useCallback, DevTools Profiler, Virtualization, Bundle Splitting | 15h |
| W10 | React | React Patterns: Compound Components, Render Props, Headless Components, Radix UI, Custom Hooks avanzados | 15h |
| W11 | React | React Testing: React Testing Library, MSW, Vitest, Testing Hooks, testing patterns | 15h |
| W12 | React | React E2E & Visual Testing: Playwright, Storybook, Chromatic, Visual Regression, integration testing | 15h |
| W13 | Angular | Angular Architecture & DI: DI jerárquica, InjectionToken, Multi Providers, Standalone Components | 15h |
| W14 | Angular | Angular Signals: Signal Inputs, Computed Signals, Effect, OnPush Strategy, toSignal, Angular DevTools | 15h |
| W15 | Angular | RxJS Core: switchMap, exhaustMap, mergeMap, BehaviorSubject, ReplaySubject, manejo de errores | 15h |
| W16 | Angular | RxJS Avanzado: Higher-order Observables, Custom Operators, Marble Testing, toObservable | 15h |
| W17 | Angular | NgRx Store: Actions, Reducers, Effects, Selectors, Entity Adapter, Redux DevTools | 15h |
| W18 | Angular | NgRx SignalStore, Component Store + Lazy Loading, Deferrable Views, Guards funcionales, Resolvers | 15h |
| W19 | Angular | Angular Enterprise: Angular Material, CDK, Schematics, Preloading Strategies, Module Federation | 15h |
| W20 | Angular | Angular Testing: Spectator, ng-mocks, Marble Testing, TestBed avanzado, Cypress Component Testing | 15h |
| W21 | Arq. | Rendering Strategies: CSR vs SSR vs SSG vs ISR vs Islands — trade-offs y criterios de decisión arquitectónica | 15h |
| W22 | Arq. | Micro-frontends Diseño: Module Federation, Single-SPA, Shell Application, Contracts, Versioning | 15h |
| W23 | Arq. | Micro-frontends Implementación: Shared State, Cross-app Routing, Deploy independiente, testing entre apps | 15h |
| W24 | Arq. | Design Systems Fundamentos: Design Tokens, Component API Design, Storybook, Chromatic, Visual Regression | 15h |
| W25 | Arq. | Design Systems Escala: Multi-framework, Web Components, npm publishing, Semver, Governance | 15h |
| W26 | Arq. | Performance Architecture: Core Web Vitals, LCP/INP/CLS, RUM, Service Workers, CDN, Performance Budgets | 15h |
| W27 | Arq. | API Integration: BFF Pattern, GraphQL, Apollo, tRPC, REST Best Practices, Cache Strategies | 15h |
| W28 | Arq. | Real-time Patterns: WebSockets, SSE, Optimistic Updates, Polling vs Push, API Versioning | 15h |
| W29 | Arq. | Security Architecture: XSS, CSRF, CSP, CORS, OAuth 2.0/OIDC, JWT, WCAG 2.2 AA, axe-core CI/CD | 15h |
| W30 | Arq. | Testing & CI/CD Architecture: Testing Trophy, Contract Testing, GitHub Actions, Feature Flags, Canary Releases | 15h |
| W31 | Líder | i18n Architecture: estrategia de namespaces, lazy loading de traducciones, pluralización ICU, RTL support | 15h |
| W32 | Líder | Observabilidad Frontend: RUM, Web Vitals API, Error Tracking, PostHog, Session Replay, Performance Budgets | 15h |
| W33 | Líder | Technical Decision Making: ADR, RFC Process, Trade-offs, Tech Radar, Gestión de deuda técnica | 15h |
| W34 | Líder | Developer Experience: Scaffolding, CLI interno, Nx Monorepo, Code Standards, Documentación técnica, Onboarding | 15h |
| W35 | Líder | Soft Skills del Arquitecto: comunicación a stakeholders, consensus técnico, Code Reviews como mentoring, C4 Model | 15h |
| W36 | Final | 🚀 Proyecto Final: migración técnica con ADRs, RFCs, C4 Model, Design System y estándares de equipo | 15h |
08 — Timeline visual
