Introducción al uso de Electron

¿Qué es Electronjs?

Electron es una plataforma para construir aplicaciones multiplataforma (que pueden ejecutarse en macOS, Windows y Linux) utilizando tecnologías web (html, javascript y css). Para ello combina el uso de Nodejs y Chromium (el proyecto OpenSource detrás de Google Chrome).

Electron también permite que un equipo de trabajo sea mas productivo al solo tener que enfocarse en un solo desarrollo que cubra múltiples plataformas, es decir que no se requiere tener un proyecto en desarrollo para cada sistema operativo (Windows, macOS y Linux) sino que al mantener uno solo se pueden realizar las actualizaciones para los tres.

Para los desarrolladores de Nodejs, electron es una solución que permite complementar node de forma que no se limite a la línea de comandos sino que se pueda extender su uso al crear interfaces de usuario sin la necesidad de tener que aprender un nuevo lenguaje de programación. Simultáneamente si tienes experiencia creando aplicaciones web, electron te permite utilizar los recursos del sistema operativo, como acceder al sistema de archivos y otras acciones que están restringidas para el navegador. Por ejemplo es posible crear una aplicación que pueda no solo explorar sino también escribir dentro del sistema de directorios y archivos locales.

Electron es una plataforma para crear aplicaciones/programas de escritorio utilizando lenguajes, tecnología y patrones utilizados generalmente para crear aplicaciones web.

Electron fue creado por Cheng Zhao, ingeniero de la empresa GitHub. Originalmente el proyecto fue llamado Atom Shell, debido a que Electron fue la base con la cual el editor de código fue construido. De la misma forma en que existen aplicaciones móviles multiplataforma como ionic o react native, electron permite crear aplicaciones multiplataforma para el escritorio.

¿Cuáles son las ventajas del uso de Electron al construir aplicaciones de escritorio?

El uso de JavaScript como lenguaje multipropósito nos permite echar mano de un equipo existente para construir una aplicación web y de escritorio.
Se pueden crear aplicaciones en tiempos cortos.
Se puede acceder a un recursos existente (el navegador).
Se construye en un solo proyecto una aplicación multiplataforma.

Módulo de despliegue de contenido de Chromium (Chromium Content Module)

El navegador Chrome funciona sobre el proyecto de código libre (OpenSource) llamado Chromium, utiliza este con unos ajustes adicionales y una serie de licencias de uso para funcionar. El Content Module es la parte fundamental que permite el despliegue de paginas dentro del navegador de forma independiente en cada una de las tabs, asignando para cada una de estas tabs un proceso individual que utiliza a su vez la aceleración GPU. Este módulo incluye dentro de el motor de despliegue Blink, así como el interprete de JavaScript V8 creado por Google.

Este módulo permite pues el despliegue de páginas HTML, procesamiento de archivos de estilo CSS y ejecución del código JavaScript. Sin embargo si analizamos las tareas que se pueden realizar mediante Chrome, hay una serie de ellas que el navegador permite que no forman parte del Content Module, están son realizadas en un nivel diferente y entre estas actividades encontramos: el manejo de extensiones de Chrome, la organización de los sitios favoritos, la sincronización de las contraseñas y el autocompletado de formularios.

En pocas palabras el Content Module solo se encarga de hacer el despliegue de páginas HTML con CSS y JavaScript.

¿Qué es Nodejs?

JavaScript como lenguaje estuvo destinado a su uso en el navegador durante un largo tiempo. Con la aparición de Nodejs fue finalmente posible ejecutar código JavaScript a nivel del servidor, esto gracias a la implementación del motor V8 de Google Chrome como interprete de JavaScript, a partir de este punto una gran cantidad de proyectos, paquetes y librerías han aparecido en la órbita de Nodejs. Al día de hoy se pueden encontrar cientos de miles de librerías en NPM el sistema de paquetes de node.

¿Qué empresas utilizan Electron?

Electron es actualmente utilizado por compañías de diferentes tamaños con el propósito de crear aplicaciones de escritorio. Si bien originalmente se creo con el propósito de ser la base con la cual GitHub pudiera concebir su editor de código Atom, hoy en día es utilizado para muchos otros propósitos en muchas otras compañías.

¿Qué software ha sido creado utilizando Electron?

Skype y Visual Studio Code creados por Microsoft.
Slack, el software de comunicación creado por la empresa del mismo nombre.
Hyperjs la terminal escrita en JavaScript.
Streamlabs OBS el software de streaming.
Whatsapp para escritorio.

La lista de proyectos creados en este punto es enorme, y todos los días aparecen nuevos proyectos creados con Electron.

¿Cuáles son los requisitos para aprender a crear aplicaciones de escritorio con Electron?

No se requiere ser un programador con muchos conocimientos en desarrollo de aplicaciones de escritorio. Sin embargo si se recomienda tener conocimientos previos de programación.
Conocer previamente como utilizar los diferentes lenguajes utilizados para crear aplicaciones en electron HTML, CSS, JavaScript.
Haber utilizado Node.js y tener conocimiento de como funciona su sistema de módulos.

¿Por qué debería aprenderá utilizar electron?

Una de las premisas importantes al momento de elegir que tecnología utilizar para escribir aplicaciones web, es el tener en cuenta que el código será ejecutado en la computadora de alguien mas. Esto quiere decir que no podemos por ejemplo asumir que el usuario tiene la versión mas reciente de un navegador que posee todas las características tecnológicas que nos gustaría poder utilizar. Puede ser incluso que el usuario tenga una versión del navegador de hace 10 años que no es capaz de reproducir muchas de estas capacidades que requerimos, en ese sentido cuando desarrollamos una aplicación buscamos elegir las características de los navegadores mas básicas y disponibles a través de toda la gama de navegadores existentes.

Cuando creas tu aplicación con Electron, dentro de esta aplicación hay una copia del navegador Chromium así como de Nodejs, de esta forma todas las características que se deseen utilizar estarán disponibles para su uso. No es necesario preocuparse por que versión de software el usuario esta utilizando y si esta disponible o no alguna de estas características. Electron por lo general incluye la versión mas reciente de Chromium, es decir que en el peor escenario la versión incluida tendrá una o dos semanas de haber sido liberada.

Reutilización de tecnologías para el web

Si eres un programador web lo mas probable es que estés familiarizado con el grupo de tecnologías utilizadas por electron para construir aplicaciones de escritorio. Esto quiere decir que conoces como utilizar lenguajes como html, css y javascript. Si es así entonces electron será de tu total agrado debido a que no requieres aprender nuevos lenguajes de programación para poder crear aplicaciones de escritorio.

Aprender lenguajes de programación nuevos implica muchas veces también asimilar nuevos conceptos de paradigmas de programación, aprender los frameworks que estos lenguajes desconocidos utilizan e incluso editores de código aptos para programar en ellos.

El poder reutilizar el mismo equipo de trabajo que desarrolla aplicaciones web para poder crear aplicaciones de escritorio, nos permite mantener un presupuesto reducido, ahorrar costos y expandir la audiencia que utiliza nuestros productos.

Acceso a los recursos del sistema operativo

Las aplicaciones desarrolladas en electron al igual que cualquier otra aplicación requiere que se utilice el sistema de archivos del sistema operativo para ser almacenada/instalada, en ese sentido no tiene diferencia alguna con cualquiera de las aplicaciones instaladas en el sistema operativo. De igual manera las aplicaciones creadas en Electron pueden realizar acciones como crear o guardar archivos, mostrar menos emergentes, recibir archivos que han sido arrastrados desde el sistema operativo e interactuar con ellos, entre otros eventos y acciones que suelen realizar otras aplicaciones.

La creación de menús desplegables es bastante sencilla y las acciones realizadas al interactuar con estos se realiza mediante la API de Chromium. Crear un menú principal o uno desplegable con el botón derecho del mouse son tareas que se realizan fácilmente dentro de Electron.

A diferencia de otras plataformas para crear aplicaciones de escritorio, Electron no esta limitado a vivir dentro de ventanas, es posible tambien crear aplicaciones que viven en la barra de tareas dentro de la bandeja de esta (system tray), que es el área donde ciertas aplicaciones se mantienen o podemos visualizar información del sistema como porcentaje de la carga de la batería o el listado de redes inalámbricas alrededor nuestro.

Ademas de las posibilidades antes mencionadas, Electron puede también obtener información específica del modo de operación del equipo, es decir que puede comportarse de forma diferente detectando cuando un equipo opera conectado a la corriente eléctrica y cuando esta en modo batería. De esta forma puede administrar los recursos de procesamiento (cpu) en estos dos diferentes escenarios.

Menos restricciones al acceder a los recursos

Las aplicaciones de escritorio tienen menores restricciones que el navegador en relación a lo que tienen permitido realizar en el sistema operativo del usuario. Incluso con el paso del tiempo algunos plugins como Flash o los Applets de Java fueron siendo restringidos mas y mas. Como resultado de todo esto lo que se puede hacer mediante una página web hoy en dia, es desplegar una serie de información con unos permisos muy limitados del navegador a los recursos del sistema.

Las restricciones se hacen incluso extensas a recursos como las peticiones Ajax. Si un usuario visita mi sitio web, yo no puedo indicarle al código JavaScript embedido en mi dominio que haga peticiones a otro dominio, ya que las políticas de seguridad del navegador me impiden hacerlo. Esto previene que un sito A no explote los recursos del navegante para hacer peticiones masivas a un sitio B.

Cuando ejecutamos una aplicación creada con electron estas medidas de seguridad no existen, ya que se asume que al instalar la aplicación el usuario ha concedido los privilegios de acceso a los recursos del sistema.

¿Cómo funciona una aplicación creada en Electron?

Las aplicaciones creadas en electron utilizan dos tipos de procesos: el proceso principal o padre y los procesos secundarios o hijos. Si bien parecería que uno es mas importante que los otros, ambos requieren entre sí para poder completar las diferentes operaciones. Cuando una aplicación inicia, electron analiza el archivo package.json y busca el valor de entry para ejecutar el script de inicialización. Este se convierte en el proceso principal o padre.

El proceso principal: En el proceso principal se delegan ciertas responsabilidades que forman parte del ciclo de vida de una aplicación electron, esto quiere decir que es capaz de manjar eventos como inicializar y detener la aplicación o enviarla operar en segundo plano. Este proceso también se encarga de comunicarse con el sistema operativo, por lo cual es el que interactúa con este al momento de abrir/guardar algún archivo.
Los procesos secundarios: Estos son creados por el proceso principal utilizando el modulo Browser-Window. Estos procesos pueden abrir paginas web que funcionan como interfaces. Cada proceso saca ventaja de la arquitectura de procesos múltiples de Chromium, de tal forma que cada subproceso utiliza una tarea o hilo distinto en el cual puede ejecutar un archivo JavaScript diferente el cual tiene acceso a la gama de recursos del sistema operativo mediante el uso de paquetes de Node.

Electronjs vs NW.js vs Java vs C#

Existe un proyecto similar a Electron llamado NW.js (anteriormente llamado node-webkit). Ambos proyectos comparten ciertas similitudes en la manera en la que funcionan, incluso el creador de Electron contribuyó bastante al desarrollo de NW.js. NW.js es un fork de Chromium, es decir que para su creación se ha clonado el proyecto original de Chromium. Electron por su parte utiliza Chromium y Nodejs pero no realiza ninguna modificación de estos, favoreciendo así que las actualizaciones de Chromium y Node sean portadas con mayor facilidad. Otra de las diferencias sustanciales es que Electron mantiene un reporte de fallos que reporta a un repositorio centralizado de logs, NW.js no monitorea dichos errores.

Las aplicaciones en NW.js inician a partir de una página HTML que es desplegada. No importa cuantas ventanas existan, a diferencia de Electron que mantiene un proceso de Node para cada ventana, NW.js utiliza el mismo proceso de Node para todas ellas.

En términos de retrocompatiblidad, las aplicaciones NW.js tienen mayor soporte para sistemas operativos viejos, esto quiere decir que pueden ser ejecutadas en equipos con WindowsXP y Windows Vista, Electron solo puede ser instalado en equipos con Windows 7 o versiones mas nuevas.

Para propósitos de multimedia, NW.js requiere que se instalen las librerías por separado y se configuren manualmente, mientras que Electron que permite elegir una mayor cantidad de codecs para procesar imágenes y video sin tener que realizar pasos adicionales.