Martedì sera, insieme a #DennyBiasiolli, abbiamo scoperto le varie funzionalità di #Electron durante il nostro ultimo evento di #CommitUniversity.
#Electron è un framework open source sviluppato e gestito da #GitHub.
Consente lo sviluppo di applicazioni GUI desktop utilizzando componenti front e back end originariamente sviluppati per applicazioni Web.
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
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.
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/
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
}
})
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
32. TIP: WEB TOOLSTIP: WEB TOOLS
How to disable web tools in production?
// electron/main.js
// ...
win = new BrowserWindow({
// ...
webPreferences: {
devTools: false,
// ...
}
// ...
})
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)
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)
})