Plan de Estudio 2026
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.
05b
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
| Semana | Fase | Tema principal | Horas |
|---|---|---|---|
| W01 | Fase 0 | OOP en JS/TS: clases, prototipos, herencia, polimorfismo, encapsulamiento | 15h |
| W02 | Fase 0 | Principios SOLID en TypeScript + proyecto: NotificationService con estrategias intercambiables | 15h |
| W03 | Fase 1 | Singleton, Factory Method, Module Pattern — creación y control de instancias | 15h |
| W04 | Fase 1 | Abstract Factory, Builder + Proyecto: DashboardConfig, WidgetFactory, DashboardBuilder | 15h |
| W05 | Fase 2 | Decorator, Facade, Adapter — extender comportamiento sin herencia | 15h |
| W06 | Fase 2 | Proxy, Composite, Repository Pattern + Proyecto: ApiAdapter, HttpProxy con caché, DataFacade | 15h |
| W07 | Fase 3 | Observer, Strategy, Command — comunicación y responsabilidades entre objetos | 15h |
| W08 | Fase 3 | Mediator, Template Method, Chain of Responsibility + Proyecto: editor con Command/undo + Strategy export | 15h |
| W09 | Fase 4 | MVC, MVVM, Flux/Redux, Container/Presentational — patrones de arquitectura de UI | 15h |
| W10 | Fase 4 | Event Bus, Pub/Sub, Repository Pattern, Clean Architecture en frontend + Proyecto: Todo app sin frameworks | 15h |
| W11 | Fase 5 | Patrones en Angular: DI=Singleton, @Component=Decorator, RxJS=Observer, Interceptors=Proxy, NgRx=Command | 15h |
| W12 | Fase 5 | Patrones en React: HOC=Decorator, Custom Hooks=Strategy, Context=Facade, Compound Components=Composite + Proyecto final | 15h |
03 — Biblioteca de referencia
Libros recomendados
Recursos esenciales para dominar patrones de diseno en contexto frontend.
Design Patterns: Elements of Reusable Object-Oriented Software
ReferenciaEl clasico fundacional. 23 patrones originales.
Head First Design Patterns
Fases 1-3Version accesible y visual de los patrones GoF.
Learning JavaScript Design Patterns
Todas las fasesPatrones aplicados a JavaScript moderno. Gratuito online.
Patterns of Enterprise Application Architecture
Fase 4Patrones de arquitectura a nivel aplicacion.
Clean Code
Fase 0Principios SOLID y codigo limpio como base de todo.
TypeScript Design Patterns
Fases 1-3Patrones GoF implementados directamente en TypeScript.
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.
