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
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
8.4k
AI Agent SaaS を支える自社仮想化基盤への挑戦と実運用 / ai-agent-saas-virtualization
Avatar for GMO Flatt Security flatt_security
2
3.8k
世界、断片、モデル。そして理解
Avatar for SAKO Hiroshi ardbeg1958
1
110
Devsumi 2026 Summer 人もAIも使える共通基盤を事業の加速装置にする～デザインシステム運用に学ぶ組織レバレッジ～ 渡辺 凌央
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
0
100
SRE本の知られざる名シーン / The Hidden Gems of Google SRE Book
Avatar for Narimichi Takamura nari_ex
1
380
脱金融のフューチャー・デザイン / Future Design Beyond Finance
Avatar for Kenji Saito ks91
PRO
0
150
Kaggleで成長するために意識したこと
Avatar for Chikuwabu prgckwb
2
310
タスクの複雑さでモデルを選ぶ ── Thompson Samplingで動かす“トークン/コスト最適化
Avatar for satoh-y-0323 satohy0323
0
310
完全自律ロボットを作りたくて、先に開発を自律させた話(ROS Japan UG #63 LT)
Avatar for ありさん ( ari-san ) rryz09
0
500
ポストモーテム！ DDoSからサイトは守れた。 でもビジネスは守れなかった。
Avatar for 弁護士ドットコム bengo4com
0
2.8k
ゼロをイチにする仕事が終わったあと
Avatar for Masato Sugiyama smasato
0
340
「ちゃんとやっている」は独りよがりだった ― 不安に寄り添うインシデント対応へ / Towards incident response that addresses anxieties
Avatar for mekka chmikata
1
5k

Featured

See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
550
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.5k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
190
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
460
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
460
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
270
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k

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