Upgrade to Pro — share decks privately, control downloads, hide ads and more …

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
0
80

 es6-in-production

Avatar for pramendra

pramendra

September 22, 2017
Tweet

More Decks by pramendra

See All by pramendra
Why not React Native - JP
Avatar for pramendra pramendra
3
1k
Why not React Native - EN
Avatar for pramendra pramendra
0
280
Consulting in 2020
Avatar for pramendra pramendra
0
76

Other Decks in Technology

See All in Technology
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
Avatar for matsuihidetoshi matsuihidetoshi
1
300
監視のこれまでとこれから/sakura monitoring seminar 2025
Avatar for FUJIWARA Shunichiro fujiwara3
11
4k
Model Mondays S2E03: SLMs & Reasoning
Avatar for Nitya Narasimhan, PhD nitya
0
210
怖くない！はじめてのClaude Code
Avatar for Shinya Masadome（東京AI祭） shinya337
0
200
How Community Opened Global Doors
Avatar for hiroramos hiroramos4
PRO
1
130
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
Avatar for HASEGAWA Tomoki tomzoh
4
3.3k
SpringBoot x TestContainerで実現するポータブル自動結合テスト
Avatar for 株式会社出前館 demaecan
0
110
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
Avatar for Motoyoshi Kosei motoyoshi_kakaku
1
480
フィンテック養成勉強会#54
Avatar for フィンテック養成コミュニティ finengine
0
180
Prox Industries株式会社 会社紹介資料
Avatar for Prox proxindustries
0
330
AIのAIによるAIのための出力評価と改善
Avatar for たまねぎ chocoyama
2
590
Lambda Web Adapterについて自分なりに理解してみた
Avatar for Makky12 smt7174
5
130

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k

Transcript

  1. ES6 in Production Pramendra Gupta

  2. ES6(ES2015)

  3. const test = ({id, user}) => <h1><span>{id}</span>{user}</ h1>; ES6(ES2015)

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

  5. We ship fallback to support legacy browser

  6. Browser Support

  7. Disadvantage of ES5 File Size Parse Time big large Debug

    hard
  8. None

  9. <script type="module" />

  10. None

  11. async/await Classes Arrow functions Promises Map Set ES6 modules support

    lands in browsers <script type="module" />

  12. Advantage of ES6 version size(min+gzipped) parse time ES5 40k 360ms

    ES6+ 20k 170ms File Size Parse Time small low Debug easy

  13. ES6 Rocks

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

  15. Demo https://github.com/pramendra/es6-in-production