Desktop apps with Desktop apps with Electron Electron

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

Made with ♥ by GitHub.

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

Electron works for Electron works for Windows OSX Linux

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

Built on Electron Built on Electron

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

Basic Concepts Basic Concepts

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

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

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

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)

Hello World Hello World

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

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

Assets Assets

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

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

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

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

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

Databases Databases

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

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

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

Packaging Packaging

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

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

Automatic Updates Automatic Updates

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

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

Reveal Case Study Reveal Case Study

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

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

Migrating to Electron Migrating to Electron

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!

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

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