ūüĒ• 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.