Save 37% off PRO during our Black Friday Sale! »

Introduction to Design Patterns

3b36493b4296ebeb219bcd3ffab3aa2b?s=47 Kenju Wagatsuma
June 07, 2019
4

Introduction to Design Patterns

Introduction to Design Patterns

3b36493b4296ebeb219bcd3ffab3aa2b?s=128

Kenju Wagatsuma

June 07, 2019
Tweet

Transcript

  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
  17. None
  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!