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
86
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
20
Exploring PEMPA Architecture on Dicoding.com
rizqyhi
0
8
Menjelajah Dunia Frontend Lebih Jauh
rizqyhi
0
4
Introduction to Open Source & Hacktoberfest
rizqyhi
0
64
Frontend is Enough
rizqyhi
0
24
Other Decks in Programming
See All in Programming
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
790
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
110
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
180
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
310
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
240
코틀린으로 멀티플랫폼 만들기
pangmoo
0
120
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
100
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
A Tale of Four Properties
chriscoyier
150
22k
Automating Front-end Workflow
addyosmani
1355
200k
What the flash - Photography Introduction
edds
64
11k
KATA
mclloyd
14
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
344
19k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
Design by the Numbers
sachag
274
18k
Designing for Performance
lara
601
67k
Side Projects
sachag
451
41k
Optimizing for Happiness
mojombo
370
69k
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!