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

Desktop apps with Electron

Desktop apps with Electron

Learn how to use Electron to build native desktop applications for all major platforms.

Thanos Polychronakis

March 29, 2016

More Decks by Thanos Polychronakis

Other Decks in Technology


  1. Today's Menu Today's Menu What is Electron / Features Basic

    Concepts Hello World Handling Assets Databases Packaging Automatic Updates Reveal Case Study
  2. Electron allows you to write Electron allows you to write

    native applications for native applications for desktop using Javascript desktop using Javascript and Node.js and Node.js
  3. Electron features Electron features Automatic Updates Crash Reporting Native menu

    controls Native notifications OS specific components Simplified IPC communication
  4. The processes The processes The Main Process The Main Process

    In Electron, the process that runs package.json’s main script is called the main process. The script that runs in the main process can display a GUI by creating web pages. tl;dr: This is the node.js application - the backend
  5. The processes The processes The Renderer Process The Renderer Process

    Since Electron uses Chromium for displaying web pages, Chromium’s multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process. tl;dr: This is the frontend browser stuff
  6. The Stack The Stack deeper deeper Electron boots through node

    Hacked Chromium to have Node.js bindings on Renderer process (AKA can use FS, etc from frontapp)
  7. Basic boilerplate Basic boilerplate your-app/ ├── package.json ├── main.js └──

    index.html { "name" : "your-app", "version" : "0.1.0", "main" : "main.js" } npm start The package.json Start app with
  8. The main module The main module 'use strict'; const electron

    = require('electron'); const app = electron.app; // Module to control application life. const BrowserWindow = electron.BrowserWindow; var mainWindow = null; // Quit when all windows are closed. app.on('window-all-closed', function() { app.quit(); }); // This method will be called when Electron has finished // initialization and is ready to create browser windows. app.on('ready', function() { // Create the browser window. mainWindow = new BrowserWindow({width: 800, height: 600}); // and load the index.html of the app. mainWindow.loadURL('file://' + __dirname + '/index.html'); });
  9. Frontend Assets Frontend Assets Position them wherever you want Reference

    is based on FS Use relative paths Use absolute FS paths ("/Applications/MyApp/...") Get absolute path from electron JS has commonJS built in, no need to browserify Single target browser
  10. Binary Assets Binary Assets Position them wherever you want Reference

    is based on FS Prefer to submodule them Include all possible targets (win32, win64, etc) Delete not needed targets on build stage
  11. NPM modules NPM modules The Native Node Modules problem is

    abstracted away from you during the build process. no sweat
  12. Protecting Source Protecting Source Using the ASAR archiving package Atom

    Shell ARchive Requires special provisions Can no longer reference assets directly Special methods exist for reading raw files Application files are now a tarball and thus Read Only
  13. Application Data Application Data $XDG_CONFIG_HOME or ~/.config on Linux ~/Library/Application

    Support on OS X %APPDATA% on Windows Actual App Path [appData]/[AppName] Where you can store application data
  14. Built In Built In Session Storage Key value store per

    user session Local Storage Persistent key value store IndexedDB Big data Since we use Chromium these APIs are guaranteed to be there and work
  15. SQLite SQLite Use FS for storing the data SQLite compiled

    to JS https://github.com/kripken/sql.js
  16. Bundle your own Bundle your own Mongo Couch Postgres Will

    significantly affect the size of your self-install package as static-built binaries are big
  17. Packaging Overview Packaging Overview 1. Finalize your app - build

    what you have to build 2. Copy whole app into the "build" directory 3. Delete and npm prune all development files and what doesn't need to be into the bundle 4. Run electron-packager to produce the executable 5. Run 'appdmg' to produce the self-installable
  18. electron-packager electron-packager Simple setup Grunt / Gulp tasks But better

    to use the Node API directly Auto builds Native NPM Modules Produces executables for all OSes Manages Code Signing on osx
  19. Automatic Updates Setup Automatic Updates Setup Very simple implementation You

    create your own UI / UX Requires a server HTTP API { "url": "http://mycompany.com/latest", "name": "2.0.2", "notes": "Theses are some release notes innit", "pub_date": "2016-03-31T21:29:53+01:00" } Server Response
  20. Auto Updates Flow Auto Updates Flow 1. Client sends its

    version to Server 2. Server determines if an update is needed If it is not it responds with 204 NO CONTENT If it is it returns the Server Response with the download url of the new version 3. Client automatically downloads the update 4. Once downloaded it installs and awaits next restart 5. Optionally you may force this via user input
  21. About Reveal About Reveal Reveal is Instant Replay for Sports

    It is used by coaches and athletes Elevator Pitch Operations External cameras stream video clips to the server The server makes the clips available to clients with tagging features Environment Local private WiFi network on Stadium Node.js Server on Macbook Air Burdenous install, onboarding and maintenance
  22. The Reveal Stack The Reveal Stack Started development on June

    2014 Node.js v0.12 Provides HTTP and Websockets API Express Built using Redis and Mongo
  23. Migrating to Electron Migrating to Electron All the electron files,

    back, forth, images, etc went to the new "electron/" folder Redis had to go Local pubsub via EventEmitter Created a custom runtime queueing system Mongo got bundled, osx binary Ffmpeg got bundled, osx binary Boot work, determining paths, rearranged staff a bit. Boom! It worked!