Supercharge your next web app

with Electron!
GET /user/techninja

James Todd
● Drupal Dev for 10+ years from Nor Cal
● Full time developer at Four Kitchens
● Maker, promoter of STEAM for kids
● Co-Author for Arduino Book series
● Maintainer of 2 OSS Electron apps for robotic
control (check out a demo our booth!)
Hold questions until the end
Thank you :)
Quick Term Reference
● JavaScript: Programming language for web
browsers
● Node.js: JavaScript for servers
● NPM: The node package manager
● API: Interface to let programs to something
● ReST/ful: Standard for APIs over the web
Quick Term Reference
● DOM: Object model for web page elements
● React: Web framework for state & UI
management
● Express: node.js “web server” and ReST
router
● Headless: Running just a backend without a
frontend
What is Electron?
Electron is yours!

= +
Electron is three things...

=
Electron's architecture makes it better

Main Process Renderer Processes

Creating with Electron means:
● Single codebase, cross platform native
● Use standard HTML 5 markup
● Use Bootstrap, Angular, React, jQuery and more
● Incredibly powerful debugging w/Chrome dev tools
● Only one browser version to target!
● No need to worry about download times for local files
Who uses Electron?
 Atom Editor
● Infinitely hackable
● > 5k community packages
to extend functionality
● > 1mm monthly users
● Dogfooding ensures purity
and strong releases
 WordPress Desktop
● Clean, uncluttered interface
● Built by small team in
about 2 months
● Direct API access to
remotes sites, or offline
storage synced.
 Visual Studio Code
● MS Open Source
● Different take on code
editing
● Live code
execution/debugging
for node/php & more
electron.atom.io/apps
Quando a Roma...

???
“People are excited about the
Desktop again…” -Paul Betts
Electron might NOT be for your app if...
...you answer NO to any of the following:
● Can your app run reliably and be useful while offline?
● Can your team meet user needs for application updates
and OS specific install support?
● Does extending to desktop meet few additional needs
and use cases beyond native notifications and interfaces?
Electron might be RIGHT for your app if...
● Do you need low level functionality not handled by
existing APIs?
● Do you need to port a node or other server side app
for client side use?
● Do you need extra async processing power beyond
webworkers ?
Just give it a try!
“Ship Stuff Every Day”
— Plato

(or was it Snoop Dogg?)

CNCServer running on a
Raspberry PI driving the
WaterColorBot via API from
native iPad app at the
White House Science Fair 2013
<webview>

https://electron.atom.io/docs/api/webview-tag/
 <webview>
Main Window

Mode links

Mode Webview
“iframe”
 <webview>
Main Window

Mode links

Mode Webview
“iframe”
 <webview>
Main Window

Mode links

Mode Webview
“iframe”
 <webview>
Each organization
in Slack runs in
its own webview
process.

https://slack.engineering/reducing-slacks-memory-footprint-4480fec7e8eb
https://github.com/PancakeBot/PancakePainter
https://github.com/PancakeBot/PancakePainter
https://redd.it/5ld12n
 OS Specific Binary
Raster to autotrace >

< autotrace to SVG

Making Electron
Work for you
Let’s build a simple Electron App

Development Prerequisites: Electron Project

Minimums:
● Relatively new OS (minimum)
package.json
○ Win 7, OS X 10.9, Ubuntu 12
● Terminal/Command line access main.js
● Node.js installed (nodejs.org)
● Working knowledge of how web index.html
browsers display HTML
package.json

{
"name": "my-electron-project",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "~1.6.2"
}
}
Main.js (Main Process)
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

const path = require('path')

const url = require('url')

function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600})

mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))

app.on('ready', createWindow)
Index.html (Renderer Process)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>

<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</html>
`npm install`, `npm start`
It works! (hopefully)
...or just use electron-quick-start

`git clone https://github.com/electron/electron-quick-start`

Electron can use...
● Express server Electron Libraries:
● Native ● Automatic babel/sass
runtimes/compiled compilation
code ● Streamlined user
● Low level hardware configuration storage
connections ● etc…..
Native APIs

● File Open/Save ● Environment variables

● Native customizable ● IPC communication
dialogs for each OS between processes
● Menus, keyboard ● Frameless windows
shortcuts, clipboard ● Dynamic tray, dock or
● Desktop capture application icons
● Tons more!
Native API demo app

github.com/electron/electron-api-demos
 Integration
Drupal 8, Waterwheel, React, and Electron
Drupal 8 inside electron
github.com/fourkitchens/waterwheel-training
All the Drupal 8 API/Headless sessions
or trainings at DrupalCon Baltimore:
● API First Drupal 8 with React.js and Waterwheel
● Future of the CMS: Decoupled, multichannel, and content-as-a-service
● A look into a possible Future for all of us: React, GraphQL and Drupal
● Ain’t No Body: Not Your Mama’s Headless Drupal
● Decoupled Drupal and Angular 2
● EmberJS: A Fitting Face for a D8 Backend
● Decoupled from the Inside Out
● Drupal, Alexa, and Big Mouth Billy Bass Walk into a Bar
● API-First Initiative
● Masters of the Universe: Live-coding a React Application using Drupal Services
Main.js (excerpt)
…

function createWindow () {
mainWindow = new BrowserWindow({width: 740, height: 500})

mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'build', 'index.html'),
protocol: 'file:',
slashes: true
}))

app.on('ready', createWindow)

app.on('window-all-closed', function () {
app.quit()
}
package.json (excerpt)
{
"name": "todomvc",
"version": "0.0.1",
"main": "main.js",
"scripts": {
"start": "electron .",
"build": "react-scripts build"
},
"devDependencies": {
"electron": "~1.6.2",
"enzyme": "^2.4.1",
"react-scripts": "^0.9.0",
...
`npm install`
`npm run build`, `npm start`
To do React app in Electron!
API, Devtools for debugging
It’s really that easy
Squirrel!
Installation packaging
● Integrating an app should be easy
● Packaging can be automated, and
supports delta updates
● Distributing should be straightforward
with channels
● Installing is Wizard-Free™ with no UAC
dialogs or reboot
● Updating is done in the background
Installation building

electron-packager electron-installer
windows appname.exe

electron-packager appdmg
appname.dmg

electron-packager electron-installer
[debian/redhat]
appname.deb/
appname.rpm
Updates
autoUpdater & update servers
● Nuts: https://github.com/GitbookIO/nuts
○ Powered by GitHub project releases for files & data
○ Quickly deployable to Heroku/docker/your own server as stateless service
with minor configuration via environment variables
○ Supports private repositories for closed source releases
○ Supports Squirrel.Windows & Squirrel.Mac
● “Electron Release Server”:
https://github.com/ArekSredzki/electron-release-server
○ Full featured, provides hosted Angular powered UI interface for
managing and displaying releases
○ Docker deploy support, or run it on your own server
○ Supports Squirrel.Windows & Squirrel.Mac
Security and sandboxes
Don’t let Bobby ruin your week
Electron Security basics

● Always sanitize input and output

● Don’t allow giant or executable file uploads
● Only ever load local source files into windows
● Otherwise, disable node integration and use
caution
Crash reporting

const {crashReporter} = require('electron')

crashReporter.start({
productName: 'YourName',
Mini Breakpad
companyName: 'YourCompany', Server
submitURL: 'https://your-domain.com/submit',
uploadToServer: true
})

github.com/electron/mini-breakpad-server
That’s pretty much it!

● Electron is very active and still somewhat new.

● It’s not always the right solution
● When in doubt, just give it a try.
● Real companies ship with Electron every day
Electron Question Time!
Thank you!
Join Us for Contribution Sprints

Friday, April 28, 2017

First-Time Sprinter Mentored Core Sprint General Sprints

Workshop 9:00am-12:00pm 9:00am-6:00pm
9:00am-12:00pm Room:301-303 Room:309-310
Room: 307-308

#drupalsprints
WHAT DID
YOU THINK?
Supercharge Your Next Web App with electron!
https://events.drupal.org/baltimore2017/sessions/superch
arge-your-next-web-app-electron

Take the survey!

https://www.surveymonkey.com/r/drupalconbaltimore

THANK YOU!