Design Patterns

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

a repeated decorative design.
synonyms: design, decoration, motif, marking, ornament, ornamentation, device, figure
"the pattern on the wallpaper"
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

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

Design patterns

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

Who am I?

AUTHORED ON GITHUB

Don’t forget…

Background

Background

Patterns everywhere

Some software principles

KISS

DRY

SOLID

More stuff you need to get familiar with

Design patterns

Categories

Creational patterns

Singleton

Factory

Structural patterns

Composite

Decorator

Behavioral patterns

Strategy

Observer

Must reads

thank you!

Let's keep in touch!