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

es6-in-production

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for pramendra pramendra
September 22, 2017
Technology
97
0

 es6-in-production

Avatar for pramendra

pramendra

September 22, 2017

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
320
Consulting in 2020
Avatar for pramendra pramendra
0
92

Other Decks in Technology

See All in Technology
COBOL婆さんの伝説
Avatar for フクイ poropinai1966
0
130
AIの揺らぎに“コシ”を与える階層化品質設計
Avatar for ICKX ickx
0
190
Scovilleモバイルエンジニア募集中.pdf
Avatar for Julien Rudin julienrudin
0
140
AI와 협업하는 조직으로의 여정
Avatar for Arawn Park arawn
0
580
AgentCore×VPCでの設計パターンn選と勘所
Avatar for Har1101 har1101
4
370
AI時代の品質はテストプロセスの作り直し #scrumniigata
Avatar for kyonmm kyonmm
PRO
4
1k
大学職員のための生成AI最前線 ：最前線を、AIガバナンスとして読み直すためのTips
Avatar for gmoriki | 森木銀河 gmoriki
1
2.9k
ボトムアップの改善の火を灯し続けろ！〜支援現場で学んだ、消えないための3つの打ち手〜 / 20260509 Kazuki Mori
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
350
小さいVue.jsを30分で作る
Avatar for Hal hal_spidernight
0
130
Keeping Ruby Running on Cygwin
Avatar for fd0 fd0
0
200
コードや知識を組み込む / Incorporate Code and Knowledge
Avatar for Kenji Saito ks91
PRO
0
200
巨大プラットフォームを進化させる「第3のROI」
Avatar for Recruit recruitengineers
PRO
2
2.2k

Featured

See All Featured
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
240
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.3k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.7k
Between Models and Reality
Avatar for mayunak mayunak
3
280
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
770
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
70
39k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k

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