This document summarizes a presentation about building native desktop applications using Ember.js and Electron. It introduces Electron and explains how it allows composing desktop apps from JavaScript and HTML. It then discusses Ember Electron, a tool that integrates Electron workflows into Ember CLI. Key features covered include initializing Ember Electron, building and packaging the app, testing, adding shortcuts and dialogs, configuring icons and autoupdating. The presentation concludes with links to resources for learning more about Electron and Ember Electron.

1. electron for emberists
toronto ember.js meet up (mar 2 2017)

2. © Isle of Code Inc.@anulman
why write hybrid apps?
• app store distribution
• decouple a long-lived app from browser tabs
• use system ui, like alerts & menu / task bars
• use system resources, like fs & gpu
2

3. © Isle of Code Inc.@anulman
things we will learn
• how do i build my ember app as a native desktop app?
• intro to electron
• disclaimers re: electron / hybrid
• ember-electron
• how does ember-electron (v2.0) work?
• init
• `ember electron`
• `ember electron:package` [`:make`, `:publish`]
• `ember electron:test`
3

4. © Isle of Code Inc.@anulman
things we will learn (cont’d)
• how do i…
• add global shortcut + dialogs?
• config app icon?
• config autoupdate?
4

5. © Isle of Code Inc.@anulman
btw hi i’m aidan
• partner & polyglot @ isle of code
• (we’re hiring for ~sr js dev + design-friendly int/jr dev!)
• @anulman on twitter, github, etc
• when not hacking, i’m:
• on my bicycle
• at a concert
• making food
5

6. how do i build my ember app
as a native desktop app?

7. © Isle of Code Inc.@anulman
intro to electron
• oss framework to compose cross-platform desktop apps from node.js apis + chromium
windows
• originally extracted from github’s atom editor
• used by apps you use:
• atom
• slack
• brave
• ghost
• whatsapp
• visual studio code
• gitkraken
7

8. © Isle of Code Inc.@anulman
intro to electron (cont’d)
• offers simultaneous control of node.js & chromium runtimes
• comes pre-packaged with js wrappers for several common
host os apis:
• system tray
• autoupdate
• keyboard shortcuts w/ & w/o focus
• many pre-packaged js wrappers are available only in the
node runtime / are sandboxed in chromium (renderer) procs
8

9. © Isle of Code Inc.@anulman
disclaimers re: electron / hybrid
• “serves” via fs, so paths should not start with `/`
• architecture should minimize platform-specific code
• be careful! you have full privileges of host OS
• e.g. remote code execution is hecka dangerous
• memory leaks are a major issue, as no req / response cycle to
refresh state:
• unresolved / rejected promises
• lingering refs to dom nodes…
9

10. © Isle of Code Inc.@anulman
ember-electron
• use ember-cli to wrap electron workflows
• 1.x used `electron` & `electron-packager` directly
• 2.x uses `electron-forge`, i.e. e-cli for electron
• provide electron-aware testing env
• e.g. to test plugin consumption
• h/t @felixrieseberg (slack + electron core)
10

11. how does ember-
electron (v2.0) work?

12. © Isle of Code Inc.@anulman
ember-electron init
• `ember install ember-electron`
• beta in use but not yet available via npm
• install instructions at https://github.com/felixrieseberg/ember-electron/
issues/147
• `ember g ember-electron`
• v1.x => v2.0
• introduces `ember-electron` dir
• expects `electron-forge`-conformant package.json config
• moves inspector to embedded chrome devtools, vs. remote via browser
12

13. © Isle of Code Inc.@anulman
`ember electron`
• electron equivalent to `ember s`
• builds app to `dist` & watches for live reload
• `--output-dir` is configurable, in case of alternate
path in electron.js
• uses prebuilt & compiled electron bin to serve project
via `electron-forge#start`
• https://github.com/felixrieseberg/ember-electron/blob/
master/lib/commands/electron.js
13

14. © Isle of Code Inc.@anulman
`ember electron:package`
• electron equivalent to `ember build`
• inherits from generic e-electron build cmd, along w/
• `:make` — outputs distributables (.zip, .dmg, .deb)
• `:publish` — publishes distributable to server
• prepares build:
• `ember build`s app to (configurable) tmp dir
• copies additional files
• req’d: .compilerc, package.json, electron.js
• incls anything defined in `package.json[‘config’][‘ember-electron’][‘copy-files’]`
• installs package.json deps
• devDeps need not apply
14

15. © Isle of Code Inc.@anulman
`ember electron:package`
(cont’d)
• passes built tmp dir to forge commands
• incl configurable `--out-dir` (defaults to `ember-electron/
out`)
• cleans up tmp dir
• to speed up:
• `--skip-build` to cp dist dir as initial tmp build
• `--skip-package` to skip all wrapping and proxy directly
to forge
15

16. © Isle of Code Inc.@anulman
`ember electron:test`
• equivalent to `ember test`
• passes addl flags to `ember test` cmd + tasks to
support electron envs
• h/t @bendemboski
16

17. © Isle of Code Inc.@anulman
pending before release…
• update baseURL / rootURL handling
• presently: installs config/environment w/blueprint
• proposed: check config for valid values when cmd called
• proposed: use new `ember-electron/public` dir to copy files
• presently: reads `packageJson[‘ember-electron’][‘copy-files’]`
• proposal intended to simplify platform-specific reqs (e.g. `public/darwin`)
• provide upgrade tooling, via `ember g ember-electron` or `:upgrade`
• update test suite—2.0 gutted old commands
• follow along at https://github.com/felixrieseberg/ember-electron/projects/2
17

18. how do i…

19. © Isle of Code Inc.@anulman
add global shortcut + dialog?
• shortcuts & dialogs are restricted to main proc
• preference is to handle in `electron.js`
• if handling in `BrowserWindow`:
`require(‘electron’).remote.globalShortcut(…)`
• dialogs have several types:
• `showOpenDialog`
• `showSaveDialog`
• `showMessageBox`
• `showErrorBox`
19

20. © Isle of Code Inc.@anulman
config app icon?
• create icon files
• mac: *.icns
• win: *.ico
• linux: *.png
• add config to forge’s packager options (mac / win)
• add `icon: ‘path/to/icon’` to `BrowserWindow` init in electron.js (linux)
• omit extension to auto-configure ext by platform
• n.b. diff shows icons in copy-files; this is only for linux handling
20

21. © Isle of Code Inc.@anulman
config autoupdate?
• configure app signing:
• mac: `osxSign` param of `electronPackagerConfig`
• win: `electronWinstallerConfig`
• make executable:
• `ember electron:make`
• landing ~2.1: `ember electron:publish`
• forge currently ships with github & s3 publishers
21

22. © Isle of Code Inc.@anulman
config autoupdate?
(cont’d, mac / win)
• deploy & configure nuts server: https://github.com/GitbookIO/nuts
• proxies & caches distributable assets
• exposes api for e.g.
• `/download/latest`
• `/download/latest/:os`
• `/download/:version`
• in main proc, `electron.autoUpdater.checkForUpdates()`
• n.b. this checks & downloads in one op
• n.b. may want to check update availability manually if app is launched:
recommendation is to `electron.autoUpdater.quitAndInstall()` immediately on
`update-downloaded` event
22

23. © Isle of Code Inc.@anulman
config autoupdate?
(cont’d, linux)
• “autoupdates” are a bit more manual in linux-land
• like mac / win, first create & publish distributable
(e.g. to apt repo)
• install updates manually, or automate via cron
23

24. © Isle of Code Inc.@anulman
tl;dr
• electron is a popular and proven lib / framework to
create hybrid desktop applications
• ember-electron offers a painless cli integration
• any system / server node module (e.g. fs) is
available in electron processes
• ember-electron 2.x is already the hotness
24

25. © Isle of Code Inc.@anulman
links
• https://electron.atom.io
• https://github.com/felixriesberg/ember-electron
• https://github.com/electron-userland/electron-forge
• https://blog.isleofcode.com/building-fully-
functional-mac-pc-linux-apps-in-javascript-pt-1-
intro-to-electron/
25