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
Per iniziare è indispensabile utilizzare Node.js e Npm (https://nodejs.org/it/), verificandone l'installazione con il seguente comando.
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
Ora che abbiamo l'applicazione non resta altro che creare l'eseguibile. Possiamo scegliere due strade: electron-forge/cli e electron-packager.
Se usiamo electron-forge (https://www.electronforge.io/), saremo in grado di creare pacchetti sulla base di un file di configurazione. Se non presente, verrà preso in considerazione il sistema operativo corrente.
$ 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", }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Le novità di Angular: i miglioramenti alla CLI
Filtering sulle colonne in una QuickGrid di Blazor
Inizializzare i container in Azure Container Apps
Miglioramenti nelle performance di Angular 16
Utilizzare il trigger SQL con le Azure Function
Migrare una service connection a workload identity federation in Azure DevOps
Gestire il colore CSS con HWB
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Criptare la comunicazione con mTLS in Azure Container Apps
Creare un webhook in Azure DevOps
I più letti di oggi
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- #pdc10: demo su composition model per modellare ruoli e configurazioni di #azure http://u.aspitalia.com/n3
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Inviare notifiche toast da background agent con Windows Phone 7.1
- Operazioni di selezione su una DataTable