Unbundling the JavaScript module bundler - Codemotion Rome 2018
1 like592 views
The document discusses the concept of JavaScript module bundlers, detailing how they work and the various module systems available, including CommonJS, AMD, UMD, and ES2015 modules. It explains the importance of a module bundler in resolving dependencies, packing modules into a single executable asset, and highlights the usage of tools like Webpack for efficient module handling. The presentation also covers best practices for modular programming and the need for standardization in module formats to facilitate reusability across different applications.
![const myModule = (() => {
const privateFoo = () => { /* ... */ }
const privateBar = [ /* ... */ ]
const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
myModule.publicFoo()
myModule.publicBar[0]
myModule.privateFoo // undefined
myModule.privateBar // undefined
privateFoo // undefined
privateBar // undefined 34](https://image.slidesharecdn.com/unbundling-the-javascript-module-bundler-codemotion-rome-20181-180414181850/85/Unbundling-the-JavaScript-module-bundler-Codemotion-Rome-2018-34-320.jpg)
![// or import single functionality
const { concat } = require('./loDash')
concat([1], [2], [3])
// app.js
// import full module
const _ = require('./loDash')
_.concat([1], [2], [3])
// loDash.js
const loDash = {
/* ... */
}
module.exports = loDash
CommonJSCommonJS
module
app using module
42](https://image.slidesharecdn.com/unbundling-the-javascript-module-bundler-codemotion-rome-20181-180414181850/85/Unbundling-the-JavaScript-module-bundler-Codemotion-Rome-2018-42-320.jpg)
![AMD (AMD ( ))
Asynchronous Module DefinitionAsynchronous Module Definition
Require.jsRequire.js
// jquery-1.9.0.js
define(
'jquery',
['sizzle', 'jqueryUI'],
function (sizzle, jqueryUI) {
// Returns the exported value
return function () {
// ...
}
}
)
module
44](https://image.slidesharecdn.com/unbundling-the-javascript-module-bundler-codemotion-rome-20181-180414181850/85/Unbundling-the-JavaScript-module-bundler-Codemotion-Rome-2018-44-320.jpg)
![AMD (AMD ( ))
Asynchronous Module DefinitionAsynchronous Module Definition
Require.jsRequire.js
// app.js
// define paths
requirejs.config({
baseUrl: 'js/lib',
paths: {
jquery: 'jquery-1.9.0'
}
})
define(['jquery'], function ($) {
// this is executed only when jquery
// and its deps are loaded
});
app
45](https://image.slidesharecdn.com/unbundling-the-javascript-module-bundler-codemotion-rome-20181-180414181850/85/Unbundling-the-JavaScript-module-bundler-Codemotion-Rome-2018-45-320.jpg)
![(function (root, factory) {
if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('dep'))
} else if (typeof define === 'function' && define.amd) {
// AMD
define(['dep'], function (dep) {
return (root.returnExportsGlobal = factory(dep))
})
} else {
// Global Variables
root.myModule = factory(root.dep)
}
}(this, function (dep) {
// Your actual module
return {}
}))
loige.link/umd48](https://image.slidesharecdn.com/unbundling-the-javascript-module-bundler-codemotion-rome-20181-180414181850/85/Unbundling-the-JavaScript-module-bundler-Codemotion-Rome-2018-48-320.jpg)
![const $ = require('zepto')
const tippy = require('tippy.js')
const UUID = require('uuidjs')
const { confetti } = require('dom-confetti/src/main')
const store = require('store2')
const Favico = require('favico.js')
!(function () {
const colors = ['#a864fd', '#29cdff', '#78ff44', '#ff718d', '#fdff6a']
const todoApp = (rootEl, opt = {}) => {
const todos = opt.todos || []
let completedTasks = opt.completedTasks || 0
const onChange = opt.onChange || (() => {})
const list = rootEl.find('.todo-list')
const footer = rootEl.find('.footer')
const todoCount = footer.find('.todo-count')
const insertInput = rootEl.find('.add-todo-box input')
const insertBtn = rootEl.find('.add-todo-box button')
const render = () => {
let tips
list.html('')
The browser doesn't know
how to process require.
It doesn't support CommonJS!
56](https://image.slidesharecdn.com/unbundling-the-javascript-module-bundler-codemotion-rome-20181-180414181850/85/Unbundling-the-JavaScript-module-bundler-Codemotion-Rome-2018-56-320.jpg)
return module.exports
}
require('./app')
})(
{
'./app': (module, require) => { ⊠},
'./calculator': (module, require) => { ⊠},
'./log': (module, require) => { ⊠},
'./parser': (module, require) => { ⊠},
'./resolver': (module, require) => { ⊠}
}
) 63](https://image.slidesharecdn.com/unbundling-the-javascript-module-bundler-codemotion-rome-20181-180414181850/85/Unbundling-the-JavaScript-module-bundler-Codemotion-Rome-2018-63-320.jpg)
![const { resolve, join } = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
entry: './app.js',
output: {
path: resolve(join(__dirname, 'build')),
filename: 'app.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env']
]
}
}
}
]
},
plugins: [
new CompressionPlugin()
]
}
Webpack.conïŹg.js
Plugins
Uses a plugin that generates a gzipped copy of
every emitted ïŹle.
72](https://image.slidesharecdn.com/unbundling-the-javascript-module-bundler-codemotion-rome-20181-180414181850/85/Unbundling-the-JavaScript-module-bundler-Codemotion-Rome-2018-72-320.jpg)
Unbundling the JavaScript module bundler - Codemotion Rome 2018
- 1. Unbundling the JavaScript module bundlerUnbundling the JavaScript module bundler{ Luciano Mammino (Luciano Mammino ( ))@loige@loige ROME - APRIL 13/14 2018 loige.link/bundle-rome 1
- 3. Luciano... whoLuciano... who Find me online: - Â (@loige) - Â (lmammino) - - Â (loige.co) Twitter GitHub Linkedin Blog Solution Architect at with @mariocasciaro with @andreaman87 with @Podgeypoos79 3
- 4. 1. A sample app 2. what is a dependency 3. JavaScript module systems 4. How a module bundler works 5. Webpack in 2 minutes! AgendaAgenda 4
- 7. Dynamic DOM manipulation React, Angular & Vue are so... overrated! 7
- 11. Persist state through Local Storage + UUIDs  +store2 uuidjs 11
- 12. 7 Requests only for the JS code! 12
- 15. How to do this?How to do this? 15
- 19. lumpy build$ 1. Downloads the ïŹles from lumpy.txt (and caches them) 2. Concatenates the content of the ïŹles 3. MiniïŹes the resulting source code (using ) 4. Saves the resulting content in vendors.js babel-minify 19
- 22. This is good...This is good... ... in 2008... in 2008 waswas 22
- 23. Today...Today... We can do better!We can do better! 23
- 24. Updating dependencies should be easyUpdating dependencies should be easy We don't want to worry about dependenciesWe don't want to worry about dependencies of dependenciesof dependencies We don't have to worry about the order ofWe don't have to worry about the order of importsimports Today...Today... 24
- 25. DependencyDependency (or coupling) a state in which one object uses a function of another object â Wikipedia 25
- 27. ModulesModules The bricks for structuring non-trivial applications, but also the main mechanism to enforce information hiding by keeping private all the functions and variables that are not explicitly marked to be exported â *Node.js Design Patterns (Second Edition) * yeah, I quite like quoting my stuïŹ... 27
- 28. Meet my friendMeet my friend I.I.F.E.I.I.F.E. (Immediately Invoked Function Expression) loige.link/iife 28
- 29. We generally define a function this wayWe generally define a function this way const sum = (a, b) => a + b sum(a, b) { return a + b } oror then, at some point, we execute it...then, at some point, we execute it... const four = sum(2, 2) 29
- 30. A function in JS creates an isolated scopeA function in JS creates an isolated scope (a, b) => { const secretString = "Hello" return a + b } console.log(secretString) // undefined secretStringsecretString is not visible outside the functionis not visible outside the function 30
- 31. )(arg1, arg2) IIFE allows you to define an isolatedIIFE allows you to define an isolated scope that executes itselfscope that executes itself (arg1, arg2) => { // do stuff here const iAmNotVisibleOutside = true } ( 31
- 32. IIFE is a recurring pattern inIIFE is a recurring pattern in JavaScript modulesJavaScript modules 32
- 33. Let's implement a moduleLet's implement a module that provides:that provides: Â Information hidingInformation hiding exported functionalitiesexported functionalities 33
- 34. const myModule = (() => { const privateFoo = () => { /* ... */ } const privateBar = [ /* ... */ ] const exported = { publicFoo: () => { /* ... */ }, publicBar: [ /* ... */ ] }; return exported })() A module myModule.publicFoo() myModule.publicBar[0] myModule.privateFoo // undefined myModule.privateBar // undefined privateFoo // undefined privateBar // undefined 34
- 35. We want modules to beWe want modules to be   reusablereusable across different apps andacross different apps and organisations...organisations... ...we need...we need AA STANDARD MODULESTANDARD MODULE format!format! 35
- 36. Module system featuresModule system features Must have Simple syntax for import / export Information hiding Allows to deïŹne modules in separate ïŹles Modules can import from other modules (nested dependencies) 36
- 37. Module system featuresModule system features Nice to have Ability to import module subsets Avoid naming collision Asynchronous module loading Seamless support for Browsers & Server-side 37
- 38. xkcd.com/927 38
- 39. JavaScript module systemsJavaScript module systems globals CommonJS (Node.js) AMD (Require.js / Dojo) UMD ES2015 Modules (ESM) Many others (SystemJS, ...) 39
- 40. GlobalsGlobals var $, jQuery $ = jQuery = (() => { return { /* ... */ } })() // ... use $ or jQuery in the global scope $.find('.button').remove() 40
- 41. GlobalsGlobals Might generate naming collisions (e.g. $ overrides browser global variable)  Import order is important  Cannot import parts of modules 41
- 42. // or import single functionality const { concat } = require('./loDash') concat([1], [2], [3]) // app.js // import full module const _ = require('./loDash') _.concat([1], [2], [3]) // loDash.js const loDash = { /* ... */ } module.exports = loDash CommonJSCommonJS module app using module 42
- 43. CommonJSCommonJS No naming collisions (imported modules can be renamed) Huge repository of modules through  Synchronous import only Works natively on the server side only (Node.js) NPM 43
- 44. AMD (AMD ( )) Asynchronous Module DefinitionAsynchronous Module Definition Require.jsRequire.js // jquery-1.9.0.js define( 'jquery', ['sizzle', 'jqueryUI'], function (sizzle, jqueryUI) { // Returns the exported value return function () { // ... } } ) module 44
- 45. AMD (AMD ( )) Asynchronous Module DefinitionAsynchronous Module Definition Require.jsRequire.js // app.js // define paths requirejs.config({ baseUrl: 'js/lib', paths: { jquery: 'jquery-1.9.0' } }) define(['jquery'], function ($) { // this is executed only when jquery // and its deps are loaded }); app 45
- 46. AMD (AMD ( )) Asynchronous Module DefinitionAsynchronous Module Definition Require.jsRequire.js Asynchronous modules Works on Browsers and Server side  Very verbose and convoluted syntax (my opinionâą) 46
- 47. UMDUMD Universal Module DefinitionUniversal Module Definition A module deïŹnition that is compatible with Global modules, CommonJS & AMD   github.com/umdjs/umd 47
- 48. (function (root, factory) { if (typeof exports === 'object') { // CommonJS module.exports = factory(require('dep')) } else if (typeof define === 'function' && define.amd) { // AMD define(['dep'], function (dep) { return (root.returnExportsGlobal = factory(dep)) }) } else { // Global Variables root.myModule = factory(root.dep) } }(this, function (dep) { // Your actual module return {} })) loige.link/umd48
- 49. Allows you to deïŹne modules that can be used by almost any module loader  Complex, the wrapper code is almost impossible to write manually UMDUMD Universal Module DefinitionUniversal Module Definition 49
- 50. // calculator.js const add = (num1, num2) => num1 + num2 const sub = (num1, num2) => num1 - num2 const div = (num1, num2) => num1 / num2 const mul = (num1, num2) => num1 * num2 export { add, sub, div, mul } // app.js import { add } from './calculator' console.log(add(2,2)) // 4 ES2015 modulesES2015 modules module app import speciïŹc functionality 50
- 51. // index.html <html> <body> <!-- ... --> <script type="module"> import { add } from 'calculator.js' console.log(add(2,2)) // 4 </script> </body> </html> ES2015 modulesES2015 modules "works" in some modern browsers 51
- 52. ES2015 modulesES2015 modules Syntactically very similar to CommonJS... BUT import & export are static (allow static analysis of dependencies)  It is a (still work in progress) standard format  Works (almost) seamlessly in browsers & servers 52
- 53. ES2015 modulesES2015 modules Cool & broad subject, it would deserve it's own talk Wanna know more? / Â syntax referenceimport export ECMAScript modules in browsers ES modules: A cartoon deep-dive ES Modules in Node Today! 53
- 54. So many options...So many options... Current most used practice: Use CommonJSÂ or ES2015Â & create "compiled bundles" 54
- 55. Let's try to useLet's try to use CommonJS in theCommonJS in the browserbrowser 55
- 56. const $ = require('zepto') const tippy = require('tippy.js') const UUID = require('uuidjs') const { confetti } = require('dom-confetti/src/main') const store = require('store2') const Favico = require('favico.js') !(function () { const colors = ['#a864fd', '#29cdff', '#78ff44', '#ff718d', '#fdff6a'] const todoApp = (rootEl, opt = {}) => { const todos = opt.todos || [] let completedTasks = opt.completedTasks || 0 const onChange = opt.onChange || (() => {}) const list = rootEl.find('.todo-list') const footer = rootEl.find('.footer') const todoCount = footer.find('.todo-count') const insertInput = rootEl.find('.add-todo-box input') const insertBtn = rootEl.find('.add-todo-box button') const render = () => { let tips list.html('') The browser doesn't know how to process require. It doesn't support CommonJS! 56
- 57. Module BundlerModule Bundler A tool that takes modules with dependencies and emits static assets representing those modules  Those static assets can be processed by browsers! 57
- 58. Dependency graphDependency graph A graph built by connecting every module with its direct dependencies. app dependency A dependency B dependency A2 shared dependency 58
- 59. A module bundler has to:A module bundler has to: Construct the dependency graph (Dependency Resolution) Assemble the modules in the graph into a single executable asset (Packing) 59
- 60. // app.js const calculator = require('./calculator') const log = require('./log') log(calculator('2 + 2 / 4')) // log.js module.exports = console.log // calculator.js const parser = require('./parser') const resolver = require('./resolver') module.exports = (expr) => resolver(parser(expr)) // parser.js module.exports = (expr) => { /* ... */ } // resolver.js module.exports = (tokens) => { /* ... */ } Dependency resolutionDependency resolution app calculator log parser resolver 60 (entrypoint) (1) (2) (3) (4) (5)
- 61. DuringDuring dependency resolutiondependency resolution,, the bundler creates athe bundler creates a modules mapmodules map {        } './app': (module, require) => { âŠÂ }, './calculator': (module, require) => { âŠÂ }, './log': (module, require) => { âŠÂ }, './parser': (module, require) => { âŠÂ }, './resolver': (module, require) => { âŠÂ }, const parser = require('./parser')ÍŸconst resolver = require('./resolver')ÍŸmodule.exports = (expr) => resolver(parser(expr)) 61
- 62. PackingPacking .js {Â Â Â ÂÂÂÂ :Â ÂÂÂÂ Â Â ÂÂÂÂ :Â ÂÂÂÂÂ Â Â ÂÂÂÂ :Â ÂÂÂ } Modules mapModules map Single executableSingle executable JS fileJS file 62
- 63. Packed executable filePacked executable file ((modulesMap) => { const require = (name) => { const module = { exports: {} } modulesMap[name](module, require) return module.exports } require('./app') })( { './app': (module, require) => { ⊠}, './calculator': (module, require) => { ⊠}, './log': (module, require) => { ⊠}, './parser': (module, require) => { ⊠}, './resolver': (module, require) => { ⊠} } ) 63
- 64. Now you know howNow you know how Module bundlers work!Module bundlers work! Â Â And how to convert code writtenAnd how to convert code written usingusing CommonJSCommonJS to a single fileto a single file that works in the browserthat works in the browser 64
- 65. A challenge for you!A challenge for you! If you do, ... I'll have a prize for you!  TIP: you can use to parse JavaScript ïŹles (look for require and module.exports) and to map relative module paths to actual ïŹles in the ïŹlesystem. let me know acorn resolve Can you build a (simple) module bundler from scratch?Can you build a (simple) module bundler from scratch? 65
- 66. A state of the art moduleA state of the art module bundler for the webbundler for the web 66
- 68. webpack app.js yep, recent versions of Webpack work without conïŹg! 68
- 69. webpack ÂÂmode=development app.js Do not compress the code and add annotations! 69
- 71. Webpack conceptsWebpack concepts Entry point: the starting ïŹle for dependency resolution. Output: the destination ïŹle (bundled ïŹle). Loaders: algorithms to parse diïŹerent ïŹle types and convert them into executable javascript (e.g. babel, typescript, but also CSS, images or other static assets) Plugins: do extra things (e.g. generate a wrapping HTML or analysis tools) 71
- 72. const { resolve, join } = require('path') const CompressionPlugin = require('compression-webpack-plugin') module.exports = { entry: './app.js', output: { path: resolve(join(__dirname, 'build')), filename: 'app.js' }, module: { rules: [ { test: /.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: [ ['@babel/preset-env'] ] } } } ] }, plugins: [ new CompressionPlugin() ] } Webpack.conïŹg.js Plugins Uses a plugin that generates a gzipped copy of every emitted ïŹle. 72
- 73. ...And you can do more!...And you can do more! Dev ServerDev Server Tree shakingTree shaking Dependencies analyticsDependencies analytics Source mapsSource maps Async require / module splittingAsync require / module splitting 73
- 74. Module bundlers are your friendsModule bundlers are your friends Now you know how they work, they are not (really) magic! Start small and add more when needed If you try to build your own you'll learn a lot more! 74
- 75. Grazie!Grazie! loige.link/bundle-rome Special thanks to: , ,  (reviewers) and  (inspiration - check out his and his ) @Podgeypoos79 @andreaman87 @mariocasciaro @MarijnJH amazing book workshop on JS modules 75