Introduction to Design Patterns June 7th, 2019 Kenju Wagatsuma Cookpad Inc. 

TOC ● Introduction to Design patterns ● Design patterns examples ● Pattern Language ● Resources for learning 

Introduction to Design patterns 

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 

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 

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... 

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...” 

Design patterns Examples 

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`); } } 

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); }); 

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, }); 

Pattern Language 

👈 Please have a look at this great answer to the Quora’s question 

Pattern Language Each “patterns” consists of... Pattern Name Context Problem Solution 

Resources for your learning 

“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 

No content

FREE (online version) for example... ● Command ● Observer ● Prototype ● Singleton ● State ● Component ● Event Queue ● Object Pool ● Dirty Flag ● etc. 

FREE (online version) for example... ● Constructor ● Module ● Revealing Module ● Singleton ● Observer ● Mediator ● Prototype ● Command ● Facade ● etc. 

Thank you!