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

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
0
81

 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
77

Other Decks in Technology

See All in Technology
リリース２ヶ月で収益化した話
Avatar for Ken.T kent_code3
1
300
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
Avatar for puku0x puku0x
0
580
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
Avatar for いのうえ senseofunity129
0
140
Amazon Q Developerを活用したアーキテクチャのリファクタリング
Avatar for k1nakayama k1nakayama
2
210
薬屋のひとりごとにみるトラブルシューティング
Avatar for tomokusaba tomokusaba
0
360
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
Avatar for Eiji Hachiya hachi_eiji
0
200
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
Avatar for Jun Watanabe rela1470
1
200
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
Avatar for moriyuya moriyuya
1
1.3k
AI関数が早くなったので試してみよう
Avatar for kumakura koki kumakura
0
300
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
6.3k
Amazon Qで2Dゲームを作成してみた
Avatar for Siromi siromi
0
150
Claude CodeでKiroの仕様駆動開発を実現させるには...
Avatar for Gota gotalab555
3
1.1k

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
Side Projects
Avatar for Sacha Greif sachag
455
43k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
183
54k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
8
550
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k

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