Tú primera aplicación usando Electron

Si eres un desarrollador de seguro habrás leído sobre Atom, el editor de código creado por GitHub. También habrás leído que Atom está basado en Electron, un framework para crear aplicaciones de escritorio usando Node.js y Chromium y que potencia otras aplicaciones como Visual Studio Code, Slack, entre otras.

Dentro de las multiples ventajas de escribir aplicaciones usando Electron se encuentran:

  • Crear aplicaciones de escritorio usando tecnologías web conocidas (Javascript/CoffeeScript/ES6, HTML 5, CSS 3) como librerías asociadas (jQuery, React, Bootstrap, etc.)
  • Desarrollar aplicaciones multiplataforma (Windows, Mac OS X y Linux) sin necesidad de generar parches para que éstas funcionen.
  • Libertad y homogeneidad en el diseño visual de la aplicación.

Dichas ventajas nos ha llevado a elegir Electron por sobre otras plataformas o frameworks en algunos de nuestros proyectos.

En el presente post, vamos a crear un Hola Mundo con Electron. Algo sencillo, pero que nos permitirá entender como funciona nuestra aplicación.

Antes de comenzar con el tutorial, debes verificar que Node.js y npm están instalados en tu computador.

Iniciar nuestro proyecto

Primero, debemos crear un directorio en el cual colocaremos los archivos de nuestra aplicación. Seguido, debemos iniciar un proyecto de Node.js usando npm init. Llenar los datos correspondientes a gusto suyo.

Instalando y configurando Electron

Después de iniciar nuestro proyecto, debemos instalar el paquete electron-prebuilt en nuestra aplicación como dependencia de desarrollo. Vale decir, debemos ejecutar el comando npm install --save-dev electron-prebuilt.

Luego, debemos modificar el archivo package.json de forma que la sección scripts quede de la siguiente forma:

  "scripts": {
    "start": "electron index.js"
  },

Esto permitirá iniciar nuestra aplicación usando el comando npm start.

Manos en el código

Luego de haber modificado el archivo anterior debemos crear el archivo index.js y llenarlo, por motivos del tutorial, con el siguiente código:

'use strict';

const electron = require('electron');  
const app = electron.app;  
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

app.on('window-all-closed', function() {  
  if(process.platform != 'darwin') {
    app.quit();
  }
});

app.on('ready', function() {  
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

Seguramente debes estar preguntando que quiere decir el contenido del archivo. Iremos sección por sección detallando que significa cada sección de código del archivo.

Una disección del código

En la primera línea del archivo tenemos:

'use strict';  

Si eres desarrollador Javascript, la primera linea resulta trivial. En caso que no lo seas o estés algo desactualizado, dicho string indica a Node.js que debe ejecutar el código en modo estricto (strict mode). Un modo de ejecución que limita de cierta forma la sintaxis de Javascript para minimizar errores asociados a ciertas características del lenguaje que aun siguen por motivos de compatibilidad.

Para más detalle sobre modo estricto, puedes revisar éste artículo de la Mozilla Developer Network.

Luego, tenemos lo siguiente:

const electron = require('electron');  
const app = electron.app;  
const BrowserWindow = electron.BrowserWindow;  

La primera linea importa el módulo electron para poder ser usado en nuestra aplicación. Las siguientes dos lineas representan objetos asociados a una aplicación hecha en Electron. El singleton electron.app, el cual está encargado de manejar el ciclo de vida de nuestra aplicación. Es decir, que debe hacer nuestra aplicación cuando se abre, se cierra, se abre una nueva ventana, etc y la clase BrowserWindow, que permite crear ventanas en las cuales podemos insertar las distintas pantallas de nuestra aplicación.

Seguido, tenemos la siguiente línea:

let mainWindow;  

Esta variable global será analizada en un momento posterior.

Después tenemos la siguiente sección:

app.on('window-all-closed', function() {  
  if(process.platform != 'darwin') {
    app.quit();
  }
});

Acá agregamos al singleton app una función que se ejecuta cuando el evento window-all-closed se emita. Dicho evento se emitirá cuando todas las ventanas asociadas al app se cierren. Vale decir, cuando no existan instancias de la clase BrowserWindow.

La función que se ejecutará indica que la aplicación debe cerrar, salvo si nos encontramos con que el sistema operativo sobre el cual está ejecutandose nuestra aplicación sea Mac OS X (darwin es el nombre del sistema operativo sobre el cual Mac OS X se construye). Lo anterior es por que en Mac OS X una aplicación no se cierra cuando las ventanas asociadas a ésta se cierran.

Y finalmente, tenemos el siguiente fragmento:

app.on('ready', function() {  
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

Éste indica que cuando la aplicación se encuentre lista, se debe crear una ventana de 800x600 píxeles y que se asocia a la variable mainWindow, declarada mas arriba. Luego, en dicha ventana se cargará el archivo index.html, relativo a la carpeta donde se ejecuta el archivo de código. Y definir que al cerrar dicha ventana se debe eliminar la referencia a ésta.

Podemos observar que utilizamos la variable global mainWindow. Esto ya que si se declara dentro del callback del evento ready la referencia a la ventana se perderá, dado que el Garbage Collector eliminará nuestra ventana por no tener referencia a ninguna variable. Lo que resultará en una ventana no existente.

Un archivo HTML

Como indicamos en el archivo creado anteriormente, la ventana de nuestra aplicación mostrará el contenido del archivo index.html, por lo que hay que crearlo. Puedes copiar y pegar el siguiente código en el:

<!doctype html>  
<html>  
  <head>
    <meta charset="utf-8">
    <title>Hola Mundo!</title>
  </head>
  <body>
    <h1>HOLA MUNDO!</h1>
    <p>Ésta es una aplicación hecha con Electron.</p>
  </body>
</html>  

Ejecutando nuestra aplicación

Finalmente, para ejecutar nuestra aplicación debemos ejecutar el comando npm start. Si no aparece ningún error, aparecerá una aplicación similar a la de la siguiente imágen:

Y voilá, hemos creado nuestra primera aplicación con Electron. Que, por sencilla e inútil que parezca, nos permitió ver lo básico sobre como funciona una aplicación hecha usando este framework.

Me gustó y quiero aprender más

Si te llamó la atención Electron y quieres saber mas, puedes leer los siguientes recursos: