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

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
98
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
97

Other Decks in Technology

See All in Technology
ループエンジニアリングでE2Eテストを実践
Avatar for Noriyuki TAKEI noriyukitakei
0
350
[2026-07-15] AI Ready なはずだったアーキテクチャと、見えてきた課題・次に目指す状態
Avatar for 和田 悠佑 wxyzzz
4
2.8k
Compose 新機能総まとめ / What's New in Jetpack Compose
Avatar for Yuki Anzai yanzm
0
170
地域 SRE コミュニティ最前線 / SRE NEXT 2026 Discussion Night Track C
Avatar for Masahiro Yoshizawa muziyoshiz
0
210
Mastraエージェント、どのクラウドにデプロイする？
Avatar for みのるん minorun365
PRO
2
180
Gen3R: 3D Scene Generation Meets Feed-Forward Reconstruction
Avatar for Spatial AI Network spatial_ai_network
0
120
環境凍結という Toil を倒す -セルフサービス型 Ephemeral テスト環境の 設計と実践
Avatar for Yuji Shirai shirouz
1
2.3k
タスクの複雑さでモデルを選ぶ ── Thompson Samplingで動かす“トークン/コスト最適化
Avatar for satoh-y-0323 satohy0323
0
310
SRE依存からの脱却 運用を開 発チームへ移す、 フルサイ クル開 発体制の実践
Avatar for joe joooee0000
0
2.7k
Claude Codeとハーネスについて考えてみる
Avatar for Oikon oikon48
18
9.4k
誤解だらけの開発生産性 / Myths and Misconceptions about Developer Productivity
Avatar for Masato Ishigaki / 石垣雅人 i35_267
1
240
Amazon EVS で VCF 9.0 / 9.1 のサポート開始まとめ
Avatar for mtoyoda mtoyoda
0
290

Featured

See All Featured
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
220
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
180
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
810
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
290
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
170
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
260
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
970

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