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
1k
Why not React Native - EN
Avatar for pramendra pramendra
0
280
Consulting in 2020
Avatar for pramendra pramendra
0
76

Other Decks in Technology

See All in Technology
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
Avatar for かわうそ kawauso
2
7.5k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
Avatar for YuyaKoda ponkio_o
PRO
0
290
改めてAWS WAFを振り返る～業務で使うためのポイント～
Avatar for モブエンジニア masakiokuda
2
230
開発生産性を組織全体の「生産性」へ！ 部門間連携の壁を越える実践的ステップ
Avatar for ussy / @sudo5in5k sudo5in5k
1
5.6k
PHPでWebブラウザのレンダリングエンジンを実装する
Avatar for ディップ株式会社 dip_tech
PRO
0
220
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
Avatar for 弁護士ドットコム bengo4com
0
1.5k
United Airlines Customer Service– Call 1-833-341-3142 Now!
Avatar for vivankilkenny548+imnfc airhelp
0
150
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
Avatar for mm-matsuda mmmatsuda
0
260
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
6k
Tokyo_reInforce_2025_recap_iam_access_analyzer
Avatar for h-ashisan hiashisan
0
170
KubeCon + CloudNativeCon Japan 2025 Recap
Avatar for Ren ren510dev
1
360
20250707-AI活用の個人差を埋めるチームづくり
Avatar for shnjtk shnjtk
3
2.9k

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.8k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
950
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
53k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Docker and Python
Avatar for Tania Allard trallard
44
3.5k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
680
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k

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