1. ES6 modules allow for modular code through the use of export and import statements. Exports define what is public in a module, and imports access those exports from other modules. 2. Prior to ES6, many patterns existed for modular code like anonymous closures, revealing module pattern, CommonJS, and AMD, but they had various issues. 3. Webpack and Rollup are module bundlers that take modules defined with import/export and bundle them for usage in browsers which do not natively support modules. They also convert ES6 code to ES5 for browser compatibility.

1. ES6 modules
Algiers tech meetup - March 25th, 2017
Ismail Hamadi(hamza)
@ham_ism
ismnoiet@gmail.com

2. • What is a module
Table of Content
• Before ES6 modules
• ES6 modules
• Export statement
• Import statement
• Webpack
• Rollup.js

3. What is a module
A module is like a chapter for a book.
A module is like a
brick for your application.

4. Before ES6 modules
Anonymous closure
Global imports
Revealing module pattern
Commonjs module pattern
AMD pattern
UMD pattern

5. Anonymous closure
// global function
function showUsers(users){
users.map(function(user){
console.log(user);
});
}
(function () {
// body of our module
var users = ['mohamed', 'karim', 'amine'];
showUsers(users);
})();

6. Global imports
// global function
function showUsers(users){
users.map(function(user){
console.log(user);
});
}
(function (x) {
// body of our module
var users = ['mohamed', 'karim', 'amine'];
x(users);
})(showUsers);

7. Revealing module pattern
var myModule = (function () {
// body of our module
var users = ['mohamed', 'karim', 'amine'];
return {
showUsers: function(){
users.map(function(user){
console.log(user);
});
},
addUser: function(name){
users.push(name);
}
}
})();
myModule.showUsers();

8. Commonjs module pattern
var users = ['mohamed', 'karim', 'amine'];
module.exports = {
showUsers: function(){
users.map(function(user){
console.log(user);
});
},
addUser: function(name){
users.push(name);
}
}

9. Commonjs module pattern
var list = require('./commonjs-module-pattern');
list.showUsers();
list.addUser('algiers tech meetup');
console.log(Array(40).join('-'));
list.showUsers();
// we can't access users.
console.log('users are : ',list.users);

10. AMD pattern
// amd pattern simplified implimentation.
function define(dependencies,cb){
var dependenciesArray = [];
dependencies.map(function(dep){dependenciesArray.push(dep());});
cb.apply(null,dependenciesArray);
}
function dep1(){
console.log('dep1');return 'bingo';
}
function dep2(){
console.log('dep2');return 'mingo';
}
define([dep1,dep2],function(dep1,dep2){
console.log('dep1 returned : ',dep1);
console.log('dep2 returned : ',dep2);
})

11. UMD pattern
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['dep1', 'dep2'], factory);
} else if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('dep1'), require('dep2'));
} else {
// Browser globals (Note: root is window)
root.returnExports = factory(root.dep1, root.dep2);
}
}(this, function (dep1, dep2) {
// Methods
function notHelloOrGoodbye(){}; // A private method
function hello(){}; // A public method because it's returned (see below)
function goodbye(){}; // A public method because it's returned (see below)
// Exposed public methods
return {
hello: hello,
goodbye: goodbye
}
}));

12. es6 modules
supported globally by 0.01%*
* according to caniuse.com

13. Export statement
export x;
x = named export
x = default export
x = alias export

14. Import statement
import x from y;
x = named import
x = default import
x = alias import
x = namespace import
y = import source

15. Import statement
• imports are live read-only views on exported values
• we can’t change the export object, however you can
change property name value.

16. webpack
• bundle all the modules(concatenation)
• convert ES6 code to ES5(using babel)

17. Rollup.js
bundle all the modules( a clean bundle)

18. Resources
http://rollupjs.org
medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc
http://2ality.com/2014/09/es6-modules-final.html
https://code.lengstorf.com/learn-rollup-js/
https://egghead.io/lessons/javascript-intro-to-webpack
http://exploringjs.com/es6/ch_modules.html
https://webpack.js.org/guides/installation/

19. Questions
?
@ham_ism
ismnoiet@gmail.com
Thanks for your time