Sep 2027 → Dic 2027
Patrones de Diseno
Frontend
Roadmap agnostico al framework. De fundamentos OOP y SOLID hasta patrones GoF aplicados al desarrollo frontend moderno.
12
Semanas
180h
Totales
6
Fases
15h
Por semana
Scroll
01 — Fases del programa
Roadmap completo
6 fases progresivas que cubren desde fundamentos OOP y SOLID hasta patrones GoF aplicados en Angular.
00
Fundamentos Previos
Semanas 1-2
Repasa OOP en JavaScript/TypeScript: clases, prototipos, herencia, polimorfismo, encapsulamiento. Luego aplica los 5 principios SOLID en contexto frontend.
Proyecto Sistema de notificaciones en TS puro: NotificationService con EmailNotifier, SMSNotifier y PushNotifier como estrategias intercambiables. Aplica los 5 principios SOLID.
01
Patrones Creacionales
Semanas 3-4
Singleton, Factory Method, Abstract Factory y Builder. Controla como se crean los objetos en tu aplicacion sin acoplar la logica de instanciacion.
Proyecto Dashboard Builder: DashboardConfig Singleton, WidgetFactory para crear ChartWidget, TableWidget y KPIWidget, y DashboardBuilder con method chaining.
02
Patrones Estructurales
Semanas 5-6
Decorator, Facade, Proxy, Adapter y Composite. Organiza la composicion de objetos para simplificar interfaces y extender comportamiento sin herencia.
Proyecto Capa de datos: ApiAdapter normaliza respuestas de dos APIs, HttpProxy agrega cache con TTL, DataFacade expone interfaz unificada.
03
Patrones de Comportamiento
Semanas 7-8
Observer, Strategy, Command, Mediator, Template Method y Chain of Responsibility. Gestiona la comunicacion y responsabilidades entre objetos.
Proyecto Editor de texto con historial: Command con execute/undo, Observer para sincronizar UI, Strategy para exportar como txt, json o html.
04
Arquitectura de UI
Semanas 9-10
MVC, MVVM, Flux/Redux y Container/Presentational son la base de los frameworks modernos. La semana 10 cubre Event Bus, Pub/Sub y Clean Architecture aplicada al frontend.
Proyecto Todo app con MVC + microstore Flux (acciones tipadas, reducer puro, store observable) + Event Bus para comunicación entre módulos. Sin frameworks, solo HTML + TS.
05
Aplicar en Angular
Semana 11
Reconoce cada patron dentro del framework: Singleton en services, Decorator en @Component, Observer en RxJS, Proxy en Interceptors, Strategy en DI, Repository en data services.
Proyecto Refactorización documentada: toma un componente Angular real y aplica al menos 5 patrones conscientemente, documentando qué patrón resuelve qué problema.
06
Aplicar en React
Semana 12
React tiene sus propios patrones idiomáticos. HOC como Decorator, Custom Hooks como Strategy, Context como Facade, Render Props como Template Method.
Proyecto Final Implementa el mismo dominio de negocio en Angular y React, identificando qué patrones usa cada framework de forma implícita y explícita.
02 — Semana tipo
Distribucion semanal
3 horas diarias de lunes a viernes. Cada dia cubre teoria + implementacion practica + documentacion. Los viernes son siempre practica o revision del patron de la semana.
Bloque diario — 3h
📖 Teoria del patron + diagrama UML1h
⌨️ Implementacion en TypeScript con caso real1h 30m
📝 Documentar decision y alternativas30m
Contenido de la semana
- Clases vs prototipos en JavaScript: cómo JS usa cadena de prototipos bajo el capó, class syntax como azúcar sintáctica
- Los 4 pilares OOP: Encapsulamiento (private/protected/public en TS), Abstracción (interfaces/abstract classes), Herencia (extends, super), Polimorfismo
- Interfaces vs abstract classes en TypeScript: cuándo usar cada una, declaration merging, implementación múltiple
- Composición sobre herencia: el principio más importante de OOP moderno — has-a vs is-a, cuándo cada uno falla
- Mixins en TypeScript: combinación de comportamiento sin herencia múltiple, implementación con genéricos
- Modificadores de acceso, readonly y override: visibilidad, inmutabilidad y diseño deliberado de APIs de objetos
Fuentes de referencia
Libro
Sumérgete en los Patrones de Diseño
Alexander Shvets, v2023-1.21. Parte 1 "Introduction to OOP" — los cuatro pilares y sus relaciones. La base conceptual más clara disponible, con diagramas UML y ejemplos.
Abrir →Libro
Clean Code
Robert C. Martin. Capítulos 1–4: código limpio, nombres significativos, funciones con una responsabilidad. La base del criterio de calidad.
Docs
TypeScript Handbook — Classes
typescriptlang.org. La guía oficial de clases con todos los modificadores, abstract classes e interfaces. La referencia más actualizada.
Abrir →YouTube
Fireship — OOP vs Functional
"Object Oriented vs Functional Programming with TypeScript". El contexto de por qué OOP tiene sentido y dónde tiene sus límites.
Contenido de la semana
- SRP (Single Responsibility Principle): una razón de cambio — cómo detectar violaciones en componentes Angular y React con ejemplos reales
- OCP (Open/Closed Principle): abierto para extensión, cerrado para modificación — Strategy y Decorator como implementaciones directas del principio
- LSP (Liskov Substitution Principle): subtipos sustituibles sin alterar el comportamiento — por qué el cuadrado-rectángulo viola LSP
- ISP (Interface Segregation): interfaces pequeñas y específicas — el God Interface antipatrón y cómo romperlo con TypeScript
- DIP (Dependency Inversion): depender de abstracciones, no de implementaciones — cómo Angular DI lo implementa correctamente con InjectionToken
- Proyecto: NotificationService en TS puro con EmailNotifier, SMSNotifier y PushNotifier como estrategias intercambiables — 5 principios aplicados
Fuentes de referencia
Libro
Sumérgete en los Patrones de Diseño
Shvets v2023. Parte 1: "Software Design Principles" — SOLID explicado con diagramas antes de los patrones. Comprender esto hace que los patrones tengan sentido.
Abrir →Libro
Clean Code
Robert C. Martin. El capítulo "Classes" y la sección sobre SOLID. El libro donde se popularizaron los principios para el público general.
Catálogo
refactoring.guru/refactoring/smells
Code smells que indican violaciones SOLID. Catálogo visual de síntomas con sus refactorings asociados.
Abrir →YouTube
ArjanCodes — SOLID Principles
La serie más técnica y práctica de SOLID con TypeScript. Ejemplos reales de violaciones y sus correcciones.
Contenido de la semana
- Singleton: problema del estado global, implementación thread-safe en JS (single-threaded ayuda), por qué Singleton dificulta el testing
- Factory Method: separar la creación del uso, el método de fábrica como hook de extensión — cuándo NO usar Factory
- Abstract Factory: familia de objetos relacionados sin especificar clases concretas — UI themes como ejemplo clásico
- Module Pattern: IIFE, closures para privacidad — y por qué ES Modules lo reemplaza completamente en código moderno
- Prototype Pattern: Object.create, structuredClone() en ES2022, Immer como implementación del Prototype en el estado
- Criterios de elección: cuándo Singleton, cuándo Factory, cuándo Builder — decision matrix con trade-offs reales
Fuentes de referencia
Libro
Sumérgete en los Patrones de Diseño
Shvets v2023. Parte 2: Creational Patterns — Singleton, Factory Method, Abstract Factory, Builder, Prototype. Cada patrón con problema, solución, estructura UML y ejemplo real.
Abrir →Libro
Head First Design Patterns
Freeman & Robson. Capítulos de Factory Method y Abstract Factory con el ejemplo de la pizzería. El más didáctico y visual para empezar.
Catálogo
refactoring.guru/design-patterns/creational-patterns
Catálogo online gratuito de patrones creacionales con diagramas UML, ejemplos en TypeScript y comparativas.
Abrir →YouTube
Fireship — Singleton & Factory
"Singleton Pattern in 100 Seconds" y "Factory Pattern". El formato más conciso para entender la esencia antes de profundizar.
Contenido de la semana
- Builder en profundidad: Director, fluent interface (method chaining), builders inmutables con genéricos en TypeScript
- Builder vs Constructor largo: cuándo un constructor de 6+ parámetros es una señal de que necesitás Builder
- Abstract Factory para UI: ThemeFactory con LightTheme/DarkTheme creando Button, Input, Modal como productos relacionados
- Null Object Pattern: evitar null checks con objetos que implementan la interfaz pero no hacen nada — el patrón más ignorado
- Antipatrones creacionales: God Object, Singleton abuse, Feature Envy — cómo reconocerlos y refactorizarlos
- Proyecto: DashboardConfig Singleton + WidgetFactory (ChartWidget/TableWidget/KPIWidget) + DashboardBuilder con method chaining
Fuentes de referencia
Libro
Sumérgete en los Patrones de Diseño
Shvets v2023. Builder es el capítulo más detallado del libro. Incluye el Director, el Builder concreto y el Product — con 3 ejemplos de aplicación real.
Abrir →Libro
Learning JavaScript Design Patterns
Addy Osmani. Module Pattern y Builder en JavaScript moderno con ES Modules. Gratuito en patterns-dev.
Abrir →YouTube
ArjanCodes — Builder Pattern
La implementación más técnica y limpia del Builder con TypeScript. Fluent interface, inmutabilidad y testing.
Catálogo
refactoring.guru/design-patterns/builder
Diagrama UML interactivo del Builder con ejemplos en TypeScript, Python y Java side-by-side.
Abrir →Contenido de la semana
- Decorator: extender comportamiento en runtime sin herencia, stacking de decoradores, orden de ejecución y costo de composición
- Decoradores en TypeScript (@Component, @Injectable) vs Decorator GoF: son el mismo concepto, diferente implementación — aclaración crítica
- Facade: interfaz simplificada sobre subsistema complejo — cuándo es valor real vs capa de indirección innecesaria
- Adapter (Wrapper): hacer compatibles dos interfaces incompatibles, adaptar APIs legacy a contratos modernos sin romper nada
- Object Adapter vs Class Adapter: composición vs herencia para adaptar — por qué composición gana casi siempre en TypeScript
- Bridge: separar abstracción de implementación — útil cuando una jerarquía crece en dos dimensiones independientes
Fuentes de referencia
Libro
Sumérgete en los Patrones de Diseño
Shvets v2023. Parte 3: Structural — Decorator, Facade, Adapter, Bridge con diagramas UML claros. El capítulo de Decorator incluye la distinción con los decoradores de lenguaje.
Abrir →Libro
Head First Design Patterns
Freeman & Robson. Capítulo de Decorator con el ejemplo clásico de café con aditivos. El más didáctico para entender stacking.
Catálogo
refactoring.guru/design-patterns/structural-patterns
Catálogo online gratuito de patrones estructurales con ejemplos en TypeScript y comparativas entre patrones similares.
Abrir →YouTube
Fireship — Decorator Pattern
"Decorator Design Pattern in 10 minutes" — la diferencia entre el patrón GoF y los decoradores del lenguaje, explicada con claridad.
Contenido de la semana
- Proxy: control de acceso, lazy initialization, logging, caching — y el JavaScript Proxy nativo (el lenguaje implementa el patrón)
- Virtual Proxy vs Protection Proxy vs Remote Proxy: tres usos distintos del mismo patrón — cuándo cada variante tiene sentido
- Composite: árbol de objetos con operaciones uniformes en hojas y ramas — árbol DOM, árbol de componentes como Composite real
- Flyweight: compartir estado intrínseco entre objetos para reducir memoria — cuándo importa en frontend (Virtual DOM, canvas)
- Repository Pattern: abstracción de acceso a datos, inyectable vía DI, testeable con in-memory repository sin BD real
- Proyecto: ApiAdapter normaliza dos APIs distintas + HttpProxy con TTL de caché + DataFacade como interfaz unificada
Fuentes de referencia
Libro
Sumérgete en los Patrones de Diseño
Shvets v2023. Proxy, Composite y Flyweight — los capítulos con más casos de uso de la parte estructural. El Proxy incluye el JavaScript Proxy nativo.
Abrir →Libro
Learning JavaScript Design Patterns
Osmani. Proxy Pattern con el Proxy nativo de JavaScript — el patrón implementado directamente en el lenguaje. Gratuito online.
Abrir →MDN
JavaScript Proxy
developer.mozilla.org. El Proxy nativo: trampas (get/set/has/apply), Reflect API, casos de uso con observabilidad y validación.
Abrir →YouTube
ArjanCodes — Repository Pattern
La implementación más limpia del Repository Pattern con TypeScript e inyección de dependencias. Unit testeable sin BD.
Contenido de la semana
- Observer: suscriptores y publicadores, implementación manual vs EventEmitter vs RxJS Observable — progresión natural del patrón
- Strategy: intercambiar algoritmos en runtime, eliminar condicionales con polimorfismo — el patrón más frecuente en frameworks
- Command: encapsular operaciones como objetos, execute/undo, cola de comandos, macro commands en TypeScript
- Command en la práctica: historial de acciones (undo/redo en un editor), transaction logs, event sourcing simplificado
- State Pattern: comportamiento que cambia según el estado interno — máquinas de estado finito, cuándo usar XState
- Iterator Pattern: Symbol.iterator y for...of en JavaScript — el patrón ya está en el lenguaje, entenderlo cambia cómo ves los arrays
Fuentes de referencia
Libro
Sumérgete en los Patrones de Diseño
Shvets v2023. Parte 4: Behavioral — Observer, Strategy, Command, State, Iterator con ejemplos muy detallados y casos de uso reales en cada capítulo.
Abrir →Libro
Head First Design Patterns
Freeman & Robson. Capítulo de Observer — el más claro sobre el patrón publicador-suscriptor. Capítulo de Strategy como intro a patterns.
Catálogo
refactoring.guru/design-patterns/behavioral-patterns
Catálogo online gratuito de patrones de comportamiento. Cada patrón con estructura UML, pseudocódigo y ejemplo TypeScript.
Abrir →YouTube
Fireship — Command & Observer Pattern
"Command Design Pattern" y "Observer Pattern explained". Los más visuales y concisos. Verlos antes de leer el capítulo del libro.
Contenido de la semana
- Mediator: reducir acoplamiento entre componentes a través de un intermediario centralizado — cuándo es un Event Bus y cuándo no
- Mediator vs Observer: centralizar (Mediator) vs distribuir (Observer) — trade-offs de mantenibilidad y acoplamiento
- Template Method: esqueleto del algoritmo en la clase base, pasos en las subclases — base conceptual de los Angular lifecycle hooks
- Chain of Responsibility: cadena de handlers, la request pasa hasta que alguien la maneja — Express/Angular middleware como caso real
- Visitor Pattern: operaciones sobre estructuras de objetos sin modificarlos — ASTs en Babel, Prettier, ESLint como Visitor reales
- Proyecto: Editor de texto con Command (execute/undo), Observer (sincronizar UI), Strategy (exportar como txt/json/html)
Fuentes de referencia
Libro
Sumérgete en los Patrones de Diseño
Shvets v2023. Mediator, Template Method, Chain of Responsibility y Visitor — los patrones de comportamiento más avanzados del libro con análisis de cuando NO usarlos.
Abrir →Libro
Patterns of Enterprise Application Architecture
Martin Fowler. Capítulos de mediator y event-driven patterns a nivel aplicación. Complementa los patrones GoF con patrones arquitecturales.
YouTube
ArjanCodes — Chain of Responsibility
"Chain of Responsibility Pattern" y "Mediator Pattern". Los más técnicos disponibles, con código real y análisis de trade-offs.
Catálogo
refactoring.guru/design-patterns/chain-of-responsibility
Ejemplo interactivo del Chain of Responsibility con UI handlers — la representación más clara del patrón middleware.
Abrir →Contenido de la semana
- MVC (Model-View-Controller): separación de responsabilidades, flujo bidireccional, por qué escala mal en apps grandes con estado complejo
- MVVM (Model-View-ViewModel): data binding bidireccional, ViewModel como mediador — base conceptual de Angular, Vue y SwiftUI
- Flux/Redux: flujo unidireccional estricto, acción → dispatcher → store → view — por qué resuelve el problema de MVC en apps grandes
- Container/Presentational (Smart/Dumb): separar lógica de UI para mejorar testabilidad — sigue siendo válido con Signals y RSC
- Atomic Design: Atoms/Molecules/Organisms/Templates/Pages — organización de componentes UI complementaria a los patrones de arquitectura
- Evolución histórica: MVC → MVP → MVVM → Flux → Signals — cómo cada patrón surgió para resolver limitaciones del anterior
Fuentes de referencia
Libro
Patterns of Enterprise Application Architecture
Martin Fowler. MVC, MVP, MVVM con análisis profundo de cada variante y sus trade-offs. El más riguroso sobre arquitecturas de presentación.
Abrir →Artículo
GUI Architectures — Martin Fowler
martinfowler.com/eaaDev/uiArchs.html — El artículo más influyente sobre patrones de UI. Fowler analiza MVC, MVP y MVVM con sus variantes.
Abrir →Docs
History of Redux
redux.js.org — Por qué Flux llevó a Redux. Contexto fundamental para entender la decisión de diseño de un flujo unidireccional.
Abrir →YouTube
Fireship — MVC vs MVVM vs MVP
El más conciso y claro sobre las diferencias entre los tres patrones con ejemplos reales por framework.
Contenido de la semana
- Event Bus: comunicación desacoplada entre módulos, implementación con TypeScript tipado, ventajas vs desventajas vs Observer
- Pub/Sub vs Observer vs Event Bus: tres variantes del mismo concepto — diferencias de acoplamiento, scope y lifecycle
- Repository Pattern aplicado al frontend: abstracción de data access, inyectado vía DI, testeable con in-memory repository
- Use Cases en SPA: cuándo una capa de aplicación agrega valor — y cuándo es over-engineering para un proyecto pequeño
- Clean Architecture en el browser: capas (Domain/Application/Infrastructure/UI), dirección de dependencias, ports & adapters adaptados
- Proyecto Todo: MVC + microstore Flux (reducer puro, store observable) + Event Bus inter-módulos — solo HTML y TypeScript, sin frameworks
Fuentes de referencia
Libro
Sumérgete en los Patrones de Diseño
Shvets v2023. Cierre de la sección de patrones. El libro conecta los patrones individuales con los principios de diseño — releer Parte 1 con la perspectiva ganada.
Abrir →Artículo
The Clean Architecture — Uncle Bob
blog.cleancoder.com — El artículo original de Robert C. Martin que definió Clean Architecture. La fuente primaria del patrón.
Abrir →YouTube
CodeOpinion — Clean Architecture is a mistake?
Análisis crítico y honesto sobre cuándo aplicar Clean Architecture en frontend y cuándo es over-engineering.
GitHub
react-redux-typescript-guide
github.com/piotrwitek. Aplicación práctica de arquitectura limpia con React + TypeScript. Referencia de estructura real.
Abrir →Contenido de la semana
- Singleton en Angular DI: providedIn: "root" garantiza instancia única — el Singleton correcto que no dificulta el testing
- @Component, @Injectable, @Pipe como Decorator GoF: los decoradores de Angular son la implementación directa del patrón
- RxJS Observable como Observer pattern: EventEmitter vs Subject vs BehaviorSubject — progresión del patrón en Angular
- HTTP Interceptors como Proxy + Chain of Responsibility: interceptar y transformar requests en el pipeline HTTP
- InjectionToken + useClass como Strategy: selección de implementación en runtime vía DI — el patrón más elegante de Angular
- NgRx como Command + Mediator: Actions como Commands tipados, Effects como Mediator, Reducers como pure state machine
Fuentes de referencia
Libro
Sumérgete en los Patrones de Diseño
Shvets v2023. Releer los capítulos de Singleton, Decorator, Observer, Proxy, Strategy y Command — ahora identificando dónde los usa Angular.
Libro
Learning Angular
Bampakos, 4ª Ed. Capítulos de DI y services. Ver cómo el framework implementa los GoF de forma explícita en su arquitectura.
Docs
angular.dev — Dependency Injection
La guía oficial de DI en Angular. Cómo el framework implementa Singleton, Strategy y Factory de forma transparente.
Abrir →YouTube
Decoded Frontend — Design Patterns in Angular
El más técnico sobre patrones GoF en Angular. Identificar cada patrón en el framework y en el código propio.
Contenido de la semana
- HOC (Higher-Order Components) como Decorator: extender componentes sin modificarlos — cuándo siguen siendo válidos vs Hooks
- Custom Hooks como Strategy: encapsular lógica intercambiable en hooks reutilizables — el patrón más idiomático de React moderno
- Context API como Facade/Singleton: interfaz simplificada de estado compartido — y por qué NO reemplaza un state manager
- Render Props como Template Method: delegar el renderizado al consumer — la evolución hacia hooks explica por qué este patrón decayó
- Compound Components como Composite: componentes que comparten estado implícito, árboles de componentes flexibles (Radix UI los usa)
- Proyecto Final: mismo dominio de negocio en Angular y React — documentar qué patrón usa cada framework de forma implícita y explícita
Fuentes de referencia
Libro
Learning JavaScript Design Patterns
Addy Osmani. Capítulos de patrones en React — HOC, Custom Hooks, Render Props con contexto histórico de su evolución. Gratuito online.
Abrir →Docs
patterns.dev — React Patterns
La sección de React Patterns es la más completa y visual de patrones de composición en React moderno. Incluye animaciones.
Abrir →YouTube
Jack Herrington — React Design Patterns
El más técnico sobre patrones idiomáticos de React moderno. Compound Components, Custom Hooks y Headless con Radix UI.
Catálogo
refactoring.guru/design-patterns
Ejercicio de cierre: identificar un patrón GoF en el código real del proyecto final — el puente entre teoría y producción.
Abrir →03 — Biblioteca de referencia
Libros recomendados
Recursos esenciales para dominar patrones de diseno en contexto frontend.
Sumérgete en los Patrones de Diseño
Recurso principal W01–W11El libro que cubre todo el roadmap: OOP, SOLID y los 23 patrones GoF con diagramas UML, ejemplos en múltiples lenguajes y casos reales. La edición 2023 es la más actualizada disponible.
Design Patterns: Elements of Reusable Object-Oriented Software
Referencia fundacionalEl clásico original de 1994. Los 23 patrones en su definición canónica. Lectura densa — úsalo como referencia, no como punto de entrada.
Head First Design Patterns
Fases 1-3Versión visual y accesible de los patrones GoF. La 2ª edición (2020) está actualizada a Java moderno. Ideal como alternativa didáctica al libro de Shvets.
Learning JavaScript Design Patterns
Todas las fasesPatrones aplicados a JavaScript y React modernos. La 2ª edición (2023) incorpora ES Modules, React Hooks y patrones de rendering. Gratuito en patterns.dev.
Patterns of Enterprise Application Architecture
Fase 4MVC, MVVM, Repository y patrones de arquitectura a nivel aplicación. El más riguroso sobre arquitecturas de presentación.
Clean Code
Fase 0Principios SOLID y código limpio como base de todo. El libro donde se popularizaron los principios para el público general.
TypeScript Design Patterns
Referencia históricaPublicado en 2016 — anterior a TypeScript 2.x, decoradores modernos y generics avanzados. Puede servir de referencia puntual, pero Shvets cubre los mismos patrones con código más actual.
04 — Timeline visual
12 semanas de recorrido
05 — Recursos online
Recursos complementarios
Herramientas y plataformas para complementar el estudio de patrones.
Catalogo interactivo
Refactoring Guru
Catalogo visual de los 23 patrones GoF con diagramas, ejemplos en multiples lenguajes y comparaciones.
Libro gratuito
patterns.dev
Patrones de diseno y rendering para aplicaciones web modernas. Ejemplos en JavaScript y React.
Libro online
Learning JS Design Patterns
Libro de Addy Osmani disponible gratis. Cubre patrones clasicos y modernos en JavaScript.
Documentacion
TypeScript Handbook
Documentacion oficial de TypeScript. Esencial para entender interfaces, genericos y decoradores.
YouTube
Fireship — Design Patterns
Serie de videos cortos explicando cada patron con ejemplos practicos y visuales.
Practica
Exercism — TypeScript Track
Ejercicios de TypeScript con mentoria. Ideal para practicar OOP y patrones en contexto real.
