Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
【U/day Tokyo 2025】Cygames流 最新スマートフォンゲームの技術設計 〜『Shadowverse: Worlds Beyond』におけるアーキテクチャ再設計の挑戦～
Avatar for Cygames cygames
PRO
2
540
MySQLとPostgreSQLのコレーション / Collation of MySQL and PostgreSQL
Avatar for とみたまさひろ tmtms
1
260
Jakarta Agentic AI Specification - Status and Future
Avatar for Reza Rahman reza_rahman
0
110
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
Avatar for SansanTech sansantech
PRO
1
150
AIエージェント開発と活用を加速するワークフロー自動生成への挑戦
Avatar for shibuiwilliam shibuiwilliam
3
150
2025年 開発生産「可能」性向上報告 サイロ解消からチームが能動性を獲得するまで/ 20251216 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
200
re:Invent 2025 ふりかえり 生成AI版
Avatar for TakaakiKakei takaakikakei
1
220
Haskell を武器にして挑む競技プログラミング ─ 操作的思考から意味モデル思考へ
Avatar for Naoya Ito naoya
6
1.6k
AWS Security Agentの紹介/introducing-aws-security-agent
Avatar for tomoki10 tomoki10
0
300
文字列の並び順 / Unicode Collation
Avatar for とみたまさひろ tmtms
3
610
品質のための共通認識
Avatar for KAKEHASHI kakehashi
PRO
3
270
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
Avatar for Satoshi Kobayashi scova0731
0
320

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k

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