JS & UI Applications Design Patterns

Binary Academy 2014 Semenistyi Mykyta

Design Pattern

● Patterns are proven solutions

● Patterns can be easily reused

● Patterns can be expressive

DRY

Don’t Repeat Yourself

WET

General and JS-specific Patterns

Immediately Invoked Function Expression (IIFE)

Module

● Lack of access modifiers;

● Global namespace polluting;

● Code structuring.

problems to solve

Moduleplain object

ModuleIIFE

Revealing Module

● Module is not explicit

● Better code structuring.

problems to solve

Revealing Moduleexample

Factoryexample

Factorywhen to use

● When our object or component setup involves a high level of complexity

● We need to easily generate different instances of objects depending on the

environment

● Working with many small objects that share the same properties

● Objects need only satisfy an API contract (aka, duck typing) to work

Facade

● API Complexity

Mixin

Mixin

Publish/Subscribe

Publish/Subscribe

Mediator

User Interface Patterns

DOM-oriented

MVVM (Model-View-ViewModel)

MVVM (Model-View-ViewModel)

MVVM (Model-View-ViewModel)

MVVM With Looser Data-Bindings

MVVM With Looser Data-Bindings

MVC

Angular

Angular

React

React

React

MVC (Model-View-Controller)

MV* (Model-View-*) | Presenter

Backbone

Modular Patterns

AMD

CommonJS

UMDjsAMD

CommonJS

Sadness

RequireJS

ES Harmony