4h/día · Lun–Vie · 8 Jun 2026 → 3 Ago 2026
Frontend
Architect
4 horas diarias, lunes a viernes. 160 horas de contenido en 8 semanas. Angular enterprise y React (Hooks, Redux Toolkit, Zustand) con la misma profundidad, antes de la fase de arquitectura a escala.
0% completado
8
Semanas
160h
Totales
4
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 — React Avanzado
Mismo nivel, segundo framework
Hooks a fondo, Context y sus límites reales, Redux Toolkit y Zustand con comparativa directa contra NgRx, routing con data APIs, testing con RTL y las features concurrentes que sostienen a Next.js. Misma profundidad que Angular, para pensar en patrones y no en sintaxis de un solo framework.
Sem 4
React Foundations
React · JSX, componentes y reconciliation
JSX, el modelo de componentes por función, composición vía children y el algoritmo de reconciliation con Fiber. La base mental antes de tocar un solo hook.
Sem 4
Hooks a Fondo
React · El corazón del framework
useState, useEffect, useMemo/useCallback, useRef y custom hooks. Entender por qué el orden de llamada importa, no solo cómo se usan.
Sem 4–5
Context API & Compound Components
React · Estado compartido sin librerías
Context resuelve menos de lo que parece: re-renderiza todos los consumidores sin selectors. Entender ese límite es lo que justifica el salto a Redux Toolkit o Zustand.
Sem 5
Redux Toolkit
React · State management enterprise
El estándar oficial de Redux desde 2019. createSlice, Immer bajo el capó y RTK Query — el mismo patrón Flux que NgRx, con sintaxis distinta.
Sem 5
Zustand & Matriz de Decisión
React · State management minimalista
Un store como custom hook, sin Provider ni boilerplate. Y la pregunta que realmente importa: ¿Context, Zustand o Redux Toolkit? Depende del equipo, no de la moda.
Sem 5–6
React Router + TanStack Query
React · Routing y data fetching
Loaders y actions como forma declarativa de data fetching ligado a la ruta, más TanStack Query como el HttpClient + interceptors + caching de React.
Sem 6
React Testing Library & MSW
React · Testear como el usuario
RTL con queries priorizadas por rol, user-event para interacciones reales y MSW para mockear a nivel de red. Vitest como runner, igual que en Angular desde la v21.
Sem 6
Concurrent Features & Server Components
React · El puente hacia Next.js
Suspense, startTransition y React Server Components — el cambio de paradigma más grande desde los hooks, y la base técnica de "Rendering Strategies" que viene en la fase de Arquitectura.
Proyecto Migrar el state management de un feature de Context a Zustand y a Redux Toolkit — comparar el mismo problema resuelto de 3 formas.
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.
Sem 7
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 7–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.
Sem 7–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, Storybook documentado y publicación en npm.
Sem 7–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.
Sem 7–8
API Integration Patterns
Arquitectura · Comunicación frontend-backend
Cómo el frontend se comunica con el backend de forma robusta, escalable y mantenible.
Sem 7–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.
Sem 7–8
Testing & CI/CD Architecture
Arquitectura · Pipeline completo
Estrategia de testing y pipeline de delivery que da confianza real sin frenar al equipo.
05 — 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.
06 — Semana tipo
Distribucion semanal
20 horas semanales en 4 horas diarias de lunes a viernes. Cada modulo de contenido (~5-9h) se completa en poco mas de 1 dia. Los 26 modulos de la ruta (Core, Angular, React y Arquitectura) se cubren en 8 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 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 Padolsey, Packt 2020. 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 código legacy 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
- Control flow moderno (@if/@for/@switch): reemplaza *ngIf/*ngFor/*ngSwitch como estándar desde Angular 17 — mejor performance y sin necesidad de CommonModule
Fuentes de referencia
Libro
Learning Angular
Aristeidis Bampakos, 5ª Ed. 2025. Packt. Anatomía de componentes, lifecycle hooks y control flow moderno con standalone por defecto.
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 por defecto: bootstrapApplication, provideRouter — los NgModules son hoy la excepción, no la norma; solo se ven en código legacy
- Angular Signals: signal(), computed(), effect() — el modelo reactivo por defecto de Angular; Zoneless es el comportamiento estándar desde la v21
- Signal Inputs/Outputs: input(), output(), model() — la forma estándar de declarar entradas/salidas de un componente, no un "reemplazo" sino la API vigente
- OnPush ChangeDetectionStrategy: por qué sigue siendo relevante incluso en zoneless, signal() como disparador de detección de cambios
Fuentes de referencia
Libro
Learning Angular
Aristeidis Bampakos, 5ª Ed. 2025. Packt. Capítulos de DI, Standalone y Signals. Actualizado para el "Angular Renaissance" (v17+).
Abrir →Docs
angular.dev — DI y Signals
La 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 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: la forma estándar de declarar entradas desde Angular 17 — required(), alias, transform para convertir el valor entrante
- output() signal-based: OutputEmitterRef — la API vigente para eventos de salida, tipada y sin decoradores en standalone
- model(): two-way binding reactivo con Signals — la alternativa a [(ngModel)] para componentes propios, composable y con historial de cambios observable
- linkedSignal(): estable desde Angular 20. Signal derivado que acepta escritura manual — casos de uso reales: paginación que se resetea, selección dependiente de otro filtro
- httpResource() (estable desde Angular 21): fetching declarativo sobre HttpClient con estados value()/isLoading()/error() como Signals — resource() es el primitivo genérico del que deriva
- Zoneless por defecto (Angular 21+): provideZonelessChangeDetection() ya no es necesario en apps nuevas; Zone.js pasa a ser opt-in explícito para proyectos legacy con provideZoneChangeDetection()
Fuentes de referencia
Docs
angular.dev — Signal Inputs & Outputs
Guía oficial de las APIs de signals para inputs y outputs — la referencia para escribir componentes standalone modernos.
Abrir →Docs
angular.dev — resource() y httpResource()
Documentación de las APIs de fetching declarativo basado en Signals, incluyendo rxResource() para interoperar con RxJS.
Abrir →Docs
angular.dev — Zoneless
Guía oficial de Zoneless Angular: qué cambia, cómo migrar una app legacy y por qué es el comportamiento por defecto desde la v21.
Abrir →YouTube
Joshua Morony — Angular Signals Series
La serie más clara del ecosistema. Desde signal() hasta input()/output(), model(), linkedSignal() y httpResource() con casos reales.
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() — todavía frecuente en proyectos sin NgRx
- Operators fundamentales: map, filter, tap, take, debounceTime, distinctUntilChanged, shareReplay — el 80% del uso real en Angular
- Operators de aplanamiento: switchMap (cancela anterior), exhaustMap (ignora nuevos), mergeMap (paralelo), concatMap (en orden) — y Higher-order: combineLatest, forkJoin, withLatestFrom
- Custom Operators y error handling: catchError, retry con backoff, composición reutilizable y testeable de forma aislada
- toSignal() / toObservable(): el bridge estándar entre RxJS y Signals — completionBehavior y las trampas más comunes
- takeUntilDestroyed(destroyRef): el patrón moderno de unsubscription, reemplaza el manual takeUntil + Subject; Marble Testing (TestScheduler) queda como herramienta puntual para librerías compartidas, no para el día a día
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. Patrones reales de producción.
Docs
rxjs.dev
Documentación oficial de RxJS: Observables, Subjects, Operators y Marble Testing con TestScheduler, en un único lugar.
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, desde fundamentos hasta operators avanzados y el bridge con Signals.
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: 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, 5ª Ed. 2025. 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 SignalStore: el estándar actual para state management en Angular — withState, withComputed, withMethods, patchState, mucho menos boilerplate que el Store clásico
- Entity management en SignalStore: withEntities, normalización de colecciones, CRUD pattern predefinido
- Store clásico (Actions/Reducers/Effects/Selectors): createAction, createReducer, createSelector memoizado — sigue siendo relevante en código legacy y para equipos con background Redux
- Effects: Actions stream, ofType, tap vs switchMap vs exhaustMap en efectos, error handling con catchError + EMPTY
- Migración progresiva: cómo convive SignalStore con Store clásico en la misma app durante una migración incremental
- Component Store / estado local: estado acotado a un componente complejo, alternativa cuando no hace falta estado global
Fuentes de referencia
Docs
NgRx Documentation
ngrx.io — "Signals" (SignalStore) y "Store" clásico. Documentación oficial completa y activamente mantenida, alineada a los releases de Angular.
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 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 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, 5ª Ed. 2025. 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
- Vitest como test runner por defecto de Angular desde la v21 — Karma queda deprecado (sin nuevas features ni fixes); migración de un proyecto existente con la guía oficial
- Spectator: createComponent, createService, byRole/byText — compatible con Jasmine, Jest y Vitest, mucho menos boilerplate que TestBed puro
- ng-mocks: MockComponent, MockDirective, MockPipe, MockProvider — aislamiento correcto, sin over-mocking ni NO_ERRORS_SCHEMA
- TestBed avanzado: override providers en tests standalone, configureTestingModule, runInInjectionContext
- Testing Signals: assertions sobre signal values, testing de computed() y de efectos con effect()
- Cypress Component Testing: montar Angular components en un browser real con hot reload, para casos que necesitan DOM/CSS real y no solo jsdom
Fuentes de referencia
Docs
angular.dev — Migrating to Vitest
Guía oficial de migración de Karma a Vitest. El nuevo default de la CLI para proyectos Angular.
Abrir →Docs
Spectator Documentation
ngneat.github.io/spectator. El estándar de facto para unit testing en Angular, con soporte confirmado para Vitest.
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 testing de Signals y estrategias de testing en Angular moderno. Imprescindible para el nivel arquitecto.
Contenido de la semana
- Cuándo micro-frontends: múltiples equipos con releases independientes — y cuándo NO agregar esta complejidad
- Module Federation: host (shell) y remote apps, exposes vs remotes, shareScope para singletons
- @angular-architects/module-federation: loadRemoteModule, routing dinámico hacia remotes en runtime — la librería estándar para Angular
- 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 conviviendo en una página
- Shell Application: routing de micro-frontends, error boundaries por remote, fallback cuando el remote falla
- Contratos entre equipos: shared component libraries con versionado semántico, breaking change detection entre shell y remotes
- Deploy independiente: pipelines por remote, registry de remotes en JSON/API, rollback granular sin afectar al resto de la 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 composición, routing, contratos y deployment.
Docs
module-federation.io
La documentación oficial de Module Federation 2.0. Arquitectura, configuración y ecosistema actualizado.
Abrir →YouTube
Manfred Steyer — Module Federation Angular
El autor de @angular-architects. Sus videos son la fuente primaria sobre Module Federation aplicado a Angular.
Contenido de la semana
- JSX no es HTML: Babel lo transforma a React.createElement/jsx-runtime, expresiones embebidas, fragments — el mismo tipo de "syntactic sugar" que el template compiler de Angular
- Modelo de componentes: function components como estándar, props inmutables de solo lectura, composición vía children — el equivalente conceptual al content projection (ng-content) de Angular
- Reconciliation y Fiber: el algoritmo de diffing, keys en listas — por qué usar el índice como key es un anti-patrón real, no una sugerencia de estilo
- Qué dispara un render vs qué actualiza el DOM: por qué "render" no es "repintar", React.memo para evitar renders innecesarios — el equivalente a OnPush pero sin declararlo explícito
- StrictMode: doble invocación intencional en desarrollo para exponer side effects impuros — no es un bug, es una herramienta de detección
- Setup 2026: Vite + React como estándar para SPAs, frameworks (Next.js) cuando se necesita SSR/RSC — create-react-app está oficialmente deprecado
Fuentes de referencia
Docs
react.dev — Learn
La documentación oficial reescrita desde cero en 2023. La referencia definitiva, con sandboxes interactivos en cada página.
Abrir →Libro
Learning React, 2ª Ed.
Alex Banks & Eve Porcello, O'Reilly 2020. Fundamentos sólidos de componentes, JSX y el modelo mental de React.
YouTube
Codevolution — React JS Course
La serie más completa y actualizada sobre fundamentos de React, con ejemplos progresivos y buenas prácticas.
Roadmap
roadmap.sh/react
Mapa completo de React con recursos por nodo — fundamentos, hooks, ecosistema y patrones avanzados.
Abrir →Contenido de la semana
- useState y batching: actualizaciones asíncronas y agrupadas (automatic batching desde React 18), updater functions cuando el nuevo estado depende del anterior
- useEffect completo: array de dependencias, función de cleanup, el error más común (dependencias faltantes) y por qué el linter no es opcional
- useLayoutEffect vs useEffect: cuándo el timing síncrono antes del paint importa — casos reales, no la opción por defecto
- useMemo y useCallback: cuándo memoizar realmente aporta (referencias estables para props, cálculos costosos) y cuándo es optimización prematura sin medir
- useRef: refs al DOM vs valores mutables que no disparan render — el escape hatch para imperative code
- Custom hooks: extracción de lógica reutilizable, convención useX, composición de hooks — el equivalente a un servicio Angular pero sin DI ni singleton implícito
- Rules of Hooks: por qué el orden de llamada importa (linked list interna de Fiber), eslint-plugin-react-hooks como gate obligatorio, no opcional
Fuentes de referencia
Docs
react.dev — Reference: Hooks
Referencia oficial completa de cada hook con ejemplos y "Pitfalls" documentados explícitamente por el equipo de React.
Abrir →YouTube
Web Dev Simplified — useEffect Explained
La explicación más clara del ciclo de vida de useEffect y los errores más comunes con dependencias.
Docs
eslint-plugin-react-hooks
El linter oficial que hace cumplir las Rules of Hooks. Configuración y por qué nunca debe desactivarse.
Abrir →Interactivo
useHooks.com
Catálogo de custom hooks reales con código fuente explicado — buena referencia de patrones de extracción.
Abrir →Contenido de la semana
- createContext/useContext: Provider pattern, valores por defecto, composición de múltiples providers
- El problema real de Context: cualquier cambio en el value re-renderiza TODOS los consumidores — no hay selectors nativos, no hay memoización granular
- Compound Components pattern: componentes que comparten estado implícito vía Context (ej. Tabs/Tab, Accordion/Item) — composición explícita sobre configuración por props
- Render props y children as function: patrones previos a los hooks, todavía presentes en librerías legacy — reconocerlos para mantener código existente
- Context vs DI de Angular: Context NO es inyección de dependencias real — no hay jerarquía de tokens, no hay multi-providers, no hay scopes — es props drilling con azúcar sintáctico
- Cuándo Context alcanza: estado que cambia poco (theme, locale, usuario autenticado) — la frontera exacta antes de necesitar una librería de estado externa
Fuentes de referencia
Docs
react.dev — Passing Data Deeply with Context
Guía oficial de Context, incluyendo la sección "Before you use context" que explica honestamente sus límites.
Abrir →Blog
kentcdodds.com — Compound Components
El artículo de referencia sobre el patrón, escrito por uno de los mantenedores históricos del ecosistema React Testing Library.
Abrir →YouTube
Jack Herrington — Context API Deep Dive
Explicación técnica de por qué Context re-renderiza de más y cómo mitigarlo sin salir del propio React.
Blog
react.dev — Scaling Up with Reducer and Context
Patrón oficial useReducer + Context como state management "casero" antes de dar el salto a una librería externa.
Abrir →Contenido de la semana
- Por qué Redux "clásico" (mapStateToProps, connect, action types como strings) quedó obsoleto — Redux Toolkit es el estándar oficial desde 2019
- createSlice: reducers + action creators autogenerados a partir de un solo objeto — elimina el boilerplate histórico de Redux
- Immer bajo el capó: mutación aparente del estado dentro de un reducer que en realidad produce un nuevo estado inmutable vía Proxy
- configureStore: setup con DevTools y middleware (thunk) habilitados por defecto, sin configuración manual
- RTK Query: data fetching + caching + invalidación integrados en el store — el equivalente funcional a NgRx + un HTTP client combinados
- Comparación directa con NgRx: Actions/Reducers/Selectors son el mismo patrón Flux con distinta sintaxis — Effects ≈ RTK middleware/thunks, memoized selectors ≈ createSelector
Fuentes de referencia
Docs
Redux Toolkit — Official Docs
redux-toolkit.js.org. La documentación oficial y el único approach recomendado por el equipo de Redux desde 2019.
Abrir →Docs
RTK Query — Overview
Guía oficial de RTK Query: createApi, endpoints, cache tags e invalidación automática.
Abrir →YouTube
Codevolution — Redux Toolkit Tutorial
Serie completa de RTK desde cero, incluyendo RTK Query y patrones de slices por dominio.
Blog
Redux — Style Guide
redux.js.org. Convenciones oficiales de estructura de carpetas y patrones recomendados a escala enterprise.
Abrir →Contenido de la semana
- Zustand: create() sin Provider, sin boilerplate de actions/reducers — un store es literalmente un custom hook
- Selectors: suscripción granular a slices del estado para evitar re-renders — el equivalente a los selectors memoizados de NgRx pero sin ceremonia
- Middleware: persist (localStorage/sessionStorage), devtools (Redux DevTools compatible), immer para mutación aparente igual que en RTK
- Slices pattern en Zustand: dividir un store grande en slices combinables — cómo escalar sin perder la simplicidad inicial
- Matriz de decisión real: Context (estado simple, poco cambio) vs Zustand (estado compartido sin ceremonia) vs Redux Toolkit (equipos grandes, time-travel debugging, ecosistema de middleware maduro)
- Comparación con NgRx SignalStore: Zustand es filosóficamente más cercano a SignalStore (API mínima, sin Actions/Reducers explícitos) que a NgRx clásico
Fuentes de referencia
Docs
Zustand — Official Docs
zustand.docs.pmndrs.io. Documentación oficial de pmndrs — API completa, middleware y patrones de slices.
Abrir →GitHub
pmndrs/zustand
Repositorio oficial con ejemplos reales en el README — la fuente más directa para entender la filosofía minimalista.
Abrir →YouTube
Jack Herrington — Zustand vs Redux
Comparativa técnica y honesta entre ambas librerías con casos de uso reales, no solo sintaxis.
Blog
State Management Comparison
Comparativa actualizada de Context, Zustand, Redux Toolkit y Jotai con matrices de decisión por tamaño de equipo y complejidad.
Abrir →Contenido de la semana
- React Router v7 en "framework mode": loaders y actions como forma declarativa de data fetching ligado a la ruta — el equivalente a los resolvers funcionales de Angular
- Nested routes y layouts: Outlet, rutas anidadas que comparten UI persistente entre navegaciones
- Protected routes: patrón de loader que redirige si no hay sesión — el equivalente funcional a un canActivate guard
- TanStack Query: useQuery, staleTime vs gcTime, refetchOnWindowFocus — el reemplazo de HttpClient + interceptors + async pipe combinados en una sola librería
- useMutation: onMutate para optimistic updates, invalidateQueries granular por queryKey, rollback con onError
- Comparación con el ecosistema Angular: React Router ≈ Angular Router (guards/resolvers funcionales), TanStack Query ≈ HttpClient + RxJS operators + caching manual con shareReplay
Fuentes de referencia
Docs
React Router — Official Docs
reactrouter.com. Guía oficial de framework mode, loaders, actions y data APIs desde la v7.
Abrir →Docs
TanStack Query — Official Docs
tanstack.com/query. La referencia definitiva de queries, mutations, caching e invalidación — agnóstica de framework.
Abrir →YouTube
Codevolution — React Router v7
Serie actualizada al framework mode: loaders, actions, error boundaries y nested layouts.
YouTube
TkDodo — TanStack Query Blog Series
El mantenedor de TanStack Query explicando internals, caching strategies y anti-patrones comunes.
Contenido de la semana
- Filosofía de RTL: "test como lo usa el usuario" — queries priorizadas (getByRole > getByLabelText > getByTestId como último recurso)
- user-event vs fireEvent: por qué user-event simula interacciones reales del navegador (focus, hover, keyboard) y fireEvent no
- MSW (Mock Service Worker): interceptar requests a nivel de red en vez de mockear fetch/axios — tests que no conocen la implementación HTTP interna
- Testing de custom hooks: renderHook de @testing-library/react, act() para envolver actualizaciones de estado
- Vitest como test runner: el mismo runner que Angular adoptó como default desde la v21 — consistencia de tooling entre ambos ecosistemas
- Qué NO testear: implementation details (estado interno, nombres de props internas) — tests frágiles que rompen con refactors que no cambian comportamiento
Fuentes de referencia
Docs
Testing Library — React
testing-library.com/react. Documentación oficial, incluyendo la guía "Common Mistakes" escrita por Kent C. Dodds.
Abrir →Docs
Mock Service Worker (MSW)
mswjs.io. Interceptación de requests a nivel de red, compatible con cualquier test runner y con el browser en desarrollo.
Abrir →Blog
kentcdodds.com — Common Testing Mistakes
El artículo de referencia sobre qué NO hacer con RTL, escrito por el creador original de la librería.
Abrir →Docs
Vitest — Testing React
vitest.dev. Configuración de Vitest con jsdom/happy-dom y React Testing Library.
Abrir →Contenido de la semana
- Suspense para data fetching: fallback UI declarativo mientras un componente hijo "suspende", integración con TanStack Query y frameworks
- Concurrent rendering: startTransition para marcar actualizaciones como no urgentes, useDeferredValue para inputs que no deben bloquear el render
- useOptimistic: UI optimista nativa de React sin librería externa, para mutaciones que se sienten instantáneas
- React Server Components (RSC): componentes que se ejecutan solo en el servidor, cero JS enviado al cliente para esa parte del árbol — el cambio de paradigma más grande desde los hooks
- El modelo de Next.js App Router: Server Components por defecto, "use client" como boundary explícito, streaming SSR con Suspense
- use() hook: lectura condicional de promises y de Context — por qué rompe las Rules of Hooks tradicionales de forma intencional y controlada
- Cierre conceptual: esto es la base técnica de "Rendering Strategies" en la fase de Arquitectura que sigue — CSR/SSR/RSC no son buzzwords, son este conjunto de primitivas
Fuentes de referencia
Docs
react.dev — Suspense
Referencia oficial de Suspense para data fetching y concurrent features — startTransition, useDeferredValue, useOptimistic.
Abrir →Docs
Next.js — Server Components
nextjs.org/docs. La implementación de referencia de RSC en producción, con la distinción Server vs Client Components explicada a fondo.
Abrir →YouTube
Theo Browne — React Server Components Explained
La explicación más honesta sobre qué resuelven RSC y qué complejidad nueva introducen — sin marketing.
Blog
react.dev — use() API
Documentación oficial del hook use(), incluyendo por qué puede llamarse condicionalmente a diferencia del resto de hooks.
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
- 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:2025 — Frontend
owasp.org/Top10/2025. Vulnerabilidades más críticas con perspectiva frontend: Broken Access Control, Security Misconfiguration, Injection.
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 →07 — 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 · AngularActualizado para Angular 19 (standalone por defecto, Signals, control flow). El resto del salto hasta la v21 lo cubre angular.dev
Reactive Patterns with RxJS and Angular Signals
Fase 2 · AngularCombina RxJS operators con Signals. Patrones de produccion
Learning React, 2ª Ed.
Fase 3 · ReactFundamentos de componentes, JSX y hooks. Complementar con react.dev para las features concurrentes 2024+
Building Micro Frontends
Fase 4 · ArquitecturaLa referencia definitiva de micro-frontends
High Performance Browser Networking
Fase 4 · PerformanceGratuito en hpbn.co · HTTP/2, Resource Hints y browser networking
08 — Timeline visual
