es6-in-production

September 22, 2017

78

es6-in-production

pramendra

September 22, 2017

Tweet

More Decks by pramendra

See All by pramendra

Why not React Native - JP

3

1k

Why not React Native - EN

0

260

Consulting in 2020

0

75

Other Decks in Technology

See All in Technology

システムとの会話から生まれる先手のDevOps

0

210

低レイヤを知りたいPHPerのためのCコンパイラ作成入門 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming

0

210

Amebaにおける Platform Engineeringの実践

6

900

改めて学ぶ Trait の使い方 / phpcon odawara 2025

1

560

AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践

1

240

GitHub MCP Serverを使って Pull Requestを作る、レビューする

2

710

ソフトウェア開発現代史: "LeanとDevOpsの科学"の「科学」とは何か？ - DORA Report 10年の変遷を追って - #DevOpsDaysTokyo

0

200

SDカードフォレンジック

0

100

AWSLambdaMCPServerを使ってツールとMCPサーバを分離する

1

2.5k

Micro Frontends: Necessity, Implementation, and Challenges

rainerhahnekamp

2

350

Webアプリを Lambdaで動かすまでに考えること / How to implement monolithic Lambda Web Application

7

1.2k

LangfuseでAIエージェントの可観測性を高めよう！/Enhancing AI Agent Observability with Langfuse!

0

170

Featured

See All Featured

GraphQLの誤解/rethinking-graphql

71

10k

JavaScript: Past, Present, and Future - NDC Porto 2020

47

5.3k

Dealing with People You Can't Stand - Big Design 2015

367

26k

Build The Right Thing And Hit Your Dates

35

2.6k

Large-scale JavaScript Application Architecture

512

110k

How To Stay Up To Date on Web Technology

790

250k

CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again

160

15k

We Have a Design System, Now What?

52

7.5k

The Pragmatic Product Professional

33

6.5k

XXLCSS - How to scale CSS and keep your sanity

248

1.3M

Facilitating Awesome Meetings

54

6.3k

Practical Orchestrator

186

10k

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