Vue.js ed Electron che accoppiata!

Electron è un framework che consente lo sviluppo di applicazioni desktop “ibride” alla stregua di quanto già fatto in ambito mobile con Apache Cordova, Ionic ecc.
Con un mix di JavaScript, HTML e CSS è possibile creare delle applicazioni in grado di girare su Windows, Linux e macOS.
In pratica si tratta di applicazioni web “incorniciate” in una struttura che riproduce la GUI del sistema operativo e con cui è possibile interagire anche attraverso dei menu personalizzabili.

Creare un’applicazione Electron basata su Vue.js è estremamente semplice utilizzando il plugin https://github.com/nklayman/vue-cli-plugin-electron-builder .

L’unico requisito è aver creato l’applicazione utilizzando almeno la versione 3 della Vue-CLI.

Quest’ultima può essere installata con

npm install -g @vue/cli

Generiamo un progetto di prova, il classico HelloWorld, con

vue create hello-world

electron1

Per verificare che tutto funzioni eseguiamo

npm run server

electron2

electron3

Aggiungere il plugin è estremamente semplice

vue add electron-builder

electron4

A questo punto possiamo lanciare Electron con

npm run electron:server

e il gioco è fatto.

electron5

electron6

electron7

Per creare un eseguibile Windows su piattaforma Linux possiamo utilizzare un piccolo trucco non documentato sul sito ufficiale.

Eseguiamo

./node-modules/.bin/vue-cli-service electron:build --windows

Le altre opzioni disponibili sono –linux e –macos per gli omonimi sistemi operativi, mentre è assente –all.

If you add "build:win": "vue-cli-service electron:build --windows" under scripts in your package.json then you can instead run npm run build:win from there on.

C’è comunque da dire che questa semplicità di sviluppo si paga in termini di prestazioni rispetto ad un’applicazione “nativa” per il sistema operativo in uso. Ma questo è un discorso valido in generale quando si parla di applicazioni “ibride”. In questo caso bisogna considerare la presenza di Chromium, che sotto il cofano svolge l’effettivo lavoro di rendering, e la sua fame di risorse.

Tuttavia ci sono ottimi prodotti come Visual Studio Code realizzati utilizzati proprio questa piattaforma.

Quindi, come sempre, occorre valutare i pro e i contro di una soluzione rispetto ad un’altra in base al problema da risolvere, ai vincoli, al budget e alle tempistiche.

 

 

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Utilizzando il sito, accetti l'invio dei cookies da parte nostra. Maggiori informazioni

Questo sito utilizza i cookies per fornire la migliore esperienza di navigazione possibile. Continuando ad utilizzarlo senza modificare le impostazioni o cliccando su "Accetta" acconsenti al loro utilizzo.

Chiudi