Introducing Applitude: Simple Module Management

943 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
943
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducing Applitude: Simple Module Management

  1. 1. Introducing Applitude Simple Module Management
  2. 2. Eric Elliott Author"Programming JavaScript Applications"
  3. 3. Modularity = Simplicity
  4. 4. Avoid Complexity(dont build a large app!)
  5. 5. Build Lots of Small Apps! (modules)
  6. 6. Principles ofModularity
  7. 7. Principles ofModularity (modules are...)
  8. 8. Specialized(do one thing)
  9. 9. Independent(dont dependon each other)
  10. 10. Decomposable (work inisolation)
  11. 11. Recomposable (work indifferent apps)
  12. 12. Substitutable(can swap modules)
  13. 13. ModuleInterfaces
  14. 14. "Program to an interface, not animplementation." - Gang of Four
  15. 15. Open / Closed Principle
  16. 16. Open forExtension
  17. 17. Closed forModification (breaking changes)
  18. 18. Communicate through Mediator (event bus)
  19. 19. Module FrameworkResponsibilities
  20. 20. Namespacing
  21. 21. Sandbox API
  22. 22. ExposeEnvironment
  23. 23. Lifecycle
  24. 24. Load Timing
  25. 25. DefineModule API
  26. 26. Introducing Applitude (a module framework)
  27. 27. An Applitude Module// IIFE for encapsulation(function (app) { // your code here}(applitude));
  28. 28. Namespace it...(function (app) { // namespace should be a var var namespace = hello;}(applitude));
  29. 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. 30. Register(function (app) { use strict; var namespace = hello, api; function hello() { return hello, world; } api = { hello: hello }; app.register(namespace, api);}(applitude));
  31. 31. Sandbox APIapp.register();app.environment // objectapp.deferred(); // also .when(), .queue(), ...app.o(); // prototypal ooapp.events();app.log();
  32. 32. .load()api = { load: load, render: render, beforeRender: [promise, iou, eventually]}; runs early! (please dont block)
  33. 33. .render()api = { load: load, render: render, beforeRender: [promise, iou, eventually]}; waits around...
  34. 34. .render()api = { load: load, render: render, beforeRender: [promise, iou, eventually]}; for load...
  35. 35. .beforeRenderapi = { load: load, render: render, beforeRender: [promise, iou, eventually]}; and this stuff...
  36. 36. .beforeRender$(document).ready(function () { // Make this faster! // developer.yahoo.com/yslow}); and this guy
  37. 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 calleach other directly.
  38. 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. 39. Better Than Ice Creamapp.register();app.environment // objectapp.deferred();app.when();app.o(); // prototypal oo...
  40. 40. Get the Sourcehttp://dilvie.github.com/applitude/
  41. 41. Get the Bookhttp://ericleads.com/javascript-applications/

×