Introducing ApplitudeSimple Module Management

Eric ElliottAuthor

"Programming JavaScript Applications"

Modularity = Simplicity

Avoid Complexity(don't build a large app!)

Build Lots of Small Apps!(modules)

Principles of

Modularity

Principles of

Modularity(modules are...)

Specialized

(do one thing)

Independent

(don't dependon each other)

Decomposable

(work inisolation)

Recomposable

(work indifferent apps)

Substitutable

(can swap modules)

Module Interfaces

"Program to an interface, not an implementation."

- Gang of Four

Open / Closed Principle

Open for

Extension

Closed for

Modification(breaking changes)

Communicate through

Mediator(event bus)

Module FrameworkResponsibilities

Namespacing

Sandbox API

Expose Environment

Lifecycle

Load Timing

Define Module API

Introducing Applitude(a module framework)

An Applitude Module

// IIFE for encapsulation

(function (app) {// your code here

}(applitude));

Namespace it...

(function (app) { // namespace should be a var var namespace = 'hello';}(applitude));

Provide an API(function (app) { 'use strict'; var namespace = 'hello', api;

function hello() { return 'hello, world'; }

api = { hello: hello };

app.register(namespace, api);}(applitude));

Register(function (app) { 'use strict'; var namespace = 'hello', api;

function hello() { return 'hello, world'; }

api = { hello: hello };

app.register(namespace, api);}(applitude));

Sandbox API

app.register();app.environment // objectapp.deferred(); // also .when(), .queue(), ...app.o(); // prototypal ooapp.events();app.log();

api = { load: load, render: render,

beforeRender: [promise, iou, eventually] };

runs early!(please don't block)

.load()

api = { load: load, render: render,

beforeRender: [promise, iou, eventually] };

waits around...

.render()

api = { load: load, render: render,

beforeRender: [promise, iou, eventually] };

for load...

.render()

api = { load: load, render: render,

beforeRender: [promise, iou, eventually] };

and this stuff...

.beforeRender

$(document).ready(function () { // Make this faster! // developer.yahoo.com/yslow});

and this guy

.beforeRender

(function (app) { var namespace = 'sendMessage', api;

api = function sendMessage(message) { app.events.trigger('send_message.' +

namespace, message); };

app.register(namespace, api);}(applitude));

Modules should NOT call each other directly.

Use Events

(function (app) { var namespace = 'messageLogger', api;

function subscribe() { app.events.on('send_message.*',

function (payload) { app.log(payload); }); }

// public interface api = { load: subscribe };

// this never has to change app.register(namespace, api);}(applitude));

Listen

app.register();app.environment // object

app.deferred();app.when();app.o(); // prototypal oo...

Better Than Ice Cream

Get the Sourcehttp://dilvie.github.com/applitude/

Get the Bookhttp://ericleads.com/javascript-applications/