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

es6-in-production

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

Other Decks in Technology

See All in Technology
AIにより大幅に強化された AWS Transform Customを触ってみる
Avatar for arap / 0air 0air
0
320
Hooks, Filters & Now Context: Why MCPs Are the “Hooks” of the AI Era
Avatar for Miriam Schwab miriamschwab
0
110
本番環境でPHPコードに触れずに「使われていないコード」を調べるにはどうしたらよいか？
Avatar for Sohei Iwahori egmc
1
200
LLM とプロンプトエンジニアリング／チューターを定義する / LLMs and Prompt Engineering, and Defining Tutors
Avatar for Kenji Saito ks91
PRO
0
270
Claude Teamプランの選定と、できること/できないこと
Avatar for ふくだ（fukuda ryu） rfdnxbro
1
1.4k
AIを活用したアクセシビリティ改善フロー
Avatar for 出口 裕貴 degudegu2510
1
150
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
Avatar for oracle4engineer oracle4engineer
PRO
5
13k
TanStack Start エコシステムの現在地 / TanStack Start Ecosystem 2026
Avatar for Takahiro Ikeuchi iktakahiro
1
340
40代からのアウトプット ― 経験は価値ある学びに変わる / 20260404 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
5
890
Data Enabling Team立ち上げました
Avatar for SansanTech sansantech
PRO
0
290
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.4k
「決め方」の渡し方 / How to hand over the "decision-making process"
Avatar for Pauli pauli
7
1.2k

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Design in an AI World
Avatar for tapps tapps
0
190
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.9M
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
160
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
160
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
150

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