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
extension 現場で使えるXcodeショートカット一覧
Avatar for とんとんぼ ktombow
0
220
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
Avatar for Sansan R&D sansan_randd
0
130
許しとアジャイル
Avatar for Jun Nakajima jnuank
1
140
AWS Top Engineer、浮いてませんか？ / As an AWS Top Engineer, Are You Out of Place?
Avatar for Yuji Oshima yuj1osm
2
180
自動テストのコストと向き合ってみた
Avatar for SmartHR 品質保証部 qa
0
210
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
Avatar for marokiki marokiki
0
170
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう！ / Let's build an OAuth protected remote MCP server based on AWS managed services
Avatar for 株式会社カミナシ kaminashi
3
250
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
Avatar for Koji Miyata miyatakoji
1
160
実装で解き明かす並行処理の歴史
Avatar for ZOZO Developers zozotech
PRO
1
650
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ：検査・適応で未来を開発 / AI-driven product owner. scrummat2025
Avatar for yosuke nagai yosuke_nagai
3
800
スタートアップにおけるこれからの「データ整備」
Avatar for ShoMaekawa/ウィル shomaekawa
2
340
三菱電機・ソニーグループ共同の「Agile Japan企業内サテライト」_2025
Avatar for ソニー株式会社 sony
0
120

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.6k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
9
590
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
51k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
20k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k

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