Introduction to Design Patterns

Introduction to Design Patterns

1. Introduction to Design Patterns June 7th, 2019 Kenju Wagatsuma Cookpad Inc.
2. TOC • Introduction to Design patterns • Design patterns examples • Pattern Language • Resources for learning
3. Introduction to Design patterns
4. What is Design patterns? • reusable solutions to specific problems in software development ◦ … is not a silver bullet to all problems ◦ … is framework agnostic ◦ … was firstly introduced by so-called “Gang of Four” in 1994 ▪ Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides
5. How Design patterns used? patterns Definition Example Creational patterns create objects Factory method / Builder / Singleton / Prototype / Lazy initialization Structural patterns relationships among objects Adapter / Bridge / Composite / Decorator / Facade / Proxy Behavioral patterns how each objects behave Command / Iterator / Observer / Strategy / Visitor
6. Why to use Design patterns? • lingua franca of software development ◦ “This class can be refactored with Decorator pattern...” • proven ways for re-architecturing for specific cases ◦ many programmers have used Design patterns for few decades...
7. Design patterns are just tools • 🙅 It is all or nothing ◦ “Singleton pattern is good (or bad)” ◦ “You should use decorator patterns never” • 🙆 It solves specific problems ◦ “Singleton pattern is good (or bad) when …” ◦ “You should use decorator patterns to solve this problem because...”
8. Design patterns Examples
9. Factory pattern function TextCreative(props) { this.id = props.id; this.text = props.text; } function ImageCreative(props) { this.id = props.id; this.image = props.image; } function CreativeFactory() {} CreativeFactory.prototype.create = function(props) { if (props.type === ‘text’) { return new TextCreative(props); } else if (props.type === ‘image’) { return new ImageCreative(props); } else { throw new Error(`${props.type} is invalid`); } }
10. Decorator pattern function Creative(props) { this.id = props.id; } /* define decorators */ function addPopup(creative) { creative.onLoad(function() { popUp.show(‘creative loaded’); }); } function addImage(creative, imageUrl) { creative.loadImage(imageUrl); } const creative = new Creative({ id: ‘foo-bar’, }); const decorators = [ addPopup, addImage, ]; decorators.forEach((decorator) => { decorator(creative); });
11. Command pattern const creatives = ['cr1', 'cr2', 'cr3']; function SingleSelectionCommand() { const idx = Math.floor( Math.random() * creatives.length); return creatives[idx]; } function MultipleSelectionCommand(props) { const selected = new Set(); for (let i = 0; i < props.count; i++) { selected.add(SingleSelectionCommand()); } return Array.from(selected); } /** define command executor */ function CreativeSelector(props) {} CreativeSelector.prototype.execute = function( command, props, ) { return command(props); } /** execute commands */ const selector = new CreativeSelector(); const single = selector.execute(SingleSelectionCommand, {}); const multi = selector.execute(MultipleSelectionCommand, { count: 2, });
12. Pattern Language
13. 👈 Please have a look at this great answer to the Quora’s question
14. Pattern Language Each “patterns” consists of... Pattern Name Context Problem Solution
15. Resources for your learning
16. “GoF” • Creational ◦ Abstract Factory/Builder/Factory Method/Prototype/Singleton • Structural ◦ Adapter/Bridge/Composite/Decorator/Facad e/Flyweight/Proxy • Behavioural ◦ Chain of Responsibility/Command/Interpreter/Iterato r/Mediator/Memento/Observer/State/Strate gy/Template Method/Visitor ※ some patterns can be outdated or too common nowadays
18. FREE (online version) for example... • Command • Observer • Prototype • Singleton • State • Component • Event Queue • Object Pool • Dirty Flag • etc.
19. FREE (online version) for example... • Constructor • Module • Revealing Module • Singleton • Observer • Mediator • Prototype • Command • Facade • etc.
20. Thank you!