JavaScript module systems

The idea of this presentation is to talk about the importance and aplicability of a module system on a programming language. I give examples and use cases of the current standards we have in the JavaScript world including a notable mention to Harmony modules.

Links:

Netshoes
http://netshoes.com.br

FEMUG-SP (Front-End Meetup Group São Paulo)
http://sp.femug.com

ZOFE podcast (Zone of Front-Enders)
http://zofe.com.br

Module Pattern
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript

CommonJS spec
http://wiki.commonjs.org/wiki/CommonJS

CommonJS Modules spec
http://wiki.commonjs.org/wiki/Modules

Browserify
http://browserify.org

AMD
https://github.com/amdjs/amdjs-api/blob/master/AMD.md

Why AMD?
http://requirejs.org/docs/whyamd.html

RequireJS
http://requirejs.org

RequireJS plugins
http://requirejs.org/docs/plugins.html

RequireJS optimization tool
http://requirejs.org/docs/optimization.html

Harmony Modules
http://people.mozilla.org/~jorendorff/es6-draft.html#sec-modules

Babel (previously called 6to5)
https://github.com/babel/babel

Traceur
https://github.com/google/traceur-compiler

Transcript

1. JavaScript module systems @rafaelrinaldi
2. @rafaelrinaldi
3. http://netshoes.com.br
4. http://sp.femug.com
5. http://zofe.com.br
6. JavaScript is both very dynamic and multi-paradigm programming language
7. That’s both awesome and awkward
8. Awesome because • You can implement whatever programming paradigm you want; • Easy to learn. Just create a bunch of functions and rock on! • Easy to run. The only requirement is a browser.
9. Awkward because • It has lots of gotchas; • The browser environment itself is very complex and unpredictable; • The community is still evolving; there’s no “right way” of doing things; • “Toy language” legacy.
10. The language itself doesn’t provide features that are considered basic in other modern languages
11. Long story short
12. JavaScript don’t provide a native module system
13. # Ruby module system require 'format' module Log def warn(message) puts format.call(message) end end
14. # Python module system from helpers.string import format def warn(message): print format(message)
15. // Go module system package log import ( "helpers/string/format", "fmt" ) func warn() { fmt.Println(format("Of course I have a module system!")) }
16. Why does it matter?
17. A module system is a key requirement when it comes to code modularization
18. Multiple script tags
19. <script src="utils/toArray.js"></script> <script src="modules/carousel.js"></script> <script src="modules/dropdown.js"></script> <script src="core/initialize.js"></script>
20. Multiple script tags • Somewhat sane code organization; • Multiple file requests; • Relies on the order that scripts are defined; • Zero control over global name collision.
21. Module Pattern (and its variants)
22. AJAX came out and we started to write more JavaScript
23. Scripts → Applications
24. Larger applications demand a good code architecture
25. var Module = (function () { // "private" var myPrivateVariable, myPrivateMethod; myPrivateVariable = 'foo'; myPrivateMethod = function() {} // "public" return { myPublicVariable: 'bar', myPublicMethod: function () {} }; })();
26. Module Pattern • Provide a nice way of organizing modules and exposing their APIs; • Still doesn’t solve dependency organization nor dependency loading.
27. CommonJS
28. HTML5 and Node.js came out and all of sudden everything is being written in JavaScript
29. CommonJS is a community effort to define best practices with a goal of compatibility across multiple environments
30. Later adopted as the default module system for Node.js
31. // No `define()`, the file itself is a closure // Nice way to `require()` dependencies var log = require('debug/log'); var toArray = require('helpers/toArray'); var parseJSON = require('serialization/json').parse; function lorem() { log('I am a CommonJS module!'); } // Expose the public API exports.lorem = lorem; /* To use this module we've created, simple `require()` it: */ var Module = require('module'); // Calling a public method Module.lorem(); // I am a CommonJS module!
32. CommonJS • The beauty of CommonJS is its simplicity; • Perfect for server side JS; • Synchronous nature, doesn’t know nothing about the browser; • Browserify kinda solves that by compiling modules to vanilla JS.
33. AMD
34. AMD stands for Asynchronous Module Definition
35. It was born as a set of changes to the CommonJS spec
36. It’s a mechanism for defining modules and its dependencies in an asynchronous way
37. The browser is asynchronous by nature, AMD was made to play well with it
38. // Define a new module, the file name will be set as the id define( // Module dependencies ['debug/log', 'helpers/toArray', 'serialization/json/parse'], // Module implementation function(log, toArray, parseJSON) { function lorem() { log('I am an AMD module!'); } return { lorem: lorem } } );
39. /* To use this module we've created, simply define it as a dependency and use it: */ // Creating a new module that uses our previously created module define(['module'], function(Module) { console.log(Module.lorem()); // I am an AMD module! });
40. AMD • The syntax looks a bit weird at first glance (but you get used to it) • You can use whatever patterns and paradigms you want, AMD will just give you a sane module system to work with; • Easy way to spot module dependencies; • All dependencies are ready to be used on module implementation.
41. Module Loaders
42. Since AMD is just an API, you must use what’s called a module loader
43. The most popular module loader for AMD is by far RequireJS (but there are others)
44. RequireJS is also Node.js friendly
45. require.config({ // Base path for all the modules loaded baseUrl: 'assets/js', paths: { // Path aliases are awesome 'foo': 'lib/lorem/ipsum/dolor/foo', // Super easy to implement things like cache busting 'bar/baz': 'bar/baz_v0.3.2' } });
46. Goodies
47. RequireJS offers support for plugins
48. define( // Plugins always end with a bang `!` ['text!./tmplt/sliderTemplate.mustache', 'image!./img/doge.png'], function(sliderTemplate, doge) { var template = sliderTemplate; document.body.appendChild(doge); } );
49. Lazy loading support
50. define(['require'], function(require) { // List of files to be lazy loaded var files = ['vendors/analytics', 'vendors/ab_test']; // Calling it directly just so you can get the idea // But you could wait for a user interaction, for example require(files, function(analytics, ab_test) { analytics.initialize(); ab_test.initialize(); }); });
51. AMD Goodies • No build step required; • Offers an optimisation tool called r.js that makes it really easy to generate file wrappers/bundles for production.
52. Harmony modules
53. Harmony is the code-name for the 6th version of ECMAScript (ES6)
54. Lots of features were added, including a native module system!
55. // Regular import import 'file' from 'io/file'; // Import wildcard import * as helpers from 'helpers'; // Named imports import {sha2, md5} from 'crypto'; // Export a function export function warn(message) { console.warn(message); } // Export a constant export const pi = 3.14; // Default exports export default function() { console.log('I am the default module method!'); }
56. // Native support for classes as well import MyClass from 'MyClass'; let instance = new MyClass();
57. Harmony modules • The way that ES6 loads and evaluates code is very similar to AMD’s approach; • ES6 final spec is already being implemented but it’s going to take some time to be well spread across all environments; • In the meantime you can start playing with it using a transpiler such as babel (previously called 6to5) or Traceur from Google; • Doesn’t really fit into production yet because it relies on a large vendor library and even a runtime to work properly.
58. TL;DR
59. What should I use then?
60. There’s no right answer (LOL sorry)
61. If you’re writing server side JavaScript, go with CommonJS
62. If you’re writing code for the browser, AMD can be your best friend
63. Things are still evolving, ES6 is already happening and HTTP2 is coming to help us on that as well
64. @rafaelrinaldi Thanks