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

es6-in-production

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for pramendra pramendra
September 22, 2017
Technology
94
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
88

Other Decks in Technology

See All in Technology
スケーリングを封じられたEC2を救いたい
Avatar for いのうえ senseofunity129
0
130
ThetaOS - A Mythical Machine comes Alive
Avatar for Martijn aslander
0
230
AWS Systems Managerのハイブリッドアクティベーションを使用したガバメントクラウド環境の統合管理
Avatar for Toru_Kubota toru_kubota
1
200
AWSで2番目にリリースされたサービスについてお話しします(諸説あります)
Avatar for Yuuki Yamashita yama3133
0
100
Oracle Cloud Infrastructure(OCI)：Onboarding Session(はじめてのOCI/Oracle Supportご利⽤ガイド)
Avatar for oracle4engineer oracle4engineer
PRO
2
17k
制約を設計する - 非決定性との境界線 / Designing constraints
Avatar for soudai sone soudai
PRO
2
170
【AWS】CloudTrail LakeとCloudWatch Logs Insightsの使い分け方針
Avatar for Yuma Tsurugasaki tsurunosd
0
130
15年メンテしてきたdotfilesから開発トレンドを振り返る 2011 - 2026
Avatar for giginet giginet
PRO
2
260
Why we keep our community?
Avatar for Yasunobu Kawaguchi kawaguti
PRO
0
360
不確実性と戦いながら見積もりを作成するプロセス/mitsumori-process
Avatar for hiro@miraito hirodragon112
1
170
スクラムを支える内部品質の話
Avatar for IIJ_PR iij_pr
0
140
最大のアウトプット術は問題を作ること
Avatar for ryoAccount ryoaccount
0
250

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
HDC tutorial
Avatar for Michiel Stock michielstock
1
590
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.2k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
180
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.4k

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