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
振り返りTransit Gateway ～VPCをいい感じでつなげるために～
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
3
210
本当にわかりやすいAIエージェント入門
Avatar for segavvy segavvy
1
300
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
Avatar for CUEBiC Inc. cuebic9bic
2
170
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
Avatar for Shinichi Nakagawa shinyorke
PRO
0
110
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
Avatar for HASEGAWA Tomoki tomzoh
2
120
セキュアなAI活用のためのLiteLLMの可能性
Avatar for Hiroki Takatsuka tk3fftk
1
330
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
Avatar for Naohiro Fujie fujie
0
270
ポストコロナ時代の SaaS におけるコスト削減の意義
Avatar for izzii izzii
1
470
VS CodeとGitHub Copilotで爆速開発！アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
Avatar for Yusuke Yamada yamachu
3
460
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
Avatar for karacoro / からころ tsukuha
1
380
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
Avatar for Takahiro Miyoshi sankichi92
1
1k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.7k

Featured

See All Featured
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
43
7.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.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