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
AWSを利用する上で知っておきたい名前解決の話
Avatar for nagisa_53 nagisa53
6
650
地味にいろいろあった！ 2025春のAmazon Bedrockアップデートおさらい
Avatar for みのるん minorun365
PRO
2
560
MySQL InnoDB Data Recovery - The Last Resort
Avatar for lefred lefred
0
100
コスト最適重視でAurora PostgreSQLのログ分析基盤を作ってみた #jawsug_tokyo
Avatar for のんピ non97
2
880
更新系と状態
Avatar for uhyo uhyo
8
2.2k
MySQL Indexes and Histograms – How they really speed up your queries
Avatar for lefred lefred
0
150
本当に必要なのは「QAという技術」だった！試行錯誤から生まれた、品質とデリバリーの両取りアプローチ / Turns Out, "QA as a Discipline" Was the Key!
Avatar for ar_tama ar_tama
9
2.4k
勝手に！深堀り！Cloud Run worker pools / Deep dive Cloud Run worker pools
Avatar for iselegant iselegant
4
640
ここはMCPの夜明けまえ
Avatar for nwiizo nwiizo
32
13k
Computer Use〜OpenAIとAnthropicの比較と将来の展望〜
Avatar for PharmaX（旧YOJO Technologies）開発チーム pharma_x_tech
6
980
3D生成AIのための画像生成
Avatar for 伊藤光祐 kosukeito
2
600
LINE 購物幕後推手
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
340

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
33
6.6k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
33k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
2.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
49
7.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
227
22k

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