Scalable JavaScript Application Architecture

Nicholas C. Zakas | @slicknet

 Who's this guy?

Ex-tech lead Co-Creator Contributor,

Yahoo! csslint.net Creator of YUI Test

Author Lead Author Contributor Lead Author

@slicknet
Single-page apps
 Model

View Controller
Single-page apps
&
Multi-page apps
Building an application
framework
 An application framework
is like a playground for your code
Provides structure around otherwise unrelated activities

flickr.com/photos/osterwalder/152697503/
Isn't that what JavaScript
libraries do?
 flickr.com/photos/skistz/398429879/

A JavaScript library is like a toolbox

You can build any number of things using the tools
Application
Core

Base Library
Module Theory
Everything is a module
module (n)
1 : a standard or unit of measurement
2 : the size of some one part taken as a unit of measure by which the
proportions of an architectural composition are regulated
3 a : any in a series of standardized units for use together: as (1) : a
unit of furniture or architecture (2) : an educational unit which covers
a single subject or topic b : a usually packaged functional assembly
of electronic components for use with other such assemblies
4 : an independently operable unit that is a part of the total structure
of a space vehicle
5 a : a subset of an additive group that is also a group under addition
b : a mathematical set that is a commutative group under addition
and that is closed under multiplication which is distributive from the
left or right or both by elements of a ring and for which a(bx) = (ab)x
or (xb)a = x(ba) or both where a and b are elements of the ring and x
belongs to the set

Source: Merriam-Webster Dictionary

module (n)
1 : a standard or unit of measurement
2 : the size of some one part taken as a unit of measure by which the
proportions of an architectural composition are regulated
3 a : any in a series of standardized units for use together: as (1) : a
unit of furniture or architecture (2) : an educational unit which covers
a single subject or topic b : a usually packaged functional assembly
of electronic components for use with other such assemblies
4 : an independently operable unit that is a part of the total structure
of a space vehicle
5 a : a subset of an additive group that is also a group under addition
b : a mathematical set that is a commutative group under addition
and that is closed under multiplication which is distributive from the
left or right or both by elements of a ring and for which a(bx) = (ab)x
or (xb)a = x(ba) or both where a and b are elements of the ring and x
belongs to the set

Source: Merriam-Webster Dictionary

How does this apply to web
applications?
web application module (n)
1 : an independent unit of functionality that is part of the total
structure of a web application

Source: Me
Web application modules consist of
HTML + CSS + JavaScript
Any single module should be able
to live on its own
Loose coupling allows you to make changes to
one module without affecting the others

flickr.com/photos/quinnanya/3575417671/
flickr.com/photos/renfield/3414246938/

Each module has its own sandbox

An interface with which the module can interact to ensure loose coupling
 Module
Module Module

Module Sandbox Module

Application
Core

Base Library
 Application Architecture
Modules
Sandbox
Application Core
Base Library
 Module
Module Module

Module Sandbox Module

Modules have limited knowledge

Each module knows about their sandbox and that's it
Core.register("module-name", function(sandbox){

return {
init: function(){
//constructor
},

destroy: function(){
//destructor
}

};

});
Which parts know about the web
application being built?
None of them
Each part of the architecture is like a puzzle piece
No single piece needs to know what the picture is
All that matters is that the piece does its own job correctly

flickr.com/photos/generated/501445202/
What is a module's job?
Hello, I'm the weather module.
It's my job to tell you the weather.
Hello, I'm the stocks module.
It's my job to tell you about the
stock market.
Each module's job is to create a
meaningful user experience
flickr.com/photos/eljay/2392332379/

The web application is created

as a result of all parts doing their job
This doesn't mean modules can
do whatever they want to do
their job
 flickr.com/photos/tedsblog/43433812/

Modules are like little kids

They need a strict set of rules so they don't get into trouble
 Module Rules
• Hands to yourself
 Only call your own methods or those on the sandbox
 Don't access DOM elements outside of your box
 Don't access non-native global objects
• Ask, don't take
 Anything else you need, ask the sandbox
• Don't leave your toys around
 Don't create global objects
• Don't talk to strangers
 Don't directly reference other modules
 Modules must stay within their own sandboxes
No matter how restrictive or uncomfortable it may seem

flickr.com/photos/madaise/3406217980/
 Application Architecture
Modules
Sandbox
Application Core
Base Library
 Module
Module Module

Module Sandbox Module

Application
Core

Base Library
 Sandbox

The sandbox ensures a consistent interface

Modules can rely on the methods to always be there
 Module
Module Module

Module Sandbox Module

Application
Core

Base Library
 Module
Module Module

Module Sandbox Module

Modules only know the sandbox

The rest of the architecture doesn't exist to them
 The sandbox also acts like a security guard
Knows what the modules are allowed to access and do on the framework

flickr.com/photos/heraklit/169566548/
Core.register("module-name", function(sandbox){

return {
init: function(){

//not sure if I'm allowed...

if (sandbox.iCanHazCheezburger()){
alert("thx u");
}
},

destroy: function(){
//destructor
}

};

});
 Sandbox Jobs
• Consistency
• Security
• Communication
Take the time to design the
correct sandbox interface
It can't change later
 Application Architecture
Modules
Sandbox
Application Core
Base Library
 Module
Module Module

Module Sandbox Module

Application
Core

Base Library
 Application
Core

The application core manages modules

That's it
 Application
Core

aka Application Controller

 The application core tells a module when
it should initialize and when it should shutdown
flickr.com/photos/bootbearwdc/20817093/
flickr.com/photos/bootbearwdc/20810695/
Core = function(){
var moduleData = {};

return {
register: function(moduleId, creator){
moduleData[moduleId] = {
creator: creator,
instance: null
};
},

start: function(moduleId){
moduleData[moduleId].instance =
moduleData[moduleId].creator(new Sandbox(this));
moduleData[moduleId].instance.init();
},

stop: function(moduleId){
var data = moduleData[moduleId];
if (data.instance){
data.instance.destroy();
data.instance = null;
}
}
}
}();
Core = function(){

return {
//more code here...

startAll: function(){
for (var moduleId in moduleData){
if (moduleData.hasOwnProperty(moduleId)){
this.start(moduleId);
}
}
},

stopAll: function(){
for (var moduleId in moduleData){
if (moduleData.hasOwnProperty(moduleId)){
this.stop(moduleId);
}
}
},

//more code here...

};
}();
//register modules
Core.register("module1", function(sandbox){ /*...*/ });
Core.register("module2", function(sandbox){ /*...*/ });
Core.register("module3", function(sandbox){ /*...*/ });
Core.register("module4", function(sandbox){ /*...*/ });

//start the application by starting all modules

Core.startAll();
The application core manages
communication between modules

flickr.com/photos/markhillary/353738538/
TimelineFilter = {
changeFilter: function(filter){
Timeline.applyFilter(filter);
}
}; Tight
Coupling
StatusPoster = {
postStatus: function(status){
Timeline.post(status);
}
}; Tight
Coupling
Timeline = {
applyFilter: function(filter){
//implementation
},
post: function(status){
//implementation
}
};
Core.register("timeline-filter", function(sandbox){

return {
changeFilter: function(filter){
sandbox.notify({
type: "timeline-filter-change",
data: filter
}); Loose
}
}; Coupling
});

Core.register("status-poster", function(sandbox){

return {
postStatus: function(statusText){
sandbox.notify({
type: "new-status",
data: statusText
}); Loose
}
};
Coupling
});
Core.register("timeline", function(sandbox){

return {
init: function(){
sandbox.listen([
"timeline-filter-change",
"post-status"
], this.handleNotification, this); Loose
}, Coupling
handleNotification: function(note){
switch(note.type){
case "timeline-filter-change":
this.applyFilter(note.data);
return;
case "post-status":
this.post(note.data);
return;
}
}
};
});
 When modules are loosely coupled,
removing a module doesn't break the others
No direct access to another module = no breaking should the module disappear
 The application core handles errors
Uses available information to determine best course of action

flickr.com/photos/brandonschauer/3168761995/
Core = function(){

var moduleData = {}, debug = false;

function createInstance(moduleId){
var instance =
moduleData[moduleId].creator(new Sandbox(this)),
name, method;

if (!debug){
for (name in instance){
method = instance[name];
if (typeof method == "function"){
instance[name] = function(name, method){
return function(){
try { return method.apply(this, arguments);}
catch(ex) {log(1, name + "(): " + ex.message);}
};
}(name, method);
}
}
}

return instance;
}

//more code here

}();
 Learn more
http://www.slideshare.net/nzakas/enterprise-javascript-error-handling-presentation
 Application Core Jobs
• Manage module lifecycle
• Enable inter-module communication
• General error handling
• Be extensible
Why not?
 Web applications change
Often in ways that you couldn't possibly anticipate
Plan for extension
 flickr.com/photos/pointnshoot/1443575327/

Anything built for extension can never be

obsolete
Extensions augment the capabilities of the core to keep it relevant and useful
 Module
Module Module

Module Sandbox Module

Application
Extension Extension
Core

Base Library
 What Extensions?
• Error handling
• Ajax communication
• New module capabilities
• General utilities
• Anything!
Ajax communication comes in different forms
Tends to be tied to something available on the server
 Request format Entrypoint

Response format

Three parts must be in sync for Ajax to work

Modules shouldn't know anything about any of this
 Module
Module Module

Module Sandbox Module

Application
Extension Ajax/XML
Core

Base Library
GET ?name=value&name=value /ajax
Request format Entrypoint

Response format
<response>
<status>ok|error</status>
<data>
<results>
<result name="..." />
<result name="..." />
</results>
</data>
</response>
 Entrypoint
var xhr = new XMLHttpRequest();
xhr.open("get", "/ajax?name=value", true);
Request
xhr.onreadystatechange = function(){ format
if (xhr.readyState == 4){
if (xhr.status == 200 || xhr.status == 304){
var statusNode = xhr.responseXML.getElementsByTagName("status")[0],
dataNode = xhr.responseXML.getElementsByTagName("data")[0];

if (statusNode.firstChild.nodeValue == "ok"){
handleSuccess(processData(dataNode));
} else { Response
handleFailure(); format
}

} else {
handleFailure();
}
}

};

xhr.send(null);
Basic implementation
Lowest-level Ajax with XMLHttpRequest
 Library
reference Entrypoint

var id = Y.io("/ajax?name=value", {
method: "get", Request
on: { format
success: function(req){
var statusNode = req.responseXML.getElementsByTagName("status")[0],
dataNode = req.responseXML.getElementsByTagName("data")[0];
if (statusNode.firstChild.nodeValue == "ok"){
handleSuccess(processData(dataNode));
} else { Response
handleFailure(); format
}
},
failure: function(req){
handleFailure();
}
}
});

Implementation using a library

Hides some of the ugliness but still tightly coupled to Ajax implementation
var id = sandbox.request({ name: "value" }, {
success: function(response){
handleSuccess(response.data);
},
failure: function(response){
handleFailure();
}
});

Implementation using sandbox

Passes through to core - hides all Ajax communication details
 Request format Entrypoint

Response format

Ajax extension encapsulates all details

Any of these three can change without affecting modules
 GET ?name=value&name=value /request
Request format Entrypoint

Response format
{
status: "ok|error",
data: {
results: [
"...",
"..."
]
}
}
 Module
Module Module

Module Sandbox Module

Application
Extension Ajax/JSON
Core

Base Library
 Ajax Extension Jobs
• Hide Ajax communication details
• Provide common request interface
• Provide common response interface
• Manage server failures
 Application Architecture
Modules
Sandbox
Application Core
Base Library
 Module
Module Module

Module Sandbox Module

Application
Extension Extension
Core

Base Library
The base library provides basic functionality
Ironic, huh?

Base Library
 flickr.com/photos/kartik_m/2724121901/

Most applications are too tightly coupled

to the base library
Developers get upset when they can't touch the base library directly
High-Performance JavaScript, OSCON 2007
Joseph Smarr, Plaxo, Inc.
 Learn more
http://josephsmarr.com/2007/07/25/high-performance-javascript-oscon-2007/
Ideally, only the application core
has any idea what base library is
being used
 Module
Module Module

Module Sandbox Module

Application
Core

Dojo
 Module
Module Module

Module Sandbox Module

Application
Core

YUI
 Base Library Jobs
• Browser normalization
• General-purpose utilities
 Parsers/serializers for XML, JSON, etc.
 Object manipulation
 DOM manipulation
 Ajax communication
• Provide low-level extensibility
 Module
Module Module

Module Sandbox Module

Application
Extension Extension
Core

Extension Base Library Extension

Architecture Knowledge
 Module
Module Module

Module Sandbox Module

Application
Extension Extension
Core

Extension Base Library Extension

Only the base library knows which browser
is being used
No other part of the architecture should need to know

Base Library
Only the application core knows which
base library is being used
No other part of the architecture should need to know

Application
Core

Base Library
 Sandbox

Application
Core

Only the sandbox knows which application core

is being used
No other part of the architecture should need to know
 Module
Module Module

Module Sandbox Module

The modules know nothing except that

the sandbox exists
They have no knowledge of one another or the rest of the architecture
 Module
Module Module

Module Sandbox Module

Application
Extension Extension
Core

Extension Base Library Extension

No part knows about the web application

Advantages
 flickr.com/photos/kgoldendragon613/278240446/

Multiple different applications can be created

with the same framework
Minimize ramp-up time by reusing existing components
Each part can be tested separately
You just need to verify that each is doing it's unique job

flickr.com/photos/misocrazy/151021636/
A scalable JavaScript architecture
allows you to replace any block
without fear of toppling the tower

flickr.com/photos/aku-ma/2424194422/
The End
 Etcetera
•My blog: www.nczonline.net
•Twitter: @slicknet
•These Slides: slideshare.net/nzakas