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

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
0
81

 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
1.1k
Why not React Native - EN
Avatar for pramendra pramendra
0
290
Consulting in 2020
Avatar for pramendra pramendra
0
77

Other Decks in Technology

See All in Technology
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
Avatar for gree_tech gree_tech
PRO
0
490
AI開発ツールCreateがAnythingになったよ
Avatar for s sato tendasato
0
100
DDD集約とサービスコンテキスト境界との関係性
Avatar for Aja9tochin pandayumi
2
250
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
Avatar for AEON aeonpeople
0
170
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
Avatar for gowhich501 gowhich501
1
110
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
Avatar for gree_tech gree_tech
PRO
0
500
サンドボックス技術でAI利活用を促進する
Avatar for k-nagase koh_naga
0
170
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
Avatar for macneko-ayu macnekoayu
0
280
ヒューリスティック評価を用いたゲームQA実践事例
Avatar for gree_tech gree_tech
PRO
0
490
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
Avatar for ShinoP shinop
0
160
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
Avatar for z63d z63d
2
130
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
Avatar for Preferred Networks pfn
PRO
0
460

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
51
5.6k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k

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