Electron.js es una plataforma para desarrollar aplicaciones de escritorio usando tecnologías web (HTML, CSS y JavaScript) creada y mantenida por Github. Electron.js funciona creando dos tipos de procesos, el proceso main y el proceso renderer. El primero es un proceso de Node.js, este es nuestro proceso principal, viene a ser nuestra aplicación en si misma, este proceso tiene acceso a varias API de Electron.js solo para este proceso que nos ayudan a comunicarnos con el SO y realizar distintas acciones o efectos.
El segundo (renderer) es un proceso de Chromium, con una diferencia, este Chromium tiene un Node.js incorporado y acceso a todos sus módulos y los que instalemos con npm (esto nos permitiría usar React.js, Angular.js, Polymer, etc. para desarrollar nuestra UI o cualquier otra librería básicamente), por lo que desde nuestrorenderer podemos usar módulos como fs para leer y escribir en el disco, o hacer peticiones a una base de datos directamente.
Además de acceder a los módulos de Node.js y npm, Electron.js nos da acceso a una pocas API en este proceso igual que hace con el procesomain.
Desarrollando una aplicación
Para empezar a usar Electron.js lo primero que necesitamos es iniciar un proyecto con npm init e instalar la dependencia de desarrolloelectron-prebuilt. Esta dependencia nos permite iniciar nuestra aplicación de Electron.js con el comando electron .. Veamos como quedaría nuestro package.json luego de instalar todo:
{
"name": "my-app",
"version": "0.1.0",
"description": "My first Electron.js application",
"main": "app/index.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron-prebuilt": "1.3.3"
}
}
Ahí tenemos nuestra dependencia de desarrollo instalada y el scriptstart que inicia la aplicación, también definimos que el entry point de nuestra aplicación va a ser el archivo index.js ubicado en la carpetaapp. Vamos entonces a crear este archivo y dentro vamos a colocar lo siguiente:
// de electron nos traemos app y BrowserWindow
const { app, BrowserWindow } = require('electron');
// definimos `window`, acá vamos a guardar la instancia de BrowserWindow actual
letwindow;
// cuando nuestra app haya terminado de iniciar va a disparar el evento `ready`
// lo escuchamos y ejecutamos la función `createWindow`
app.on('ready', createWindow);
// escuchamos el evento `window-all-closed` y si no estamos en Mac cerramos la aplicación
// lo de Mac es debido a que en este SO es común que se pueda cerrar todas las ventanas sin cerrar
// la aplicación completa
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// definimos la función `createWindow`
functioncreateWindow() {
// instanciamos BrowserWindow, esto va a iniciar un proceso `renderer`
window = new BrowserWindow({
height: 768,
width: 1024,
});
// le decimos a nuestro `renderer` que cargue un archivo que tenemos en `statics/index.html`
// acá podríamos cargar cualquier URL, por ejemplo podríamos haber iniciado un servidor HTTP
// y luego cargar la URL de este servidor
window.loadURL(`file://${__dirname}/../statics/index.html`);
window.on('closed', () => {
// por último escuchamos el evento `closed` de la ventana para limpar la variable `window`
// de esta forma permitimos matar la ventana sin matar al aplicación
window = null
});
}
Ese archivo va a ser nuestro proceso main (nuestra aplicación), cuando iniciemos Electron.js con el comando npm start vamos a iniciar este script, crear una ventana y abrir el archivostatics/index.html. Ya que tenemos todo esto, vamos a crear el HTML que vamos a cargar.
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, initial-scale=1">
<title>Nuestra aplicación de Electron.jstitle>
head>
<body>
<mainid="app-container">
<header>
<h1>Acabo de iniciar una app de Electron.jsh1>
header>
main>
body>
html>
Ese va a ser nuestro HTML inicial, ahora cuando iniciemos Electron.js vamos a ver una ventana en blanco con el mensaje: Acabo de iniciar una app de Electron.js Ahora vamos a incluir un poco de JS en el renderer y vamos hacer uso del módulo fs (directo en la ventana). Vamos a incluir una etiqueta script con el siguiente código: