Introducing Applitude: Simple Module Management
-
Upload
eric-hamilton -
Category
Technology
-
view
683 -
download
2
description
Transcript of Introducing Applitude: Simple Module Management
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/