design patterns

Lazy initialize object with Proxy Pattern

Dec 1, 2018

Sometimes, you want to lazy intialize an object such as websocket to make it’s only connected when needed, (virtual) proxy pattern can help.

Instead of initializing directly:

const socket = new Websocket(url);

Using the Proxy:

// The proxy controls a web socket instance
class WebSocketProxy {
    constructor(options) {
        this.options = options;
    }

    connect() {
        if (this.socket) {
            return this.socket;
        }
        this.socket = new Websocket(this.options.url);
        return this.socket;
    }
}

const socket = new WebSocketProxy({ url: 'wss://www.example.com/socketserver' });
socket.connect();

The differences between observer, pubsub, and mediator pattern

May 3, 2018

Understanding the basic differences between the 3 patterns.

Observer: the publisher must know and manage observers, observers will be attached to the specific publisher:

const observer = function(data) {
   console.log('received event');
};
Publisher.addObserver(observer);
Publisher.notify('data');

Pubsub: the publisher can publish an event without knowing who are the listeners, publisher and listeners communicate through the event channel:

const subscriber = function(data) {
    console.log('received event');
};
Pubsub.on('event', subscriber);
// Publisher publishes event through Pubsub object
Pubsub.publish('event', 'data');

Mediator: groups logic of domain that has indirect relationship between modules. We can use Pubsub (not required, can use other patterns) to manage the workflow :

const Mediator = {
    init: function() {
        Pubsub.on('event', doSomething.bind(this));
    },
    doSomething: function(data) {
        // do other actions, like calling Ajax and notifying another event.
        Ajax.get('path', data)
        .then(function(res) {
            Pubsub.publish('another event', res);
        });
    }
};