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

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
0
81

 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
290
Consulting in 2020
Avatar for pramendra pramendra
0
77

Other Decks in Technology

See All in Technology
AIのグローバルトレンド2025 #scrummikawa / global ai trend
Avatar for kyonmm kyonmm
PRO
1
280
Snowflake Intelligenceにはこうやって立ち向かう！クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
Avatar for harry gappy50
0
240
5年目から始める Vue3 サイト改善 #frontendo
Avatar for Kihara, Takuya tacck
PRO
3
220
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
9
73k
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
Avatar for KentaroFujii kentarofujii
0
140
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
Avatar for Masaya Kudo msykd
PRO
1
930
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
Avatar for wanda ganota
2
220
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
Avatar for Kento Kimura aoto
PRO
1
460
Automating Web Accessibility Testing with AI Agents
Avatar for South maminami373
0
1.3k
自作JSエンジンに推しプロポーザルを実装したい！
Avatar for Saji sajikix
1
180
AI開発ツールCreateがAnythingになったよ
Avatar for s sato tendasato
0
130
なぜテストマネージャの視点が 必要なのか？ 〜 一歩先へ進むために 〜
Avatar for Sammy(MoritaMasami) moritamasami
0
220

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
26
1.9k

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