Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
0
84

 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
300
Consulting in 2020
Avatar for pramendra pramendra
0
81

Other Decks in Technology

See All in Technology
AI時代におけるアジャイル開発について
Avatar for Polyscape Inc. polyscape_inc
0
110
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.3k
小さな判断で育つ、大きな意思決定力 / 20251204 Takahiro Kinjo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
390
Modern Data Stack大好きマンが語るSnowflakeの魅力
Avatar for Sagara sagara
0
280
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
980
pmconf2025 - データを活用し「価値」へ繋げる
Avatar for Emy - Emiko Yoshihara glorypulse
0
540
プロダクトマネジメントの分業が生む「デリバリーの渋滞」を解消するTPMの越境
Avatar for Recruit recruitengineers
PRO
3
530
Product Engineer
Avatar for Resilire resilire
0
140
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
21k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
37k
日本Rubyの会の構造と実行とあと何か / hokurikurk01
Avatar for Masayoshi Takahashi takahashim
4
730
タグ付きユニオン型を便利に使うテクニックとその注意点
Avatar for uhyo uhyo
2
700

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
470
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k

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