Negli ultimi anni, le applicazioni Desktop hanno guadagnato popolarità grazie alla loro capacità di fornire un'esperienza utente fluida e performante. Tuttavia, sviluppare un'applicazione Desktop tradizionale può rappresentare una sfida, richiedendo la conoscenza di diverse tecnologie e framework.
Per fortuna, esiste una soluzione che semplifica notevolmente il processo di sviluppo: Electron-Boilerplate per React. In questo articolo, esploreremo cos'è questo boilerplate, come funziona e come può essere utilizzato per creare applicazioni Desktop con React in modo rapido ed efficiente.
Electron-Boilerplate per React
Electron-Boilerplate per React è un progetto di partenza preconfigurato che combina Electron, un framework per creare applicazioni Desktop multi-piattaforma utilizzando tecnologie web (HTML, CSS e JavaScript), con React, una libreria JavaScript per la creazione di interfacce utente.
In poche parole, Electron-Boilerplate fornisce una base solida su cui costruire applicazioni Desktop utilizzando React come libreria front-end. Elimina la necessità di configurare manualmente Electron e React insieme, risparmiando tempo e sforzi in fase di sviluppo.
Come funziona
Electron-Boilerplate per React fornisce una struttura di base per un'applicazione Desktop, comprensiva di tutte le configurazioni necessarie. Il progetto comprende:
- Electron: il core dell'applicazione Desktop. Gestisce la finestra dell'applicazione, la comunicazione con il sistema operativo e l'accesso alle risorse del computer.
- React: utilizzato per la creazione dell'interfaccia utente dell'applicazione. React rende la creazione di componenti UI modulare, facilitando la gestione dello stato e l'aggiornamento dell'interfaccia.
- Webpack: utilizzato per il bundling del codice JavaScript e delle risorse. Webpack consente di organizzare il codice in moduli e di gestire le dipendenze.
- Babel: utilizzato per compilare il codice JavaScript in una versione compatibile con i browser più datati e con Node.JS.
- ESLint e Prettier: utilizzati per mantenere uno stile di codifica coerente e per individuare eventuali errori nel codice.
Come utilizzarlo
Per utilizzare Electron-Boilerplate per React è sufficiente clonare il repository da GitHub e installare le dipendenze. Una volta fatto ciò, è possibile iniziare a sviluppare l'applicazione modificando e aggiungendo i componenti React nel file src e utilizzando le funzionalità di Electron per gestire l'applicazione Desktop.
Il boilerplate fornisce anche comandi predefiniti per avviare l'applicazione in modalità di sviluppo, generare il pacchetto di distribuzione per diverse piattaforme e molto altro ancora.
Struttura di Electron-Boilerplate
Una volta scaricato il progetto esso si presenta così:
├── src/
│ ├── main/
│ │ ├── main.ts // File principale di Electron
│ │ └── ...
│ ├── renderer/
│ │ ├── components/ // Componenti React
│ │ │ ├── Component1.tsx
│ │ │ └── Component2.tsx
│ │ ├── App.tsx // Componente principale di React
│ │ ├── index.tsx // Punto di ingresso per il rendering di React
│ │ └── ...
│ ├── styles/ // Stili CSS o SCSS
│ ├── assets/ // Risorse come immagini, icone, ecc.
│ └── ...
├── package.json
└── ...All'interno di renderer generate la cartella components la quale conterrà i componenti che creerete. Aprite un terminale e fatelo puntare alla root principale dell'App, quindi digitate:
npm startQuesto comando, così come in React, avvierà il server di Electron-Boilerplate:
Il server di Electron, o "Electron Main Process", è il processo principale dell'applicazione. Esso gestisce le funzionalità tipiche di un'applicazione Desktop, come l'accesso al sistema operativo, la gestione delle finestre, la comunicazione tra queste ultime e molto altro.
Il file principale di Electron, di solito chiamato main.ts o main.js, è responsabile dell'avvio del processo principale. Questo file definisce le finestre dell'applicazione e reagisce agli eventi del sistema operativo.
A differenza del processo principale, l'"Electron Renderer Process" è responsabile per il rendering dell'interfaccia utente dell'applicazione utilizzando tecnologie Web come HTML, CSS e JavaScript.
Il processo di rendering viene avviato utilizzando un punto di ingresso specifico, di solito chiamato index.tsx o index.js, che carica il componente React principale (App.tsx o App.js) e gestisce il rendering dell'interfaccia utente.
Al momento dell'avvio dell'applicazione Electron, il processo principale viene avviato automaticamente, inizializzando tutte le funzionalità dell'applicazione. Successivamente, il processo di rendering viene avviato per mostrare l'interfaccia utente.
Quindi, a differenza di un'applicazione Web tradizionale che viene eseguita su un server, in Electron non esiste un vero e proprio "server" in esecuzione. Vengono eseguiti invece due processi separati che lavorano insieme per creare un'applicazione Desktop: il processo principale e il processo di rendering.
Realizzare il componente UserList
Per testare l'applicazione realizzeremo un semplice componente che mostra una ipotetica lista di users restituita da jsonPlaceholder. Quindi se non lo hai ancora fatto crea all'interno della cartella renderer la cartella components, poi all'interno di questa i files UserList.tsx (tsx è un formato TypeScript) ed userListStyle.css.
Fatto questo apri UserList.tsx e modifica come di seguito:
import React, { useState, useEffect } from "react";
import "./userListStyle.css"; // Importa il file CSS
const UserList = () => {
const [users, setUsers] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchUsers = async () => {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
if (!response.ok) {
throw new Error("Failed to fetch users");
}
const data = await response.json();
setUsers(data);
setIsLoading(false);
} catch(error) {
console.error("Error fetching users:", error);
setIsLoading(false);
}
};
fetchUsers();
}, []);
return (
<div>
<h2>User List</h2>
{isLoading ? (
<p>Loading...</p>
) : (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)}
</div>
);
};
export default UserList;Modifica anche il file userlistStyle.css così da definire uno stile:
/* userListStyle.css */
.user-list {
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
.user-list h2 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.user-list ul {
list-style-type: none;
padding: 0;
}
.user-list li {
margin-bottom: 10px;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.user-list li:hover {
background-color: #f0f0f0;
}Se hai ancora il server avviato dovresti vedere una schermata simile alla seguente:
Ottimo, continua a funzionare. Il nostro scopo è comunque quello di realizzare una build che restituisca un eseguibile sia per Windows che per macOS. Scopriamo come.
La build dell'applicazione
Apri il file package.json ed aggiungi le seguenti righe:
...
"scripts": {
"electron-builder": "electron-builder",
...Aggiungendo il comando "electron-builder" nel file package.json abiliti la possibilità di utilizzare Electron Builder per creare i pacchetti delle tue applicazioni. Quando esegui il comando
npm run electron-builderElectron Builder compila il tuo codice, crea il bundle dell'applicazione e genera i file di distribuzione per le piattaforme supportate (come Windows, macOS e Linux). In sostanza, semplifica notevolmente il processo di distribuzione delle applicazioni Electron.
Nel nodo "build", e sempre nel file package.json, aggiungi nel campo productName il nome che intendi dare all'eseguibile, seguito dalla versione. A dire il vero la versione non è obbligatoria ma è molto utile per diversificare il file nel momento in cui andrai a modificare l'applicazione. Questo eviterà la sua sovrascrittura.
...
"build": {
"productName": "Veranius1.0",
...Ciò significa che andrai a creare un file di nome Veranius versione 1.0.0, quindi la prima versione. Apri un terminale, fallo puntare nella root principale e digita:
npm run electron-builderAttendi qualche istante, il tempo che venga compilato il progetto. In questo caso dovrebbe impiegare pochissimo tempo data la semplicità dello stesso. Se non ci dovessero essere intoppi ti ritroverai con una struttura come da immagine:
In pratica, all'interno di release/build avrai un file eseguibile .exe dell'applicazione in ambiente Windows. Se avessi usato un macOS ti saresti ritrovato un file .dmg.
In conclusione
Con Electron Builder abbiamo semplificato la distribuzione delle applicazioni Electron, generando facilmente pacchetti per diverse piattaforme. Grazie al comando electron-builder nel file package.json e alla build del progetto, abbiamo ottenuto il file eseguibile .exe per Windows nella cartella release/build.
Per ulteriori dettagli su React o altri aspetti dello sviluppo delle applicazioni Desktop, ti invito a consultare ulteriori risorse sulla documentazione di React o a leggere la guida completa su questo link .
