JavaScript Modules

Introduction to JavaScript modules talk from New York Front End Coders meetup 3/26/2014

Transcript

1. JavaScript Modules John Novatnack / @jnovatnack @SquareNY New York Front End Coders Meetup 3/26/2014
2. JavaScript Without Modules • Code in the global namespace • Poor code organization • Difficult to share code between client and server • Painful to use third-party libraries
3. Existing Module Pattern var calendar = (function() { return { daysOfWeekUS : function() { return [ "Sunday" // ... "Saturday" ]}; }; })();
4. Existing Module Pattern var i18n = (function(calendar) { return { Calendar : function() { this.daysOfWeek = function(countryCode) { if (countryCode === 'US') { return calendar.daysOfWeekUS(); } }; }}; })(calendar);
5. Three JavaScript API Modules • CommonJS • Asynchronous Module Definition (AMD) • ECMAScript 6 Harmony
6. CommonJS • CommonJS - Goal is to standardize JavaScript APIs to improve web, desktop, command line interoperability • Node.JS is an implementation of CommonJS modules for server side
7. Declaring CommonJS Modules function daysOfWeekUS() { // ... }; exports.daysOfWeekUS = daysOfWeekUS;
8. Importing CommonJS Modules var calendar = require("./calendar"); function Calendar() { this.daysOfWeek = function(countryCode) { if (countryCode === 'US') { return calendar.daysOfWeekUS(); } }}; exports.Calendar = Calendar;
9. Browserify • Browserify bundles CommonJS modules for shipping to the browser $ browserify calendar.js i18n.js -o bundle.js <script src="dist/bundle.js"></script>
10. Node Libraries and Browserify • In addition to your own modules, browserify will bundle browser compatible node modules
11. Importing Node Library $ npm install console-browserify var calendar = require("./calendar"); var log = require("console-browserify"); function Calendar() { this.daysOfWeek = function(countryCode) { log.debug('daysOfWeek for countryCode: ', countryCode); // ... }}; exports.Calendar = Calendar;
12. Asynchronous Module Definition (AMD) • CommonJS modules have been criticized for not being ideal for browsers • AMD modules focus on browser modules ◦ Especially asynchronous loading
13. Defining AMD Modules define([], function() { return { daysOfWeekUS : function() { return [ "Sunday", // ... "Saturday" ]; }}; });
14. Importing AMD Modules define(["calendar"], function(calendar) { return { Calendar : function() { this.daysOfWeek = function(countryCode) { if (countryCode === 'US') { return calendar.daysOfWeekUS(); }}; }}; });
15. RequireJS and AMD Modules • RequireJS is a popular AMD module loader ◦ Modules are loaded by the browser asynchronously as needed
16. RequireJS Loading Example <script data-main="scripts/app" src="scripts/require.js"></script> window.displayAvailabilityCalendar = function() { require(["i18n"], function(i18n) { alert("Displaying calendar with day ordering " + new i18n.Calendar().daysOfWeek("US")); }); } Dependencies loaded lazily Module executed after dependencies are loaded
17. ECMAScript 6 (ES 6) Modules • ECMAScript 6 Harmony next version of JavaScript specification • Large number of language changes including classes, new iterators, collections library and modules
18. Declaring ES6 Modules function daysOfWeekUS() { return [ "Sunday", // ... "Saturday", ]; } export { daysOfWeekUS };
19. Importing ES6 Modules import { daysOfWeekUS } from "./calendar"; function Calendar() { this.daysOfWeek = function(countryCode) { if (countryCode === 'US') { return daysOfWeekUS(); } }}; export { Calendar };
20. Additional ES6 Export Syntax // Export functions, vars and ES6 classes export function foo() { }; export var x = 10; export class Foo { }; // Export a default for the module export default daysOfWeekUS;
21. Additional ES6 Import Syntax // Import the default export import dow from "./calendar"; // Rename an import import { daysOfWeekUS as dow } from "./calendar"; // Set module to an object module calendar from "./calendar";
22. Use ES6 Modules Today • ES6 module transpiler is a project started by Square that maps ES6 modules to AMD, CommonJS, or global modules • Google Traceur is a general ES6 compiler that also supports modules
23. ES6 Module Transpiler Example $ npm install -g es6-module-transpiler $ compile-modules i18n.js calendar.js \ --to=build/ \ --type='cjs'
24. Thanks! Source, Node & Grunt configs @ https://github.com/jnovatnack/js-modules-talk
25. Learning More • Writing Modular JavaScript With AMD, CommonJS & ES Harmony by Addy Osmani