Construya aplicaciones multiplataforma de escritorio con JavaScript, HTML y CSS

Electrón es una biblioteca de código abierto desarrollado por GitHub para la construcción de aplicaciones de escritorio multiplataforma con HTML, CSS y JavaScript. Electron logra esto mediante la combinación de chromium y Node.js en una solución ejecutable permitiendo que las aplicaciones puedan ser empaquetadas para Mac, Windows y Linux.

Electrons se inició en 2013 como el marco de desarrollo para el editor de texto personalizable y configurable Atom de GitHub. Los dos se volvieron a código abierto en la primavera de 2014 (atom y electron).

Desde entonces se ha convertido en una herramienta popular utilizado por los desarrolladores de código abierto, nuevas empresas y empresas ya establecidas.

Electrón (anteriormente conocido como Atom Shell ) es un framework de código abierto desarrollado en GitHub. Permite el desarrollo de aplicaciones de escritorio GUI que permite utilizar los componentes desarrollados originalmente para aplicaciones web, con Node.js para el backend y Chromium para el frontend. Electrón es el framework principal detrás de varios proyectos de código abierto, entre ellos estuvieron el editor GitHub Atom  y de Microsoft el Visual Studio CODE por mencionar los mas destacados.

Una aplicación básica de electron consta de tres archivos: package.json(metadatos), main.js(código) y index.html(La que vendría a ser la interfaz gráfica de usuario). El framework es proporcionado por el archivo ejecutable electrón (electron.exe en el OS Windows , electron.appen en macOS y electron en Linux ). Los desarrolladores que deseen añadir la marca y personalizada icono puede cambiar el nombre y / o editar el archivo ejecutable de electrones. El 11 de abril de 2013, se inició como electron del átomo de Shell. El 11 de mayo de 2016, de electrones alcanza la versión 1.0.

Como ya lo habíamos mencionado antes, las aplicaciones Electron utiliza la combinación de Node.Js y el navegador chromium de Google. A continuacion explicaremos un poco de ambos.

Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación ECMAScript, asíncrono, con I/O de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google. Fue creado con el enfoque de ser útil en la creación de programas de red altamente escalables, como por ejemplo, servidores web.

Node.js es similar en su propósito a Twisted o Tornado de Python, Perl Object Environment de Perl, libevent o libev de C, EventMachine de Ruby, vibe.d de D y JEE de Java existe Apache MINA, Netty, Akka, Vert.x, Grizzly o Xsocket. Al contrario que la mayoría del código JavaScript, no se ejecuta en un navegador, sino en el servidor. Node.js implementa algunas especificaciones de CommonJS.

V8 es en si, la parte del navegador de google chromium que utiliza Electron para trabajar. V8 es un motor de código abierto para JavaScript creado por Google, está escrito en C++ y es usado en Google Chrome. También el “V8 JavaScript” está integrado en el navegador de internet del sistema operativo Android 2.2 “Froyo”. Implementa ECMAScript como especifica ECMA-262 5.ª edición y corre en Windows XP, Vista, Mac OS X 10.5 (Leopard) y Linux en procesadores IA-32 y ARM.

V8 puede funcionar de manera individual (standalone) o incorporada a cualquier aplicación C++.

npm es el manejador de paquetes por defecto para Node.js, un entorno de ejecución para JavaScript. (de acuerdo al readme.md encontrado en npm-0.0.1 se define como Node Package Manager) Desde la versión 0.6.3 de Node.js npm es instalado automáticamente con el entorno. npm se ejecuta desde la linea de comandos y maneja las dependencias para una aplicación. Prácticamente trabajaremos con el en todo momento.

 

Estructura de una aplicación de electrones


El archivo más importante en el archivo electrónico es package.json. El cual mantiene información sobre el paquete. La información más común en package.jsonson:

  • “Nombre”, el nombre de la aplicación
  • “Versión”, la cadena de versión de la aplicación
  • “Principal”, el nombre del archivo de script principal de la aplicación

package.json es un archivo npm.

 

Instalar Electron en Ambiente Windows / Mac OS


El proceso es muy simple y sencillo, y en ambos sistemas Operativos Win o Mac son muy similares, a lo largo de la explicación veremos las diferencias de cada uno. En todo momento hablaremos de la Ventana de Comando cmd para Windows, pero se sobre entiende que en la versión Mac OS se utilizara la llamada Terminal.

Necesitamos Instalar la versión Node.js (por los paquetes npm) igual o superior a los requerimientos de la versión de Electrón que desea instalar. Es decir Electron Requiere de Node.js.

Electron puede ser invocado para su instalación desde Node.js utilizando su consola. Una vez instalado Node.Js, abra una linea de comando (cmd), y pásese a la carpeta de trabajo.

cd C:\CarpetaDeTrabajo\

npm init
cd /Users/MiUsuario/Desktop/CarpetaDeTrabajo/ 

npm init 

El comando npm le ayudará a crear un archivo package.json. El cual sólo cubre los elementos más comunes, e intenta definir los valores predeterminados necesarios, pero los mas relevantes para nuestro ejemplo debieran ser un “Nombre” (name linea 10 de nuestro ejemplo) y un nombre de archivo de inicio (entry point: Index.js linea 13 de nuestro ejemplo), con este ultimo puede utilizar el sugerido o main.js es una buena opción. Puede utilizar el comando ‘npm help json’ para la documentación definitiva sobre estos campos y exactamente lo que hacen. En todo momento puede utilizar Crtl+C para salir o cancelar el proceso.

Al finalizar le perdira confirmación de valores, no olvide Confirmar con un “yes” (linea 21 de nuestro ejemplo).

This Utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See 'npm help json' for definitive documentation on these fields and exactly what they do.

Use 'npm install <pkg> --save' afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit.

name: Nombre de Prueba
version (1.0.0): 2.1.0
description: Mi primera aplicacion con Electron
entry point (index.js): main.js
test command:
git repository:
keywords:
author: Vuxmi.com Alexander Escobar
license (ISC): Patente en proceso 89-785XB
...
...
Is This ok? (yes/no): yes

Para instalar Electron, requiere a continuación introducir el siguiente comando.

npm install electron

El proceso tomara algún tiempo y requiere conexión a internet en todo momento.

Una vez instalado Electrón visualizaremos que tenemos una nueva opción llamada PROMPT Electron que no es mas que una interfaz a el CMD de Windows / Shell o Terminal dependiendo de la versión que estén utilizando.

 

Si el articulo te gusto, si necesitas ayuda, tienes problemas o deseas un vídeo explicando algún ejemplo no olvides pedirlo en los comentarios.

 


links & referencias: 

Si deseas mas información o consultar las fuentes bibliográficas, aquí te dejamos…

Estudiante de la vida, buscando aprender…
Tu solo pregunta, si no tengo la respuesta… ya NO preguntaras solo…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *