Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modules and EmbedJS

1,771 views

Published on

Slides from my talk at the November Cologne.js meetup about JavaScript modules, EmbedJS, RequireJS and the AMD Feature-Plugin.

Published in: Technology
  • Be the first to comment

Modules and EmbedJS

  1. 1. Modules in JavaScript (and in EmbedJS)
  2. 2. Jens Arps @jensarps jensarps.degithub.com/jensarps uxebu.com
  3. 3. Q: Why modularize your code?
  4. 4. A: Code Organization
  5. 5. Code organization Top 5:• Coder is forced to separate semantically different code.• Small modules are easier to test.• Small modules make errors easier to isolate.• Self-contained modules make errors easier to fix.• Other coders can easily join in on a project.
  6. 6. In an ideal world…… there should also be a comfort bonus.
  7. 7. Dependency ResolutionNamespacing/Globals Loading
  8. 8. EmbedJS Section How we did modules in 0.1 (Oh, yeah, and we did it wrong.) (But we did it!)
  9. 9. EmbedJS Section External dependency declaration Script concatenation No loader Custom build tool
  10. 10. Modules in JavaScript
  11. 11. Scientifically correct description of module history: 1. Community saw the need for modules 2. NodeJS kicked in 3. CommonJS evolved wiki.commonjs.org/wiki/Modules
  12. 12. Server => Client
  13. 13. Server => ClientIdeal-world scenario just dropped in!
  14. 14. EmbedJS Section Hell yeah! We want this!
  15. 15. Choosing the format:AMD vs. CommonJS
  16. 16. https://www.google.com/search?q=AMD+vs+CommonJS
  17. 17. Specs:http://wiki.commonjs.org/wiki/Moduleshttps://github.com/amdjs/amdjs-api/wiki
  18. 18. Also, check out @briancavalier‘s presentation on modules:http://briancavalier.com/presentations/pgh-js-amd-10-2011/#0
  19. 19. You gotta choose yourself… (But I‘d go for AMD)
  20. 20. Or: UMD (Universal Module Definition)(function (name, definition){  if (typeof define === function){ // AMD    define(definition);  } else if (typeof module !== undefined && module.exports) { // Node.js    module.exports = definition();  } else { // Browser    var theModule = definition(), global = this, old = global[name];    theModule.noConflict = function () {      global[name] = old;      return theModule;    };    global[name] = theModule;  }})(myModule, function () {  // return the modules API  return {};});https://gist.github.com/1198466https://gist.github.com/1262861
  21. 21. EmbedJS Section AMD! async is good dojo goes for AMD
  22. 22. Choosing the tool
  23. 23. There‘s a couple of tools out there,but only two can deal with CJS and AMD. curl.js RequireJS
  24. 24. Disclaimer: Personal Subjective Opinion Go for RequireJS James Burke is working on it like mad and it‘s getting more attention than any other loader out there. https://github.com/jrburke/requirejs/
  25. 25. Dynamic Loading
  26. 26. require(‘path/to/file’)But: in a dynamic environment we don‘t know what file we need to load.
  27. 27. EmbedJS Section Features vs. Implementations
  28. 28. EmbedJS Section Features vs. Implementations You already happen to know this?
  29. 29. EmbedJS Section We don‘t want to require specific files, we want to require features.
  30. 30. EmbedJS Section We don‘t want to require specific files, we want to require features. No custom tools, no moar!
  31. 31. Loader Plugins
  32. 32. https://github.com/amdjs/amdjs-api/wiki/Loader-Plugins
  33. 33. require(‘plugin!my/module’, …); text css cs has …
  34. 34. AMD Feature Plugin
  35. 35. AMD Feature Pluginhttps://github.com/jensarps/AMD-feature
  36. 36. Finally, show some code already, dude!
  37. 37. Building
  38. 38. r.jshttps://github.com/jrburke/r.js
  39. 39. Getting rid of require/define statements is still hard.
  40. 40. Synopsis
  41. 41. Go modules!
  42. 42. Go modules!If you have multiple targets: Go features!
  43. 43. Thanks!

×