es6-in-production

September 22, 2017

77

es6-in-production

pramendra

September 22, 2017

Tweet

More Decks by pramendra

See All by pramendra

Why not React Native - JP

3

960

Why not React Native - EN

0

250

Consulting in 2020

0

74

Other Decks in Technology

See All in Technology

非機能品質を作り込むための実践アーキテクチャ

5

1.5k

1等無人航空機操縦士一発試験合格までの道のりドローンミートアップ@大阪 2024/12/18

0

170

10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec

3

360

re:Invent をおうちで楽しんでみた～CloudWatch のオブザーバビリティ機能がスゴい！/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!

0

130

Turing × atmaCup #18 - 1st Place Solution

0

490

事業貢献を考えるための技術改善の目標設計と改善実績 / Targeted design of technical improvements to consider business contribution and improvement performance

0

100

Snykで始めるセキュリティ担当者とSREと開発者が楽になる脆弱性対応 / Getting started with Snyk Vulnerability Response

2

190

Storage Browser for Amazon S3

1

240

DevFest 2024 Incheon / Songdo - Compose UI 조합 심화

0

120

あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of

0

480

複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計

0

120

podman_update_2024-12

1

280

Featured

See All Featured

ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020

111

49k

[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails

33

2k

Put a Button on it: Removing Barriers to Going Fast.

59

3.6k

Code Reviewing Like a Champion

520

39k

Fashionably flexible responsive web design (full day workshop)

405

66k

実際に使うSQLの書き方徹底解説 / pgcon21j-tutorial

169

50k

Rails Girls Zürich Keynote

94

13k

Fontdeck: Realign not Redesign

paulrobertlloyd

82

5.3k

How to Ace a Technical Interview

276

23k

Principles of Awesome APIs and How to Build Them.

126

17k

Building Better People: How to give real-time feedback that sticks.

365

19k

Building a Modern Day  E-commerce SEO Strategy

38

7k

Transcript

ES6 in Production Pramendra Gupta
ES6(ES2015)
const test = ({id, user}) => <h1><span>{id}</span>{user}</ h1>; ES6(ES2015)
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
We ship fallback to support legacy browser
Browser Support
Disadvantage of ES5 File Size Parse Time big large Debug
hard
None
<script type="module" />
None
async/await Classes Arrow functions Promises Map Set ES6 modules support
lands in browsers <script type="module" />
Advantage of ES6 version size(min+gzipped) parse time ES5 40k 360ms
ES6+ 20k 170ms File Size Parse Time small low Debug easy
ES6 Rocks
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>
Demo https://github.com/pramendra/es6-in-production