Design Patterns

Women Techmakers Berlin

JavaScript Crash Course

Advanced lectures pt. 1

Armagan Amcalar

March 15th, 2018

Who am I?

Armagan Amcalar
Head of Software Engineering @ unu GmbH
Founder @ Lonca Works

        dashersw            dashersw

 

erste

cote

dovecote
semaver
vieux

brain-bits

pedalboard.js

tartJS
geneJS
jira-bot

AUTHORED ON GITHUB

Don’t forget…

This is a human story.

 

We write code for humans to understand.

 

That’s why it’s so complicated — it has direct interaction with human psychology.

dashersw

Background

Software development has a very high cognitive load
The job of a software developer is to solve complexity
The software we write grows daily
We hate the code we wrote 6 months ago
But we have to live with it for years to come

dashersw

Background

Code complexity should remain constant even if the code grows
Identification at first sight
What’s the secret?
    Only if they knew…

dashersw

Patterns everywhere

It’s about familiarity
Like signature stamps
   

 

 

 


Like paper money / bills  
Do you think machines are intelligent and they can learn?

Do you think they are better than humans at this?
    * They are taught to identify patterns

dashersw

pattern ˈpat(ə)n noun

 

  1. a repeated decorative design.
    synonyms:   design, decoration, motif, marking, ornament, ornamentation, device, figure
    "the pattern on the wallpaper"
     
  2. a regular and intelligible form or sequence discernible in the way in which something happens or is done.
    synonyms:   system, order, arrangement, method, sequence, structure, scheme, plan, form, format, framework, composition, constitution, shape, make-up, configuration
    "the ants' behaviour pattern"

dashersw

dashersw

Some software principles

KISS

Keep it simple, stupid

dashersw

DRY

Do not repeat yourself

dashersw

SOLID

  • Single responsibility
  • Open/closed principle
  • Liskov substitution principle
  • Interface segregation
  • Dependency inversion

dashersw

More stuff you need to get familiar with

 

UML
Class diagrams
Sequence diagrams

dashersw

dashersw

dashersw

dashersw

dashersw

Design patterns

Categories

Creational
Structural
Behavioral

Creational patterns

Singleton

class Person {
    constructor() {
        if (typeof Person.instance === 'object') {
            return Person.instance;
        }
        Person.instance = this;
        return this;
    }
}

export default Person;

const john = new Person();
const john2 = new Person();
john === john2; // true

Factory

class BmwFactory {
    create(type) {
        if (type === 'X5')
            return new Bmw(type, 108000, 300);
        if (type === 'X6')
            return new Bmw(type, 111000, 320);
    }
}

class Bmw {
    constructor(model, price, maxSpeed) {
        this.model = model;
        this.price = price;
        this.maxSpeed = maxSpeed;
    }
}

export default BmwFactory;
const bmwFactory = new BmwFactory();
const x5 = bmwFactory.create('X5');
const x6 = bmwFactory.create('X6');

Structural patterns

Composite

//Equipment
class Equipment {
    getPrice() {
        return this.price || 0;
    }

    getName() {
        return this.name;
    }

    setName(name) {
        this.name = name;
    }
}

// --- composite ---
class Composite extends Equipment {
    constructor() {
        super();
        this.equipments = [];
    }

    add(equipment) {
        this.equipments.push(equipment);
    }

    getPrice() {
        return this.equipments.map(equipment => {
            return equipment.getPrice();
        }).reduce((a, b)  => {
            return  a + b;
        });
    }
}
class Cabinet extends Composite {
    constructor() {
        super();
        this.setName('cabinet');
    }
}

// --- leafs ---
class FloppyDisk extends Equipment {
    constructor() {
        super();
        this.setName('Floppy Disk');
        this.price = 70;
    }
}

class HardDrive extends Equipment {
    constructor() {
        super();
        this.setName('Hard Drive');
        this.price = 250;
    }
}

class Memory extends Equipment {
    constructor() {
        super();
        this.setName('Memory');
        this.price = 280;
    }
}
const cabinet = new Cabinet();
cabinet.add(new FloppyDisk());
cabinet.add(new HardDrive());
cabinet.add(new Memory());

cabinet.price; // 600

Decorator

class Pasta {
    constructor() {
        this.price = 0;
    }
    getPrice() {
        return this.price;
    }
}

class Penne extends Pasta {
    constructor() {
        super();
        this.price = 8;
    }
}

class PastaDecorator extends Pasta {
    constructor(pasta) {
        super();
        this.pasta = pasta;
    }

    getPrice() {
        return this.pasta.getPrice();
    }
}

class SauceDecorator extends PastaDecorator {
    constructor(pasta) {
        super(pasta);
    }

    getPrice() {
        return super.getPrice() + 5;
    }
}

class CheeseDecorator extends PastaDecorator {
    constructor(pasta) {
        super(pasta);
    }

    getPrice() {
        return super.getPrice() + 3;
    }
}

const penne = new Penne();
const penneWithSauce = new SauceDecorator(penne);
const penneWithSauceAndCheese = new CheeseDecorator(penneWithSauce);

penne.getPrice(); // 8
penneWithSauce.getPrice(); // 13
penneWithSauceAndCheese.getPrice(); // 16

Behavioral patterns

Strategy

class ShoppingCart {
    constructor(discount) {
        this.discount = discount;
        this.amount = 0;
    }

    checkout() {
        return this.discount(this.amount);
    }

    setAmount(amount) {
        this.amount = amount;
    }
}

function guestStrategy(amount) {
    return amount;
}

function regularStrategy(amount) {
    return amount * 0.9;
}

function premiumStrategy(amount) {
    return amount * 0.8;
}

export { ShoppingCart, guestStrategy, regularStrategy, premiumStrategy };

const guestCart = new ShoppingCart(guestStrategy);
guestCart.setAmount(100); 
guestCart.checkout(); // 100

const regularCart = new ShoppingCart(regularStrategy);
regularCart.setAmount(100);
regularCart.checkout(); // 90

const premiumCart = new ShoppingCart(premiumStrategy);
premiumCart.setAmount(100);
premiumCart.checkout(); // 80

Observer

Must reads

  • Design Patterns: Elements of Reusable Object-Oriented Software
  • Patterns of Enterprise Application Architecture
  • Clean Code
  • Clean Architecture
  • Pro JavaScript Design Patterns
  • Code Complete

dashersw

thank you!

Let's keep in touch!

Armagan Amcalar

  dashersw

slides: https://slides.com/armaganamcalar/wtm-design-patterns

examples from https://github.com/fbeline/Design-Patterns-JS

Design Patterns

By Armağan Amcalar

Design Patterns

An introduction to popular software design patterns and how they can be utilized with JavaScript. In this session, we talk about what a design pattern is, what anti-patterns are, how they emerge and when to make use of one. We talk about some of the Gang of Four patterns and their applications.

  • 1,598

More from Armağan Amcalar