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

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
0
87

 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
84

Other Decks in Technology

See All in Technology
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
300
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
440
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
Avatar for maaaato maaaato
0
130
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
Avatar for Serverless Operations slsops
2
240
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
610
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.4k
usermode linux without MMU - fosdem2026 kernel devroom
Avatar for Hajime Tazaki thehajime
0
230
AWS Network Firewall Proxyを触ってみた
Avatar for nagisa_53 nagisa53
1
230
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
Avatar for Masahiro Yoshizawa muziyoshiz
1
1.9k
30万人の同時アクセスに耐えたい！新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
Avatar for GENDA genda
4
1.3k
こんなところでも（地味に）活躍するImage Modeさんを知ってるかい？- Image Mode for OpenShift -
Avatar for Masataka Tsukamoto tsukaman
0
140
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
Avatar for SansanTech sansantech
PRO
2
370

Featured

See All Featured
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
140
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
320
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
2
250
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
120
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k

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