"If you can create a website, you can create a desktop application." This is the slogan of Electron, a framework for building desktop applications using web technologies such as JavaScript, HTML and CSS. But is that really so? Let's find out with a practical example.

1.
Linux, Windows, MacOS?
One framework to rule them all!
Firenze, 2020-01-28
Denny Biasiolli

2. WHO AM IWHO AM I
Denny Biasiolli
Software Developer @ Sequar Srl, Cherasco (CN)
@dennybiasiolli
denny.biasiolli@gmail.com
dennybiasiolli.com

3. CONS OF DESKTOP APPLICATIONSCONS OF DESKTOP APPLICATIONS
Developing desktop applications can be full of
challenges that make it dif cult to approach.
Packaging installation
Managing updates
Design of the application
Translate design for different operating systems
Use of native features (menus, noti cations)

4. PROS OF WEB APPLICATIONSPROS OF WEB APPLICATIONS
Everybody has a web browser installed
Modern browsers come loaded with powerful
debugging tools
Universal cross-platform languages (HTML, CSS, JS)
Huge support communities behind them
Countless libraries, frameworks and components
you can take advantage of
(Bootstrap, jQuery, Angular, React, Vue.js, ...)

5. CONS OF WEB APPLICATIONSCONS OF WEB APPLICATIONS
Conditional rules for dozens of different browser
versions
Limited interaction with the le system
Performances based on network connection
Can be more painful than writing code for different
operating systems
<--[if IE]>
--webkit-border-radius
navigator.userAgent

6. INTRODUCINGINTRODUCING
Electron is a framework that lets you create cross-
platform applications using HTML, Javascript and CSS.

7. INTRODUCING ELECTRONINTRODUCING ELECTRON
Minimal web browser with the ability to interact
with the local le system
This web browser is part of your applications
packaging
Everyone using your app is running it under the same
set of conditions.
Rich JavaScript APIs that handle the particulars of
talking to different operating systems
Webpages for creating user interfaces

8. ELECTRON IS CROSS PLATFORMELECTRON IS CROSS PLATFORM
You can write your application once and have it run
on Mac, Windows or Linux
Electron serves as a universal interface with the
operating system
You can focus on what your app should do,
Electron manages the how for you.

9. ELECTRON IS CROSS PLATFORMELECTRON IS CROSS PLATFORM
Core set of APIs
Chromium APIs
All Node.js built in modules
Third party modules

10. USE IT EVERYWHEREUSE IT EVERYWHERE
Electron is an open source project, but that doesn't
mean you have to use it for open source software.
People ranging from hobbyists to professionals are
adopting Electron as their tool for building modern
desktop applications.
In fact you may already be using software built on
Electron and not even knew it.

11. ELECTRON APPSELECTRON APPS
More on https://electronjs.org/apps

12. (Electron website)
“Electron is a framework for creating
native applications with web
technologies like JavaScript, HTML, and
CSS. It takes care of the hard parts so you
can focus on the core of your application.”

13. (Electron website)
“Electron is a framework for creating
native applications with web
technologies like JavaScript, HTML, and
CSS. It takes care of the hard parts so you
can focus on the core of your application.”
“It's easier than you think”

14. (Electron website)
“Electron is a framework for creating
native applications with web
technologies like JavaScript, HTML, and
CSS. It takes care of the hard parts so you
can focus on the core of your application.”
“It's easier than you think”
“If you can build a website, you can build
a desktop app.”

15. 2007, Jeff Atwood, Author, Entrepreneur, Cofounder of StackOver ow
“Any application that can be written in
JavaScript, will eventually be written in
JavaScript.”

16. 2007, Jeff Atwood, Author, Entrepreneur, Cofounder of StackOver ow
1982, Edward A. Murphy
“Any application that can be written in
JavaScript, will eventually be written in
JavaScript.”
“If anything can go wrong, it will.”

17. ROADMAPROADMAP
Gets a web app
Installing Electron
Using Electron with the app
Packaging the app
Yay! o/

18. WEBSITE STRUCTUREWEBSITE STRUCTURE
.
+-- www/
+-- css/
| +-- style.css
|
+-- js/
| +-- script.js
|
+-- index.html
+-- page1.html
+-- ...

19. CONFIGURING PACKAGECONFIGURING PACKAGE
package.jsonpackage.json
{
"name": "electron_sample_2020",
"version": "0.1.0",
"main": "electron/main.js"
}

20. INSTALLING ELECTRONINSTALLING ELECTRON
# globally
npm install -g electron
# or
# local dependency
npm install --save-dev electron

21. CONFIGURING ELECTRONCONFIGURING ELECTRON
electron/main.jselectron/main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('www/index.html')
}
app.on('ready', createWindow)

22. CONFIGURING ELECTRONCONFIGURING ELECTRON
electron/main.js advancedelectron/main.js advanced
const { app, BrowserWindow } = require('electron')
// Keep a global reference of the window object, if you don't
// the window will be closed automatically when the JavaScript
// object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})

23. LAUNCHING ELECTRONLAUNCHING ELECTRON
package.jsonpackage.json
"scripts": {
"start": "electron ."
}
# npm launch
npm run start
# or
# global installation
electron .
# or
# local installation
npx electron .

25. PACKAGINGPACKAGING
create asar archive
copy archive in electron folder
rename electron
con gure icon
compile
ecc...

26. INSTALLING ELECTRON-BUILDERINSTALLING ELECTRON-BUILDER
package.jsonpackage.json
# globally
npm install -g electron-builder
# use with `electron-builder`
# or
# local dependency
npm install --save-dev electron-builder
# use with `npx electron-builder`
"scripts": {
"dist": "electron-builder -mwl",
"pack": "electron-builder -mwl --dir"
},

27. CONFIGURING ELECTRON-BUILDERCONFIGURING ELECTRON-BUILDER
electron-builder.ymlelectron-builder.yml
appId: electron.sample.2020
productName: Electron Sample 2020
copyright: Copyright © 2020 ${author}
icon: icons/icon.png
files:
- electron/**/*
- www/**/*
mac:
category: public.app-category.utilities

28. CONFIGURING ELECTRON-BUILDERCONFIGURING ELECTRON-BUILDER
electron-builder.ymlelectron-builder.yml
# ...
mac:
category: public.app-category.utilities
target: dmg
win:
target: nsis
linux:
target: AppImage

29. USING ELECTRON-BUILDERUSING ELECTRON-BUILDER
BUT WAITBUT WAIT
On Linux and Windows you cannot sign macOS apps
On Linux and Windows you cannot build DMG archive for macOS
npm run pack
# electron-builder -mwl --dir
# or
npm run dist
# electron-builder -mwl
skipped macOS application code signing reason=supported only on macOS

31. TIP: LINKSTIP: LINKS
// electron/main.js
const { shell } = require('electron')
// ...
// open new-window externally
app.on('ready', () => {
win.webContents.on('new-window', (e, url) => {
e.preventDefault()
shell.openExternal(url)
})
})

32. TIP: WEB TOOLSTIP: WEB TOOLS
How to disable web tools in production?
// electron/main.js
// ...
win = new BrowserWindow({
// ...
webPreferences: {
devTools: false,
// ...
}
// ...
})

33. TIP: NOTIFICATIONSTIP: NOTIFICATIONS
// www/js/script.js
const btnNotification = document.getElementById('btnNotification'
btnNotification.onclick = () => {
const myNotification = new Notification('Title', {
body: 'Lorem Ipsum Dolor Sit Amet'
})
myNotification.onclick = () => {
console.log('Notification clicked')
}
}

34. TIP: IPC COMMUNICATIONTIP: IPC COMMUNICATION
SyncSync
// electron/main.js
const { ipcMain } = require('electron')
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg)
setTimeout(() => {
event.returnValue = 'pong sync'
}, 1000)
})

35. TIP: IPC COMMUNICATIONTIP: IPC COMMUNICATION
SyncSync
// www/js/script.js
const { ipcRenderer } = require('electron')
const btnIpcSync = document.getElementById('btnIpcSync')
btnIpcSync.onclick = () => {
console.log(
ipcRenderer.sendSync('synchronous-message', 'ping sync')
)
}

36. TIP: IPC COMMUNICATIONTIP: IPC COMMUNICATION
AsyncAsync
// electron/main.js
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg)
setTimeout(() => {
event.reply('asynchronous-reply', 'pong async')
}, 1000)
})

37. TIP: IPC COMMUNICATIONTIP: IPC COMMUNICATION
AsyncAsync
// www/js/script.js
const { ipcRenderer } = require('electron')
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg)
})
const btnIpcAsync = document.getElementById('btnIpcAsync')
btnIpcAsync.onclick = () => {
ipcRenderer.send('asynchronous-message', 'ping async')
}

38. TIP: PROGRESS BARTIP: PROGRESS BAR
Setting the parameter to a value below zero (like -1)
will remove the progress bar while setting it to a value
higher than one (like 2) will switch the progress bar to
intermediate mode.
// electron/main.js
win.setProgressBar(value)

39. TIP: PROGRESS BARTIP: PROGRESS BAR
// electron/main.js
const { ipcMain } = require('electron')
ipcMain.on('test-progress-bar', (event, arg) => {
let progressVal = 0
const interval = setInterval(() => {
progressVal += 1
win.setProgressBar(progressVal / 100)
if (progressVal == 100) {
clearInterval(interval)
win.setProgressBar(-1)
event.reply('test-progress-bar-reply')
}
}, 100)
})

40. TIP: PROGRESS BARTIP: PROGRESS BAR
// www/js/script.js
const { ipcRenderer } = require('electron')
ipcRenderer.on('test-progress-bar-reply', () => {
new Notification('Progress completed', {
body: 'All progress are completed'
})
})
const btnIpcProgress = document.getElementById('btnIpcProgress')
btnIpcProgress.onclick = () => {
ipcRenderer.send('test-progress-bar')
}

41. TIP: CREATE-REACT-APP COMPATIBILITYTIP: CREATE-REACT-APP COMPATIBILITY
Adding electron-builder to a create-react-app project
could be very painful.
⨯ Application entry file "build/electron.js" in the
"path/repo/dist/mac/My.app/Contents/Resources/app.asar"
does not exist. Seems like a wrong configuration.

42. TIP: CREATE-REACT-APP COMPATIBILITYTIP: CREATE-REACT-APP COMPATIBILITY
Fix:Fix: http://tiny.cc/5jxyizhttp://tiny.cc/5jxyiz
# use yarn
yarn install --dev electron
yarn install --dev electron-builder
yarn run ...
// add `homepage` in `package.json`
"homepage": "./",
# move `electron/main.js` in `public` folder
electron/main.js => public/electron.js

43. TIP: AUTO-UPDATE YOUR APPTIP: AUTO-UPDATE YOUR APP
Auto-updatable Targets
macOS: DMG
macOS application must be signed in order for auto
updating to work
Linux: AppImage
Windows: NSIS
https://www.electron.build/auto-updatehttps://www.electron.build/auto-update

44. TIP: AUTO-UPDATE YOUR APPTIP: AUTO-UPDATE YOUR APP
ConfigurationConfiguration
1. Install electron-updater as an app dependency.
2. Con gure publish in electron-builder.yml.
npm install --save electron-updater
publish:
provider: generic
url: https://your.release.website/release_path/
mac:
target: [dmg, zip] # add zip, important!

45. TIP: AUTO-UPDATE YOUR APPTIP: AUTO-UPDATE YOUR APP
Configuration (electron/main.js)Configuration (electron/main.js)
3. Use autoUpdater from electron-updater instead of
electron:
4. Call update function
const { autoUpdater } = require('electron-updater')
app.on('ready', () => {
setTimeout(() => {
autoUpdater.checkForUpdatesAndNotify()
}, 1000)
})

46. TIP: AUTO-UPDATE YOUR APPTIP: AUTO-UPDATE YOUR APP
NotificationsNotifications

47. TIP: AUTO-UPDATE YOUR APPTIP: AUTO-UPDATE YOUR APP
Advanced usageAdvanced usage
// www/js/script.js
const { ipcRenderer } = require('electron')
ipcRenderer.on('update-message', function (event, { body, timeout
const notification = new Notification('AutoUpdate', {
body
})
setTimeout(() => {
notification.close()
}, timeout)
})

48. TIP: AUTO-UPDATE YOUR APPTIP: AUTO-UPDATE YOUR APP
Advanced usageAdvanced usage
// electron/main.js
function sendStatusToWindow(text, timeout = 20000) {
win.webContents.send('update-message', {
body: text,
timeout,
})
}

49. TIP: AUTO-UPDATE YOUR APPTIP: AUTO-UPDATE YOUR APP
Advanced usageAdvanced usage
// electron/main.js
autoUpdater.on('checking-for-update', () => {
sendStatusToWindow('Checking for update...')
})
autoUpdater.on('update-available', (info) => {
sendStatusToWindow('Update available.')
})
autoUpdater.on('update-not-available', (info) => {
sendStatusToWindow('Update not available.')
})

50. TIP: AUTO-UPDATE YOUR APPTIP: AUTO-UPDATE YOUR APP
Advanced usageAdvanced usage
// electron/main.js
autoUpdater.on('error', (err) => {
sendStatusToWindow('Error in auto-updater. ' + err)
})
autoUpdater.on('download-progress', (progressObj) => {
let log_message = "Download speed: " + progressObj.bytesPerSeco
log_message = log_message + ' - Downloaded ' + progressObj.perc
log_message = log_message + ' (' + progressObj.transferred + "/
sendStatusToWindow(log_message)
})
autoUpdater.on('update-downloaded', (info) => {
sendStatusToWindow('Update downloaded')
})

51. LINKSLINKS
Slides:
@dennybiasiolli
electronjs.org
electron.build
github.com/dennybiasiolli/electron_sample_2020
github.com/dennybiasiolli/bingo-extract
slideshare.net/DennyBiasiolli
denny.biasiolli@gmail.com
dennybiasiolli.com