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

970

Why not React Native - EN

0

250

Consulting in 2020

0

74

Other Decks in Technology

See All in Technology

2025年の挑戦コーポレートエンジニアの技術広報/techpr5

0

150

Azureの開発で辛いところ

0

240

DMMブックスへのTipKit導入

1

110

30分でわかる「リスクから学ぶKubernetesコンテナセキュリティ」/30min-k8s-container-sec

3

450

.NET 最新アップデート～ AI とクラウド時代のアプリモダナイゼーション

0

200

データ基盤におけるIaCの重要性とその運用

4

530

AIアプリケーション開発でAzure AI Searchを使いこなすためには

1

120

ゼロからわかる！！AWSの構成図を書いてみようワークショップ問題&解答解説 #デッカイギ #羽田デッカイギおつ

0

1.5k

Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025

1

2.4k

iPadOS18でフローティングタブバーを解除してみた

1

150

駆け出しリーダーとしての第一歩〜開発チームとの新しい関わり方〜 / Beginning Journey as Team Leader

0

120

0→1事業こそPMは営業すべし / pmconf #落選お披露目 / PM should do sales in zero to one

1

1.5k

Featured

See All Featured

Design and Strategy: How to Deal with People Who Don’t "Get" Design

127

18k

Practical Tips for Bootstrapping Information Extraction Pipelines

10

870

Site-Speed That Sticks

3

270

Rails Girls Zürich Keynote

94

13k

The Straight Up "How To Draw Better" Workshop

232

140k

Unsuck your backbone

669

57k

Product Roadmaps are Hard

50

11k

Into the Great Unknown - MozCon

34

1.6k

Art, The Web, and Tiny UX

298

20k

Mobile First: as difficult as doing things right

222

9k

Designing Dashboards & Data Visualisations in Web Apps

230

52k

Evolution of real-time – Irina Nazarova, EuRuKo, 2024

6

500

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