Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
100
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.2k
Why not React Native - EN
Avatar for pramendra pramendra
0
320
Consulting in 2020
Avatar for pramendra pramendra
0
100

Other Decks in Technology

See All in Technology
Gitは怖い？共有ワークスペースから始めるSnowflakeチーム開発
Avatar for あべ coco_se
0
180
SQL文一行も書けない人事がCortexもろもろを使って人事業務を楽にしてみる
Avatar for ponponmikan ponponmikankan
1
220
生成AIのテナント制御とシャドーMCP対策 | AIを"止めずに"、情報を守る
Avatar for yu yukun
0
160
#jawssonic2026 あの時代が悪かった ~動かなかったSageMakerと共に迎えたイベント当日~
Avatar for Kana Kitagawa ktkn1129
0
150
Multica × 長期記憶：40個のミニプロジェクト管理
Avatar for eiei114 eiei114
1
250
DEFCON34-Write-up_HYCu-MYCu
Avatar for okzkey daikiokazaki
0
150
例外の正しい扱い方 そのエラー try-catchして大丈夫？
Avatar for Watanabe Jin jinwatanabe
3
470
DEFCON_CHV_CTF_Write-up.pdf
Avatar for bata_24 bata_24
0
140
AI 駆動 Terraform 開発/SRE_BizReach_MIXI_2
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
4
2.1k
OpenTelemetry eBPF Instrumentationの舞台裏 / Behind the Scenes of OpenTelemetry eBPF Instrumentation
Avatar for ymotongpoo ymotongpoo
4
1.1k
[2026-09-11]SREは誰のもの？運用エンジニアが始める 「SRE領域への越境」とチームの進化の軌跡 〜Road to NEXT CRE
Avatar for tosite tosite
0
160
AIオーケストレーションを活用した 開発ワークフローの設計と実践
Avatar for bqnq bqnq
0
140

Featured

See All Featured
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
520
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
450
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.8k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.3k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
310
Visualization
Avatar for Eitan Lees eitanlees
152
17k

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