SlideShare a Scribd company logo
1 of 51
Download to read offline
 
Linux, Windows, MacOS?
One framework to rule them all!
Firenze, 2020-01-28
Denny Biasiolli
WHO AM IWHO AM I
Denny Biasiolli
Software Developer @ Sequar Srl, Cherasco (CN)
   @dennybiasiolli   
denny.biasiolli@gmail.com
dennybiasiolli.com
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)
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, ...)
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
INTRODUCINGINTRODUCING
Electron is a framework that lets you create cross-
platform applications using HTML, Javascript and CSS.
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
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.
ELECTRON IS CROSS PLATFORMELECTRON IS CROSS PLATFORM
Core set of APIs
Chromium APIs
All Node.js built in modules
Third party modules
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.
ELECTRON APPSELECTRON APPS
                   
                   
More on https://electronjs.org/apps
(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.”
(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”
(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.”
2007, Jeff Atwood, Author, Entrepreneur, Cofounder of StackOver ow
“Any application that can be written in
JavaScript, will eventually be written in
JavaScript.”
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.”
ROADMAPROADMAP
Gets a web app
Installing Electron
Using Electron with the app
Packaging the app
Yay! o/
WEBSITE STRUCTUREWEBSITE STRUCTURE
.
+-- www/
+-- css/
| +-- style.css
|
+-- js/
| +-- script.js
|
+-- index.html
+-- page1.html
+-- ...
CONFIGURING PACKAGECONFIGURING PACKAGE
package.jsonpackage.json
{
"name": "electron_sample_2020",
"version": "0.1.0",
"main": "electron/main.js"
}
INSTALLING ELECTRONINSTALLING ELECTRON
# globally
npm install -g electron
# or
# local dependency
npm install --save-dev electron
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)
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
}
})
LAUNCHING ELECTRONLAUNCHING ELECTRON
package.jsonpackage.json
"scripts": {
"start": "electron ."
}
# npm launch
npm run start
# or
# global installation
electron .
# or
# local installation
npx electron .
PACKAGINGPACKAGING
create asar archive
copy archive in electron folder
rename electron
con gure icon
compile
ecc...
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"
},
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
CONFIGURING ELECTRON-BUILDERCONFIGURING ELECTRON-BUILDER
electron-builder.ymlelectron-builder.yml
# ...
mac:
category: public.app-category.utilities
target: dmg
win:
target: nsis
linux:
target: AppImage
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
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)
})
})
TIP: WEB TOOLSTIP: WEB TOOLS
How to disable web tools in production?
// electron/main.js
// ...
win = new BrowserWindow({
// ...
webPreferences: {
devTools: false,
// ...
}
// ...
})
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')
}
}
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)
})
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')
)
}
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)
})
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')
}
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)
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)
})
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')
}
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.
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
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
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!
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)
})
TIP: AUTO-UPDATE YOUR APPTIP: AUTO-UPDATE YOUR APP
NotificationsNotifications
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)
})
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,
})
}
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.')
})
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')
})
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

More Related Content

What's hot

Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...Robert Nyman
 
How to Build & Develop Responsive Open Learning Environments with the ROLE SDK
How to Build & Develop Responsive Open Learning Environments with the ROLE SDKHow to Build & Develop Responsive Open Learning Environments with the ROLE SDK
How to Build & Develop Responsive Open Learning Environments with the ROLE SDKDominik Renzel
 
Js Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterJs Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterIvo Andreev
 
WebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.jsWebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.jsRobert Nyman
 
Html5 and beyond the next generation of mobile web applications - Touch Tou...
Html5 and beyond   the next generation of mobile web applications - Touch Tou...Html5 and beyond   the next generation of mobile web applications - Touch Tou...
Html5 and beyond the next generation of mobile web applications - Touch Tou...RIA RUI Society
 

What's hot (7)

Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 
How to Build & Develop Responsive Open Learning Environments with the ROLE SDK
How to Build & Develop Responsive Open Learning Environments with the ROLE SDKHow to Build & Develop Responsive Open Learning Environments with the ROLE SDK
How to Build & Develop Responsive Open Learning Environments with the ROLE SDK
 
Js Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterJs Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform better
 
WebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.jsWebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.js
 
Tomcat + other things
Tomcat + other thingsTomcat + other things
Tomcat + other things
 
Html5 and beyond the next generation of mobile web applications - Touch Tou...
Html5 and beyond   the next generation of mobile web applications - Touch Tou...Html5 and beyond   the next generation of mobile web applications - Touch Tou...
Html5 and beyond the next generation of mobile web applications - Touch Tou...
 

Similar to Electron Firenze 2020: Linux, Windows o MacOS?

Electron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easyElectron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easyUlrich Krause
 
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 ElectronNir Noy
 
Building Cross Platform Apps with Electron
Building Cross Platform Apps with ElectronBuilding Cross Platform Apps with Electron
Building Cross Platform Apps with ElectronChris Ward
 
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...Sencha
 
Front-end. Global domination
Front-end. Global dominationFront-end. Global domination
Front-end. Global dominationStfalcon Meetups
 
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 ElectronLukas Ruebbelke
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureSimon Willison
 
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSTutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSPhilipp Burgmer
 
React Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsMatteo Manchi
 
Going Desktop with Electron
Going Desktop with ElectronGoing Desktop with Electron
Going Desktop with ElectronLeo Lindhorst
 
Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJSMeteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJSJulio Antonio Mendonça de Marins
 
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
 
Andriy Vandakurov about "Frontend. Global domination"
Andriy Vandakurov about  "Frontend. Global domination" Andriy Vandakurov about  "Frontend. Global domination"
Andriy Vandakurov about "Frontend. Global domination" Pivorak MeetUp
 
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularNativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin
 

Similar to Electron Firenze 2020: Linux, Windows o MacOS? (20)

Electron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easyElectron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easy
 
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
 
Building Cross Platform Apps with Electron
Building Cross Platform Apps with ElectronBuilding Cross Platform Apps with Electron
Building Cross Platform Apps with Electron
 
Electron
ElectronElectron
Electron
 
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
 
Electron
ElectronElectron
Electron
 
Front-end. Global domination
Front-end. Global dominationFront-end. Global domination
Front-end. Global domination
 
Frontend. Global domination.
Frontend. Global domination.Frontend. Global domination.
Frontend. Global domination.
 
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
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
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
 
React Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applications
 
Going Desktop with Electron
Going Desktop with ElectronGoing Desktop with Electron
Going Desktop with Electron
 
Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJSMeteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
 
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!
 
Pivorak.javascript.global domination
Pivorak.javascript.global dominationPivorak.javascript.global domination
Pivorak.javascript.global domination
 
Andriy Vandakurov about "Frontend. Global domination"
Andriy Vandakurov about  "Frontend. Global domination" Andriy Vandakurov about  "Frontend. Global domination"
Andriy Vandakurov about "Frontend. Global domination"
 
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularNativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
 
Love at first Vue
Love at first VueLove at first Vue
Love at first Vue
 

Recently uploaded

Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandIES VE
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideStefan Dietze
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxFIDO Alliance
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxFIDO Alliance
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptxFIDO Alliance
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 

Recently uploaded (20)

Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 

Electron Firenze 2020: Linux, Windows o MacOS?

  • 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 .
  • 24.
  • 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
  • 30.
  • 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') })