Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Electron Performance
and C++ in Mailspring
(or: what I’ve been up to for the last six months!)
Me
• Mac & iOS ➡ React & Electron
• Run a small team doing React /
mobile dev, now working on
Mailspring.
• Led the team b...
Nylas Mail ➡ Mailspring
• May 2017: Nylas API business booming—engineers
pulled from Nylas Mail to fight growth fires!
• Sep...
☄
Complaints about Nylas Mail
• Long startup time
• High battery impact
• Uses too much RAM*
Electron
😡 😤🚀🔥
• Long startup time
• High battery impact
• Uses too much RAM*
👷(
Complaints about Nylas Mail
Electron
Reducing startup time
• Start loading a BrowserWindow as fast as possible
• Watch out for sync I/O in main process
• Use t...
🕵
Your Code
Your node_modules
Heavy Node Modules
Heavy Node Modules
Heavy Node Modules
Heavy Node Modules
Heavy Node Modules
1.7MB of JSON
😱
Devtron
• Easy to find heavy dependencies and see total JS
loaded.
• `request` is 910k of JS. Can you use Fetch APIs?

`blu...
Devtron
Mailspring
• Easy to find heavy dependencies and see total JS
loaded.
• `request` is 910k of JS. Can you use Fetch ...
Devtron
• Some things you can’t avoid… but you can load
later. Who needs spellcheck in the first 500ms?
More UI Plugins Spe...
Energy Impact
Sync all mail, restart Mac, hide
applications, wait 15 minutes
Reducing Energy Impact
• Check for animations / needless layout
• Minimize use of setTimeout, setInterval. Don’t
wake and ...
Checking for Animations
Checking for Animations
Loading indicator with opacity: 0 animating forever!
setTimeout / setInterval
• Use smarter polling strategies:
• Change polling rate based on Electron
PowerMonitor state.
• P...
But… what if it’s not enough?
• Need to sync mail every few minutes,
sometimes this requires polling.
• Need to keep IDLE ...
Architecture
Observable SQLite Database
(electron-rxdb)
Architecture
C++
Enter C++
• Command line C++ processes replace the
background “work” window.
• Read actions on stdin, write JSON event
str...
C++ tradeoffs
• In JavaScript, control flow is hard.

(Promises, async/await, etc.)
• In C++, control flow is easy but memor...
C++ is kind of… pretty?
• The C++11 syntax is really elegant.
• Modern features like condition_variable allow
the sync eng...
Energy Impact
✨
Memory Use
805MB 368MB
MailspringNylas Mail
Takeaways
• Keep your dependencies light, use built-in APIs
when possible. Check require tree with Devtron!
• Use “Paint F...
Thanks!
getmailspring.com
@bengotow
Electron performance and C++ in Mailspring
Electron performance and C++ in Mailspring
Electron performance and C++ in Mailspring
Nächste SlideShare
Wird geladen in …5
×

von

Electron performance and C++ in Mailspring Slide 1 Electron performance and C++ in Mailspring Slide 2 Electron performance and C++ in Mailspring Slide 3 Electron performance and C++ in Mailspring Slide 4 Electron performance and C++ in Mailspring Slide 5 Electron performance and C++ in Mailspring Slide 6 Electron performance and C++ in Mailspring Slide 7 Electron performance and C++ in Mailspring Slide 8 Electron performance and C++ in Mailspring Slide 9 Electron performance and C++ in Mailspring Slide 10 Electron performance and C++ in Mailspring Slide 11 Electron performance and C++ in Mailspring Slide 12 Electron performance and C++ in Mailspring Slide 13 Electron performance and C++ in Mailspring Slide 14 Electron performance and C++ in Mailspring Slide 15 Electron performance and C++ in Mailspring Slide 16 Electron performance and C++ in Mailspring Slide 17 Electron performance and C++ in Mailspring Slide 18 Electron performance and C++ in Mailspring Slide 19 Electron performance and C++ in Mailspring Slide 20 Electron performance and C++ in Mailspring Slide 21 Electron performance and C++ in Mailspring Slide 22 Electron performance and C++ in Mailspring Slide 23 Electron performance and C++ in Mailspring Slide 24 Electron performance and C++ in Mailspring Slide 25 Electron performance and C++ in Mailspring Slide 26 Electron performance and C++ in Mailspring Slide 27 Electron performance and C++ in Mailspring Slide 28 Electron performance and C++ in Mailspring Slide 29 Electron performance and C++ in Mailspring Slide 30 Electron performance and C++ in Mailspring Slide 31 Electron performance and C++ in Mailspring Slide 32 Electron performance and C++ in Mailspring Slide 33
Nächste SlideShare
What to Upload to SlideShare
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

1 Gefällt mir

Teilen

Herunterladen, um offline zu lesen

Electron performance and C++ in Mailspring

Herunterladen, um offline zu lesen

High level overview of Electron performance tips and tricks, and a look at the new C++ architecture of Mailspring (https://getmailspring.com/) — presented Nov. 1st at the Bay Area Electron Meetup

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Electron performance and C++ in Mailspring

  1. 1. Electron Performance and C++ in Mailspring (or: what I’ve been up to for the last six months!)
  2. 2. Me • Mac & iOS ➡ React & Electron • Run a small team doing React / mobile dev, now working on Mailspring. • Led the team building Nylas Mail from 2014–2016.
  3. 3. Nylas Mail ➡ Mailspring • May 2017: Nylas API business booming—engineers pulled from Nylas Mail to fight growth fires! • Sept 2017: Nylas Mail officially sunset, re-licensed under MIT. 🎉 Mailspring: Fix longstanding issues, use Pro version revenue to run service and pay core contributors.
  4. 4. ☄ Complaints about Nylas Mail • Long startup time • High battery impact • Uses too much RAM* Electron 😡 😤🚀🔥
  5. 5. • Long startup time • High battery impact • Uses too much RAM* 👷( Complaints about Nylas Mail Electron
  6. 6. Reducing startup time • Start loading a BrowserWindow as fast as possible • Watch out for sync I/O in main process • Use the ASAR format in production • Load less JavaScript (on launch)
  7. 7. 🕵 Your Code Your node_modules
  8. 8. Heavy Node Modules
  9. 9. Heavy Node Modules
  10. 10. Heavy Node Modules
  11. 11. Heavy Node Modules
  12. 12. Heavy Node Modules 1.7MB of JSON 😱
  13. 13. Devtron • Easy to find heavy dependencies and see total JS loaded. • `request` is 910k of JS. Can you use Fetch APIs?
 `bluebird` is 180k of JS. Can you use native Promise? Nylas Mail
  14. 14. Devtron Mailspring • Easy to find heavy dependencies and see total JS loaded. • `request` is 910k of JS. Can you use Fetch APIs?
 `bluebird` is 180k of JS. Can you use native Promise?
  15. 15. Devtron • Some things you can’t avoid… but you can load later. Who needs spellcheck in the first 500ms? More UI Plugins SpellcheckerCore Window Interactive in 1.0s
  16. 16. Energy Impact Sync all mail, restart Mac, hide applications, wait 15 minutes
  17. 17. Reducing Energy Impact • Check for animations / needless layout • Minimize use of setTimeout, setInterval. Don’t wake and perform work if you don’t need to. • Attach an event listener to `blur` that toggles a CSS class, use it to prevent animations.
  18. 18. Checking for Animations
  19. 19. Checking for Animations Loading indicator with opacity: 0 animating forever!
  20. 20. setTimeout / setInterval • Use smarter polling strategies: • Change polling rate based on Electron PowerMonitor state. • Poll when important events occur (window focus event) rather than all the time.
  21. 21. But… what if it’s not enough? • Need to sync mail every few minutes, sometimes this requires polling. • Need to keep IDLE connections open to mail providers. • Need to keep streaming connection open to Mailspring server. 👷(😭 😢
  22. 22. Architecture Observable SQLite Database (electron-rxdb)
  23. 23. Architecture C++
  24. 24. Enter C++ • Command line C++ processes replace the background “work” window. • Read actions on stdin, write JSON event stream to stdout. • Main window spawns these processes, binds to their stdio streams, and re-broadcasts events.
  25. 25. C++ tradeoffs • In JavaScript, control flow is hard.
 (Promises, async/await, etc.) • In C++, control flow is easy but memory is hard. (Sync I/O on a few threads.) • The SQLite bindings for C are incredibly fast. • Shipping C++ cross-platform is hard.
  26. 26. C++ is kind of… pretty? • The C++11 syntax is really elegant. • Modern features like condition_variable allow the sync engine to do almost no polling.
  27. 27. Energy Impact ✨
  28. 28. Memory Use 805MB 368MB MailspringNylas Mail
  29. 29. Takeaways • Keep your dependencies light, use built-in APIs when possible. Check require tree with Devtron! • Use “Paint Flashing” to identify crippling CSS / layout issues. Minimize timer use if possible. • Combining Electron and C++ (or Haskell, or Go, etc.) isn’t that crazy.
  30. 30. Thanks! getmailspring.com @bengotow
  • joeykorkames

    Jul. 18, 2018

High level overview of Electron performance tips and tricks, and a look at the new C++ architecture of Mailspring (https://getmailspring.com/) — presented Nov. 1st at the Bay Area Electron Meetup

Aufrufe

Aufrufe insgesamt

896

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

33

Befehle

Downloads

2

Geteilt

0

Kommentare

0

Likes

1

×