Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Electron: Linux, Windows or Macos?

187 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Electron: Linux, Windows or Macos?

  1. 1.   Linux, Windows, MacOS? One framework to rule them all! Firenze, 2020-01-28 Denny Biasiolli
  2. 2. WHO AM IWHO AM I Denny Biasiolli Software Developer @ Sequar Srl, Cherasco (CN)    @dennybiasiolli    denny.biasiolli@gmail.com dennybiasiolli.com
  3. 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. 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. 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. 6. INTRODUCINGINTRODUCING Electron is a framework that lets you create cross- platform applications using HTML, Javascript and CSS.
  7. 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. 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. 9. ELECTRON IS CROSS PLATFORMELECTRON IS CROSS PLATFORM Core set of APIs Chromium APIs All Node.js built in modules Third party modules
  10. 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. 11. ELECTRON APPSELECTRON APPS                                         More on https://electronjs.org/apps
  12. 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. 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. 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. 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. 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. 17. ROADMAPROADMAP Gets a web app Installing Electron Using Electron with the app Packaging the app Yay! o/
  18. 18. WEBSITE STRUCTUREWEBSITE STRUCTURE . +-- www/ +-- css/ | +-- style.css | +-- js/ | +-- script.js | +-- index.html +-- page1.html +-- ...
  19. 19. CONFIGURING PACKAGECONFIGURING PACKAGE package.jsonpackage.json { "name": "electron_sample_2020", "version": "0.1.0", "main": "electron/main.js" }
  20. 20. INSTALLING ELECTRONINSTALLING ELECTRON # globally npm install -g electron # or # local dependency npm install --save-dev electron
  21. 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. 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. 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. 24. PACKAGINGPACKAGING create asar archive copy archive in electron folder rename electron con gure icon compile ecc...
  25. 25. 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" },
  26. 26. 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
  27. 27. CONFIGURING ELECTRON-BUILDERCONFIGURING ELECTRON-BUILDER electron-builder.ymlelectron-builder.yml # ... mac: category: public.app-category.utilities target: dmg win: target: nsis linux: target: AppImage
  28. 28. 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
  29. 29. 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) }) })
  30. 30. TIP: WEB TOOLSTIP: WEB TOOLS How to disable web tools in production? // electron/main.js // ... win = new BrowserWindow({ // ... webPreferences: { devTools: false, // ... } // ... })
  31. 31. 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') } }
  32. 32. 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) })
  33. 33. 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') ) }
  34. 34. 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) })
  35. 35. 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') }
  36. 36. 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)
  37. 37. 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) })
  38. 38. 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') }
  39. 39. 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.
  40. 40. 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
  41. 41. 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
  42. 42. 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!
  43. 43. 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) })
  44. 44. TIP: AUTO-UPDATE YOUR APPTIP: AUTO-UPDATE YOUR APP NotificationsNotifications
  45. 45. 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) })
  46. 46. 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, }) }
  47. 47. 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.') })
  48. 48. 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') })
  49. 49. 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

×