Modules and EmbedJS

1,530 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,530
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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!

    ×