Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
0
85

 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
300
Consulting in 2020
Avatar for pramendra pramendra
0
82

Other Decks in Technology

See All in Technology
Haskell を武器にして挑む競技プログラミング ─ 操作的思考から意味モデル思考へ
Avatar for Naoya Ito naoya
7
1.6k
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
Avatar for SansanTech sansantech
PRO
1
150
re:Invent 2025 ~何をする者であり、どこへいくのか~
Avatar for tetutetu214 tetutetu214
0
230
Sansanが実践する Platform EngineeringとSREの協創
Avatar for SansanTech sansantech
PRO
2
950
.NET 10の概要
Avatar for tomokusaba tomokusaba
0
120
Fashion×AI「似合う」を届けるためのWEARのAI戦略
Avatar for ZOZO Developers zozotech
PRO
2
880
RAG/Agent開発のアップデートまとめ
Avatar for sakai taka0709
0
190
NIKKEI Tech Talk #41: セキュア・バイ・デザインからクラウド管理を考える
Avatar for Ryosuke Sekido sekido
PRO
0
160
GitHub Copilotを使いこなす 実例に学ぶAIコーディング活用術
Avatar for 74th(Atsushi Morimoto) 74th
3
3.5k
学習データって増やせばいいんですか？
Avatar for fumihiko takahashi ftakahashi
2
510
ExpoのインダストリーブースでみたAWSが見せる製造業の未来
Avatar for 濱田孝治 hamadakoji
0
160
MLflowダイエット大作戦
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
140

Featured

See All Featured
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
700
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
59
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
400
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
45
Claude Code のすすめ
Avatar for schroneko schroneko
65
200k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
71
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
0
270
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
0
180
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
86

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