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!
 
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.javascript.global domination
Pivorak.javascript.global dominationPivorak.javascript.global domination
Pivorak.javascript.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

Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesSanjay Willie
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 

Recently uploaded (20)

Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 

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') })