1. Introducing Applitude
Simple Module Management

2. Eric Elliott
Author
"Programming JavaScript Applications"

3. Modularity = Simplicity

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

5. Build Lots of Small Apps!
(modules)

6. Principles of
Modularity

7. Principles of
Modularity
(modules are...)

8. Specialized
(do one thing)

9. Independent
(don't depend
on each other)

10. Decomposable
(work in
isolation)

11. Recomposable
(work in
different apps)

12. Substitutable
(can swap
modules)

13. Module
Interfaces

14. "Program to an
interface, not an
implementation."
- Gang of Four

15. Open / Closed
Principle

16. Open for
Extension

17. Closed for
Modification
(breaking changes)

18. Communicate through
Mediator
(event bus)

19. Module Framework
Responsibilities

20. Namespacing

21. Sandbox API

22. Expose
Environment

23. Lifecycle

24. Load Timing

25. Define
Module API

26. Introducing Applitude
(a module framework)

27. An Applitude Module
// IIFE for encapsulation
(function (app) {
// your code here
}(applitude));

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

29. Provide an API
(function (app) {
'use strict';
var namespace = 'hello',
api;
function hello() {
return 'hello, world';
}
api = {
hello: hello
};
app.register(namespace, api);
}(applitude));

30. Register
(function (app) {
'use strict';
var namespace = 'hello',
api;
function hello() {
return 'hello, world';
}
api = {
hello: hello
};
app.register(namespace, api);
}(applitude));

31. Sandbox API
app.register();
app.environment // object
app.deferred(); // also .when(), .queue(), ...
app.o(); // prototypal oo
app.events();
app.log();

32. .load()
api = {
load: load,
render: render,
beforeRender: [promise, iou, eventually]
};
runs early!
(please don't block)

33. .render()
api = {
load: load,
render: render,
beforeRender: [promise, iou, eventually]
};
waits around...

34. .render()
api = {
load: load,
render: render,
beforeRender: [promise, iou, eventually]
};
for load...

35. .beforeRender
api = {
load: load,
render: render,
beforeRender: [promise, iou, eventually]
};
and this stuff...

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

37. Use Events
(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.

38. Listen
(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));

39. Better Than Ice Cream
app.register();
app.environment // object
app.deferred();
app.when();
app.o(); // prototypal oo
...

40. Get the Source
http://dilvie.github.com/applitude/

41. Get the Book
http://ericleads.com/javascript-applications/