Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Design Patterns

Ken Wagatsuma
June 07, 2019
38

Introduction to Design Patterns

Introduction to Design Patterns

Ken Wagatsuma

June 07, 2019
Tweet

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Introduction to Design patterns

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Design patterns Examples

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Pattern Language

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Resources for your learning

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide