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

es6-in-production

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

Other Decks in Technology

See All in Technology
拝啓、あの夏の僕へ〜あなたも知っているApp Runnerの世界〜
Avatar for 荒木 ARK news_it_enj
0
160
大学職員のための生成AI最前線 ：最前線を、AIガバナンスとして読み直すためのTips
Avatar for gmoriki | 森木銀河 gmoriki
0
2.3k
AgentCore×VPCでの設計パターンn選と勘所
Avatar for Har1101 har1101
4
360
UIライブラリに依存しすぎないReact Native設計を目指して
Avatar for Takahiro Kato grandbig
0
180
変化の激しい時代をゴキゲンに生き抜くために 〜ストレスマネジメントのススメ〜
Avatar for KAKEHASHI kakehashi
PRO
1
530
Anthropic「Long-running a gents」をGeminiで再現してみた
Avatar for t-kikuchi tkikuchi
0
750
データ定義の混乱と戦う 〜 管理会計と財務会計 〜
Avatar for wonohe wonohe
0
170
基盤を育てる 外部SaaS連携の運用
Avatar for Hiroto Gamo gamonges_dresscode
1
130
AIでAIをテストする - 音声AIエージェントの品質保証戦略
Avatar for Morix morix1500
1
160
AI時代の品質はテストプロセスの作り直し #scrumniigata
Avatar for kyonmm kyonmm
PRO
3
680
20260428_Product Management Summit_tadokoroyoshiro
Avatar for tadokoro_yoshiro tadokoro_yoshiro
15
17k
【技術書典20】OpenFOAM（自宅で深める流体解析）流れと熱移動（２）
Avatar for kamakiri1225 kamakiri1225
0
360

Featured

See All Featured
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.2M
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
270
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
290
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
160
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
180
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
380
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.4k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.4k

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