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
94
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
88

Other Decks in Technology

See All in Technology
OpenClaw初心者向けセミナー / OpenClaw Beginner Seminar
Avatar for hiranofumio cmhiranofumio
0
350
【関西電力KOI×VOLTMIND 生成AIハッカソン】空間AIブレイン ~⼤阪おばちゃんフィジカルAIに続く道~
Avatar for 田中 聖也 tanakaseiya
0
170
AgentCore RuntimeからS3 Filesをマウントしてみる
Avatar for Har1101 har1101
2
340
ブラックボックス化したMLシステムのVertex AI移行 / mlops_community_62
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
290
OPENLOGI Company Profile
Avatar for OPENLOGI hr01
0
83k
主催・運営として"場をつくる” というアウトプットのススメ
Avatar for もっさん _mossann_t
0
120
Webアクセシビリティは“もしも”に備える設計
Avatar for tomokusaba tomokusaba
0
170
15年メンテしてきたdotfilesから開発トレンドを振り返る 2011 - 2026
Avatar for giginet giginet
PRO
2
280
Tour of Agent Protocols: MCP, A2A, AG-UI, A2UI with ADK
Avatar for Mete Atamel meteatamel
1
210
自己組織化を試される緑茶ハイを求めて、今日も全力であそんで学ぼう / Self-Organization and Shochu Green Tea
Avatar for naiban naitosatoshi
0
150
OCI技術資料 : 証明書サービス概要
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
1
7.2k
【PHPカンファレンス小田原2026】Webアプリケーションエンジニアにも知ってほしい オブザーバビリティ の本質
Avatar for Futoshi Endo fendo181
0
280

Featured

See All Featured
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.1k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
150
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
97
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
310
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
160
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
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