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

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

1

2.4k

PaaSの歴史と、アプリケーションプラットフォームのこれから

7

1.5k

comilioとCloudflare、そして未来へと向けて

6

450

メンバーがオーナーシップを発揮しやすいチームづくり

2

140

完全自律型AIエージェントとAgentic Workflow〜ワークフロー構築という現実解

0

350

dbtを中心にして組織のアジリティとガバナンスのトレードオンを考えてみた

0

290

【JAWS-UG大阪 reInvent reCap LT大会サンバが始まったら強制終了】“1分”で初めてのソロ参戦reInventを数字で振り返りながら反省する

0

140

機械学習を「社会実装」するということ 2025年版 / Social Implementation of Machine Learning 2025 Version

5

1.3k

#TRG24 / David Cuartielles / Post Open Source

0

590

Cloudflareで実現する AIエージェントワークフロー基盤

0

290

EMConf JP の楽しみ方 / How to enjoy EMConf JP

2

150

Formal Development of Operating Systems in Rust

1

420

Featured

See All Featured

How to Think Like a Performance Engineer

22

1.3k

A Philosophy of Restraint

203

16k

Bash Introduction

610

210k

29

14k

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

33

2k

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

6

500

Typedesign – Prime Four

40

2.5k

Imperfection Machines: The Place of Print at Facebook

267

13k

What's in a price? How to price your products and services

244

12k

The Art of Programming - Codeland 2020

53

13k

Building Adaptive Systems

38

2.4k

Why Our Code Smells

335

57k

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