es6-in-production

September 22, 2017

61

es6-in-production

pramendra

September 22, 2017

Tweet

More Decks by pramendra

See All by pramendra

Why not React Native - JP

3

820

Why not React Native - EN

0

220

Consulting in 2020

0

62

Other Decks in Technology

See All in Technology

自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation

9

2.1k

Microsoft Cloudで開発ライフサイクルを保護する

0

140

オーナーシップを持つ領域を明確にする

11

2.6k

SREとその組織類型

8

1.5k

転移学習とドメイン適応の基礎

2

570

OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar

2

640

SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた

coconala_engineer

0

220

日本におけるデータエンジニアリングのこれまでとこれから

12

2.5k

Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17

2

470

Databricks:『生成AI World Cup』のご案内

databricksjapan

2

150

Vertex AI を中心に生成AIのアップデートを共有します

0

150

Tableau事例紹介 / Tableau Case Study of Eureka

kazuya_araki_tokyo

1

170

Featured

See All Featured

What the flash - Photography Introduction

64

11k

Pencils Down: Stop Designing & Start Developing

117

11k

A Tale of Four Properties

150

22k

Building Effective Engineering Teams - LeadDev

27

1.8k

[RailsConf 2023] Rails as a piece of cake

22

3.9k

Understanding Cognitive Biases in Performance Measurement

6

990

Teambox: Starting and Learning

128

8.4k

Fashionably flexible responsive web design (full day workshop)

397

65k

The Psychology of Web Performance [Beyond Tellerrand 2023]

5

1.5k

Cheating the UX When There Is Nothing More to Optimize - PixelPioneers

stephaniewalter

273

13k

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

39

4.4k

The Cult of Friendly URLs

74

5.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