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

es6-in-production

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for pramendra pramendra
September 22, 2017
Technology
0
88

 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
310
Consulting in 2020
Avatar for pramendra pramendra
0
86

Other Decks in Technology

See All in Technology
【2026年版】生成AIによる情報システムへのインパクト
Avatar for Takaaki Yayoi taka_aki
0
190
AWS Bedrock Guardrails / 機密情報の入力・出力をブロックする — Blocking Sensitive Information Input/Output
Avatar for Kazuhito Nakayama kazuhitonakayama
2
180
OCI技術資料 : 外部接続 VPN接続 詳細
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
1
10k
【Developers Summit 2026】Memory Is All You Need:コンテキストの「最適化」から「継続性」へ ～RAGを進化させるメモリエンジニアリングの最前線～
Avatar for KoheiOgawa shisyu_gaku
5
830
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
2026-02-24 月末 Tech Lunch Online #10 Cloud Runのデプロイの課題から考えるアプリとインフラの境界線
Avatar for SUZUKI Masashi masasuzu
0
100
バクラクのSREにおけるAgentic AIへの挑戦/Our Journey with Agentic AI
Avatar for SadayoshiTada taddy_919
1
480
バクラクにおける Document Understanding の挑戦：書類の「読取」から「意思決定」へ / document-understanding-in-bakuraku-2026
Avatar for Yuya Matsumura yuya4
0
170
【PyCon mini Shizuoka 2026】生成AI時代に画像処理やオーディオ処理のノードエディターを作る理由
Avatar for 高橋かずひと kazuhitotakahashi
0
200
組織のSREを推進するためのPlatform EngineeringとEKS / Platform Engineering and EKS to drive SRE in your organization
Avatar for mekka chmikata
0
150
Databricksアシスタントが自分で考えて動く時代に! エージェントモード体験もくもく会
Avatar for Takaaki Yayoi taka_aki
0
210
opsmethod第1回_アラート調査の自動化にむけて
Avatar for OKU/YAMATO yamatook
0
330

Featured

See All Featured
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.5M
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
67
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
240
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
150
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
150
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
280
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
130
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
200

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