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

es6-in-production

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for pramendra pramendra
September 22, 2017
Technology
98
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.1k
Why not React Native - EN
Avatar for pramendra pramendra
0
320
Consulting in 2020
Avatar for pramendra pramendra
0
99

Other Decks in Technology

See All in Technology
Atlassian Cloudサポート業務でのAIエージェント活用事例
Avatar for Makky12 smt7174
0
440
【CEDEC2026】『GRANBLUE FANTASY: Relink - Endless Ragnarok』のバトル制作事例 ～最高のキャラゲーを目指して～
Avatar for Cygames, Inc. cygames
PRO
0
200
変化の早いClaude Codeを 書籍に落とし込む
Avatar for Oikon oikon48
6
1.3k
Issue設計から始める仕様駆動開発 / 20260731 Mizuki Hirata
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
130
Forza Horizon 6 のテレメトリ機能で 自動運転に使えそうな学習データを集める話
Avatar for henjin0 henjin0
0
130
toio・myCobotでフィジカルAIっぽいことを行うための検討（とりあえず調査） / フィジカルAI LT（IoTLTによる開催）
Avatar for you（@youtoy） you
PRO
0
280
タクシーアプリ『GO』の実践的データ活用〜位置情報データの収集とStreamlitでの可視化〜
Avatar for GO Inc. dev mot_techtalk
2
200
AI駆動開発は個人技からチーム戦へ：組織でAIを使いこなすための実践設計
Avatar for Atsushi Nakatsugawa moongift
PRO
0
450
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
2
7.7k
最高のシステムプロンプトを作るためにフィードバック機能を導入した話
Avatar for Ryotaro Harada alchemy1115
1
330
Retriever と Reranker、結局どうする？
Avatar for hkazuakey kazuaki
2
670
Software Supply Chain Attackからクラウド環境を守るためにできること
Avatar for LHazy lhazy
2
140

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
430
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.5k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.8k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
200
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k

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