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

980

Why not React Native - EN

0

260

Consulting in 2020

0

74

Other Decks in Technology

See All in Technology

管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers

hirotomotaguchi

2

240

これからSREになる人と、これからもSREをやっていく人へ

6

4.1k

サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI

12

3k

オブザーバビリティの観点でみるAWS / AWS from observability perspective

7

1k

スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、そして“組織”に成長するまで / How to set up QA team at reiwatravel

1

1.1k

Postmanを使いこなす！2025年ぜひとも押さえておきたいPostmanの10の機能

2

120

地方拠点でエンジニアリングマネージャーってできるの？〜地方という制約を楽しむオーナーシップとコミュニティ作り〜

1

130

TAMとre:Capセキュリティ編〜拡張脅威検出デモを添えて〜

1

110

データ基盤の成長を加速させる：アイスタイルにおける挑戦と教訓

3

650

データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ

2

230

0

330

開発者が自律的に AWS Security Hub findings に対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience

0

190

Featured

See All Featured

jQuery: Nuts, Bolts and Bling

63

7.6k

Imperfection Machines: The Place of Print at Facebook

267

13k

The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024

20

2.4k

86

9.5k

Art, The Web, and Tiny UX

298

20k

XXLCSS - How to scale CSS and keep your sanity

248

1.3M

Practical Orchestrator

186

10k

The World Runs on Bad Software

67

11k

Producing Creativity

343

39k

Embracing the Ebb and Flow

84

4.6k

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

33

2.1k

Building Your Own Lightsaber

104

6.2k

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