Gil Fink

Building Scalable JavaScript Apps

Agenda

• The challenge we face

• Suggested solution

• The patterns

The Challenge

How would you define a scalable JavaScript app architecture?

Non-trivial apps require significant developer effort to maintain, where a browser plays a big role in data manipulation and display

Scalable JavaScript App Examples

Gmail

Twitter

Facebook

Yahoo! Homepage

and more

Current Architecture

Might contain a mixture of the following:

Custom Widgets

Modules

Application Core

MV* Framework

JavaScript Libraries and Toolkits

Current Architecture – Cont.

Possible Problems

How much of the app is reusable?

Can single modules exist on their own independently?

Can a single module be tested independently?

How much modules depend on other modules in the system?

Is the application parts tightly coupled?

If a specific part fails, can the application still work?

Suggested Solution: Mixing JS Patterns

Module Pattern

Façade Pattern

Mediator/Event Aggregator

Suggested Solution

Backbone.js

jQuery postal.js … Core Libraries

Application Core

Facade

Pub / Sub

… Module

HTML / CSS / JavaScript

Module

HTML / CSS / JavaScript

Module

HTML / CSS / JavaScript

Modular JavaScript Review

Proven JavaScript patterns for creating modular JavaScript

Leverage JavaScript’s built-in features

“Modularize” code into reusable objects

Prototype Pattern

Module Pattern

Revealing Module Pattern

Revealing Prototype Pattern

Or use libraries like RequireJS or Almond

Module Patterns

// Module pattern

var Car = function () {

// private variables

// private functions

return {

// public members

};

};

//Revealing prototype pattern

var Car = function (elm) {

// variables defined here

}

Car.prototype = function () {

// functions defined here

return {

// public members defined // here as with revealing // module pattern

};

}();

Demo

Module Patterns

Modules

Backbone.js

jQuery postal.js … Core Libraries

Application Core

Facade

Pub / Sub

… Module

HTML / CSS / JavaScript

Module

HTML / CSS / JavaScript

Module

HTML / CSS / JavaScript

Modules

Informs the application when something interesting happens

Correctly publish events of interest

Shouldn’t concern about:

What objects or modules are being notified

Where these objects are based

How many objects subscribe to notifications

Application Core

Backbone.js

jQuery postal.js … Core Libraries

Application Core

Facade

Pub / Sub

… Module

HTML / CSS / JavaScript

Module

HTML / CSS / JavaScript

Module

HTML / CSS / JavaScript

The Application Core

Manages the module lifecycle

When is it safe for a module to start?

When should it stop?

Modules should execute automatically when started

Enables adding and removing modules without breaking the app

Should handle detecting and managing of errors

Uses the mediator pattern

The Façade

Backbone.js

jQuery postal.js …

Application Core

Facade

Pub / Sub

… Module

HTML / CSS / JavaScript

Module

HTML / CSS / JavaScript

Module

HTML / CSS / JavaScript

Core Libraries

The Façade

• Convenient, high-level interfaces to larger code that hide underlying complexity • Limited public API of functionality

• Differs greatly from the reality of the implementation

• Example:

var module = (function () { … return { façade: function (args) { // do something } }; }());

The Façade – Cont.

Demo

The Façade

The Façade

Will play a role of:

Abstraction to the application core

The façade sits in the middle between the core and the modules

Ensure a consistent interface to the modules which is available at all times

Should be the only thing that modules are aware of

If modules have API, they expose it using a façade

Mediator/Event Aggregator

Backbone.js

jQuery postal.js … Core Libraries

Application Core

Facade

Pub / Sub

… Module

HTML / CSS / JavaScript

Module

HTML / CSS / JavaScript

Module

HTML / CSS / JavaScript

Mediator/Event Aggregator

Promotes loose coupling of components

Helps solve module coupling issues

Allow modules to broadcast or listen to notifications from other modules

Notifications can be handled by any number of modules at once

Mediator/Event Aggregator – Cont.

Mediator Implementation Example

var mediator = (function () {

var subscribe = function (channel, fn) {

…

},

publish = function (channel) {

…

},

return {

publish: publish,

subscribe: subscribe

};

}());

Demo

Mediator

Frameworks

Framework that leverages the proposed solution:

Most of the MV* frameworks include ways to apply the architecture (AngularJS, Ember and Backbone for example)

Aura: http://aurajs.com/

The Scalable Application Framework: https://github.com/legalbox/lb_js_scalableApp

And many more

Can be a good start point to impose the patterns

Questions

Summary

• Building big and scalable JavaScript app is very challenging

• Combining proven patterns can help to create better software

Resources

Slide Deck and Demos - http://sdrv.ms/17riPkB

Nicholas Zakas: Scalable JavaScript Application Architecture - http://www.youtube.com/watch?v=vXjVFPosQHw

Addy Osmani: Scaling Your JavaScript Applications - http://addyosmani.com/scalable-javascript-videos/

My Blog – http://www.gilfink.net

Follow me on Twitter – @gilfink

Thank You