Slide 1

Slide 1 text

Desktop apps with Desktop apps with Electron Electron

Slide 2

Slide 2 text

Today's Menu Today's Menu What is Electron / Features Basic Concepts Hello World Handling Assets Databases Packaging Automatic Updates Reveal Case Study

Slide 3

Slide 3 text

Made with ♥ by GitHub.

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Electron works for Electron works for Windows OSX Linux

Slide 6

Slide 6 text

Electron features Electron features Automatic Updates Crash Reporting Native menu controls Native notifications OS specific components Simplified IPC communication

Slide 7

Slide 7 text

Built on Electron Built on Electron

Slide 8

Slide 8 text

Let's get down on it Let's get down on it

Slide 9

Slide 9 text

Basic Concepts Basic Concepts

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

The Stack The Stack Chromium 49 Node.js 5.1.1 ...as of Mar 2016

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

Hello World Hello World

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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'); });

Slide 17

Slide 17 text

Assets Assets

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

NPM modules NPM modules The Native Node Modules problem is abstracted away from you during the build process. no sweat

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Databases Databases

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

SQLite SQLite Use FS for storing the data SQLite compiled to JS https://github.com/kripken/sql.js

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Packaging Packaging

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Automatic Updates Automatic Updates

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Reveal Case Study Reveal Case Study

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Migrating to Electron Migrating to Electron

Slide 37

Slide 37 text

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!

Slide 38

Slide 38 text

Thank you Thanasis Polychronakis @thanpolas https://speakerdeck.com/thanpolas

Slide 39

Slide 39 text

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