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.
10
Semanas
42
Dias
6
Fases
1.5h
Por dia
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 · 10 dias
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 · 8 dias
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 · 8 dias
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 · 8 dias
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
Semana 9 · 5 dias
MVC, MVVM, Flux/Redux y Container/Presentational. Entiende los patrones de arquitectura que fundamentan los frameworks modernos.
Proyecto Todo app con MVC + microstore Flux: actions tipadas, reducer puro, store observable. Sin frameworks, solo HTML + TS.
05
Aplicar en Angular
Semana 10 · 3 dias
Reconoce cada patron dentro del framework: Singleton en services, Decorator en @Component, Observer en RxJS, Proxy en Interceptors, Strategy en DI.
Proyecto Refactorizacion documentada: toma un componente Angular real y aplica al menos 5 patrones conscientemente. Documenta cada decision.
02 — Semana tipo
Distribucion semanal
1.5-2 horas diarias. Cada dia cubre teoria + ejercicio. Los viernes son siempre practica o revision.
Bloque diario — 1.5h
Teoria del patron30 min
Implementacion practica45 min
Repaso y documentacion15 min
| Semana | Fase | Tema principal | Horas |
|---|---|---|---|
| S1 | Fase 0 | OOP en JavaScript/TypeScript | 7.5h |
| S2 | Fase 0 | Principios SOLID en TypeScript | 7.5h |
| S3 | Fase 1 | Singleton y Factory | 6h |
| S4 | Fase 1 | Builder + Abstract Factory + Proyecto | 6h |
| S5 | Fase 2 | Decorator y Facade | 6h |
| S6 | Fase 2 | Proxy, Adapter, Composite + Proyecto | 6h |
| S7 | Fase 3 | Observer y Strategy | 6h |
| S8 | Fase 3 | Command, Mediator, Template Method + Proyecto | 6h |
| S9 | Fase 4 | MVC, MVVM, Flux, Container/Dumb + Proyecto | 7.5h |
| S10 | Fase 5 | Patrones en Angular + Proyecto final | 4.5h |
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
10 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.
