Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
0
84

 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
300
Consulting in 2020
Avatar for pramendra pramendra
0
81

Other Decks in Technology

See All in Technology
20251209_WAKECareer_生成AIを活用した設計・開発プロセス
Avatar for syobochim syobochim
7
1.5k
品質のための共通認識
Avatar for KAKEHASHI kakehashi
PRO
3
260
エンジニアとPMのドメイン知識の溝をなくす、 AIネイティブな開発プロセス
Avatar for Michiru Kato applism118
4
1.3k
学習データって増やせばいいんですか？
Avatar for fumihiko takahashi ftakahashi
2
330
手動から自動へ、そしてその先へ
Avatar for Sammy(MoritaMasami) moritamasami
0
300
5分で知るMicrosoft Ignite
Avatar for Taiji HAGINO taiponrock
PRO
0
360
SREには開発組織全体で向き合う
Avatar for k-nagase koh_naga
0
130
年間40件以上の登壇を続けて見えた「本当の発信力」/ 20251213 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
130
モダンデータスタック (MDS) の話とデータ分析が起こすビジネス変革
Avatar for suto sutotakeshi
0
490
Gemini でコードレビュー知見を見える化
Avatar for ZOZO Developers zozotech
PRO
1
250
AI-DLCを現場にインストールしてみた：プロトタイプ開発で分かったこと･やめたこと
Avatar for Recruit recruitengineers
PRO
2
120
非CUDAの悲哀 〜Claude Code と挑んだ image to 3D “Hunyuan3D”を EVO-X2(Ryzen AI Max+395)で動作させるチャレンジ〜
Avatar for hawky the miscellaneous hawkymisc
2
180

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
970
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
710
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k

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