Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Electron performance and C++ in Mailspring


Published on

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

Published in: Software
  • Be the first to comment

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! @bengotow