Electron permette di utilizzare un'applicazione web con gli stessi feedback e funzionalità di un'applicazione nativa. Con questa definizione potremmo già concludere lo script di oggi, ma più del sapere che cos'è, sarebbe più opportuno capire quando utilizzarlo e perché questo framework è sempre più sulla bocca di tutti.

Partiamo dicendo che, se siete sviluppatori web, molto probabilmente state utilizzando Electron da anni, magari senza saperlo: Visual Studio Code è un'applicazione web che tramite Electron ha tutte le potenzialità di un'applicazione nativa. Ma in ambito Microsoft non è di certo l'unica, troviamo infatti anche Microsoft Teams, Whatsapp Web, Slack, Twitch o Streamlabs OBS. Tutte queste applicazioni hanno un minimo comune denominatore: poter essere utilizzate su Windows/Mac/Linux usando un unico codice sorgente.

Electron si propone come primo obbiettivo il cross-platform, garantendo che tutte le funzionalità utilizzate dall'applicazione vengano opportunamente declinate correttamente in base al sistema operativo. Si pensi all'opzione nel menù contestuale di VS Code "Mostra in esplora risorse", il codice che lo sviluppatore ha scritto va a interrogare le API di Electron che a loro volta rigirano la richiesta verso il sistema operativo.

Una domanda che spesso si sente è: "dovrei utilizzare Electron quando so scrivere applicazioni HTML/CSS/JS?". Questa domanda non ha una vera e propria risposta: se si ha familiarità anche con WinForm o WPF, e il target è Windows, potrebbe essere molto più consono utilizzare .NET. È altresì vero che, grazie al linguaggio web, si riesce a ottenere un feedback visivo universale rispetto al sistema operativo. Questo di sicuro facilita il nostro compito, non dovendo gestire varie imposizioni grafiche dovute dalla piattaforma su cui andremo a installare l'applicazione. Inoltre con l'utilizzo del CSS e JavaScript riusciamo a ottenere ottime interfacce, effetti grafici, interazioni e comunicazioni con servizi usando tutte le nostre conoscenze pregresse.

Utilizzo di Electron

npm --version

Successivamente possiamo partire clonando ed eseguendo il boilerplate electron-quick-start

git clone https://github.com/electron/electron-quick-start

cd electron-quick-start

npm install

npm start

Si aprirà una finestra che mostrerà una pagina "Hello world". Passiamo ad analizzare il codice per capire cosa ha reso possibile tutto questo.

Il file index.html rispecchia tutti i requisiti HTML: ha un head, un body, con un tag script richiede il caricamento di un file javascript; non contiene alcun tag particolare o hook per l'utilizzo in Electron. Quest'ultimo dettaglio è importantissimo, se infatti volessimo convertire un'applicazione web esistente, creata ad esempio con Angular o React, basterà puntare il file index.html creato a seguito dalla compilazione.

Passiamo ora a main.js, in questo troviamo la configurazione di Electron:

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js')
  }
})

File che verrà poi caricato nella finestra principale creata precedentemente.

mainWindow.loadFile('index.html');

Hook per aggiungere funzionalità in base alla piattaforma di esecuzione.

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

Il tutto è altamente personalizzabile. Se volessimo creare una finestra frameless per un effetto "widget", ci basterà aggiungere alla configurazione della BrowserWindow le proprietà transparent: true e frame: false. Per ulteriori impostazioni possiamo rifarci alla documentazione all'url https://www.electronjs.org/docs.

Creazione dell'eseguibile

$ npm install --save-dev @electron-forge/cli

$ npx electron-forge import
  Checking your system
  Initializing Git Repository
  Writing modified package.json file
  Installing dependencies
  Writing modified package.json file
  Fixing .gitignore

$ npm run make

Se invece vogliamo usare una configurazione esplicita tramite console, possiamo utilizzare electron-packager (https://github.com/electron/electron-packager), creando all'interno del file package.json vari task per ogni piattaforma rispettando la seguente sintassi.

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

"scripts": {
    "package:mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --out=out --icon=assets/app-icon/mac/app.icns --osx-sign.identity='Developer ID' --extend-info=assets/mac/info.plist",
    "package:win": "electron-packager . --overwrite --platform=win32 --arch=ia32 --out=out --icon=assets/app-icon/win/app.ico",
    "package:linux": "electron-packager . --overwrite --platform=linux --arch=x64 --out=out",
}