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
夢の印税生活 / Life on Royalties
Avatar for とみたまさひろ tmtms
0
280
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
Avatar for oracle4engineer oracle4engineer
PRO
2
140
Browser
Avatar for Recruit recruitengineers
PRO
3
260
生成AI利用プログラミング：誰でもプログラムが書けると 世の中どうなる？/opencampus202508
Avatar for Oka Natsuki okana2ki
0
190
浸透しなさいRFC 5322&7208
Avatar for Nonogaki Hiroshi hinono
0
120
EKS Pod Identity における推移的な session tags
Avatar for z63d z63d
1
200
RAID6 を楔形文字で組んで現代人を怖がらせましょう（実装編）
Avatar for mimifuwacc mimifuwa
0
300
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
300
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
Avatar for mtx2s mtx2s
5
520
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
Avatar for himaratsu himaratsu
0
120
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
Avatar for ZOZO Developers zozotech
PRO
16
5.2k
つくって納得、つかって実感！ 大規模言語モデルことはじめ
Avatar for Recruit recruitengineers
PRO
19
4.9k

Featured

See All Featured
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
61k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Faster Mobile Websites
Avatar for Dean Hume deanohume
309
31k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
820
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
1k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.8k

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