JavaScript Design Patterns

and how we use them at De Persgroep

In English?

Who am I?

HI!

I'm @joggink

Freelance javascript developer

Back in the days...

snippets!

But then!

Frameworks!

jQuery
+
plugins
=
instant win!

And then you become part of a webteam

Every member has it's own way of solving problems

PATTERNS

Projects get bigger and more complex

PATTERNS

Agile workflow means an agile codebase?

PATTERNS

What is a pattern?

A reusable solution that can be applied to commonly occurring problems in software design
- in our case -
in writing JavaScript web applications.

In short

They're proven solutions

They're easy to reuse

Module pattern

ANYTHING can be defined as a reusable module!

the basics? IIFE

Immediately invoked function expressions


(function(){
	// code to be invoked immediately
}());

That's great but there's no privacy...

Let's return an object instead of a function


var basket = (function(){
	// private array
	var _basketItems = [];
	
	// private functions
	function _addItemToBasket(item){
	    _basketItems.push(item);
	}
	
	function _getBasketItems(){
	    return _basketItems;
	}
	
	// exposed to public
	return {
	    add: _addItemToBasket,
	    get: _getBasketItems
	}
}());

					

basket.add('butter');
basket.add('milk');

// will return an array
console.log(basket.get());
// undefined
console.log(basket.basketItems);
console.log(basket.getBasketItems());

Advantages?

It's clean

Privacy!

Disadvantages?

Privacy :(

Bug fixing

PITA for unit testing

Mediater pattern

Encapsulates how disparate modules interact with each other by acting as an intermediary

Imagine each module as an airplane

Our mediator is the control tower

Centralised communication

A module can broadcast / listen to notifications

Notifications can be handled by any number of modules at once

Easy to add / remove feateres to loosely coupled systems like this

Arbiterjs

Pub / sub


var basket = (function(){
	// private array
	var _basketItems = [];
	
	// private functions
	function _addItemToBasket(item){
	    _basketItems.push(item);
	    Arbiter.publish('storage/add', item);
	}
	
	function _getBasketItems(){
	    return _basketItems;
	}
	
	// exposed to public
	return {
	    add: _addItemToBasket,
	    get: _getBasketItems
	}
}());

					

var storage = (function(){

	Arbiter.subscribe('storage/add', _addToLocalStorage);

	// private functions
	function _addToLocalStorage(item){
	    // logic to add this item to our localStorage
	}
	
	function _removeFromLocalStorage(item){
	    // remove stuff
	}
	
	// NOTHING is exposed to the public!
}());

					

	Arbiter.publish('storage/add', [params]);

A message may be in any format, but may not contain [ ,*]. A structure like a/b/c is recommended by convention, to allow messages to be categorized.


	Arbiter.subscribe('storage/add', _functionToBeExecuted);

Listen to a specific message 'storage/add' and execute the appropriate function

Facade pattern

Convencient, high level interfaces to larger bodies of code that hide underlying complexity

simple public functionality but hides complex private functionality

So imagine making a communication layer between your application and the frameworks you use...

Making your application framework independent

FRAMEWORK INDEPENDENT!

Fuck jQuery

So we ditch jQuery and use micro frameworks

And we'll use a facade pattern to communicate with these patterns

Demo

Thanks @bengie!

Questions?

More info: