Cuando JavaScript se convierte en un tema tan redundante entre los desarrolladores es que hay motivos de peso para centrarse en esta plataforma. Hoy toca hablar de Electron, un framework desarrollado por GitHub el cual nos permite desarrollar sistemas multiplataforma basados en tecnologías web.
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.
Para utilizar Electron debemos tener instalado io.js, y obtener los paquetes mediante npm o descargando los binarios del mismo:
Para el desarrollo de nuestro proyecto debemos seguir la siguiente estructura de directorios:
El primer elemento, package.json, se define igual que cuando programamos con Node.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:
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:
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:
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.
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.
Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk
0 comentarios:
Publicar un comentario