Electron, crea tu aplicación de escritorio de forma rápida y sencilla.

Electron fue desarrollado en 2013 por una gran empresa de código abierto y control de versiones, GitHub. Actualmente es mantenido por esta misma empresa y una comunidad nativa de colaboradores.

GitHub se conoce por su sitio “social coding”. Te permite subir repositorios de código para almacenarlo en el sistema de control de versiones Git. Por ello el respaldo que tiene el framework electronjs está bastante consolidado, es una característica importante a la hora de elegirlo.

¿Qué es Electron y qué permite hacer este framework?

Electron es un framework o marco de trabajo que permite convertir, desarrollar y crear aplicaciones de escritorio usando lenguajes web como JavaScript, HTML y CSS. Estos 3 lenguajes son los preferidos por la mayoría de desarrolladores a la hora de diseñar e implementar aplicaciones de todo tipo, tanto web como de escritorio.

Gracias a Electron podemos crear aplicaciones multiplataforma con una base de código JavaScript que funcionan tanto en Windows, macOS y Linux.

¿Cuáles son las ventajas y características de crear una aplicación de escritorio con Electron?

Eficiencia y respaldo

Porque es una de las maneras más rápidas y eficientes de desarrollar una aplicación de escritorio multiplataforma, aparte de que el autor de electron es GitHub. 

Quien se ha ocupado de su creación y actualmente de su mantenimiento, es decir, que tiene muy buen respaldo y ser unas de las elecciones preferidas para los desarrolladores y clientes que quieran tener una aplicación de escritorio multiplataforma y de código abierto.

Organización de códigos y aplicaciones

Como propietario no tendrás un costo de un equipo de desarrollo de cada plataforma ( Windows, macOS, Linux ) ya que solo necesita un desarrollo y un código base para todas las plataformas. 

Como desarrollador, solo tendrá una base de código, y en lo único que se tendrá que fijar, es que el código funcione correctamente en cada plataforma. Este puede recibir algún error a nivel de sistema operativo, y solucionarlo en la base del código base que tiene.

Reutilización del código base

Codificando una sola vez, podremos distribuir nuestro código, en todos los sistemas operativos ( Windows, macOS, Linux ).

Ahorro de tiempo y dinero 

Como la base del código es única, se ahorra mucho tiempo a la hora de desarrollar una solución, y esto conlleva a reducir el costo de la solución. 

Siguiendo esta línea, al no necesitar mucha experiencia para desarrollar con Electron y tener un lenguaje base como javascript, tenemos un gran mercado de desarrolladores que podrían desempeñar la función de desarrollar una aplicación de escritorio multiplataforma con Electron.

Construcción y despliegue de la aplicación

Una vez configurado todo el proyecto con Electron, con un simple comando podremos compilar el proyecto en los diferentes sistemas operativos. Electron se ocupa de crear nuestro .dmg para macOS, .exe para Windows y .dev para linux. 

La librería electron-builder se ocupará de compilar nuestra aplicación con la extensión requerida para cada sistema operativo. Hay que tener en cuenta, que cada S.O. utiliza una extensión distinta para representar la imagen. 

El inconveniente existente a la hora de generar nuestra aplicación para macOS es que necesitaremos hacerlo en un ordenador con un sistema operativo macOS.

Tecnologías web de interfaz (UI / UX)

Electron brinda múltiples tecnologías para hacer una excelente interfaz y asegurarte que tienes dicha interfaz en las diferentes plataformas. 

Podemos verlo en otras aplicaciones hechas en Electron, como: Whatsapp, Twitch, Microsoft Teams, Visual Studio Code. Son aplicaciones creadas con Electron y que tienen una interfaz excelente.

Transformación digital

Con Electron podríamos transformar nuestras páginas web basadas en JavaScript y Node.js en una aplicación de escritorio. Con una breve configuración, reaprovecharíamos nuestro código que actualmente se utiliza para representar una página web en los diferentes navegadores y crearíamos una aplicación de escritorio para los diferentes sistemas operativos. 

Como ejemplo podemos tener una página web creada con React y/o Angular y sin la necesidad de picar más código. Bastaría introducir unas pocas instalaciones y configuraciones Electron en nuestro proyecto, para tener nuestra aplicación de escritorio.

Fácil codificación

Electron te facilita un sistema de notificaciones para los diferentes sistemas operativos y así poder recibir nuestras notificaciones al igual que lo harías en una página web.

Crear menús nativos y contextuales, que por defecto Electron crea los siguientes: Archivo, Editar, Ver, Ventana y Ayuda

Generar informes de nuestra aplicación de escritorio

Electron al estar basado en chromium, te permite abrir las herramientas de desarrollo de Chrome, como si fuera una página web. Es decir, que podríamos tener el inspector que tiene chrome en nuestra aplicación de escritorio.

¿Cuáles son los principales procesos de Electron?

Proceso principal: Es el autor de representar las diferentes ventanas utilizando instancias de BrowserWindow. 

BrowserWindow se encarga de crear una representación de una página web, que representaría la ventana de la aplicación que veríamos en nuestro escritorio. 

Este proceso es de Node.js y ayuda a comunicarse con el sistema operativo y realizar distintas acciones o efectos.

Proceso de renderizado: Es el encargado de mantener diversos procesos de renderizado. Los diferentes procesos de representación se encargan de administrar la página web y los diferentes scripts que se ejecutan dentro de ella. 

Este proceso nos permitiría usar React.js , Angular.js, etc. por lo que desde nuestro proceso podemos usar diversos módulos.

Requisitos para desarrollar con Electron

1. Para la parte visual utilizaremos HTML y CSS
2. Para la parte de nuestra lógica usaremos JavaScript
3. Para la parte de paquetes y procesos utilizaremos Node.js y npm

Conclusiones 

Electron permite de forma eficaz y eficiente crear una aplicación de escritorio para todos los sistemas operativos, con un desarrollo y base de código únicos. 

Esto permite un ahorro importante al tener un solo equipo de desarrollo ya que es multiplataforma, algo parecido al transformar tu página web en una aplicación de escritorio. 

Además, es un desarrollo sencillo, al estar basado en un lenguaje tan usado y conocido como es JavaScript. Este lenguaje no solo es popular, también tiene un respaldo consolidado con GitHub y con el uso de las grandes empresas como; Whatsapp, Twitch, Visual Studio Code, etc.

En Enzyme sabemos adaptarnos a los deseos de los clientes y potenciar su desarrollo de transformación digital mediante el desarrollo de tecnologías como las aplicaciones web. Tanto si necesitas ayuda para crear desde 0 una app o bien convertir herramientas de lenguajes como JavaScript en Electron, no dudes en ponerte en contacto con nosotros en este enlace.