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
2026/09/10 Spring Bootから Jakarta EE/MicroProfileへの移行
Avatar for Satoshi Seto megascus
0
340
2026-09-10 【Snowflake World Tour Tokyo 2026】dbt Core と Snowflake で実現する多層的なデータガバナンス / Multi-Layered Data Governance Powered by dbt Core and Snowflake
Avatar for civitaspo civitaspo
0
350
Oracle Cloud Infrastructure IaaS 新機能アップデート 2026/6 - 2026/8
Avatar for oracle4engineer oracle4engineer
PRO
0
170
OpenTelemetryのメトリクスをCloudWatchに送ってPromQLで見てみた
Avatar for Itaru Ota ota1022
0
130
クロスボーダーM&AのValue Upを支えるプロダクト開発。日米チームのハブになったプロダクトエンジニアの実践 / Product Engineering Conference 2026
Avatar for GENDA genda
0
120
enechainの内製セルフサービスプラットフォーム
Avatar for Tomoya Usami hiyosi
0
160
Screen Lens - 今見てる画面を翻訳する
Avatar for komagata komagata
0
260
The Agent Builder Loop from Daily Work to OSS
Avatar for みのるん minorun365
PRO
3
140
[2026-09-11]SREは誰のもの？運用エンジニアが始める 「SRE領域への越境」とチームの進化の軌跡 〜Road to NEXT CRE
Avatar for tosite tosite
0
160
20260912_スクラムにジェネラリストは必要か
Avatar for ryugen04 ryugen04
0
370
AI時代のAPI品質を支えるガードレール / API Guardrails for API quality in the AI ​​era
Avatar for Yoichi Kawasaki yokawasa
1
220
目の前の楽しいが人生を変える - コミュニティの螺旋の歩き方と楽しむコツ / change your life
Avatar for soudai sone soudai
PRO
4
520

Featured

See All Featured
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
9
990
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.1k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
340
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
280
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
800
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.1k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.8k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k

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