Basic Concepts

The processes

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 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

• Chromium 49
• Node.js 5.1.1

...as of Mar 2016

The Stack deeper

• Electron boots through node                                               
• Hacked Chromium to have Node.js bindings on Renderer process (AKA can use FS, etc from frontapp)

Hello World

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

'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

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

• 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

The Native Node Modules problem is abstracted away from you during the build process.

no sweat

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

• %APPDATA% on Windows

• $XDG_CONFIG_HOME or ~/.config on Linux
• ~/Library/Application Support on OS X

Actual App Path

[appData]/[AppName]

Where you can store application data

Databases

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

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

Bundle your own

• Mongo
• Couch
• Postgres

Will significantly affect the size of your self-install package as static-built binaries are big

Packaging

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

• 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 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

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

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

• 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

• 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! 🎱🎱🎱

Shameless Plug Moment