slidedeck from my presentation at Engage 2018, Rotterdam

1. Engage 2018
Electron – cross platform desktop apps made easy
Ulrich Krause
May, 22 - 23.2018
Rotterdam, The Netherlands

2. About: Ulrich Krause
Lotus Notes und Domino since 1993
Developer / Administrator
IBM Champion 2010 – 2018
OpenNTF Contributor
Let‘s Encrypt 4 Domino ( LE4D )
Working with midpoints GmbH

3. Agenda
What is that Electron thing anyway?
Why would I want to build a desktop applications in the
first place ?
Why would I want to build a desktop applications in
Electron ?
How do I build a desktop application in Electron ?
 Hello World
 Menu bar
 File system access
 Notifications
 Package an application
 Display data from IBM Domino

4. Prerequsites
Editor of your choice
 Visual Studio Code, Atom, Sublime Text …
Node.js
Electron
 Will be installed during development
Git ( optional )

5. So, what exactly is this
Electron thing anyway?

6. A framework for …
Electron: A framework for building cross-platform desktop
applications, using
Javascript, HTML & CSS

7. Build on three core components …
Google’s open
source JS engine
open source
browser project
JavaScript runtime
built on Chrome's V8
JavaScript engine

8. Apps built on electron
https://electronjs.org/apps

9. http://dnug.de/watson-workspace-jetzt-auch-als-electron-app/

10. This is 2018 …
Why would I want to
build a desktop
application in the first
place ?

11. Background
Application

12. File System
Access

13. Direct Access to API

14. Access To Local
Hardware

15. On Premises
Access

16. Binary Protocol
Access

17. Some Apps Just Feel
Right

18. Desktop is still the
predominant place to run
games

19. Why would I want to
build a desktop
application in Electron ?

20. Why Electron? – What does Electron bring to the tabel?
You only need to learn ONE framework
 Learn Electron API
 No need to learn Cocoa ( MAC ) , Windows API and whatever Linux
is using these days for the desktop

21. Why Electron? – What does Electron bring to the tabel?
Electron gives you some amazing tight integration
 Notifications
 Access to task switcher
 Access to menus
 Access to global shortcuts
 Access to system level events

22. Why Electron? – What does Electron bring to the tabel?
Code reuse
 If your application is a companion to a web application, there is a
really good chance that you can take some of the assets that you
are using in the frontend and with a little bit of work, transport
them over to your electron application.
 As a bonus, if your backend is running node.js there is also a really
good chance that you can take some of the backend code that is
running node.js and transplant it into your Electron application.
„Your code is not reusable
until you reuse it!“

23. Why Electron? – What does Electron bring to the tabel?
If you write an application in Electron, there is actually a
lot of problems that traditional web developers have
already solved over the years and you do not have the
need to think about it anymore.

24. Why Electron? – What does Electron bring to the tabel?
Only ONE browser to support.

25. Why Electron? – What does Electron bring to the tabel?
You get Chrome dev tools, for free, when you are start
developing an Electron application.
 One of Electrons core components is the Chromium engine. Your
application windows are actually Chromium windows. And this
gives you Chrome dev tools within your application and you can
debug your code right inside your application.
 Chrome dev tools is pretty much state-of-the-arte when it comes
to debug web applications.

26. Why Electron? – What does Electron bring to the tabel?
A new frontier for ( web ) developers

27. How do I build an
application in Electron ?

28. Hello World

29. Node.js – Download Installation Package
https://nodejs.org/en/download/

30. Node.js – Download Installation Package

31. Check installation

32. Create new application folder

33. click: new folder
type: hello.world

34. Open a terminal

35. Initialize application ( npm init )
{
"name": "hello.world",
"version": "1.0.0",
"description": "Hello World Application",
"main": "app.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "Ulrich Krause",
"license": "MIT"
}

36. Initialize application ( npm init )
{
"name": "hello.world",
"version": "1.0.0",
"description": "Hello World Application",
"main": "app.js",
"scripts": {
"start": "electron ."
},
"author": "Ulrich Krause",
"license": "MIT"
}

37. Install Electron ( npm i –save-dev electron )
{
"name": "hello.world",
"version": "1.0.0",
"description": "Hello World Application",
"main": "app.js",
"scripts": {
"start": "electron ."
},
"author": "Ulrich Krause",
"license": "MIT",
"devDependencies": {
"electron": "^1.8.2"
}
}

38. Create app.js
const electron = require('electron');
const { app, BrowserWindow } = electron;
let win;
app.on('ready', createWindow);
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('file://' + __dirname + ‚main.html');
}

39. app.js explained …
const electron = require('electron');
const { app, BrowserWindow } = electron;
let win;
app.on('ready', createWindow);
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('file://' + __dirname + ‚main.html');
}

40. app.js explained …
const electron = require('electron');
const { app, BrowserWindow } = electron;
let win;
app.on('ready', createWindow);
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('file://' + __dirname + ‚main.html');
}
http://exploringjs.com/es6/ch_destructuring.html#sec_overview-destructuring

41. app.js explained …
const electron = require('electron');
const { app, BrowserWindow } = electron;
let win;
app.on('ready', createWindow);
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('file://' + __dirname + ‚main.html');
}

42. app.js explained …
const electron = require('electron');
const { app, BrowserWindow } = electron;
let win;
app.on('ready', createWindow);
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('file://' + __dirname + ‚main.html');
}

43. app.js explained …
const electron = require('electron');
const { app, BrowserWindow } = electron;
let win;
app.on('ready', createWindow);
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('file://' + __dirname + ‚main.html');
}

44. Create main.html
<! DOCTYPE html>
<html>
<head>
<title>Hello World Application</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

45. Start Application ( npm start )

46. Wait, hang on…
This is not platform
independent, portable
code!

47. app.js
const electron = require('electron');
const { app, BrowserWindow } = electron;
let win;
app.on('ready', createWindow);
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('file://' + __dirname + 'main.html');
}

48. app.js ( use standard node.js modules )
const electron = require('electron');
const path = require('path');
const url = require('url');
const { app, BrowserWindow } = electron;
let win;
app.on('ready', createWindow);
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL(url.format({
pathname: path.join(__dirname, 'main.html'),
protocol: 'file',
slashes:true
}))
}

49. How do I debug my app?

50. npm install cross-env –save-dev
{
"name": "hello.world",
"version": "1.0.0",
"description": "Hello World Application",
"main": "app.js",
"scripts": {
"start": "electron .",
"start-debug": "cross-env NODE_ENV=debug electron ."
},
"author": "Ulrich Krause",
"license": "MIT",
"devDependencies": {
"cross-env": "^5.1.3",
"electron": "^1.8.2"
}
}
https://www.npmjs.com/package/cross-env

51. app.js - openDevTools()
const electron = require('electron');
const path = require('path');
const url = require('url‘);
const { app, BrowserWindow } = electron;
const isDebug = process.env.NODE_ENV === 'debug';
let win;
app.on('ready', createWindow);
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL(url.format({
pathname: path.join(__dirname, 'main.html'),
protocol: 'file‘, slashes: true }))
if (isDebug) {win.webContents.openDevTools();
}
}

52. npm run start-debug

53. Standard menu is fine,
but I want to create my
own.

54. Main Process & Renderer Process
Main Process
 package.json main script. Creates
BrowserWindow instance to run
web pages.
Renderer Process
 each webpage runs its own
isolated process called the
renderer process
https://codeburst.io/deep-dive-into-electrons-main-and-renderer-processes-
7a9599d5c9e2

55. main.html
<! DOCTYPE html>
<html>
<head>
<title>Hello World Application</title>
</head>
<body>
<h1>Hello World</h1>
<script>require('./main.js')</script>
</body>
</html>

56. main.js – Create menu template
const {Menu} = require('electron')
const template = [
{
label: 'Electron',
submenu: [
{
label: 'Preferences‘}
}
]
}
]
var menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

57. app.js ( add ipcMain )
const electron = require('electron');
const path = require('path');
const url = require('url');
/*
The ipcMain module is an instance of the EventEmitter class.
When used in the main process, it handles asynchronous and
synchronous messages sent from a renderer process (web page).
Messages sent from a renderer will be emitted to this module.
*/
const {app, BrowserWindow, ipcMain} = electron;
...

58. app.js – add new BrowserWindow
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL(url.format({
pathname: path.join(__dirname, 'main.html'),
protocol: 'file',
slashes: true
}))
winPrefs = new BrowserWindow({
width: 400, height: 400, show: false });
winPrefs.loadURL(url.format({
pathname: path.join(__dirname, 'prefs.html'),
protocol: 'file',
slashes: true
}))
}

59. app.js – add EventListeners
ipcMain.on('show-prefs', function () {
winPrefs.show()
// hide the menu on the prefs page
// thanks to Theo Heselmans for this
winPrefs.setMenu(null)
})
ipcMain.on('hide-prefs', function () {
winPrefs.hide()
})

60. main.js – Create menu template
const {remote, ipcRenderer} = require('electron')
const {Menu} = remote.require('electron')
const template = [
{
label: 'Electron',
submenu: [
{
label: 'Preferences',
click: function() {
ipcRenderer.send('show-prefs')
}
}
]
}
]
var menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

61. prefs.html
<html>
<head>
<title>Preferences</title>
</head>
<body>
<h1>Preferences</h1>
<script>
const {ipcRenderer} = require('electron')
var button = document.createElement('button')
button.textContent = 'Hide'
button.addEventListener('click', function() {
ipcRenderer.send('hide-prefs')
})
document.body.appendChild(button)
</script>
</body>
</html>

62. Application does not
close properly and
behaves weird on
different platforms.

63. Add to createWindow()
function createWindow() {
...
// Emitted when the window is closed.
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is
// the time when you should delete the corresponding element.
win.on('closed', function () {
win = null
})
winPrefs.on('closed', function () {
winPrefs = null
})
}

64. app.js – add functions
app.on('ready', createWindow);
// Quit when all windows are closed.
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
})
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})

65. System Dialog

66. app.js
ipcMain.on('openFile', (event, path) => {
const { dialog } = require('electron')
dialog.showOpenDialog(function (fileNames) {
if (fileNames !== undefined) {
readFile(fileNames[0]);
}
});
function readFile(filepath) {
const fs = require('fs')
fs.readFile(filepath, 'utf-8', (err, data) => {
if (!err) {
event.sender.send('fileData', data)
}
})
}
})

67. main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File read using system dialogs</title>
</head>
<body>
<script type="text/javascript">
const { ipcRenderer } = require('electron')
ipcRenderer.send('openFile', () => { })
// handle received file data
ipcRenderer.on('fileData', (event, data) => {
document.write(data)
})
</script>
</body>
</html>

68. Open file and read contents

69. Notifications

70. Notifications
Windows, Linux and macOS operating systems provide
means for applications to send notifications to the user.
Electron conveniently allows developers to send
notifications with the HTML5 Notification API, using the
currently running operating system's native notification
APIs to display it.
On Windows 10, notifications "just work“, NOT *
 * it works when you install the application ( well, sometimes )
Have not tried Linux
https://electronjs.org/docs/tutorial/notifications

71. main.html & main.js
function doNotify() {
const notification = {
title: 'Basic Notification',
body: 'This is an Electron notification'
}
const myNotification =
new window.Notification(notification.title, notification)
}
<body>
<h1>Desktop Notification</h1>
<button type="button"
name="button" onclick="doNotify()">Notify me</button>
<script src="./main.js"></script>
</body>

72. Notification example – npm start

73. Application Packaging

74. Electron Packager
Electron Packager is a command line tool and Node.js
library that bundles Electron-based application source
code with a renamed Electron executable and supporting
files into folders ready for distribution.
Note that packaged Electron applications can be relatively
large (40-60 MB).

75. Electron Packager
Electron Packager is known to run on the following host
platforms:
 Windows (32/64 bit)
 OS X
 Linux (x86/x86_64)
Generates executables/bundles for the following target
platforms:
 Windows (also known as win32, for both 32/64 bit)
 OS X (also known as darwin) / Mac App Store (also known as mas)
Note for OS X / MAS target bundles: the .app bundle can only be
signed when building on a host OS X platform.
 Linux (for x86, x86_64, and armv7l architectures)

76. Electron-Packager
In order to build and package your app, you need to install
electron-packager first.
You can install it globally or as a dev dependency.
 npm install electron-packager -g
https://docs.npmjs.com/cli/install

77. Electron-Packager
To build an application for a platform you’ll need to
execute the following command in terminal / command
prompt.
electron-packager
<sourcedir> <appname>
--platform=<platform> --arch=<arch> [optional flags...]
electron-packager .
electron-packager . --all

78. Electron-Builder
A complete solution to package and build a ready for
distribution Electron app for macOS, Windows and Linux
with “auto update” support out of the box.
 https://github.com/electron-userland/electron-builder
Support for code-signing

79. add dev dependencies
"devDependencies": {
"electron": "^1.8.3",
"electron-builder": "^20.4.1",
"electron-packager": "^11.1.0"
}
npm install electron-packager --save-dev
npm install electron-builder --save-dev

80. package.json
"license": "MIT",
"build": {
"dmg": {
"contents": [
{
"x": 110,
"y": 150
},
{
"x": 240,
"y": 150,
"type": "link",
"path": "/Applications"
}
]
},
"win": {
"icon": "build/icon.ico"
}
},
"devDependencies": { ...

81. Build Installer
C:KonferenzenEC2018electronprojects7.packaging> npm run dist
> build
• electron-builder version=20.4.1
• loaded configuration file=package.json ("build" field)
• writing effective config file=distelectron-builder.yaml
• no native production dependencies
• packaging platform=win32 arch=x64 electron=1.8.3 appOutDir=distwin-unpacked
• building target=nsis file=distnotification Setup 1.0.0.exe archs=x64 oneClick=false
• building block map blockMapFile=distnotification Setup 1.0.0.exe.blockmap
"main": "app.js",
"scripts": {
"dist": "build",
"start": "electron ."
},
"author": "Ulrich Krause",
"license": "MIT",

82. One-click vs. Guided installer
"win": {
"icon": "build/icon.ico"
},
"nsis":{
"oneClick": false,
"perMachine":true,
"allowToChangeInstallationDirectory":true
}
},
"devDependencies": {

83. Running the installer

84. Running the installer

85. Electron & Domino

86. Uses OpenNTF SmartNSF
 https://smartnsf.openntf.org/main.nsf/project.xsp?r=project/Smar
tNSF
Uses Angular
 https://angular.io/

87. SmartNSF in DDE

88. index.html
<!doctype html>
<html ng-app="app">
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></
script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-
grid/4.0.11/ui-grid.js"></script>
<link rel="styleSheet"
href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.11/ui-
grid.css">
<script src="index.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" ui-grid-resize-columns
class="grid"></div>
</div>
</body>
</html>

89. index.js
var app = angular.module('app',['ui.grid','ui.grid.resizeColumns']);
var appUrl = 'https://server/smart-disc.nsf/xsp/.xrest/topics';
app.controller('MainCtrl', ['$scope', '$http', function ($scope,
$http) {
$scope.gridOptions = {
enableFiltering: true,
showGridFooter: true,
enableGridMenu: true,
};
$http.get(appUrl)
.success(function (data, status, headers, config) {
$scope.gridOptions.data = data.entries;
})
.error(function (error, status, headers, config) {
console.log(status);
});
}]);

90. SmartNSF example - npm start

91. APENDIX

92. Ulrich Krause
Developer
midpoints GmbH
ulrich.krause@midpoints.de