JavaScript è tra i linguaggi di programmazione più comuni. Il fatto che possa essere utilizzato sia per lo sviluppo back-end che front-end lo ha reso un tesoro per molte persone.
JavaScript ha molte librerie e framework che espandono i suoi casi d’uso oltre JavaScript vanilla (semplice).
Electron.js è un potente framework open source che offre agli sviluppatori web la possibilità di sviluppare applicazioni native con le loro competenze esistenti. Questo articolo ti insegnerà su Electron.js e su come può essere utilizzato per alimentare la tua prossima fantastica idea.
Sommario:
Elettrone JS
Electron JS è un framework che gli sviluppatori possono utilizzare per creare applicazioni desktop utilizzando HTML, CSS e JavaScript. Electron JS è stato creato ed è gestito da GitHub.
Il framework è una combinazione di Node.JS e Chromium, che consente agli utenti di mantenere una base di codice JavaScript e sviluppare applicazioni desktop multipiattaforma che possono funzionare su Windows, macOS e Linux.
La storia di Electron.js è iniziata nel gennaio 2013. L’idea originale era quella di creare un editor di testo multipiattaforma che potesse funzionare con JavaScript, HTML e CSS.
Electron.js era originariamente chiamato Atom Shell e reso open source nel 2014. Il progetto è stato successivamente ribattezzato Electron nell’aprile 2015 e la sua prima API è stata rilasciata nel 2016.
Caratteristiche di Electron JS
- Compatibile con tutte le librerie e i framework JavaScript. Vue.js, Angular e React.js sono solo esempi di framework JavaScript che gli sviluppatori possono utilizzare insieme a Electron JS. Questa compatibilità semplifica l’utilizzo delle caratteristiche/funzionalità di queste librerie e framework durante la creazione di un’app Electron.
- Quadro riutilizzabile. Soddisfare le diverse esigenze dei clienti può essere costoso. La cosa buona con Electron JS è che può essere utilizzato sia per applicazioni web che desktop. La singola base di codice significa che può essere utilizzato anche su diversi sistemi operativi.
- Ha accesso alle API native. Gli sviluppatori che lavorano su Electron JS hanno accesso alle API native dei sistemi operativi su cui operano. Gli sviluppatori possono quindi creare app desktop che hanno un accesso simile a funzionalità di basso livello, come la visualizzazione delle notifiche.
- Supporta la tecnologia web. Electron JS è adattabile, poiché gli sviluppatori non hanno bisogno di imparare un nuovo linguaggio di programmazione per sviluppare applicazioni. Significa quindi che se conosci un determinato language pack che già usi per creare applicazioni web, puoi usarlo anche per creare un’app desktop.
- Gestione del codice e delle app. Non è necessario mantenere team diversi per gestire app e codice per sistemi operativi diversi. Electron JS consente di mantenere la stessa base di codice per i sistemi operativi Linux, Windows e Mac.
- Facile costruzione/distribuzione. Il gestore di pacchetti Electron aiuta gli sviluppatori a creare pacchetti nei rispettivi pacchetti. Puoi quindi rilasciare un’app desktop Linux, Mac e Windows dalla stessa base di codice utilizzando questo gestore di pacchetti.
Architettura Electron JS
L’architettura di Electron è molto simile a quella di un browser Web moderno poiché eredita la sua architettura multiprocesso da Chromium.
L’architettura di Electron comprende JavaScript Engine V8, Node.JS e Libchromiumcontent.
- Node.JS: un runtime JavaScript open source che viene eseguito sul motore JavaScript V8. Node.JS consente agli sviluppatori di eseguire JavaScript al di fuori di una finestra del browser. Node.JS consente inoltre agli utenti di eseguire codice JavaScript non elaborato tramite la sua shell interattiva.
- Libchromiumcontent: una libreria di rendering di Chromium open source e gestita da Google Chrome. Chrome ha un’interfaccia utente minimalista e utilizza Blink come motore di layout e V8 come motore JavaScript.
- Motore JavaScript V8: un motore JavaScript open source scritto in C++ e JavaScript e sviluppato da Google.
#1. Node.js
Per iniziare con Electron JS, devi avere Node.js installato sul tuo computer locale.
Seleziona la versione del nodo corretta in base al sistema operativo in esecuzione sul tuo computer.
Controlla se Node.js è stato installato correttamente eseguendo questi comandi;
node -v
npm -v
Se installati correttamente, questi comandi mostreranno rispettivamente le versioni node e npm.
#2. Riga di comando
Il modo in cui accedi alla riga di comando dipenderà dal tuo sistema operativo.
- Linux dipenderà dalla distribuzione.
- Windows: PowerShell o prompt dei comandi.
- macOS: Terminale.
Alcuni editor di codice, come Visual Studio Code, sono dotati di un terminale integrato.
#3. Editor di codice
Hai bisogno di un editor di codice per scrivere il tuo codice Electron JS. Visual Studio Code è tra i migliori che puoi provare.
Come installare Electron JS
Passaggio 1: crea un progetto node.js.
Usa questi comandi per iniziare;
mkdir my-electron-app && cd my-electron-app
npm init
Il comando npm init ti chiederà di riempire alcuni campi, come il nome dell’app, il punto di ingresso e la descrizione.
Puoi scegliere il nome predefinito della cartella come nome dell’app. Tuttavia, ricorda di impostare il punto di ingresso della tua app come main.js.
Campi come autore e descrizione possono assumere qualsiasi valore. Il tuo package.json sarà simile a questo una volta che avrai finito con questi passaggi:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}
Passaggio 2: installare l’elettrone
Usa questo comando;
npm install --save-dev electron
Passaggio 3: aggiungi il comando “start” al tuo pacchetto.json
{
"scripts": {
"start": "electron ."
}
}
Passaggio 4: avvia la tua app
Usa questo comando per avviare la tua app in modalità di sviluppo
npm start
Processo di lavoro Electron JS
Continueremo a creare l’app dalla configurazione che abbiamo appena fatto sopra. Un’applicazione Electron ha due tipi di processi; principale e renderer.
Il processo principale
Lo script principale è il punto di ingresso di qualsiasi app elettronica. L’app verrà eseguita in un ambiente Node.js completo. Electron cercherà lo script principale nel file package.json già configurato durante lo scaffolding dell’app.
Crea main.js nella cartella principale per inizializzare lo script principale. Puoi farlo manualmente o usare questo comando;
touch main.js
Puoi aggiungere il seguente codice a main.js
const { app, BrowserWindow } = require('electron');
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile('index.html');
};
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
Le pagine Web in Electron possono essere caricate da un indirizzo Web remoto o da un file HTML locale. Useremo un file HTML locale a scopo dimostrativo.
Crea un file index.html nella cartella principale. Il codice per index.html è sempre fornito, ma puoi averlo come codice iniziale;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <title>Hello from Electron renderer!</title> </head> <body> <h1>Hello from Electron renderer!</h1> <p>👋</p> <p id="info"></p> </body> <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script> </html>
Processo di rendering
Il renderer rende il contenuto web. Gli script di precaricamento sono dotati di codice che viene eseguito in un processo di rendering prima che i contenuti Web inizino a caricarsi.
Crea preload.js nella tua cartella principale e aggiungi questo codice;
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
Esegui il server di sviluppo utilizzando npm start e questo è ciò che verrà visualizzato
Esempi di app: Electron JS
#1. Applicazione desktop lenta
Slack è uno degli strumenti di collaborazione remota più popolari. Gli utenti possono inviare e ricevere messaggi, effettuare chiamate e condividere file utilizzando questa app. Slack ha sia app basate sul Web che desktop su sistemi operativi Mac, Linux e Windows. L’app desktop di Slack utilizza il motore Chromium e Node.js per eseguire il rendering di codice di alta qualità.
#2. Applicazione desktop WordPress
WordPress è il più grande sistema di gestione dei contenuti. Il fatto che sia possibile avviare un sito Web anche senza competenze di programmazione di base ha attirato molti utenti. È possibile accedere a WordPress tramite il browser e tramite app desktop su Mac, Linux e Windows. Il desktop WordPress rinnovato utilizza Electron JS.
#3. Applicazione desktop WhatsApp
WhatsApp è tra le app di messaggistica più popolari nel mondo moderno, poiché è utilizzata da oltre 2 miliardi di persone. WhatsApp è stato originariamente progettato come app per dispositivi mobili, ma ora è diventato una piattaforma cross-device. Il desktop di WhatsApp utilizza Electron JS ed è disponibile sui principali sistemi operativi.
#4. Codice VisualStudio
Visual Studio Code, di proprietà di Microsoft, è tra gli editor di codice più popolari. Visual Studio Code supporta HTML, CSS e codice scritto in vari linguaggi di programmazione come JavaScript, Python, PHP, Java e Ruby, solo per citarne alcuni. L’app desktop, creata utilizzando Electron JS, è disponibile per i sistemi operativi Windows, Mac e Linux.
Risorse per l’apprendimento: Electron JS
#1. Documentazione ufficiale di Electronjs
La documentazione di Electronjs è creata e gestita da Electronjs.org. Imparerai cos’è Electron JS, come configurare la tua prima app Electron e come creare app desktop multipiattaforma utilizzando varie tecnologie. La documentazione viene sempre aggiornata ogni volta che viene introdotto un miglioramento o una nuova funzionalità.
#2. Master Electron: app desktop con HTML, JavaScript e CSS
Master Electron è un corso a pagamento su Udemy che ti introduce a Electron JS. Imparerai come creare app desktop per diversi sistemi operativi, come Mac, Linux e Windows. Master Electron è anche la risorsa perfetta se vuoi comprendere l’intero processo dell’API Electron.
#3. Esercitazione sulla reazione elettronica
Electron React è un corso a pagamento su Udemy che insegna agli sviluppatori come creare app Electron utilizzando React.js. React è una delle librerie JavaScript più famose ed è stata creata da Meta (ex Facebook).
Avvolgendo
Electron JS è una fantastica libreria JavaScript per la creazione di app desktop in un mondo moderno in cui le app multipiattaforma devono essere abbracciate. Il fatto che tu possa utilizzare HTML, CSS e JavaScript significa che gli sviluppatori non devono imparare nuovi stack tecnologici per creare tali app. Anche la presenza di una community numerosa e solidale è un vantaggio, in quanto ti viene sempre garantito il supporto.
Puoi anche esplorare alcuni dei migliori framework JavaScript per creare un’applicazione moderna in meno tempo.