Modules and EmbedJS
Download as KEY, PDF1 like1,017 views
The document discusses the importance of modularizing code in JavaScript for better organization, testing, and collaboration among developers. It covers module history, formats like AMD and CommonJS, and the use of loaders such as RequireJS for handling dependencies. The author emphasizes the need to focus on requiring features instead of specific files and promotes the use of tools that support modular development.
![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 module's API
return {};
});
https://gist.github.com/1198466
https://gist.github.com/1262861](https://image.slidesharecdn.com/modules-111108150050-phpapp01/85/Modules-and-EmbedJS-20-320.jpg)
Modules and EmbedJS
- 1. Modules in JavaScript (and in EmbedJS)
- 2. Jens Arps @jensarps jensarps.de github.com/jensarps uxebu.com
- 3. Q: Why modularize your code?
- 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. In an ideal world… … there should also be a comfort bonus.
- 7. Dependency Resolution Namespacing/Globals Loading
- 8. EmbedJS Section How we did modules in 0.1 (Oh, yeah, and we did it wrong.) (But we did it!)
- 9. EmbedJS Section External dependency declaration Script concatenation No loader Custom build tool
- 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. Server => Client
- 13. Server => Client Ideal-world scenario just dropped in!
- 14. EmbedJS Section Hell yeah! We want this!
- 15. Choosing the format: AMD vs. CommonJS
- 16. https://www.google.com/search?q=AMD+vs+CommonJS
- 18. Also, check out @briancavalier‘s presentation on modules: http://briancavalier.com/presentations/pgh-js-amd-10-2011/#0
- 19. You gotta choose yourself… (But I‘d go for AMD)
- 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 module's API return {}; }); https://gist.github.com/1198466 https://gist.github.com/1262861
- 21. EmbedJS Section AMD! async is good dojo goes for AMD
- 23. There‘s a couple of tools out there, but only two can deal with CJS and AMD. curl.js RequireJS
- 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. Dynamic Loading
- 26. require(‘path/to/file’) But: in a dynamic environment we don‘t know what file we need to load.
- 27. EmbedJS Section Features vs. Implementations
- 28. EmbedJS Section Features vs. Implementations You already happen to know this?
- 29. EmbedJS Section We don‘t want to require specific files, we want to require features.
- 30. EmbedJS Section We don‘t want to require specific files, we want to require features. No custom tools, no moar!
- 31. Loader Plugins
- 33. require(‘plugin!my/module’, …); text css cs has …
- 36. Finally, show some code already, dude!
- 37. Building
- 39. Getting rid of require/define statements is still hard.
- 40. Synopsis
- 41. Go modules!
- 42. Go modules! If you have multiple targets: Go features!
- 43. Thanks!