electron

Introducción a electron, una herramienta para preparar aplicaciones de escritorio con js.

Patrick Heron

archivado en: JavaScript / 5 febrero, 2017

Electron es una herramienta para crear aplicaciones de escritorio con javaScript, CSS y HTML, tales como slack, atom y un largo etcétera, para los principales sistemas operativos (windows, mac y linux). Corre bajo node y utiliza como visor el navegador Chromium, por lo que se caracteriza por trabajar con dos procesos: el principal (main), que equivaldría a abrir el navegador, y n procesos de render, que equivaldrían a cada una de las pestañas que tenemos abiertas.

Se parece mucho a node web-kit, aka NW, y como suele suceder en estos casos es complicado decantarse por uno u otro.  Jean-Philippe Côtè, tras analizarlos en detalle, considera que: «NW.js’ longer track record and considering it has support for various features not present in Electron (Chrome Platform APIs, NaCL plugins, source code protection, PDF viewer, print preview, etc.), I would venture to say NW.js has somewhat of an edge». Pero también es cierto, añade, que NW tiene más open issues sin resolver que electron... En fin, como no he realizado ningún proyecto profesional con electron, no puedo opinar al respecto, así que dejo esta cuestión en el aire y paso a explicar un hola mundo.

Preparativos

Abrimos la consola, nos vamos a un directorio donde desarrollaremos el proyecto y preparamos un package.json ejecutando por consola:

npm init

A continuación instalamos electron:

npm install --save-dev electron-prebuilt

Ahora podríamos lanzar electron por consola cada vez que lo necesitáramos:

electron NOMBRE_ARCHIVO_ENTRADA

Pero es más cómodo definir un script en el package, de tal manera que de momentos nos quedaría de forma parecida a esta:

{

"name": "electron",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"start": "electron index.js"

},

"author": "mmfilesi",

"license": "ISC",

"devDependencies": {

"electron-prebuilt": "^1.4.13"

}

}

Ale op, ahora ya podemos ejecutar electron escribiendo por consola:

npm start

Con todo listo, vamos ya con el código.

Hola mundo

Electron utiliza un archivo js como punto de entrada, así que en la raíz del proyecto creamos uno que podemos llamar index.js (si le ponemos otro nombre hay que cambiarlo también en el package). Y en este archivo lo primero que debemos hacer es traernos el objeto app, con el que controlaremos el ciclo de vida de la aplicación, y BrowserWindow, que permite definir la ventana, seteando sendos objetos en dos variables desestructuradas.

const { app, BrowserWindow } = require('electron');

Luego declaramos de forma global win, que luego setearemos con la aplicación.

let win;

Ahora preparamos función auxiliar para definir los parámetros generales de la aplicación. Se podría hacer más adelante en el ready, pero así queda más limpio.

function createWindow() {

/* instanciamos BrowserWindow. */

win = new BrowserWindow({

height: 768,

width: 1024,

});

/* Ruta del archivo principal, el que se carga por defecto */

win.loadURL(`file://${__dirname}/app/index.html`);

/* Para disponer de la consola */

win.webContents.openDevTools();

win.on('closed', () => {

/* Nulificamos esta ventana, y solo esta, cuando se cierre */

win = null

});

}

Cuando app esté listo, iniciamos la ventana de la aplicación:

app.on('ready', createWindow);

Por último, en el evento window-all-closed, si no estamos en mac (darwin), cerramos la aplicación si todos los procesos, las ventanas, han sido cerradas.

app.on('window-all-closed', () => {

if (process.platform !== 'darwin') {

app.quit();

}

});

Ya solo nos falta preparar algo en el archivo que hemos indicado antes que será el que se cargue por defecto. Lo podemos guardar en un directorio llamado app y llamarlo index.html.

<!doctype html>

<html lang="">

<head>

<meta charset="utf-8">

<meta http-equiv="x-ua-compatible" content="ie=edge">

<title></title>

<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<h1>Hola mundo</h1>

</body>

</html>

 

Con todo listo, ya solo nos falta preparar el ejecutable y para eso lo más cómodo quizás sea usar el programa electron-packager, así que lo instalamos local y globalmente.

npm install electron-packager --save-dev

npm install electron-packager -g

Y luego lo más cómodo es lanzar el build desde el npm. Por ejemplo, para windows:

"build": "electron-packager . windows"

He preparado un gist con todo junto.

|| Tags: ,

Este artículo aún no ha sido valorado.

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.