Electron, ¿cómo funciona?
Como hemos comentado, Electron es un framework para JavaScript que permite el desarrollo de aplicaciones enriquecidas de escritorio mediante el uso de tecnologías web. Esta desarrollado por GitHub (lo que garantiza revisiones constantes), es de código abierto y multiplataforma (funciona bajo Linux, Mac y Windows).
Electron está basado en io.js y funciona bajo un subconjunto mínimo de librerías de Chromium. Además proporciona acceso a APIs nativas enriquecidas mediante el motor de Chromium, el cual es controlado mediante JavaScript. Esto no significa que enlace a librerías gráficas del sistema operativo, ya que su GUI se desarrolla mediante HTML, pero podemos aprovechar ciertas características de las librerías nativas mediante Chromium. Compañías como Microsoft, Facebook, Slack y Docker utilizan esta plataforma.
Primeros pasos en Electron
Para utilizar Electron debemos tener instalado io.js, y obtener los paquetes mediante npm o descargando los binarios del mismo:
|
# Instalar el comando electron global npm install electron-prebuilt -g # Instalar como dependencias de desarrollo npm install electron-prebuilt --save-dev |
Para el desarrollo de nuestro proyecto debemos seguir la siguiente estructura de directorios:
|
nombre-proyecto/ |- package.json |- main.js |- index.html |
El primer elemento, package.json, se define igual que cuando programamos con Node.js:
{
"name" : "nombre-proyecto",
"version" : "0.1.0",
"main" : "main.js"
}
Como indicamos en package.json la clase principal que queremos que se lance en primer lugar será main.js. A continuación, definiremos una funcionalidad básica en dicho fichero para que sirva a modo de ejemplo:
// Controla el ciclo de vida de la aplicación
var app = require('app');
// Acceso al gestor de ventanas de Chromium
var BrowserWindow = require('browser-window');
// Permite el reporte de errores
require('crash-reporter').start();
// Referencia global a la ventana principal
var mainWindow = null;
// Terminamos el proceso de la aplicación cuando todas las ventanas se han cerrado
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
// Cuando todo se haya cargado, mediante el evento ready empezaremos a definir la aplicación
app.on('ready', function() {
// Creamos una nueva ventana de 800x600
mainWindow = new BrowserWindow({
width: 800,
height: 600});
// Vinculamos el index.html a dicha ventana
mainWindow.loadUrl('[DIRECTORIO_DEL_FICHERO_INDEX.HTML]');
// Abrimos las opciones de desarollo
mainWindow.openDevTools();
// Cuando la ventana principal se cierre...
mainWindow.on('closed', function() {
// Liberamos los recursos referentes a la ventana
mainWindow = null;
});
});
Ya sólo queda definir el fichero index.html, que contendrá la vista propiamente dicha de la ventana. Esto lo haremos como si se tratase de una web clásica:
<html>
<head>
<title>Hola Mundo en Electron JS</title>
</head>
<body>
<h1>Hola Mundo!!!</h1>
</body>
</html>
Bien, ya hemos creado nuestro hola mundo en Electron, sólo nos queda ejecutarlo. Nos situamos en el directorio que contenga nuestro proyecto y ejecutaremos el siguiente comando:
|
electron nombre-proyecto
|
Y se nos abrirá una ventana con nuestra aplicación. Fácil, bonito y para toda la familia. ¿Qué os parece?
Vía Iván Trujillo.