Upgrade to Pro — share decks privately, control downloads, hide ads and more …

es6-in-production

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for pramendra pramendra
September 22, 2017
Technology
97
0

 es6-in-production

Avatar for pramendra

pramendra

September 22, 2017

More Decks by pramendra

See All by pramendra
Why not React Native - JP
Avatar for pramendra pramendra
3
1.1k
Why not React Native - EN
Avatar for pramendra pramendra
0
320
Consulting in 2020
Avatar for pramendra pramendra
0
95

Other Decks in Technology

See All in Technology
TROCCOで始めるクラウドコストを民主化するためのFinOps
Avatar for tk3fftk tk3fftk
3
560
Oracle Cloud Infrastructure IaaS 新機能アップデート 2026/3 - 2026/5
Avatar for oracle4engineer oracle4engineer
PRO
1
160
トークン数だけでは測れない — Claude Code 組織展開の効果検証から学んだこと
Avatar for Masaki Kubota makikub
0
120
AIを「創る」と「使う」の循環 — HRテックが実践するリアルなAI組織実装
Avatar for Taketo Sasaki taketo957
0
1.1k
OCI Oracle AI Database Services新機能アップデート(2026/03-2026/05)
Avatar for oracle4engineer oracle4engineer
PRO
0
170
Cloud Run のアップデート 触ってみる＆紹介
Avatar for Gre212 gre212
0
300
Unlocking the Apps
Avatar for Tim Perry pimterry
0
190
Ruby::Boxでできること、Refinementsでできること
Avatar for Tomohiro Hashidate joker1007
3
380
MIERUNE JCT 発表資料「宇宙から伊能忠敬ごっこ」
Avatar for じゃらしまる syuchimu
0
130
製造業のクラウド活用最適解〜AI，DXを加速するデータ基盤の作り方〜
Avatar for 濱田孝治 hamadakoji
0
320
「速く作る」から「正しく作る」へ ─ 生成AI時代の開発フロー改革の ロードマップと実行 ─
Avatar for starfish719 starfish719
0
5.9k
「気づいたら仕事が終わっている」バクラクAIエージェント本番運用の裏側 / layerx-bakuraku-aie2026
Avatar for Yuya Matsumura yuya4
18
9.1k

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.2k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
107
250k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.5k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
1
140
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
280
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
860
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.9k

Transcript

  1. ES6 in Production Pramendra Gupta

  2. ES6(ES2015)

  3. const test = ({id, user}) => <h1><span>{id}</span>{user}</ h1>; ES6(ES2015)

  4. 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

  5. We ship fallback to support legacy browser

  6. Browser Support

  7. Disadvantage of ES5 File Size Parse Time big large Debug

    hard
  8. None

  9. <script type="module" />

  10. None

  11. async/await Classes Arrow functions Promises Map Set ES6 modules support

    lands in browsers <script type="module" />

  12. Advantage of ES6 version size(min+gzipped) parse time ES5 40k 360ms

    ES6+ 20k 170ms File Size Parse Time small low Debug easy

  13. ES6 Rocks

  14. 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>

  15. Demo https://github.com/pramendra/es6-in-production