4h/día · Lun–Vie · 8 Jun 2026 → 17 Jul 2026
Frontend
Architect
4 horas diarias, lunes a viernes. 120 horas de contenido completadas en 6 semanas. Al terminar, 15 dias de descanso antes de iniciar el Backend.
6
Semanas
120h
Totales
3
Fases
20h
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.
Sem 1
JavaScript OOP & Reactivity
Core · Fundamentos del lenguaje
POO real en JS va más allá de
class: es prototype chain, closures y this. La reactividad empieza con el Observer Pattern, mucho antes de que existieran los Signals.Sem 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 sin necesidad de comentarios.
Sem 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.
Sem 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 — Angular Avanzado
Dominio enterprise
De la API clásica a las APIs modernas. Lifecycle hooks, RxJS, Signals, Forms, NgRx y Module Federation. El framework enterprise por excelencia.
Sem 1
Angular Foundations
Angular · API clásica y fundamentos
Antes de la API moderna, hay que dominar los fundamentos clásicos. Todo el código legacy que vas a leer, mantener y migrar usa esta API.
Sem 1–2
DI, Standalone & Signals
Angular · DI y reactividad moderna
El sistema de DI más sofisticado del frontend combinado con Signals, el futuro reactivo de Angular sin Zone.js.
Sem 2–3
RxJS & Reactive Patterns
Angular · Programación reactiva
RxJS sigue siendo central en Angular. Desde el contrato Observable hasta operators avanzados, marble testing y el bridge con Signals.
Sem 3
Forms Reactivos + HTTP
Angular · Formularios y comunicación HTTP
Reactive Forms y HttpClient son la columna vertebral de cualquier app Angular enterprise. Hacerlo bien desde el principio evita semanas de refactoring.
Sem 3
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.
Sem 3–4
Router + Enterprise Patterns
Angular · Router avanzado y patrones de escala
Router avanzado con guards y resolvers funcionales, @defer para lazy UI, CDK para primitivos de UI accesibles y Module Federation para micro-frontends.
Sem 4
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.
03 — 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.
Sem 5
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.
Sem 5–6
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.
Sem 5–6
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, Storybook documentado y publicación en npm.
Sem 5–6
Performance Architecture
Arquitectura · Web Vitals como KPI
Web Vitals como KPI. Un arquitecto diseña sistemas que son performantes por defecto, no por accidente.
Sem 5–6
API Integration Patterns
Arquitectura · Comunicación frontend-backend
Cómo el frontend se comunica con el backend de forma robusta, escalable y mantenible.
Sem 5–6
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.
Sem 5–6
Testing & CI/CD Architecture
Arquitectura · Pipeline completo
Estrategia de testing y pipeline de delivery que da confianza real sin frenar al equipo.
04 — 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.
05 — Semana tipo
Distribucion semanal
20 horas semanales en 4 horas diarias de lunes a viernes. Cada modulo de contenido (~6h) se completa en 1.5 dias. Los 20 modulos de la ruta se cubren en 6 semanas calendario.
Distribucion diaria · 4h · Lunes a Viernes
📖 Lectura, videos y documentacion2h
⌨️ Practica, codigo y POC1h 30min
📝 Notas, resumen y documentar30min
Contenido de la semana
- Prototypal inheritance: `prototype`, `__proto__`, `Object.create` — la herencia real detrás de `class` ES6; entender esto hace que todo Angular DI y los decoradores tengan sentido
- `class` ES6 y `this` binding: campos privados (#), static, extends, super — y las 4 reglas de `this`: implícita, explícita (call/apply/bind), new, arrow — el error más frecuente en callbacks y event handlers
- Closures y Execution Context: scope chain, variable capture, IIFE — la base conceptual de los servicios como singletons y del patrón module antes de ES modules
- Event Loop profundo: call stack, microtask queue (Promise/queueMicrotask), macrotask queue — por qué el orden importa en el browser y en el change detection de Angular
- Observer Pattern & Reactivity mental model: publicador/suscriptor, pull model (dirty checking / Zone.js) vs push model (Signals / Observables) — el puente que une AngularJS con Signals y RxJS
- Proxy & Reflect: trampas (get/set/has/apply), meta-programación — la base interna de Vue 3 Reactivity System, MobX y de cómo Angular Signals detecta cambios sin Zone.js
Fuentes de referencia
Libro
JavaScript: The Definitive Guide
David Flanagan, 7ª Ed. 2020. Caps. 6 (Objects/Prototype), 8 (Functions/this/closures) y 14 (Metaprogramming/Proxy). La referencia definitiva del lenguaje.
Abrir →Libro
You Don't Know JS Yet — this & Object Prototypes
Kyle Simpson. Gratuito en GitHub. El análisis más honesto y completo del prototype chain y las reglas de `this`. No hay sustituto.
Abrir →YouTube
Lydia Hallie — JavaScript Visualized
Serie completa sobre Event Loop, Promises, Scope y Closures con animaciones únicas. El mejor recurso visual disponible en YouTube.
Docs
MDN — Inheritance and the prototype chain
developer.mozilla.org. La explicación más clara del prototype chain con diagramas. Leer junto al capítulo 9 de YDKJSY.
Abrir →Contenido de la semana
- TypeScript Generics avanzados: constraints (extends), infer en conditional types, mapped types con -readonly/-? — type systems que documentan la arquitectura sin comentarios
- Template Literal Types, Discriminated Unions y Branded Types: el type system como herramienta de arquitectura — hacer imposibles los estados imposibles
- Feature-Sliced Design (FSD): capas (shared/entities/features/widgets/pages/app), reglas de dependencia — solo hacia abajo, nunca lateral
- Clean Architecture y SOLID en componentes: casos de uso, ports & adapters, SRP por componente, DIP (inyectar servicios) — adaptados al browser
- Vite internals: dev server con ESM nativo + HMR, producción con Rollup — por qué es 10x más rápido que webpack y cuándo importa en Angular
- Monorepos: Nx vs Turborepo — DAG de tareas, caché local y remota, generators, affected commands — la base para escalar a múltiples apps Angular
Fuentes de referencia
Libro
Effective TypeScript
Dan Vanderkam, 2ª Ed. 2023. Items 1–25: el sistema de tipos, generics, conditional types y mapped types. Actualizado para TS 5.x.
Abrir →Libro
Clean Code in JavaScript
James Padbury, Packt 2019. Patterns de arquitectura y código limpio aplicados a JavaScript moderno. SOLID con ejemplos prácticos.
Docs
TypeScript Handbook — Type Manipulation
typescriptlang.org. Sección "Type Manipulation" completa: Generics, Conditional Types, Mapped Types, Template Literals.
Abrir →Docs
feature-sliced.design
La guía oficial de Feature-Sliced Design. Metodología, ejemplos y guías de migración desde cualquier estructura existente.
Abrir →Contenido de la semana
- Anatomía de un componente Angular: selector, template, styles, encapsulation, changeDetection — la base que todo el ecosistema hereda
- @Input y @Output decoradores: property binding, EventEmitter, unidirectional data flow — la API clásica presente en todo código legado que vas a leer y mantener
- Lifecycle hooks completos: ngOnChanges, ngOnInit, ngDoCheck, ngAfterViewInit, ngOnDestroy — cuándo se dispara cada uno y los errores más comunes
- Memory leaks con subscriptions: el patrón takeUntil + Subject completado en ngOnDestroy — el bug más frecuente en Angular y cómo evitarlo
- async pipe: el pipe que gestiona subscribe y unsubscribe automáticamente — por qué es la práctica correcta para Observables en templates
- Directivas estructurales: *ngIf, *ngFor, *ngSwitch — cómo se transforman en ng-template y el contexto implícito que produce bugs silenciosos
Fuentes de referencia
Libro
Learning Angular
Aristeidis Bampakos, 4ª Ed. 2023. Packt. Los primeros capítulos cubren anatomía de componentes, lifecycle hooks y el modelo de binding clásico que domina el código enterprise.
Abrir →Docs
angular.dev — Component Lifecycle
La guía oficial de lifecycle hooks de Angular. Diagramas de cuándo se dispara cada hook y las interacciones entre ellos durante la detección de cambios.
Abrir →YouTube
Decoded Frontend — Angular Fundamentals
Dmytro Mezhenskyi. La serie más técnica sobre fundamentos de Angular — @Input/@Output, lifecycle hooks y subscriptions con los errores reales del ecosistema.
Roadmap
roadmap.sh/angular
Mapa de Angular con recursos por nodo. Navegar las secciones "Components", "Lifecycle Hooks" y "Change Detection" para esta semana.
Abrir →Contenido de la semana
- DI Jerárquico: ModuleInjector (app-level) vs ElementInjector (component-level), cómo se resuelve la cadena de providers
- InjectionToken: tokens tipados para valores no-clase, multi providers, useFactory con deps declaradas explícitamente
- Standalone Components: bootstrapApplication, provideRouter, importProvidersFrom — eliminando NgModules correctamente
- Angular Signals: signal(), computed(), effect() — el modelo reactivo que reemplazará Zone.js gradualmente en v20+
- Signal Inputs/Outputs: input(), output(), model() — el reemplazo moderno de @Input/@Output desde Angular 17
- OnPush ChangeDetectionStrategy: por qué activarla en toda la app con Signals, signal() como único trigger de detección
Fuentes de referencia
Libro
Learning Angular
Aristeidis Bampakos, 4ª Ed. 2023. Packt. Capítulos de DI, Standalone Components y Signals. El libro más actualizado de Angular moderno.
Abrir →Docs
angular.dev — DI y Signals
La nueva documentación oficial de Angular. "Dependency Injection" guide y "Signals" guide son imprescindibles.
Abrir →YouTube
Joshua Morony — Angular Signals
La serie más clara sobre el modelo reactivo nuevo de Angular. Desde signal() hasta toSignal() con RxJS.
Roadmap
roadmap.sh/angular
Mapa de Angular con recursos por nodo. Navegar las secciones "Signals" y "Dependency Injection".
Abrir →Contenido de la semana
- input() signal-based: el reemplazo moderno de @Input desde Angular 17 — required(), alias, transform para convertir el valor entrante
- output() signal-based: OutputEmitterRef — reemplaza @Output/EventEmitter con tipado estricto y sin decoradores en standalone
- model(): two-way binding reactivo con Signals — la alternativa moderna a [(ngModel)], composable y con historial de cambios observable
- linkedSignal (Angular 19+): signal derivado que acepta escritura manual — casos de uso reales: paginación que se resetea, selección dependiente de otro filtro
- resource() API (Angular 19+): fetching declarativo con estados loading/error/value como Signals — alternativa al patrón HttpClient + async pipe en templates
- Zoneless Angular (Angular 18+): provideExperimentalZonelessChangeDetection — por qué Zone.js fue siempre un parche y cuál es el futuro de la detección de cambios
Fuentes de referencia
Docs
angular.dev — Signal Inputs & Outputs
Guía oficial de las nuevas APIs de signals para inputs y outputs. La referencia para migrar de decoradores a la API moderna.
Abrir →Docs
angular.dev — resource()
Documentación de la API resource() para fetching declarativo basado en Signals. Incluye rxResource() para compatibilidad con RxJS.
Abrir →YouTube
Joshua Morony — Angular Signals Series
La serie más clara sobre el modelo reactivo nuevo de Angular. Desde signal() hasta input()/output(), model() y resource() con casos reales.
YouTube
Decoded Frontend — Zoneless Angular
Dmytro Mezhenskyi. Explicación técnica de por qué Zoneless es el futuro, cómo migrarlo y qué rompe Zone.js que Angular está eliminando gradualmente.
Contenido de la semana
- Observable contract: Producer/Observer/Subscriber, cold vs hot observables — la diferencia que determina si el stream se repite o comparte estado entre suscriptores
- Subjects: Subject (control manual), BehaviorSubject (valor inicial + replay para late subscribers), ReplaySubject (buffer N), AsyncSubject (solo último antes de complete)
- State Services con BehaviorSubject: el patrón pre-NgRx — servicio con BehaviorSubject privado y Observable público vía asObservable() — el código más frecuente en proyectos legacy
- Operators fundamentales: map, filter, tap (side effects puros), take, debounceTime, distinctUntilChanged, shareReplay — el 80% del uso real en Angular
- Error handling en RxJS: catchError (recuperarse del error), throwError (relanzar tipado), retry, EMPTY para silenciar, NEVER para stream eterno
- Unsubscription correcta: Subscription.add() para colecciones, takeUntil + Subject, takeUntilDestroyed(destroyRef) en contexto Angular — cuándo usar cada uno
Fuentes de referencia
Libro
Reactive Patterns with RxJS and Angular Signals
Lamis Chebbi, Packt. El libro más actualizado que combina RxJS operators con el modelo de Signals. Empieza por los fundamentos de Observables y Subjects.
Docs
rxjs.dev — Observables
Documentación oficial de RxJS. Las guías "Observables", "Subjects" y "Operators" son la base. Leerlos en orden antes de pasar al Marble Testing.
Abrir →Interactivo
rxmarbles.com
Visualización interactiva de todos los operadores RxJS. Imprescindible para entender el modelo temporal antes de escribir operadores reales en producción.
Abrir →YouTube
Decoded Frontend — RxJS in Angular
Dmytro Mezhenskyi. La serie más completa sobre RxJS aplicado a Angular. Empieza por "RxJS in Angular Explained" para los fundamentos con ejemplos reales.
Contenido de la semana
- Operators de aplanamiento: switchMap (cancela anterior), exhaustMap (ignora nuevos), mergeMap (todos paralelos), concatMap (en orden)
- Subjects: BehaviorSubject (con valor inicial), ReplaySubject (buffer N), AsyncSubject (solo último antes de complete)
- Higher-order Observables: combineLatest, forkJoin, withLatestFrom, race, zip — cuándo y cuáles son los trade-offs
- Custom Operators: función que retorna OperatorFunction — composición reutilizable, testing aislado del operator
- toSignal / toObservable: el bridge entre el mundo Observable y Signal en Angular — completionBehavior y las trampas
- Marble Testing: TestScheduler de RxJS, marble syntax completa (-, |, #, ^), testing temporal de streams complejos
Fuentes de referencia
Libro
Reactive Patterns with RxJS and Angular Signals
Lamis Chebbi, Packt. El libro más actualizado que combina RxJS operators con el modelo de Signals de Angular. Patrones reales de producción.
Docs
rxjs.dev
Documentación oficial de RxJS. API Reference, guías de Operators y el apartado de "Marble Testing" con TestScheduler.
Abrir →Interactivo
rxmarbles.com
Visualización interactiva de todos los operadores RxJS. Imprescindible para entender el modelo temporal de combinación.
Abrir →YouTube
Decoded Frontend — RxJS Crash Course
Dmytro Mezhenskyi. Los videos más técnicos sobre RxJS operators avanzados y Angular Signals en YouTube.
Contenido de la semana
- Reactive Forms: FormControl (con value y status como Signals desde Angular 14), FormGroup, FormBuilder — por qué template-driven forms no escalan en apps enterprise
- FormArray: listas dinámicas de controles, addControl/removeAt, validar el array completo como unidad — el caso clásico de ítems dinámicos
- Validators síncronos y asíncronos: ValidatorFn, AsyncValidatorFn, cross-field validation en el FormGroup padre — composición sin duplicación
- Custom Validators: función pura que recibe AbstractControl y retorna ValidationErrors | null — testeable sin DOM, reutilizable entre formularios
- HttpClient: get/post/put/delete tipados con genéricos, HttpParams, HttpHeaders, responseType — el cliente HTTP oficial de Angular con soporte SSR
- Interceptors funcionales (Angular 15+): HttpInterceptorFn, cadena de interceptors — auth token bearer, logging de requests, error handling global con retry
Fuentes de referencia
Docs
angular.dev — Reactive Forms
La guía oficial de Reactive Forms en Angular. FormControl, FormGroup, FormArray, validación y la API completa con ejemplos interactivos.
Abrir →Docs
angular.dev — HttpClient
Guía oficial de HttpClient. Interceptors funcionales, configuración con provideHttpClient(), testing con HttpTestingController y los nuevos providers.
Abrir →YouTube
Decoded Frontend — Reactive Forms Angular
Dmytro Mezhenskyi. Los videos más técnicos sobre Reactive Forms en Angular — FormArray dinámico, custom validators y manejo correcto de errores.
Libro
Learning Angular
Bampakos, 4ª Ed. Los capítulos de Forms y HTTP cubren el patrón completo con ejemplos enterprise que no aparecen en la documentación oficial.
Abrir →Contenido de la semana
- NgRx Store: createAction (con props tipados), createReducer (con immer), el ciclo unidireccional Action→Reducer→Store
- Selectors: createSelector con memoización automática, composed selectors, selectSignal en Angular 17+ — solo via selector
- Effects: Actions stream, ofType operator, tap vs switchMap vs exhaustMap en efectos, error handling con catchError + EMPTY
- Entity Adapter: normalización de colecciones (id como key), selectAll/selectEntities, CRUD pattern predefinido
- NgRx SignalStore: el nuevo estándar — withState, withComputed, withMethods, patchState — más conciso que el Store clásico
- Component Store: estado local de componentes complejos, alternativa para casos acotados sin Redux global
Fuentes de referencia
Docs
NgRx Documentation
ngrx.io — "Store", "Effects", "Selectors" y "SignalStore". La documentación oficial es muy completa con ejemplos reales.
Abrir →YouTube
Joshua Morony — NgRx Complete Guide
La serie más completa de NgRx en YouTube. Store, Effects, Selectors y transición a SignalStore incluida.
YouTube
Decoded Frontend — NgRx SignalStore
El más técnico sobre el nuevo SignalStore. Comparativa directa con Store clásico y casos de migración progresiva.
Docs
Redux — Three Principles
redux.js.org. Los principios fundacionales que NgRx hereda. Entenderlos hace que NgRx tenga sentido completo.
Abrir →Contenido de la semana
- Lazy Loading con standalone: loadComponent vs loadChildren, nested lazy routes — cómo el router resuelve los bundles en runtime sin configuración de webpack
- Guards funcionales: canActivate, canDeactivate, canMatch como funciones puras con inject() — eliminando clases Guard con boilerplate innecesario
- Resolvers funcionales: resolve como función que retorna Observable/Promise — datos pre-cargados antes de activar la ruta sin loading states en componentes
- Deferrable Views (@defer): triggers (on viewport, on interaction, when condition), prefetch strategies — lazy loading de UI sin split de ruta
- Preloading Strategies: PreloadAllModules, QuicklinkStrategy (solo links visibles en viewport), custom preloader — impacto en LCP y TTI
- Angular CDK: component harnesses para testing sin acceder al DOM directo, drag-and-drop, virtual scroll, overlay API
Fuentes de referencia
Docs
angular.dev — Router
Guía oficial del Router de Angular. Lazy loading, guards funcionales, resolvers y la nueva API de rutas standalone con ejemplos interactivos.
Abrir →Docs
angular.dev — @defer
La guía oficial de Deferrable Views. Todos los triggers, prefetch strategies y casos de uso con ejemplos en vivo en angular.dev.
Abrir →Docs
Angular CDK — Component Harnesses
material.angular.io. La forma correcta de testear Angular Material components sin acceder al DOM directo — romper tests por CSS es un antipatrón.
Abrir →Libro
Learning Angular
Bampakos, 4ª Ed. Los capítulos de routing avanzado con standalone y Angular CDK cubren patrones enterprise que la documentación oficial omite.
Abrir →Contenido de la semana
- Spectator: createComponent, createService, byRole/byText — la forma más limpia de testear Angular sin boilerplate de TestBed
- ng-mocks: MockComponent, MockDirective, MockPipe, MockProvider — aislamiento correcto, sin over-mocking
- TestBed avanzado: override providers en tests standalone, configureTestingModule, runInInjectionContext
- Testing Signals: TestBed.flushEffects(), assertions sobre signal values, testing de computed values y side effects
- Marble Testing en Angular: TestScheduler de RxJS, marble syntax completa, testing de NgRx Effects con virtualización temporal
- Cypress Component Testing: montar Angular components en browser real, hot reload, sin setup de E2E completo
Fuentes de referencia
Docs
Spectator Documentation
ngneat.github.io/spectator. El estándar de facto para unit testing en Angular. Mucho menos boilerplate que TestBed puro.
Abrir →Docs
ng-mocks
ng-mocks.sudo.eu. La guía más completa para mocking granular en Angular. Evita el antipatrón de NO_ERRORS_SCHEMA.
Abrir →YouTube
Decoded Frontend — Angular Testing
La serie más técnica sobre marble testing y testing de Signals en Angular. Imprescindible para el nivel arquitecto.
Docs
Cypress Component Testing — Angular
cypress.io — Montar componentes Angular en el browser real, con hot reload y Cypress DevTools.
Abrir →Contenido de la semana
- Module Federation: host (shell) y remote apps, webpack.config exposes vs remotes, shareScope para singletons
- @angular-architects/module-federation: loadRemoteModule, routing dinámico hacia remotes en runtime
- Shell Application: routing de micro-frontends, error boundaries por remote, fallback cuando el remote falla
- Shared State entre apps: custom events (CustomEvent/BroadcastChannel), shared libs via singleton en scoping
- Contratos entre shell y remote: versionado semántico de la interfaz expuesta, breaking change detection
- Deploy independiente por remote: 3 pipelines separados, registry de remotes en JSON/API, rollback de un solo app
Fuentes de referencia
Docs
@angular-architects/module-federation
La librería estándar para Module Federation en Angular. Guías de setup, dynamic federation y multi-framework.
Abrir →Libro
Building Micro Frontends
Luca Mezzalira, O'Reilly 2021. El libro de referencia sobre micro-frontends. Capítulos de Module Federation y deployment.
YouTube
Manfred Steyer — Module Federation Angular
El autor de @angular-architects. Sus videos son la fuente primaria. Buscar "Module Federation Angular 2024".
Roadmap
roadmap.sh/frontend
Nodo "Micro Frontends" con recursos y comparativa de herramientas del ecosistema.
Abrir →Contenido de la semana
- CSR vs SSR vs SSG: impacto en TTFB, LCP, SEO, complejidad operacional y costo de infraestructura — cuadro comparativo
- ISR (Incremental Static Regeneration): stale-while-revalidate para páginas, revalidación on-demand por tag
- Islands Architecture: hidratación parcial, componentes isleños solo donde hay interactividad — Astro como caso de estudio
- Streaming SSR: chunks progresivos con Suspense en React, Angular SSR con hydration y prerendering de rutas
- Angular SSR options: outputMode: static (prerendering completo) vs server (dinámico) — cuándo cada uno
- Edge Rendering: ejecutar SSR en CDN edge nodes, Vercel Edge Functions, Cloudflare Workers — trade-off latencia vs cold starts
Fuentes de referencia
Docs
Next.js — Rendering Docs
nextjs.org/docs. CSR, SSR, SSG e ISR con ejemplos prácticos del App Router. La referencia más completa del ecosistema.
Abrir →Docs
angular.dev — SSR Guide
Guía oficial de Angular SSR. outputMode, hydration event replay, prerendering y cuándo activar cada opción.
Abrir →YouTube
Fireship — SSR vs SSG vs CSR explained
"Rendering patterns explained". El más claro sobre trade-offs con diagramas visuales y ejemplos por framework.
Docs
docs.astro.build — Islands
Islands Architecture en la práctica con Astro. La implementación más clara del patrón de hidratación parcial.
Abrir →Contenido de la semana
- Cuándo micro-frontends: múltiples equipos con releases independientes — y cuándo NO agregar esta complejidad
- Module Federation 2.0: nuevo runtime, dynamic federation, type-safe sharing, version management entre equipos
- Single-SPA: orchestrator-based approach, parcels para componentes transversales, múltiples frameworks en una página
- Contratos entre apps: API de eventos compartidos, shared component libraries con versioning semántico
- Cross-app Routing: deep linking entre micro-frontends, URL como único contrato de navegación entre equipos
- Pipelines por app: CI/CD independiente por remote, registry de remotes en CDN/API, rollback granular
Fuentes de referencia
Libro
Building Micro Frontends
Luca Mezzalira, O'Reilly 2021. La referencia definitiva. Capítulos de composición, routing, governance y deployment strategy.
Abrir →Docs
module-federation.io
La nueva documentación oficial de Module Federation 2.0. Arquitectura, configuración y ecosistema actualizado.
Abrir →YouTube
Jack Herrington — Micro-Frontend Architecture
La serie más técnica y práctica de micro-frontends disponible. Casos reales con Angular y React.
Docs
single-spa.js.org
Documentación oficial con guías por framework (Angular, React, Vue). Alternative approach al Module Federation.
Abrir →Contenido de la semana
- Design Tokens: tokens semánticos vs primitivos, W3C DTCG format, Style Dictionary — pipeline completo de tokens a CSS/JS/iOS
- Component API Design: composición vs configuración, variance con class-variance-authority (CVA), compound pattern y slots
- Storybook 8: stories como documentación viva, Controls, Decorators, Accessibility addon, MSW integration en stories
- Chromatic: visual regression en CI, story-by-story diffing, workflow de review automático, umbral de cambio configurable
- Publishing en npm: semantic versioning, Changesets para CHANGELOG automático, peer dependencies y bundling con Vite lib mode
- Web Components como delivery mechanism: LitElement, framework-agnostic components, adoptabilidad cross-stack
Fuentes de referencia
Docs
Storybook Documentation
storybook.js.org. Secciones "Writing Stories", "Testing" y "Addons" son esenciales. La más completa del ecosistema.
Abrir →Docs
Style Dictionary
amzn.github.io/style-dictionary. El estándar de la industria para token pipelines. Transforma tokens a cualquier formato.
Abrir →Docs
W3C Design Tokens Community Group
w3.org — Spec del formato estándar de design tokens (DTCG). La base para interoperabilidad entre Figma y código.
Abrir →YouTube
Zack Jackson — Design System & Module Federation
El creador de Module Federation sobre design systems distribuidos y su integración con Storybook y Chromatic.
Contenido de la semana
- Core Web Vitals: LCP (Largest Contentful Paint), INP (Interaction to Next Paint, reemplazó FID en 2024), CLS (Layout Shift)
- RUM vs Synthetic: Web Vitals API en producción real (CrUX) vs Lighthouse — por qué el Lab no refleja el campo
- Resource Hints: preconnect, preload (LCP images), prefetch (next route), modulepreload — cuándo y en qué orden
- Service Workers: Cache First, Network First, Stale While Revalidate — Workbox para no escribirlos desde cero
- Image Pipeline: Angular ngOptimizedImage, srcset + sizes, lazy loading nativo, AVIF/WebP, responsive images pipeline
- Performance Budgets: presupuestos por métrica en lighthouse-ci, alertas en GitHub Actions por degradación de score
Fuentes de referencia
Docs
web.dev/vitals
Google. La guía más actualizada sobre Core Web Vitals. Thresholds, herramientas de medición y optimización por métrica.
Abrir →Libro
High Performance Browser Networking
Ilya Grigorik, O'Reilly. Capítulos de HTTP/2, Resource Hints y browser networking. Gratuito en hpbn.co.
Abrir →Docs
Lighthouse CI
github.com/GoogleChrome/lighthouse-ci. Performance budgets en pipelines CI. Integración con GitHub Actions y comentarios en PRs.
Abrir →YouTube
Theo Browne — Core Web Vitals
"Optimizing Core Web Vitals in production". Casos reales en apps de Next.js y Angular con métricas antes/después.
Contenido de la semana
- BFF (Backend for Frontend): por qué el frontend no debería hablar directo a microservicios — aggregation y shaping
- tRPC: end-to-end type safety sin código generado, procedimientos, queries y mutations con React Query adapter
- Apollo Client: cache normalizado (normalize por __typename + id), optimistic updates, polling, subscriptions
- Optimistic Updates en TanStack Query: useMutation, onMutate, rollback con onError — UX de baja latencia percibida
- Cache Invalidation: invalidateQueries granular, staleTime strategies por endpoint, refetchOnWindowFocus
- WebSockets vs SSE: cuándo usar cada uno, reconnection exponential backoff, state management de realtime data
Fuentes de referencia
Docs
tRPC Documentation
trpc.io. La forma más elegante de APIs type-safe en full-stack TypeScript. "Getting Started" y "Optimistic Updates".
Abrir →Docs
Apollo Client — Caching
apollographql.com/docs/react. La sección de "Caching" es la más crítica. cache.writeFragment, optimistic responses.
Abrir →Docs
TanStack Query — Mutations
tanstack.com/query. "Mutations" y "Optimistic Updates" guides. El patrón completo para server-side sync seguro.
Abrir →YouTube
Theo Browne — tRPC is amazing
Contexto del ecosistema, cuándo tRPC brilla y cuándo REST/GraphQL sigue siendo la elección correcta.
Contenido de la semana
- XSS en el browser: reflected, stored, DOM-based — cómo Angular mitiga automáticamente y dónde sigue siendo vulnerable
- CSP (Content Security Policy): headers, nonces para inline scripts, strict-dynamic — configuración real en Nginx/Vercel
- Auth en SPA: OAuth 2.0 + PKCE en aplicaciones SPA, token storage seguro (cookie HttpOnly es la respuesta correcta)
- WCAG 2.2 AA: criterios de percepción, operabilidad y robustez — los 10 más relevantes para SPAs interactivas
- ARIA Authoring Practices Guide: roles, properties, states — patrones del W3C para Modal, Accordion, Combobox, Tabs
- axe-core en CI: @axe-core/playwright en E2E, @axe-core/react en unit tests — configurar severidad y desactivar falsos positivos
Fuentes de referencia
OWASP
OWASP Top 10 — Frontend
owasp.org. Vulnerabilidades más críticas con perspectiva frontend. A01 (Broken Access), A03 (Injection), A07 (XSS).
Abrir →Docs
ARIA Authoring Practices Guide
w3.org/WAI/ARIA/apg. Los patrones oficiales del W3C para componentes interactivos accesibles con ARIA.
Abrir →Herramienta
WebAIM Contrast Checker
webaim.org. WCAG AA/AAA contrast ratios en tiempo real. Básico para accessibility — la regla más violada.
Abrir →Docs
axe-core Rules Reference
dequeuniversity.com/rules/axe. Qué valida cada regla, severidad e impacto. Esencial para configurar el CI sin ruido.
Abrir →Contenido de la semana
- Testing Trophy: integration tests (foco principal) > unit (lógica pura) > E2E (flujos críticos) — la proporción correcta
- Contract Testing con Pact.js: contrato consumer-driven entre frontend y backend, independencia de deploys entre equipos
- Visual Regression CI: Chromatic en GitHub Actions, diff automático por story, workflow de aprobación de cambios visuales
- GitHub Actions avanzado: matrix builds, reusable workflows, caché de node_modules con actions/cache, artifacts entre jobs
- Feature Flags: LaunchDarkly, Statsig, OpenFeature estándar — gradual rollout, kill switch, A/B testing por usuario
- Preview Deployments y Canary: Vercel preview por PR, Cloudflare Pages, estrategia de promotion gradual a producción
Fuentes de referencia
Docs
Pact.js Documentation
docs.pact.io. Contract testing consumer-driven. Cambia el approach de mocking hacia contratos verificables en CI.
Abrir →Docs
Chromatic — Visual Testing
chromatic.com/docs. Visual testing en CI, UI review workflow y integración con Storybook 8.
Abrir →Docs
OpenFeature Specification
openfeature.dev. Estándar open-source para feature flags. Independiente de proveedor (LaunchDarkly, Statsig, etc.).
Abrir →Docs
GitHub Actions — Reusable Workflows
docs.github.com/actions. Reusable workflows, environments con protection rules y caché avanzado de dependencias.
Abrir →Contenido de la semana
- Diseño documentado con ADRs: una decisión técnica por componente del sistema (shell, remotes, design system, CI/CD)
- C4 Model nivel Container y Component: diagrama de la arquitectura completa con Structurizr DSL o Mermaid C4
- Design system en Nx monorepo: tokens semánticos, componentes para Angular, Storybook por librería
- Module Federation: shell Angular + 2 remotes con singletons compartidos y routing dinámico
- Pipelines independientes: GitHub Actions workflows, registry de remotes en JSON/API, rollback por app
- Observabilidad por micro-frontend: Web Vitals API separada por app, Sentry con source maps, alertas por remote
Fuentes de referencia
Libro
Building Micro Frontends
Mezzalira. Capítulos finales: governance, ownership por equipo, decisiones de long-term maintenance y evolución.
Docs
C4 Model
c4model.com. Los 4 niveles de diagramas de arquitectura con Structurizr — versionables en git como código.
Abrir →YouTube
Manfred Steyer — Full Micro Frontend App
Proyecto completo con Angular shell + remotes en Module Federation. Desde cero hasta deploy con pipelines.
Docs
nx.dev — Monorepo Setup
Nx documentation. Generators, affected builds, computation cache y CI integration con GitHub Actions.
Abrir →06 — Biblioteca de referencia
Libros recomendados
Recursos esenciales organizados por fase del programa. Los que ya tenes marcados son los que debes leer primero.
JavaScript: The Definitive Guide
Fase 1 · CoreLa referencia definitiva del lenguaje. Caps. 12–14 para internals avanzados
Effective TypeScript
Fase 1 · CoreActualizado para TS 5.x. Items 1–25 son los mas importantes
Clean Code in JavaScript
Fase 1 · CorePatterns de arquitectura y código limpio en JS moderno
Learning Angular
Fase 2 · AngularEl libro mas actualizado de Angular. Cubre DI, Signals y Standalone
Reactive Patterns with RxJS and Angular Signals
Fase 2 · AngularCombina RxJS operators con Signals. Patrones de produccion
Building Micro Frontends
Fase 3 · ArquitecturaLa referencia definitiva de micro-frontends. Semanas 12 y 14
High Performance Browser Networking
Fase 3 · PerformanceGratuito en hpbn.co · HTTP/2, Resource Hints y browser networking
07 — Timeline visual
