Download to read offline
![AMD
/* makeItAwesome.js */!
define(['multiplier/awesome'], function (multiplier) {!
function makeItAwesome(value) {!
return value * multiplier;!
};!
!
return makeItAwesome;!
});](https://image.slidesharecdn.com/moving-to-modulesshare-140602085024-phpapp01/85/Moving-to-modules-18-320.jpg)
![AMD
/* makeItAwesome.js */!
define(['multiplier/awesome'], function (multiplier) {!
function makeItAwesome(value) {!
return value * multiplier;!
};!
!
return makeItAwesome;!
});!
!
!
!
/* app.js */!
define(['makeItAwesome', 'status/good'], function (makeItAwesome,
everything) {!
everything = makeItAwesome(everything);!
});](https://image.slidesharecdn.com/moving-to-modulesshare-140602085024-phpapp01/85/Moving-to-modules-19-320.jpg)
![RequireJS shim
requirejs.config({!
baseUrl: '/src/js',!
paths: {!
'foo': 'legacy/foo'!
},!
shim: {!
'foo': {!
deps: ['bar'],!
exports: 'Foo',!
init: function (bar) {!
return this.Foo.noConflict();!
}!
}!
}!
});](https://image.slidesharecdn.com/moving-to-modulesshare-140602085024-phpapp01/85/Moving-to-modules-28-320.jpg)
![[ interlude ]
possible sticking points](https://image.slidesharecdn.com/moving-to-modulesshare-140602085024-phpapp01/85/Moving-to-modules-30-320.jpg)
![code sequence
/* Old - app.js */!
Foo.init();!
Bar.init(); // Bar depends on globals created during Foo.init()!
!
!
!
/* Transitional - app.js */!
define(['foo', 'bar'], function (Foo, Bar) {!
Foo.init();!
Bar.init();!
});](https://image.slidesharecdn.com/moving-to-modulesshare-140602085024-phpapp01/85/Moving-to-modules-32-320.jpg)
![code sequence
/* Old - app.js */!
Foo.init();!
Bar.init(); // Bar depends on globals created during Foo.init()!
!
!
!
/* Transitional - app.js */!
define(['foo', 'bar'], function (Foo, Bar) {!
Foo.init();!
Bar.init();!
});!
!
!
!
/* Final form - bar.js */!
define(['foo']), function (Foo) {!
// Former Foo.init logic is now part of Foo's module definition!
// so just do Bar stuff!
}](https://image.slidesharecdn.com/moving-to-modulesshare-140602085024-phpapp01/85/Moving-to-modules-33-320.jpg)
![globals
You're using AMD, but others depending
on your lib don't (yet).
!
!
(function (root, factory) {!
if (typeof define === 'function' && define.amd) {!
// AMD. Register as an anonymous module.!
define(['b'], factory);!
} else {!
// Browser globals!
root.amdWeb = factory(root.b);!
}!
}(this, function (b) {!
// use b in some fashion.!
// ...!
return amdWeb;!
}));](https://image.slidesharecdn.com/moving-to-modulesshare-140602085024-phpapp01/85/Moving-to-modules-35-320.jpg)
Uploaded bySean Mize
Moving to modules
The document discusses the transition to modular programming in JavaScript, highlighting the advantages of modules such as improved dependency management, reusability, and a cleaner global namespace. It emphasizes the goals of the Harmony initiative to standardize module systems, facilitate interoperability, and promote usability. Steps for migration, including mapping dependencies and utilizing loaders, are outlined to assist developers in adopting these modular practices effectively.
More Related Content
Moving to modules
- 1.
- 2.
- 3.
- 4. modules: how do theywork?
- 5. a unit ofcode… …with an encapsulated definition …that explicitly declares its dependencies …whose instances can be mapped to different identifiers that expose its interface
- 6. benefits • Clean(er) globalnamespace • Eases dependency management • Reusability • Testability
- 7. should i waitfor harmony?
- 8.
- 9. goals of harmony •Obviate need for globals • Orthogonality from existing features • Smooth refactoring from global code to modular code • Smooth interoperability with existing JS module systems like AMD, CommonJS, and Node.js • Fast compilation • Simplicity and usability • Standardized protocol for sharing libraries • Compatibility with browser and non-browser environments • Easy asynchronous external loading
- 10. goals of harmony •Obviate need for globals • Orthogonality from existing features • Smooth refactoring from global code to modular code • Smooth interoperability with existing JS module systems like AMD, CommonJS, and Node.js • Fast compilation • Simplicity and usability • Standardized protocol for sharing libraries • Compatibility with browser and non-browser environments • Easy asynchronous external loading
- 11. no technical excuse notto migrate now
- 12. where do istart?
- 13.
- 14. what do ineed? format and loader
- 15. node.js /* makeItAwesome.js */! varmultiplier = require('multiplier').awesome;! ! function makeItAwesome(value) {! return value * multiplier;! }! ! exports = module.exports = makeItAwesome;
- 16. node.js /* makeItAwesome.js */! varmultiplier = require('multiplier').awesome;! ! function makeItAwesome(value) {! return value * multiplier;! }! ! exports = module.exports = makeItAwesome;! ! ! ! /* app.js */! var makeItAwesome = require('makeItAwesome');! var everything = require('status').good;! ! everything = makeItAwesome(everything);
- 17. exports = module.exports= ? /* makeItAwesome.js */! var multiplier = require('multiplier').awesome;! ! function makeItAwesome(value) {! return value * multiplier;! }! ! exports = module.exports = makeItAwesome;! ! ! ! /* Imagine this require() implementation */! function (module, exports) {! exports = some_func;! // re-assigns exports, exports is no longer a shortcut,! // and nothing is exported.! module.exports = some_other_func;! } (module, module.exports);
- 18. AMD /* makeItAwesome.js */! define(['multiplier/awesome'],function (multiplier) {! function makeItAwesome(value) {! return value * multiplier;! };! ! return makeItAwesome;! });
- 19. AMD /* makeItAwesome.js */! define(['multiplier/awesome'],function (multiplier) {! function makeItAwesome(value) {! return value * multiplier;! };! ! return makeItAwesome;! });! ! ! ! /* app.js */! define(['makeItAwesome', 'status/good'], function (makeItAwesome, everything) {! everything = makeItAwesome(everything);! });
- 20. which? Moving to Node? ☛Node variant of CommonJS Primarily in the browser? ☛ AMD + RequireJS, curl.js or similar Need to share logic across both? ☛ You’ll need help.
- 21.
- 22. 1. shave feweryaks 2. choose approach 3. apply consistently & clearly
- 23.
- 24. useful questions • Whatare your goals? What would be most useful for your near-term needs? • How quickly/completely can/do you need to convert? • F/E benefits or code reuse across stack? • Are there other consumers of your libs?
- 25.
- 26. migrate! 1. Map yourdependencies
- 27. migrate! 1. Map yourdependencies 2. Load all of your files via loader
- 28. RequireJS shim requirejs.config({! baseUrl: '/src/js',! paths:{! 'foo': 'legacy/foo'! },! shim: {! 'foo': {! deps: ['bar'],! exports: 'Foo',! init: function (bar) {! return this.Foo.noConflict();! }! }! }! });
- 29. migrate! 1. Map yourdependencies 2. Load all of your files via loader 3. Walk your dependencies, wrapping or converting as you go
- 30. [ interlude ] possiblesticking points
- 31. code sequence /* Old- app.js */! Foo.init();! Bar.init(); // Bar depends on globals created during Foo.init()
- 32. code sequence /* Old- app.js */! Foo.init();! Bar.init(); // Bar depends on globals created during Foo.init()! ! ! ! /* Transitional - app.js */! define(['foo', 'bar'], function (Foo, Bar) {! Foo.init();! Bar.init();! });
- 33. code sequence /* Old- app.js */! Foo.init();! Bar.init(); // Bar depends on globals created during Foo.init()! ! ! ! /* Transitional - app.js */! define(['foo', 'bar'], function (Foo, Bar) {! Foo.init();! Bar.init();! });! ! ! ! /* Final form - bar.js */! define(['foo']), function (Foo) {! // Former Foo.init logic is now part of Foo's module definition! // so just do Bar stuff! }
- 34. globals You're using AMD,but others depending on your lib don't (yet).
- 35. globals You're using AMD,but others depending on your lib don't (yet). ! ! (function (root, factory) {! if (typeof define === 'function' && define.amd) {! // AMD. Register as an anonymous module.! define(['b'], factory);! } else {! // Browser globals! root.amdWeb = factory(root.b);! }! }(this, function (b) {! // use b in some fashion.! // ...! return amdWeb;! }));
- 36. migrate! 1. Map yourdependencies 2. Load all of your files via loader 3. Walk your dependencies, wrapping or converting as you go 4. Profit!
- 37.
- 38. clean up • Packagemanagement • Optimize • Great time to incorporate grunt (or gulp!) w/ linting/validation into your workflow • Add tests!
- 39. don’t wait for harmony. ! writebetter code now.
- 40.