SlideShare a Scribd company logo
Engage 2018
Electron – cross platform desktop apps made easy
Ulrich Krause
May, 22 - 23.2018
Rotterdam, The Netherlands
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
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
Prerequsites
Editor of your choice
 Visual Studio Code, Atom, Sublime Text …
Node.js
Electron
 Will be installed during development
Git ( optional )
So, what exactly is this
Electron thing anyway?
A framework for …
Electron: A framework for building cross-platform desktop
applications, using
Javascript, HTML & CSS
Build on three core components …
Google’s open
source JS engine
open source
browser project
JavaScript runtime
built on Chrome's V8
JavaScript engine
Apps built on electron
https://electronjs.org/apps
http://dnug.de/watson-workspace-jetzt-auch-als-electron-app/
This is 2018 …
Why would I want to
build a desktop
application in the first
place ?
Background
Application
File System
Access
Direct Access to API
Access To Local
Hardware
On Premises
Access
Binary Protocol
Access
Some Apps Just Feel
Right
Desktop is still the
predominant place to run
games
Why would I want to
build a desktop
application in Electron ?
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
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
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!“
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.
Why Electron? – What does Electron bring to the tabel?
Only ONE browser to support.
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.
Why Electron? – What does Electron bring to the tabel?
A new frontier for ( web ) developers
How do I build an
application in Electron ?
Hello World
Node.js – Download Installation Package
https://nodejs.org/en/download/
Node.js – Download Installation Package
Check installation
Create new application folder
click: new folder
type: hello.world
Open a terminal
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"
}
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"
}
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"
}
}
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');
}
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');
}
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
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');
}
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');
}
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');
}
Create main.html
<! DOCTYPE html>
<html>
<head>
<title>Hello World Application</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Start Application ( npm start )
Wait, hang on…
This is not platform
independent, portable
code!
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');
}
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
}))
}
How do I debug my app?
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
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();
}
}
npm run start-debug
Standard menu is fine,
but I want to create my
own.
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
main.html
<! DOCTYPE html>
<html>
<head>
<title>Hello World Application</title>
</head>
<body>
<h1>Hello World</h1>
<script>require('./main.js')</script>
</body>
</html>
main.js – Create menu template
const {Menu} = require('electron')
const template = [
{
label: 'Electron',
submenu: [
{
label: 'Preferences‘}
}
]
}
]
var menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
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;
...
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
}))
}
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()
})
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)
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>
Application does not
close properly and
behaves weird on
different platforms.
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
})
}
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()
}
})
System Dialog
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)
}
})
}
})
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>
Open file and read contents
Notifications
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
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>
Notification example – npm start
Application Packaging
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).
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)
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
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
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
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
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": { ...
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",
One-click vs. Guided installer
"win": {
"icon": "build/icon.ico"
},
"nsis":{
"oneClick": false,
"perMachine":true,
"allowToChangeInstallationDirectory":true
}
},
"devDependencies": {
Running the installer
Running the installer
Electron & Domino
Uses OpenNTF SmartNSF
 https://smartnsf.openntf.org/main.nsf/project.xsp?r=project/Smar
tNSF
Uses Angular
 https://angular.io/
SmartNSF in DDE
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>
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);
});
}]);
SmartNSF example - npm start
APENDIX
Ulrich Krause
Developer
midpoints GmbH
ulrich.krause@midpoints.de

More Related Content

What's hot

C make tutorial
C make tutorialC make tutorial
CMake Talk 2008
CMake Talk 2008CMake Talk 2008
CMake Talk 2008
cynapses
 
Effective CMake
Effective CMakeEffective CMake
Effective CMake
Daniel Pfeifer
 
PVS-Studio: analyzing pull requests in Azure DevOps using self-hosted agents
PVS-Studio: analyzing pull requests in Azure DevOps using self-hosted agentsPVS-Studio: analyzing pull requests in Azure DevOps using self-hosted agents
PVS-Studio: analyzing pull requests in Azure DevOps using self-hosted agents
Andrey Karpov
 
HTTP Potpourri
HTTP PotpourriHTTP Potpourri
HTTP Potpourri
Kevin Hakanson
 
OVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source TreeOVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source Tree
Chang W. Doh
 
Docker @ Atlogys
Docker @ AtlogysDocker @ Atlogys
B14870 solution final
B14870 solution finalB14870 solution final
B14870 solution final
ssuser8f0495
 
Gradle in a Polyglot World
Gradle in a Polyglot WorldGradle in a Polyglot World
Gradle in a Polyglot World
Schalk Cronjé
 
CMake Tutorial
CMake TutorialCMake Tutorial
CMake Tutorial
Fu Haiping
 
Browsers on Android (Webkit,chromium)
Browsers on Android (Webkit,chromium)Browsers on Android (Webkit,chromium)
Browsers on Android (Webkit,chromium)
Bin Chen
 
CiklumCPPSat: Alexey Podoba "Automatic assembly. Cmake"
CiklumCPPSat: Alexey Podoba "Automatic assembly. Cmake"CiklumCPPSat: Alexey Podoba "Automatic assembly. Cmake"
CiklumCPPSat: Alexey Podoba "Automatic assembly. Cmake"
Ciklum Ukraine
 
CMake - Introduction and best practices
CMake - Introduction and best practicesCMake - Introduction and best practices
CMake - Introduction and best practices
Daniel Pfeifer
 
Using the Android Native Development Kit (NDK)
Using the Android Native Development Kit (NDK)Using the Android Native Development Kit (NDK)
Using the Android Native Development Kit (NDK)
DroidConTLV
 
01 Introduction to programming
01 Introduction to programming01 Introduction to programming
01 Introduction to programming
maznabili
 
Essential Tools for Modern PHP
Essential Tools for Modern PHPEssential Tools for Modern PHP
Essential Tools for Modern PHP
Alex Weissman
 
Dockerize it! @ Codemotion 2016 in Rome
Dockerize it! @ Codemotion 2016 in RomeDockerize it! @ Codemotion 2016 in Rome
Dockerize it! @ Codemotion 2016 in Rome
Alessandro Nadalin
 
Trying to Sell PVS-Studio to Google, or New Bugs in Chromium
Trying to Sell PVS-Studio to Google, or New Bugs in ChromiumTrying to Sell PVS-Studio to Google, or New Bugs in Chromium
Trying to Sell PVS-Studio to Google, or New Bugs in Chromium
Andrey Karpov
 
Create a PHP Library the right way
Create a PHP Library the right wayCreate a PHP Library the right way
Create a PHP Library the right way
Christian Varela
 
Development Setup of B-Translator
Development Setup of B-TranslatorDevelopment Setup of B-Translator
Development Setup of B-Translator
Dashamir Hoxha
 

What's hot (20)

C make tutorial
C make tutorialC make tutorial
C make tutorial
 
CMake Talk 2008
CMake Talk 2008CMake Talk 2008
CMake Talk 2008
 
Effective CMake
Effective CMakeEffective CMake
Effective CMake
 
PVS-Studio: analyzing pull requests in Azure DevOps using self-hosted agents
PVS-Studio: analyzing pull requests in Azure DevOps using self-hosted agentsPVS-Studio: analyzing pull requests in Azure DevOps using self-hosted agents
PVS-Studio: analyzing pull requests in Azure DevOps using self-hosted agents
 
HTTP Potpourri
HTTP PotpourriHTTP Potpourri
HTTP Potpourri
 
OVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source TreeOVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source Tree
 
Docker @ Atlogys
Docker @ AtlogysDocker @ Atlogys
Docker @ Atlogys
 
B14870 solution final
B14870 solution finalB14870 solution final
B14870 solution final
 
Gradle in a Polyglot World
Gradle in a Polyglot WorldGradle in a Polyglot World
Gradle in a Polyglot World
 
CMake Tutorial
CMake TutorialCMake Tutorial
CMake Tutorial
 
Browsers on Android (Webkit,chromium)
Browsers on Android (Webkit,chromium)Browsers on Android (Webkit,chromium)
Browsers on Android (Webkit,chromium)
 
CiklumCPPSat: Alexey Podoba "Automatic assembly. Cmake"
CiklumCPPSat: Alexey Podoba "Automatic assembly. Cmake"CiklumCPPSat: Alexey Podoba "Automatic assembly. Cmake"
CiklumCPPSat: Alexey Podoba "Automatic assembly. Cmake"
 
CMake - Introduction and best practices
CMake - Introduction and best practicesCMake - Introduction and best practices
CMake - Introduction and best practices
 
Using the Android Native Development Kit (NDK)
Using the Android Native Development Kit (NDK)Using the Android Native Development Kit (NDK)
Using the Android Native Development Kit (NDK)
 
01 Introduction to programming
01 Introduction to programming01 Introduction to programming
01 Introduction to programming
 
Essential Tools for Modern PHP
Essential Tools for Modern PHPEssential Tools for Modern PHP
Essential Tools for Modern PHP
 
Dockerize it! @ Codemotion 2016 in Rome
Dockerize it! @ Codemotion 2016 in RomeDockerize it! @ Codemotion 2016 in Rome
Dockerize it! @ Codemotion 2016 in Rome
 
Trying to Sell PVS-Studio to Google, or New Bugs in Chromium
Trying to Sell PVS-Studio to Google, or New Bugs in ChromiumTrying to Sell PVS-Studio to Google, or New Bugs in Chromium
Trying to Sell PVS-Studio to Google, or New Bugs in Chromium
 
Create a PHP Library the right way
Create a PHP Library the right wayCreate a PHP Library the right way
Create a PHP Library the right way
 
Development Setup of B-Translator
Development Setup of B-TranslatorDevelopment Setup of B-Translator
Development Setup of B-Translator
 

Similar to Electron - cross platform desktop applications made easy

Electron Firenze 2020: Linux, Windows o MacOS?
Electron Firenze 2020: Linux, Windows o MacOS?Electron Firenze 2020: Linux, Windows o MacOS?
Electron Firenze 2020: Linux, Windows o MacOS?
Denny Biasiolli
 
Electron: Linux, Windows or Macos?
Electron: Linux, Windows or Macos?Electron: Linux, Windows or Macos?
Electron: Linux, Windows or Macos?
Commit University
 
Bringing Javascript to the Desktop with Electron
Bringing Javascript to the Desktop with ElectronBringing Javascript to the Desktop with Electron
Bringing Javascript to the Desktop with Electron
Nir Noy
 
Proposal
ProposalProposal
Going Desktop with Electron
Going Desktop with ElectronGoing Desktop with Electron
Going Desktop with Electron
Leo Lindhorst
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
Vikash Singh
 
Electron. Build cross platform desktop apps with web technologies!
Electron. Build cross platform desktop apps with web technologies!Electron. Build cross platform desktop apps with web technologies!
Electron. Build cross platform desktop apps with web technologies!
*instinctools
 
Day in a life of a node.js developer
Day in a life of a node.js developerDay in a life of a node.js developer
Day in a life of a node.js developer
Edureka!
 
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperDay In A Life Of A Node.js Developer
Day In A Life Of A Node.js Developer
Edureka!
 
Building Cross Platform Apps with Electron
Building Cross Platform Apps with ElectronBuilding Cross Platform Apps with Electron
Building Cross Platform Apps with Electron
Chris Ward
 
Node azure
Node azureNode azure
Node azure
Emanuele DelBono
 
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action
Hazem Saleh
 
Electron
ElectronElectron
Electron
ElectronElectron
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSTutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJS
Philipp Burgmer
 
Get that Corner Office with Angular 2 and Electron
Get that Corner Office with Angular 2 and ElectronGet that Corner Office with Angular 2 and Electron
Get that Corner Office with Angular 2 and Electron
Lukas Ruebbelke
 
Node
NodeNode
Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!
Chris Mills
 
JavaScript on the Desktop
JavaScript on the DesktopJavaScript on the Desktop
JavaScript on the Desktop
Domenic Denicola
 
Claim Academy Intro to Programming
Claim Academy Intro to ProgrammingClaim Academy Intro to Programming
Claim Academy Intro to Programming
Alex Pearson
 

Similar to Electron - cross platform desktop applications made easy (20)

Electron Firenze 2020: Linux, Windows o MacOS?
Electron Firenze 2020: Linux, Windows o MacOS?Electron Firenze 2020: Linux, Windows o MacOS?
Electron Firenze 2020: Linux, Windows o MacOS?
 
Electron: Linux, Windows or Macos?
Electron: Linux, Windows or Macos?Electron: Linux, Windows or Macos?
Electron: Linux, Windows or Macos?
 
Bringing Javascript to the Desktop with Electron
Bringing Javascript to the Desktop with ElectronBringing Javascript to the Desktop with Electron
Bringing Javascript to the Desktop with Electron
 
Proposal
ProposalProposal
Proposal
 
Going Desktop with Electron
Going Desktop with ElectronGoing Desktop with Electron
Going Desktop with Electron
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Electron. Build cross platform desktop apps with web technologies!
Electron. Build cross platform desktop apps with web technologies!Electron. Build cross platform desktop apps with web technologies!
Electron. Build cross platform desktop apps with web technologies!
 
Day in a life of a node.js developer
Day in a life of a node.js developerDay in a life of a node.js developer
Day in a life of a node.js developer
 
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperDay In A Life Of A Node.js Developer
Day In A Life Of A Node.js Developer
 
Building Cross Platform Apps with Electron
Building Cross Platform Apps with ElectronBuilding Cross Platform Apps with Electron
Building Cross Platform Apps with Electron
 
Node azure
Node azureNode azure
Node azure
 
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action
 
Electron
ElectronElectron
Electron
 
Electron
ElectronElectron
Electron
 
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSTutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJS
 
Get that Corner Office with Angular 2 and Electron
Get that Corner Office with Angular 2 and ElectronGet that Corner Office with Angular 2 and Electron
Get that Corner Office with Angular 2 and Electron
 
Node
NodeNode
Node
 
Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!
 
JavaScript on the Desktop
JavaScript on the DesktopJavaScript on the Desktop
JavaScript on the Desktop
 
Claim Academy Intro to Programming
Claim Academy Intro to ProgrammingClaim Academy Intro to Programming
Claim Academy Intro to Programming
 

Recently uploaded

Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
taskroupseo
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
neshakor5152
 
The Ultimate Guide to Phone Spy Apps: Everything You Need to Know
The Ultimate Guide to Phone Spy Apps: Everything You Need to KnowThe Ultimate Guide to Phone Spy Apps: Everything You Need to Know
The Ultimate Guide to Phone Spy Apps: Everything You Need to Know
onemonitarsoftware
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
jealousviolet
 
Attendance Tracking From Paper To Digital
Attendance Tracking From Paper To DigitalAttendance Tracking From Paper To Digital
Attendance Tracking From Paper To Digital
Task Tracker
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
rachitkumar09887
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
confluent
 
655221243123332131-Complete-MERN-stack.pdf
655221243123332131-Complete-MERN-stack.pdf655221243123332131-Complete-MERN-stack.pdf
655221243123332131-Complete-MERN-stack.pdf
KhnhTrn343305
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
norina2645
 
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdfIoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
mohitd6
 
NYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction InnovationNYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction Innovation
NYGGS Construction ERP Software
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
908dutch
 
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTIONBITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
ssuser2b426d1
 
Install Ruby on Rails Like a Pro: Effortless Guide
Install Ruby on Rails Like a Pro: Effortless GuideInstall Ruby on Rails Like a Pro: Effortless Guide
Install Ruby on Rails Like a Pro: Effortless Guide
rorbitssoftware
 
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
ashiklo9823
 
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
ThousandEyes
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
SimonedeGijt
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
GT degree offer diploma Transcript
GT degree offer diploma TranscriptGT degree offer diploma Transcript
GT degree offer diploma Transcript
attueb
 
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
aslasdfmkhan4750
 

Recently uploaded (20)

Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
 
The Ultimate Guide to Phone Spy Apps: Everything You Need to Know
The Ultimate Guide to Phone Spy Apps: Everything You Need to KnowThe Ultimate Guide to Phone Spy Apps: Everything You Need to Know
The Ultimate Guide to Phone Spy Apps: Everything You Need to Know
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
 
Attendance Tracking From Paper To Digital
Attendance Tracking From Paper To DigitalAttendance Tracking From Paper To Digital
Attendance Tracking From Paper To Digital
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
 
655221243123332131-Complete-MERN-stack.pdf
655221243123332131-Complete-MERN-stack.pdf655221243123332131-Complete-MERN-stack.pdf
655221243123332131-Complete-MERN-stack.pdf
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
 
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdfIoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
IoT In Manufacturing_ Use Cases, Benefits, and Challenges.pdf
 
NYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction InnovationNYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction Innovation
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
 
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTIONBITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
 
Install Ruby on Rails Like a Pro: Effortless Guide
Install Ruby on Rails Like a Pro: Effortless GuideInstall Ruby on Rails Like a Pro: Effortless Guide
Install Ruby on Rails Like a Pro: Effortless Guide
 
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
 
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
GT degree offer diploma Transcript
GT degree offer diploma TranscriptGT degree offer diploma Transcript
GT degree offer diploma Transcript
 
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
 

Electron - cross platform desktop applications made easy

  • 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
  • 10. This is 2018 … Why would I want to build a desktop application in the first place ?
  • 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 ?
  • 29. Node.js – Download Installation Package https://nodejs.org/en/download/
  • 30. Node.js – Download Installation Package
  • 33. click: new folder type: hello.world
  • 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(); } }
  • 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() } })
  • 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
  • 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>
  • 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": {
  • 86. Uses OpenNTF SmartNSF  https://smartnsf.openntf.org/main.nsf/project.xsp?r=project/Smar tNSF Uses Angular  https://angular.io/
  • 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

Editor's Notes

  1. Electron is an open source application 'framework' created by GitHub, designed to make building desktop applications easy. This presentation will introduce you to its many features, and how you how to quickly get started. So, Electron. How many people have heard of Electron ? Good How many people have used Electron. All right , awesome. Hopefully, I won’t you put to sleep, the rest of you hopefully will enjoy the session.
  2. Hello. My name is Ulrich Krause. I am a Notes / Domino administrator and developer since 1993. I am an IBM champion since 2010 ( initial 50 !) re-elected in 2018. I have contributed some stuff to OpenNTF; also I am the lead developer od LE4D I am working with midpoints, a IBM business partner located in Germany. Our focus is mobile device management.
  3. In this session, I want to show you, how you can create platform independent desktop applications. Here is, what I want to cover within the next 60 minutes.
  4. https://v8docs.nodesource.com
  5. The web has come so far. It seems weird, right ? But it turns out, that actually there are a few reasons, why you want to build desktop applications in 2018. Here is a couple of the reasons: The first one is perhaps your application requirements has a need to run in the background. And you don‘t want to rely on your browser being up because your browser might crash, and if your browser crashes, that background ap dies.
  6. The other thing is you might require file system access. The things that make browsers so powerful with web applications and so usable is because of the security model in browsers. You‘re downloading arbitrary code from the internet and you are executing it on your machine. Browsers have to be extremely sandboxed in order to people will trust them. And as a result of that, things like file system access are things that you are completely locked out.
  7. Perhaps your application requirements also require direct API access to something. If you download a web application, you cannot tell this application to initiate a connection from my browser to some API over there. You can‘t do that. So, if you need to do this kind of connection, you have to do it from your local machine. This is why we have i.e a POSTMAN app.
  8. Maybe, your application requires access to your hardware. For example, you have a bluetooth card or want to play with sphero, or you have a smart-card reader. That kind of stuff, you cna‘t do from a browser. You need access to local API that speak to your local hardware in order that you can make those connections.
  9. But why else would you want to write an application that works on the desktop today? Perhaps you have a requirement for on premises access. It might not make sense to install a web application with a webserver and stuff if a firewall would stop access.
  10. The other reason is you might require binary protocol access. If you need to make a connection to a MySQL database, you need to make those connections using mysql drivers that compile down to C that you can use as a client library.
  11. And the other thing is that some applications just feel right on the desktop. That is why we (all) have installed SLACk app on our machines instead of using the web application.
  12. Another this is GAMES. The desktop is still the predominant place to download and run games. That is why I think that there is still a place for desktop applications; even in the year 2018.
  13. One of the things, electron gives you, is that you only have to learn one framework, and what I mean by that is, you just have to learn electrons API. It is relatively small. And you can reuse all your JS, HTML and CSS that you‘ve been using for all theses years. If you are on a MAC, you do not have to learn Cocoa, you do not have to learn the Windows APIs and whatever Linux is using these days for the desktop. You do not have to worry about any of that. You just use Electron, write your code once and run it on Windows, MAC and Linux.
  14. The other thing is , Electron gives you some amazing tight integration. You can do stuff like activating notifications. You have access to the task switcher. You have access to menues, You have access to global shortcuts. You have access to system level events, so you can detect when your computer is going to sleep, when your computer wakes up or your CPU is going nuts and do something about it.
  15. And finally you get a lot of code reuse with electron. 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. You can save a lot of time if you already have that companion web application.
  16. 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.
  17. You get Chrome dev tools, for free, when you are start developing an Electron application. The reason for that is that 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. And Chrome dev tools is pretty much state-of-the-arte when it comes to debug web applications.
  18. And this one, I think, is also important. The desktop is a new frontier for developers. Especially web developers. Web developers have traditionally been locked out from the entire part of the development culture. We now have the tools to take our skills that we have learned all these years and bring them to a completely new place where we have never been before
  19. Node.js core does its best to treat every platform equally. Even if most Node developers use OS X day to day, some use Windows, and most everyone deploys to Linux or Solaris. So it's important to keep your code portable between platforms, whether you're writing a library or an application. Predictably, most cross-platform issues come from Windows. Things just work differently there! But if you're careful, and follow some simple best practices, your code can run just as well on Windows systems. Paths and URLs On Windows, paths are constructed with backslashes instead of forward slashes. So if you do your directory manipulation by splitting on "/" and playing with the resulting array, your code will fail dramatically on Windows. Instead, you should be using the path module. So instead of resolving paths with string contatenation, e.g. x + "/" + y, you should instead do path.resolve(x, y). Similarly, instead of relativizing paths with string replacement, e.g. x.replace(/^parent\/dirs\//, ""), you should do path.relative("/parent/dirs", y). Another area of concern is that, when writing portable code, you cannot count on URLs and module IDs having the same separators as paths. If you use something like path.join on a URL, Windows users will get URLs containing backslashes! Similarly for path.normalize, or in general any path methods. All this applies if you're working with module IDs, too: they are forward-slash delimited, so you shouldn't use path functions with them either. Non-portable APIs Windows is completely missing the process.(get|set)(gid|uid) methods, so calling them will instantly crash your program on Windows. Always guard such calls with a conditional. The fs.watchFile API is not sufficiently cross-platform, and is recommended against in the docs because of it. You should use fs.watch instead. The child_process module requires care cross-platform. In particular, spawn and execFile do not execute in a shell, which means that on Windows only .exe files will run. This is rather problematic, as many cross-platform binaries are included on Windows as .cmd or .bat files, among them Git, CouchDB, and many others. So if you're using these APIs, things will likely work great on OS X, Linux, etc. But when you tell your users “just install the Git build for Windows, and make sure it's in your path!” that ends up not being sufficient. There is talk of fixing this behavior in libuv, but that's still tentative. In the meantime, if you don't need to stream your output, exec works well. Otherwise you'll need branching logic to take care of Windows. A final edge-case comes when using named sockets, e.g. with net.connect. On Unix, simple filenames suffice, but on Windows, they must conform to a bizarre syntax. There's not really a better solution for this than branching per-platform. Being Windows-Developer Friendly One of the most egregious problems with many projects is their unnecessary use of Unix Makefiles. Windows does not have a make command, so the tasks stored in these files are entirely inaccessible to Windows users who might try to contribute to your project. This is especially egregious if you put your test command in there! Fortunately, we have a solution: npm comes with a scripts feature where you can include commands to be run for testing (test), installation (install), building (prepublish), and starting your app (start), among many others. You can also create custom scripts, which are then run with npm run <script-name>; I often use this for lint steps. Also of note, you can reference any commands your app depends on by their short names here: for example, "mocha" instead of "./node_modules/.bin/mocha". So, please use these! If you must have a Makefile for whatever reason, just have it delegate to an npm script. Another crucially important step is not using Unix shell scripts as part of your development process. Windows doesn't have bash, or ls, or mv, or any of those other commands you might use. Instead, write your shell scripts in JavaScript, using a tool like Grunt if you'd like. Bonus: Something that Breaks on Linux and Solaris! Both Windows and, by default, OS X, use case-insensitive file systems. That means if you install a package named foo, any of require("foo") or require("FOO") or require("fOo") will work—on Windows and OS X. But then when you go to deploy your code, out of your development environment and into your Linux or Solaris production system, the latter two will not work! So it's a little thing, but make sure you always get your module and package name casing right. Conclusion As you can see, writing cross-platform code is sometimes painful. Usually, it's just a matter of best practices, like using the path module or remembering that URLs are different from filesystem paths. But sometimes there are APIs that just don't work cross-platform, or have annoying quirks that necessitate branching code. Nevertheless, it's worth it. Node.js is the most exciting software development platform in recent memory, and one of its greatest strengths is its portable nature. Try your best to uphold that!
  20. Most Windows command prompts will choke when you set environment variables with NODE_ENV=production like that. (The exception is Bash on Windows, which uses native Bash.) Similarly, there's a difference in how windows and POSIX commands utilize environment variables. With POSIX, you use: $ENV_VAR and on windows you use %ENV_VAR%. This solution cross-env makes it so you can have a single command without worrying about setting or using the environment variable properly for the platform. Just set it like you would if it's running on a POSIX system, and cross-env will take care of setting it properly.
  21. https://codeburst.io/deep-dive-into-electrons-main-and-renderer-processes-7a9599d5c9e2
  22. electron-packager will do the following: Use the current directory for the sourcedir Infer the appname from the productName in package.json Infer the appVersion from the version in package.json Infer the platform and arch from the host, in this example, darwin platform and x64 arch. Download the Windows x64 build of Electron (and cache the downloads in ~/.electron) Build the Windows part6.app Place part6.app in part6/part6-win32-x64/ (since an out directory was not specified, it used the current working directory) Please keep in mind that’s recommendable to build every platform on it’s respective platform i.e build the Windows version of your app in a Desktop with Windows as operative system. Although for some platforms is possible to build for other platforms i.e you can build the Linux and Windows versions in a Windows computer, you’ll be unable to create a Mac application in a Windows platform, therefore you need to build it in a Mac environment.
  23. SmartNSF: Turn your Notes/Domino Application into a microservice and expose a REST API within minutes? This is the core goal of SmartNSF! With this in mind, SmartNSF is integrated in the IBM Domino Designer and the configuration is smart and simple.
  24. 92