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

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
0
83

 es6-in-production

Avatar for pramendra

pramendra

September 22, 2017
Tweet

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
290
Consulting in 2020
Avatar for pramendra pramendra
0
78

Other Decks in Technology

See All in Technology
決済システムの信頼性を支える技術と運用の実践
Avatar for ykagano ykagano
0
400
バクラクの AI-BPO を支える AI エージェント 〜とそれを支える Bet AI Guild〜
Avatar for Tomoaki tomoaki25
1
290
[JDDStudy #10] 社内Agent勉強会の取り組み紹介
Avatar for Kyojin.Syo yp_genzitsu
1
130
AWS IAM Identity Centerによる権限設定をグラフ構造で可視化＋グラフRAGへの挑戦
Avatar for Yuta Kimi ykimi
2
680
Black Hat USA 2025 Recap ~ クラウドセキュリティ編 ~
Avatar for Kyohei Mizumoto kyohmizu
0
510
ユーザーストーリー x AI / User Stories x AI
Avatar for Tomohisa Omagari oomatomo
0
150
「データ無い！ 腹立つ！ 推論する！」から 「データ無い！ 腹立つ！ データを作る」へ チームでデータを作り、育てられるようにするまで / How can we create, use, and maintain data ourselves?
Avatar for moznion moznion
2
380
マイクロリブート ~ACEマインドセットで実現するアジャイル~
Avatar for ソニー株式会社 sony
0
190
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.9k
Datadog On-Call と Cloud SIEM で作る SOC 基盤
Avatar for Yoshiki Kurihara kuriyosh
0
140
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
5.9k
ググるより、AIに聞こう - Don’t Google it, ask AI
Avatar for Oikon oikon48
0
780

Featured

See All Featured
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.2k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
658
61k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.4k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.1k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
960
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k

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