Desktop applications with Electron

Walter Dal Mut, Solution Architect @ Corley

Build cross platform desktop apps with JavaScript, HTML, and CSS

  • Electron uses Chromium and Node.js
  • Compatible with Mac, Windows, and Linux

  • Add desktop related feature to your web app
  • Different installer per platform
  • Auto-update to simplify application upgrades

  • Native menus & notifications
  • Crash reporting
  • Native integrations (tray apps, etc.)

Create a new app


git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start

Anatomy of an application


your-app/
├── package.json
├── main.js
└── index.html

main.js event based


const {app/*, more */} = require('electron')

function createWindow () { };                      // #1
app.on('ready', createWindow);                     // #1

/** more things related to OS compatibilities */

#1


function createWindow () {
                    

win = new BrowserWindow({width: 800, height: 600})

win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
}))

win.webContents.openDevTools()

win.on('closed', () => { win = null; });
                    

}

Run it!

electron .

Electron is very wide framework

Detect online/offline


const alertOnlineStatus = () => {
    window.alert(navigator.onLine ? 'online' : 'offline')
}

window.addEventListener('online',  alertOnlineStatus)
window.addEventListener('offline',  alertOnlineStatus)

Report application errors


const {crashReporter} = require('electron')

crashReporter.start({
  productName: 'My App Name',
  companyName: 'Corporate',
  submitURL: 'https://error.yourcorporate.tld/url-to-submit',
  uploadToServer: true
})

Go deeply at: https://electron.atom.io/docs/guides/

Thanks for listening