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

es6-in-production

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

Other Decks in Technology

See All in Technology
DatabricksにおけるMCPソリューション
Avatar for Takaaki Yayoi taka_aki
1
240
SREとQA　二人三脚で進めるSLO運用/sre-qa-slo
Avatar for sugitak sugitak
0
460
Claude Code 珍プレー好プレー
Avatar for Shinya Saita shinyasaita
0
320
End-to-Endで考える信頼性 — LINEアプリにおける クライアント開発×SRE連携の実践
Avatar for maru maruloop
4
4.1k
Claude Code公式skillで 自分の仕事を少しずつ手放そう！（Claude Code開発ノウハウ大公開スペシャル by クラスメソッド）
Avatar for Kei Masaoka kaym
1
280
人を動かすのは時間ではなく、納得感 〜新任EMが入社3ヶ月、組織を2回変えた話〜
Avatar for KAKEHASHI kakehashi
PRO
3
220
オブザーバビリティ、本当に活用できてる？ 〜API連携×生成AIで成熟度を自動評価〜
Avatar for dmmsre dmmsre
1
3.1k
「ちゃんとやっている」は独りよがりだった ― 不安に寄り添うインシデント対応へ / Towards incident response that addresses anxieties
Avatar for mekka chmikata
1
5k
インフラ寄りSREでも 開発に踏み出せる〜境界を越えてユーザー体験に向き合いたい〜
Avatar for SansanTech sansantech
PRO
2
3.7k
はじめてのWDM
Avatar for miyukichi_ospf miyukichi_ospf
1
140
DMM.com 購入改善推進チーム におけるCodeRabbitを用いた レビューフロー改善の一例
Avatar for Kanon ysknsid25
2
620
ボーイスカウトルールでメモリやスキルを改善しよう
Avatar for azukiazusa azukiazusa1
1
760

Featured

See All Featured
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
220
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
460
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
310
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
370
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
240
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
220
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.7k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k

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