Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript Modules & Current Updates
Search
Rizqy Hidayat
November 23, 2021
Programming
0
88
JavaScript Modules & Current Updates
Rizqy Hidayat
November 23, 2021
Tweet
Share
More Decks by Rizqy Hidayat
See All by Rizqy Hidayat
HTMX: Back to Basic
rizqyhi
0
40
Exploring PEMPA Architecture on Dicoding.com
rizqyhi
0
25
Menjelajah Dunia Frontend Lebih Jauh
rizqyhi
0
8
Introduction to Open Source & Hacktoberfest
rizqyhi
0
87
Frontend is Enough
rizqyhi
0
27
Other Decks in Programming
See All in Programming
Deep Dive into ~/.claude/projects
hiragram
14
11k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
180
フロントエンドのパフォーマンスチューニング
koukimiura
5
1.8k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
910
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
5
650
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
AIともっと楽するE2Eテスト
myohei
8
2.9k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
240
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
560
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.7k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
900
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Making Projects Easy
brettharned
116
6.3k
The Language of Interfaces
destraynor
158
25k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Why Our Code Smells
bkeepers
PRO
336
57k
Transcript
JavaScript Modules & Current Updates Rizqy Hidayat PRODUCT ENGINEER, DICODING
Aloha 👋 Rizqy Hidayat PRODUCT ENGINEER, DICODING
[email protected]
- @rizqyhi
Prehistoric module Era 🦕 • • • JavaScript doesn't have
built-in support for modules Modular files, global scope Dependencies should be loaded before and configured manually
None
COMMONJS AMD UMD ESM Used in NodeJS (server) Used in
browser (client) Works for both node & browser Newest stanndard on ES6 ✨ History of Modules in JavaScript
CommonJS • • • Standard used in NodeJS for working
with modules Load modules synchronously Simple syntax
Asynchronous Module Definition (AMD) • • • • Alternative to
CommonJS, usually used in browser Needs library to handle module resolution Load modules asynchronously Slightly complex syntax
What if our library used by many teams? And they
used CommonJS and AMD?
Universal Module Definition (UMD) • • • Unify CommonJS and
AMD More complex syntax Use build tool to help generate exported modules
None
EcmaScript Module (ESM) • • • • Part of ES6/ES2015
standard The best from both CommonJS and AMD: Simple syntax Load module asynchronously
Use ESM in Browser Now • • • Import directly
from file/CDN No transpilation needed No need to bundle
None
Does it work on old browsers? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
ESM in Older Browser • • • Write code in
ES6 Transpile to ES5 Bundle into one file or split into chunks
Takeaways • • • • • Use ESM to work
with modules Write JavaScript in newest standard Or TypeScript if necessary Transpile to older format when in needs to support old browsers Use best tools available that suites your needs
Thanks!