Pernah bingung gimana caranya sebuah framework menghasilkan sebuah kode output yang berbeda dengan kode yang kamu tulis? Penasaran sebetulnya apa yang terjadi dibalik layar dan gimana caranya kamu bisa belajar dari hal itu untuk memperbaiki kode yang kamu hasilkan?

1. Menguak Misteri Module Bundler

2. Halo, saya Riza!

4. @rizafahmi22
#livecampid

5. Agenda
Demo aplikasi
Menulis JS yang lebih modular
Menggunakan Module Bundler

6. 🍀
Vanilla
Leaderboard
https://vanilla-leaderboard.web.app

7. 🍀
Vanilla
Leaderboard

8. 🍀
Vanilla
Leaderboard
confetti-js

9. 🍀
Vanilla
Leaderboard
lil-uuid

10. 🍀
Vanilla
Leaderboard
xStore

11. 🍀
Vanilla
Leaderboard
dayjs

12. 🍀
Vanilla
Leaderboard
workbox

13. 6 requests hanya untuk JS 😱

14. Vendors

16. #!/usr/bin/env bash
set -e
deps=(
"gh/lil-js/uuid@0.1.1/uuid.min.js"
"gh/florian/xStore@2.0.4/src/xStore.min.js"
"npm/confetti-js@0.0.18/dist/index.min.js"
"npm/dayjs@1.8.21/dayjs.min.js"
"npm/dayjs@1.8.21/plugin/relativeTime.js"
)
for i in "${deps[@]}"
do
curl "https://cdn.jsdelivr.net/${i}" -L
echo ";"
done $ ./buildVendors.sh > vendors.js

17. ✅ Concatenation
✅ Minification

18. Solusi yang bagus

19. di 2008
Solusi yang bagus

20. Solusi yang lebih baik
• Proses update dependencies yang lebih
mudah
• Tidak khawatir terhadap dependencies of
dependencies
• Urutan dari import tidak menjadi masalah

21. JavaScript Modules

22. function add(a, b) {
return a + b;
}
function sub(a, b) {
return a - b;
}
function mul(a, b) {
return a * b;
}
function div(a, b) {
return a / b;
}
basic_calc.js

23. advance_calc.js
function squared(a) {
return mul(a, a);
}

24. calc.html
<script src="js/basic_calc.js"></script>
<script src=“js/advance_calc.js"></script>
<script>
console.log(squared(4));
console.log(add(3, 4));
console.log(mul(3, 5));
</script>
Semuanya jadi global 😢

25. Bungkus Menjadi Fungsi

26. let BasicCalc = function() {
return {
add: function(a, b) {
return a + b;
},
sub: function(a, b) {
return a - b;
},
mul: function(a, b) {
return a * b;
},
div: function(a, b) {
return a / b;
}
};
};
basic_calc.js

27. advance_calc.js
let AdvanceCalc = function() {
return {
squared: function squared(a) {
return BasicCalc().mul(a, a);
}
};
};

28. calc.html
Ok, tapi jadi aneh 🤔
<script src="js/basic_calc.js"></script>
<script src=“js/advance_calc.js"></script>
<script>
console.log(AdvanceCalc().squared(4));
console.log(BasicCalc().add(3, 4));
console.log(BasicCalc().mul(3, 5));
</script>

29. iifeImmediately Invoked Function Expression

30. let add = function (a, b) {
return a + b;
}
console.log(add(1, 2));

31. let add = (function (a, b) {
return a + b;
})(1, 2);
console.log(add);

32. let BasicCalc = function() {
return {
add: function(a, b) {
return a + b;
},
sub: function(a, b) {
return a - b;
},
mul: function(a, b) {
return a * b;
},
div: function(a, b) {
return a / b;
}
};
};
basic_calc.js

33. basic_calc.js
let BasicCalc = (function() {
return {
add: function(a, b) {
return a + b;
},
sub: function(a, b) {
return a - b;
},
mul: function(a, b) {
return a * b;
},
div: function(a, b) {
return a / b;
}
};
})();

34. advance_calc.js
let AdvanceCalc = function() {
return {
squared: function squared(a) {
return BasicCalc().mul(a, a);
}
};
};

35. advance_calc.js
let AdvanceCalc = (function() {
return {
squared: function squared(a) {
return BasicCalc.mul(a, a);
}
};
})();

36. calc.html
<script src="js/basic_calc.js"></script>
<script src=“js/advance_calc.js"></script>
<script>
console.log(AdvanceCalc().squared(4));
console.log(BasicCalc().add(3, 4));
console.log(BasicCalc().mul(3, 5));
</script>

37. calc.html
<script src="js/basic_calc.js"></script>
<script src="js/advance_calc.js"></script>
<script>
console.log(AdvanceCalc.squared(4));
console.log(BasicCalc.add(3, 4));
console.log(BasicCalc.mul(3, 5));
</script>

38. Suatu saat kita butuh sistem
modulasi yang dapat digunakan di
aplikasi atau proyek berbeda

39. Module System
• Sintaksis yang lebih sederhana untuk
import/export
• Bisa dengan mudah mendefinisikan modul
di file terpisah
• Bisa saling import
Must have!

40. Module System
• Menghindari name collision
• Import modul secara async
• Bisa di browser atau di server via
node.js
Nice to have!

41. JS Module System

42. Module System
• Globals
• CommonJS
• Asynchronous Module Definition (AMD)
• Universal Module Definition (UMD)
• ES2015 Module (ESM)
• Lainnya…

43. globals
var $, jQuery;
$ = jQuery = (() => {
return { /* ... */ }
})();
// usage
$('.btn-success').remove();

44. Globals
• Naming collisions 👎
• Urutan import harus diperhatikan 👎
• Tidak bisa import sebagian modul yang
dibutuhkan 👎
• Hanya bisa menggunakan pustaka dari CDN 👎

45. CommonJS
// calc.js
const calc = {
/* ... */
}
module.exports = calc;
// app.js
const calc = require('./calc.js');
calc.add(1, 3);
// other_app.js
const { add } = require('./calc.js');
calc.add(1, 3);

46. CommonJS
• Tidak terjadi naming collision 👍
• Pustaka banyak tersedia via npm 👍
• Dapat digunakan di server via Node.js 👍
• Belum bisa untuk di browser 👎
• Hanya bisa import secara synchronous 👎

47. Asynchronous Module Definition
// lib.js
define('yayQuery', ['yayQueryUI'], function(yayQueryUI) {
// returns the exported value
return function() {
// ...
};
});
// app.js
// define path
requirejs.config({
baseUrl: 'js/lib/',
paths: {
yayquery: 'yayquery-1.1.1'
}
});
define(['yayquery'], function($) {
// this is executed only when yayquery and it's deps are loaded
});

48. Require.JS/AMD
• Async module 👍
• Bisa berjalan di browser dan server 👍
• Kode boilerplate cukup banyak 👎

49. Universal Module Definition
(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 {
// Globals
root.myModule = factory(root.dep);
}
})(this, function(dep) {
// Your actual module
return {};
});

50. Universal Module Definition
• Semua jenis modul bisa digunakan 👍
• Kode pembungkus cukup kompleks,
sepertinya sulit ditulis manual 👎

51. ES2015 Modules
// calc.js
const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;
export { add, sub, mul, div };
// app.js
import { add } from './calc.js';
console.log(add(1, 3));

52. ES2015 Modules
<html>
<body>
<!-- ... -->
<script type="module">
import { add } from ‘./basic_calc.js';
console.log(add(1, 3));
</script>
</body>
</html>

53. ES2015 Modules
• Secara sintaksis mirip dengan CommonJS
• (Hampir) menjadi format baku 👍
• (Hampir) dapat berjalan di browser dan
server 👍

54. Mari Kita Coba

55. const BasicCalc = require('./basic_calc.js');
function squared(a) {
return BasicCalc.mul(a, a);
}
CommonJS

56. ESM
import { mul } from './basic_calc.js';
function squared(a) {
return mul(a, a);
}

57. Module Bundler

58. Alat bantu untuk melakukan
bundle JavaScript modules menjadi satu
file dan dan dapat dijalankan di
browser.

59. Fitur Penting Lainnya
• Sistem modulasi belum sepenuhnya
didukung oleh browser
• Menangani dependencies dan hubungan
dengan dependencies lain
• Dapat pula digunakan untuk gambar, CSS
dan aset lainnya.

60. Fitur Tambahan
• Menjalankan development server
• Tree shaking
• Membuat source map otomatis
• Code splitting

61. Konsep Umum Bundler
• Entry point: file utama yang akan dicek
oleh bundler
• Output: File akhir yang akan digunakan
• Loaders: Algoritma parsing yang ingin
digunakan seperti babel, typescript,
dll.
• Plugins: Fitur tambahan yang dibutuhkan.

63. $ npm install webpack webpack-cli

64. basic_calc.js
function add(a, b) {
return a + b;
}
function mul(a, b) {
return a * b;
}
export { add, mul };

65. advance_calc.js
import { mul } from './basic_calc.js';
function squared(a) {
return mul(a, a);
}
export { squared };

66. import { add, mul } from './basic_calc.js';
import { squared } from './advance_calc.js';
console.log(add(1, 3));
console.log(mul(2, 4));
console.log(squared(4));
main.js

67. $ npx webpack js/main.js

68. const modules = {
'basic_calc.js': function(exports, require) {
exports.add = function(a, b) {
return a + b;
};
exports.mul = function(a, b) {
return a * b;
};
},
'advance_calc.js': function(exports, require) {
const mul = require('basic_calc.js').mul;
exports.squared = function(a) {
return mul(a, a);
};
},
'main.js': function(exports, require) {
const add = require('basic_calc.js').add;
const mul = require('basic_calc.js').mul;
const squared = require('advance_calc.js').squared;
console.log(add(1, 3));
console.log(mul(2, 4));
console.log(squared(4));
}
};
webpackStart({
modules,
entry: 'app.js'
});
Ilustrasi Webpack

69. 🍀 Leaderboard

70. $ npm install confetti-js dayjs lil-uuid xStore

71. module.exports = {
entry: ['./js/app.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.webpack.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
// plugins: []
}; webpack.config.js

72. module.exports = {
entry: ['./js/app.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.webpack.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
// plugins: []
}; webpack.config.js
Entry point

73. module.exports = {
entry: ['./js/app.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.webpack.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
// plugins: []
}; webpack.config.js
Output

74. module.exports = {
entry: ['./js/app.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.webpack.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
// plugins: []
}; webpack.config.js
Loaders

75. module.exports = {
entry: ['./js/app.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.webpack.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
// plugins: []
}; webpack.config.js

76. $ npx webpack --config webpack.config.js

77. <html lang="en">
<body>
…
<script src=“dist/bundle.webpack.js"></script>
</body>
</html>

78. Gaya Webpack
• Menggunakan module map
• Menggunakan fungsi untuk membungkus
setiap modul

79. rollup.js

80. $ npm install rollup rollup-plugin-babel

81. basic_calc.js
function add(a, b) {
return a + b;
}
function mul(a, b) {
return a * b;
}
export { add, mul };

82. advance_calc.js
import { mul } from './basic_calc.js';
function squared(a) {
return mul(a, a);
}
export { squared };

83. import { add, mul } from './basic_calc.js';
import { squared } from './advance_calc.js';
console.log(add(1, 3));
console.log(mul(2, 4));
console.log(squared(4));
main.js

84. import babel from 'rollup-plugin-babel';
export default {
input: 'js/main.js',
output: {
file: 'dist/bundle.rollup.js',
format: 'iife'
},
plugins: [
babel()
]
};
rollup.config.js

85. import babel from 'rollup-plugin-babel';
export default {
input: 'js/main.js',
output: {
file: 'dist/bundle.rollup.js',
format: 'iife'
},
plugins: [
babel()
]
};
rollup.config.js
Entry Point

86. import babel from 'rollup-plugin-babel';
export default {
input: 'js/main.js',
output: {
file: 'dist/bundle.rollup.js',
format: 'iife'
},
plugins: [
babel()
]
};
Output
rollup.config.js

87. import babel from 'rollup-plugin-babel';
export default {
input: 'js/main.js',
output: {
file: 'dist/bundle.rollup.js',
format: 'iife'
},
plugins: [
babel()
]
};
rollup.config.js
Loaders & Plugins

88. $ npx rollup -c

89. function basic_calc$add(a, b) {
return a + b;
}
function basic_calc$mul(a, b) {
return a * b;
}
function advance_calc$squared(a) {
return basic_calc$mul(a, a);
}
console.log(basic_calc$add(1, 3));
console.log(basic_calc$mul(2, 4));
console.log(advance_calc$squared(4));
Ilustrasi Rollup

90. 🍀 Leaderboard

91. $ npm install confetti-js dayjs lil-uuid xStore

92. $ npm install rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-uglify

93. import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { uglify } from 'rollup-plugin-uglify';
export default {
input: 'js/app.js',
output: {
file: 'dist/bundle.rollup.js',
format: 'iife',
globals: {
'dayjs/plugin/relativeTime': 'relativeTime',
dayjs: 'dayjs',
xStore: 'xStore',
lil: 'lil-uuid',
ConfettiGenerator: 'confetti-js'
}
},
plugins: [
resolve(),
commonjs(),
babel({ exclude: 'node_modules/*' }),
uglify()
]
}; rollup.config.js

94. $ npx rollup -c

95. <html lang="en">
<body>
…
<script src=“dist/bundle.rollup.js”></script>
</body>
</html>

96. Gaya Rollup
• Menghasilkan bundle yang lebih rata dan
sederhana
• Tidak menggunakan fungsi pembungkus

97. 🍀
Vanilla
Leaderboard
https://vanilla-leaderboard.web.app

98. 🍀
Vanilla
Leaderboard
https://github.com/rizafahmi/vanilla-leaderboard

99. Kesimpulan

100. Kesimpulan
• Module bundler adalah alat bantu untuk
membungkus JavaScript agar dimengerti
browser
• Bundler dibutuhkan agar aplikasi lebih
modular dan dapat menggunakan sintaksis
JavaScript modern
• Menggunakan concatenation dan minification
cukup untuk aplikasi sederhana

101. @rizafahmi22
#livecampid