ūü•á Introducci√≥n al uso de Electron

ūüćŅ Qu√© es Electron?

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 detras de Google Chrome).

Electron tambien permite que eun equipo de trabajo sea mas productivo al solo tener que enfocarse en un solo desarrollo que cubra multiples 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. Simultaneamente 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 estan restringidas para el navegador. Por ejemplo es posible crear una aplicacion que pueda no solo explorar sino tambien 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 moviles 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?

ūüćŅ Qu√© 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, asi 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, estan 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 estubo 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 orbita de Nodejs. Al dia de hoy se pueden encontrar cientos de miles de librerias en NPM el sistema de paquetes de node.

ūüćŅ Qu√© empresas utilizan Electron?

Electron es actualmente utilizado por compa√Īias 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√Īias.

ūüćŅ Qu√© software ha sido creado utilizando Electron?

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

ūüćŅ Cu√°les son los requisitos para aprender a crear aplicaciones de escritorio con Electron?

ūüćŅ Por qu√© deber√≠a aprendera 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 gusta√≠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 estes 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 tambien 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 desarolla aplicaciones web para poder crer 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 menus desplegables es bastante sencilla y las acciones realizadas al intereactuar con estos se realiza mediante la API de chromium. Crear un menu principal o uno desplegable con el botón derecho del mouse son tareas que se realizan facilmente 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 inalambricas alrededor nuestro.

Ademas de las posibilidades antes mencionadas, Electron puede tambien 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 accesder 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 codigo 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 interactua con este al momento de abrir/guardar algun 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 elctron 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 asiq ue 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 terimnos 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 propositos de multimedia, NW.js requiere que se instalen las librerias 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.

Vista general de un proyecto en Electron
comments powered by Disqus