Paralelo al Backend · 21 May 2026 → 29 Oct 2026
Frontend
Architect
Ruta paralela al Backend. Version comprimida para desarrolladores senior que ya trabajan en frontend y quieren consolidar conocimientos arquitectonicos en paralelo. 1 hora diaria, lunes a sabado.
24
Semanas
144h
Totales
5
Fases
6h
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
6 horas semanales en 1 hora diaria de lunes a sabado. Ruta paralela al Backend, pensada para consolidar conocimientos arquitectonicos sin abandonar lo que ya se practica a diario en el trabajo.
Distribucion diaria · 1h · Lunes a Sabado
📖 Lectura / documentacion / cursos30min
⌨️ Practica rapida o POC20min
📝 Notas / documentar10min
| Semana | Fase | Tema principal | Horas |
|---|---|---|---|
| W01 | Core | JS Internals: Event Loop, Microtasks, Generators, Proxy, WeakRef, Memory Leaks · TypeScript Avanzado: Generics, Conditional Types, Mapped Types, Branded Types | 6h |
| W02 | Core | Architecture Fundamentals: Feature-Sliced Design, DDD Frontend, SOLID, Hexagonal Architecture, Vertical Slices · Tooling: Vite, esbuild, Nx, Turborepo, monorepos | 6h |
| W03 | React | React Fiber, Reconciliation, useTransition, useDeferredValue · RSC, Server Actions, Suspense, Lazy Loading — Next.js App Router como referencia | 6h |
| W04 | React | State Management: Zustand, Redux Toolkit, Jotai, Context + useReducer · Server State: TanStack Query, SWR, XState — criterios de eleccion | 6h |
| W05 | React | React Performance: React Compiler, memo/useMemo/useCallback, Virtualization, Bundle Splitting · Patterns: Compound Components, Render Props, Headless | 6h |
| W06 | React | React Testing: React Testing Library, MSW, Vitest, Testing Hooks · E2E & Visual: Playwright, Storybook, Chromatic, Visual Regression | 6h |
| W07 | Angular | Angular DI: inyeccion jerarquica, InjectionToken, Multi Providers, Standalone Components · Signals: Signal Inputs, Computed, Effect, OnPush Strategy | 6h |
| W08 | Angular | RxJS: switchMap, exhaustMap, mergeMap, BehaviorSubject, Higher-order Observables, Custom Operators, Marble Testing, toSignal/toObservable | 6h |
| W09 | Angular | NgRx Store: Actions, Reducers, Effects, Selectors, Entity Adapter · NgRx SignalStore, Component Store, Redux DevTools | 6h |
| W10 | Angular | Angular Enterprise: Lazy Loading, Deferrable Views, Guards funcionales, Resolvers, Preloading Strategies, Angular Material, CDK, Schematics | 6h |
| W11 | Angular | Angular Testing: Spectator, ng-mocks, Marble Testing, TestBed avanzado, Testing Signals, Cypress Component Testing, Harnesses CDK | 6h |
| W12 | Angular | Module Federation en Angular: Shell Application, Micro-frontends, Shared State entre apps, Deploy independiente por equipo | 6h |
| W13 | Arq. | Rendering Strategies: CSR vs SSR vs SSG vs ISR vs Islands — trade-offs reales por caso de uso, Next.js App Router, Angular Universal | 6h |
| W14 | Arq. | Micro-frontends: Module Federation, Single-SPA, Shell Application, Contracts, Versioning, Cross-app Routing, Deploy independiente | 6h |
| W15 | Arq. | Design Systems: Design Tokens, Component API Design, Storybook, Chromatic, Visual Regression, npm publishing, Web Components, Governance | 6h |
| W16 | Arq. | Performance Architecture: Core Web Vitals (LCP/INP/CLS), RUM, Resource Hints, Service Workers, Image Pipeline, CDN Architecture, Performance Budgets | 6h |
| W17 | Arq. | API Integration: BFF Pattern, GraphQL, Apollo, tRPC, REST Best Practices, WebSockets, SSE, Optimistic Updates, Cache Invalidation | 6h |
| W18 | Arq. | Security: XSS, CSRF, CSP, CORS, OAuth 2.0/OIDC, JWT Management · Accessibility: WCAG 2.2 AA, ARIA Patterns, axe-core en CI/CD | 6h |
| W19 | Arq. | Testing & CI/CD Architecture: Testing Trophy, Contract Testing, Visual Regression CI, GitHub Actions avanzado, Feature Flags, Canary Releases, Sentry | 6h |
| W20 | Arq. | 🏗️ Proyecto Arquitectura: micro-frontend con design system compartido, Module Federation, Storybook y pipeline CI/CD completo | 6h |
| W21 | Líder | i18n Architecture: namespaces, lazy loading traducciones, ICU, RTL · Observabilidad: RUM, Web Vitals API, Error Tracking, PostHog, Performance Budgets | 6h |
| W22 | Líder | Technical Decision Making: ADR, RFC Process, Trade-offs, Tech Radar, Deuda tecnica, Migration Strategies | 6h |
| W23 | Líder | Developer Experience: Scaffolding, CLI interno, Nx Monorepo, Code Standards, Documentacion tecnica · Soft Skills: comunicacion a stakeholders, C4 Model | 6h |
| W24 | Final | 🚀 Proyecto Final: migracion tecnica con ADRs, RFCs, C4 Model, Design System y estandares de equipo documentados | 6h |
08 — Timeline visual
