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

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
0
78

 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
1k
Why not React Native - EN
Avatar for pramendra pramendra
0
280
Consulting in 2020
Avatar for pramendra pramendra
0
75

Other Decks in Technology

See All in Technology
libsyncrpcってなに？
Avatar for uhyo uhyo
0
260
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
6
370k
Kafka vs. Pulsar: Performance Evaluation by Petabyte-Scale Streaming Platform Providers
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
330
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
2k
Two-Tower モデルで実現する 検索リランキング / Shibuya_AI_2
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
140
JavaのMCPサーバーで体験するAIエージェントの世界
Avatar for Tatsuya Miyazaki tatsuya1bm
1
220
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
5
38k
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
240
Tenstorrent 開発者プログラム
Avatar for Tenstorrent Japan tenstorrent_japan
0
240
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.6k
ゆるSRE #11 LT
Avatar for Kaoru okaru
1
480
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
Avatar for tetsuzawa tetsuzawa
1
3.3k

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.5k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Building Adaptive Systems
Avatar for Chris Keathley keathley
42
2.6k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
It's Worth the Effort
Avatar for 3n 3n
184
28k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
329
24k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
15
910

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