Moving to Modules

You believe in the power of JavaScript modules, but you have an existing app, stack or platform infrastructure to keep running. Between maintenance and new features, where do you carve out time to switch over? After a brief overview of modules and why they're great, we'll dig into how to actually migrate a code base, from plotting your approach to implementation tips.

Video: http://youtu.be/FbdcdC8mqwE?t=50m51s (watch the entire video from the beginning for other great talks about shadow DOM and competing task runners)

Talk from February 19, 2014 NYCHTML5 Meetup: http://www.meetup.com/nychtml5/events/160684962/

Transcript

1. moving to modules @mize
2. hi! @mize
3. “moving to modules”?
4. modules: how do they work?
5. a unit of code… …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) global namespace • Eases dependency management • Reusability • Testability
7. should i wait for harmony?
8. —Sean Mize “nope.”
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 not to migrate now
12. where do i start?
13. pick your poison
14. what do i need? format and loader
15. node.js /* makeItAwesome.js */! var multiplier = require('multiplier').awesome;! ! function makeItAwesome(value) {! return value * multiplier;! }! ! exports = module.exports = makeItAwesome;
16. node.js /* makeItAwesome.js */! var multiplier = 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. ok, but what about…
22. 1. shave fewer yaks 2. choose approach 3. apply consistently & clearly
23. pick your battles
24. useful questions • What are 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. migrate!
26. migrate! 1. Map your dependencies
27. migrate! 1. Map your dependencies 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 your dependencies 2. Load all of your files via loader 3. Walk your dependencies, wrapping or converting as you go
30. [ interlude ] possible sticking 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 your dependencies 2. Load all of your files via loader 3. Walk your dependencies, wrapping or converting as you go 4. Profit!
37. clean up
38. clean up • Package management • Optimize • Great time to incorporate grunt (or gulp!) 
 w/ linting/validation into your workflow • Add tests!
39. don’t wait for harmony. ! write better code now.
40. thank you! @mize