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
270
Consulting in 2020
Avatar for pramendra pramendra
0
75

Other Decks in Technology

See All in Technology
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.2k
Devin＆Cursor、それぞれの「本質」から導く最適ユースケース戦略
Avatar for empitsu empitsu
8
2.4k
会社員しながら本を書いてきた知見の共有
Avatar for Satoru Takeuchi sat
PRO
3
690
OSMnx Galleryの紹介
Avatar for mopinfish mopinfish
0
150
大事なのは、AIの精度だけじゃない！〜1円のズレも許されない経理領域とAI〜
Avatar for Jun Nemoto jun_nemoto
11
5.2k
iOS/Androidで無限循環Carousel表現を考えてみる
Avatar for Fumiya Sakai fumiyasac0921
0
130
データ戦略部門 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.1k
コードの考古学 〜労務システムから発掘した成長の糧〜
Avatar for Kenta SEKINE kenta_smarthr
1
1.2k
GitHub Coding Agent 概要
Avatar for KAMEGAWA Kazushi kkamegawa
1
1.7k
うちの会社の評判は？SNSの投稿分析にAIを使ってみた
Avatar for Kiyotaka Doumae doumae
0
160
Cursor Meetup Tokyo
Avatar for Shunta Komatsu iamshunta
2
370
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
8
65k

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.6k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
460
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
329
24k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.6k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
23
1.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
19
1.3k

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