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.

Cbb9cafe03e785d80a9aa973c5e43c44?s=128

Thanos Polychronakis

March 29, 2016
Tweet

Transcript

  1. Desktop apps with Desktop apps with Electron Electron

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

    Concepts Hello World Handling Assets Databases Packaging Automatic Updates Reveal Case Study
  3. Made with ♥ by GitHub.

  4. 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
  5. Electron works for Electron works for Windows OSX Linux

  6. Electron features Electron features Automatic Updates Crash Reporting Native menu

    controls Native notifications OS specific components Simplified IPC communication
  7. Built on Electron Built on Electron

  8. Let's get down on it Let's get down on it

  9. Basic Concepts Basic Concepts

  10. 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
  11. 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
  12. The Stack The Stack Chromium 49 Node.js 5.1.1 ...as of

    Mar 2016
  13. 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)
  14. Hello World Hello World

  15. 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
  16. 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'); });
  17. Assets Assets

  18. 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
  19. 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
  20. NPM modules NPM modules The Native Node Modules problem is

    abstracted away from you during the build process. no sweat
  21. 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
  22. 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
  23. Databases Databases

  24. 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
  25. SQLite SQLite Use FS for storing the data SQLite compiled

    to JS https://github.com/kripken/sql.js
  26. 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
  27. Packaging Packaging

  28. 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
  29. 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
  30. Automatic Updates Automatic Updates

  31. 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
  32. 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
  33. Reveal Case Study Reveal Case Study

  34. 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
  35. 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
  36. Migrating to Electron Migrating to Electron

  37. 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!
  38. Thank you Thanasis Polychronakis @thanpolas https://speakerdeck.com/thanpolas

  39. Questions? Thanasis Polychronakis @thanpolas https://speakerdeck.com/thanpolas