Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
110
0

 es6-in-production

Avatar for pramendra

pramendra

September 22, 2017

More Decks by pramendra

See All by pramendra
Why not React Native - JP
Avatar for pramendra pramendra
3
1.2k
Why not React Native - EN
Avatar for pramendra pramendra
0
330
Consulting in 2020
Avatar for pramendra pramendra
0
110

Other Decks in Technology

See All in Technology
Post AI時代のリファクタリング実践記 / Refactoring in the post AI era
Avatar for 株式会社カミナシ kaminashi
1
140
今こそ知りたいAmplifyGen2
Avatar for k.masachika mkdev10
2
160
3つのアプローチで目指す チームを強くするAI駆動開発
Avatar for thkt thkt
0
160
事業活動を AI Ready にする攻めと守りのデータエンジニアリング / data-engineering-for-ai-ready-business
Avatar for pei0804 pei0804
7
2.6k
Running Kotlin + Quarkus with Lambda
Avatar for Nealle nealle
1
420
おそらく日本で唯一のDevRelインターン生として
Avatar for husensan husengs7
0
170
SREでアラート疲れを 解決しよう！
Avatar for KairiM kairim0
1
220
生成AIを使って「人が」考える技術 ― AI時代の人機共想と実践ノウハウ｜UNITT AC2026
Avatar for 石井力重 ishiirikie
0
580
「Docker Desktop不要の時代」は 来たのか？
Avatar for ueponx ueponx
0
520
並行性の問題を防げ！実践トランザクション入門
Avatar for Shoichi Ochi occhi
0
280
メルペイ 会計システム概要と歴史
Avatar for mewuto mewuto
0
210
ゲームのリアルタイム通信から見た QUIC と MoQ
Avatar for SEGADevTech segadevtech
0
110

Featured

See All Featured
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
610
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
280
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
870
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
58k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
1
480
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
430
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k

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