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
いまからでも遅くない！SSL/TLS証明書超入門（It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide）
Avatar for NoriMuraZ norimuraz
0
240
これがLambdaレス時代のChatOpsだ！実例で学ぶAmazon Q Developerカスタムアクション活用法
Avatar for iwamot iwamot
PRO
6
1.1k
"プロポーザルってなんか怖そう"という境界を超えてみた＠TSUDOI by giftee Tech #1
Avatar for shilo shilo113
0
190
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.2k
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
Avatar for Oikon oikon48
8
3.5k
ソースを読むプロセスの例
Avatar for Satoru Takeuchi sat
PRO
6
2.2k
技育祭2025【秋】 企業ピッチ/登壇資料（高橋 悟生）
Avatar for Hacobu hacobu
PRO
0
100
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
Avatar for emi emiki
0
280
JAZUG 15周年記念 × JAT「AI Agent開発者必見："今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
Avatar for KoheiOgawa shisyu_gaku
1
160
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
Avatar for Bethany Jepchumba bethany
0
110
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
1
220
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに？ 私とRubyを繋いだRail(s)
Avatar for joy joyfrommasara
0
260

Featured

See All Featured
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
Side Projects
Avatar for Sacha Greif sachag
455
43k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k

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