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
es6-in-production
Search
pramendra
September 22, 2017
Technology
0
81
es6-in-production
pramendra
September 22, 2017
Tweet
Share
More Decks by pramendra
See All by pramendra
Why not React Native - JP
pramendra
3
1k
Why not React Native - EN
pramendra
0
280
Consulting in 2020
pramendra
0
76
Other Decks in Technology
See All in Technology
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
7.5k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
230
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
1
5.6k
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
220
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.5k
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
150
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
260
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6k
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
170
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
360
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
3
2.9k
Featured
See All Featured
Bash Introduction
62gerente
614
210k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Six Lessons from altMBA
skipperchong
28
3.9k
Unsuck your backbone
ammeep
671
58k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Docker and Python
trallard
44
3.5k
Site-Speed That Sticks
csswizardry
10
680
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
ES6 in Production Pramendra Gupta
ES6(ES2015)
const test = ({id, user}) => <h1><span>{id}</span>{user}</ h1>; ES6(ES2015)
const test = ({id, user}) => <h1><span>{id}</span>{user}</h1>; "use strict"; var
test = function test(_ref) { var id = _ref.id, user = _ref.user; return React.createElement( "h1", null, React.createElement( "span", null, id ), user ); }; ES6 ES5
We ship fallback to support legacy browser
Browser Support
Disadvantage of ES5 File Size Parse Time big large Debug
hard
None
<script type="module" />
None
async/await Classes Arrow functions Promises Map Set ES6 modules support
lands in browsers <script type="module" />
Advantage of ES6 version size(min+gzipped) parse time ES5 40k 360ms
ES6+ 20k 170ms File Size Parse Time small low Debug easy
ES6 Rocks
How do we use <!DOCTYPE html> <html> <head> <title>ES6 in
Production</title> <script type="module" src="bundle.js"></script> </head> <body> <div id="app"></div> <script nomodule src="bundle-legacy.js"></script> </body> </html>
Demo https://github.com/pramendra/es6-in-production