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
Platform開発が先行する Platform Engineeringの違和感
Avatar for KintoTech_Dev kintotechdev
4
540
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
Avatar for Nayuta S. nayuts
1
460
共有と分離 - Compose Multiplatform "本番導入" の設計指針
Avatar for Ryo WATANABE error96num
1
360
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
Avatar for you（@youtoy） you
PRO
0
100
なぜテストマネージャの視点が 必要なのか？ 〜 一歩先へ進むために 〜
Avatar for Sammy(MoritaMasami) moritamasami
0
210
バイブスに「型」を！Kent Beckに学ぶ、AI時代のテスト駆動開発
Avatar for amixedcolor amixedcolor
2
520
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
Avatar for KentaroFujii kentarofujii
0
130
5年目から始める Vue3 サイト改善 #frontendo
Avatar for Kihara, Takuya tacck
PRO
3
210
La gouvernance territoriale des données grâce à la plateforme Terreze
Avatar for BlueHats bluehats
0
150
allow_retry と Arel.sql / allow_retry and Arel.sql
Avatar for Shintani Teppei euglena1215
1
160
ZOZOマッチのアーキテクチャと技術構成
Avatar for ZOZO Developers zozotech
PRO
3
1.5k
KotlinConf 2025_イベントレポート
Avatar for ソニー株式会社 sony
1
110

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
55
13k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
13k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k

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