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
39
Exploring PEMPA Architecture on Dicoding.com
rizqyhi
0
25
Menjelajah Dunia Frontend Lebih Jauh
rizqyhi
0
8
Introduction to Open Source & Hacktoberfest
rizqyhi
0
86
Frontend is Enough
rizqyhi
0
27
Other Decks in Programming
See All in Programming
XP, Testing and ninja testing
m_seki
3
220
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
350
CursorはMCPを使った方が良いぞ
taigakono
1
210
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
110
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
ReadMoreTextView
fornewid
1
490
Is Xcode slowly dying out in 2025?
uetyo
1
240
Benchmark
sysong
0
280
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
技術同人誌をMCP Serverにしてみた
74th
1
450
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Balancing Empowerment & Direction
lara
1
390
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Embracing the Ebb and Flow
colly
86
4.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
GitHub's CSS Performance
jonrohan
1031
460k
Bash Introduction
62gerente
614
210k
A Modern Web Designer's Workflow
chriscoyier
694
190k
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!