Upgrade to Pro — share decks privately, control downloads, hide ads and more …

es6-in-production

Avatar for pramendra pramendra
September 22, 2017
Technology
0
88

 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
310
Consulting in 2020
Avatar for pramendra pramendra
0
86

Other Decks in Technology

See All in Technology
越境する組織づくり ─ 多様性を前提にしたチームビルディングとリードの実践知
Avatar for hrpnx kido_engineer
2
140
IBM Bobを使って、PostgreSQLのToDoアプリをDb2へ変換してみよう/202603_Dojo_Bob
Avatar for Mayumi Hirano mayumihirano
1
270
管理者向けGitHub Enterpriseの運用Tips紹介: 人にもAIにも優しいプラットフォームづくり
Avatar for yuriemori yuriemori
0
170
AWS DevOps Agent vs SRE俺 / AWS DevOps Agent vs me, the SRE
Avatar for SMS tech sms_tech
3
400
AWSをCLIで理解したい！ / I want to understand AWS using the CLI
Avatar for める mel_27
2
210
Serverless Agent Architecture on Azure / serverless-agent-on-azure
Avatar for miyake miyake
1
160
製造業ドメインにおける LLMプロダクト構築： 複雑な文脈へのアプローチ
Avatar for recruiting@caddi.jp caddi_eng
1
530
男（監査）はつらいよ - Policy as CodeからAIエージェントへ
Avatar for Kengo Suzuki ken5scal
5
780
「ストレッチゾーンに挑戦し続ける」ことって難しくないですか？ メンバーの持続的成長を支えるEMの環境設計
Avatar for SansanTech sansantech
PRO
3
400
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
11k
プロジェクトマネジメントをチームに宿す -ゼロからはじめるチームプロジェクトマネジメントは活動1年未満のチームの教科書です- / 20260304 Shigeki Morizane
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
140
組織のSREを推進するためのPlatform EngineeringとEKS / Platform Engineering and EKS to drive SRE in your organization
Avatar for mekka chmikata
0
190

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
460
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
820
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
710
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.6M
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k

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