¿Qué es el Electron?
Electron es un framework de código abierto para crear aplicaciones de escritorio multiplataforma con tecnología web; es decir: HTML, CSS y JavaScript; al estar integrada como un módulo de Node, podemos usar todo el poderío de Node para nuestra aplicación; componentes como base de datos, Api Rest, frameworks CSS como Bootstrap o Tailwind y un largo etc, lo podemos integrar en una aplicación en Electron.
Está desarrollado y mantenido por GitHub y es el framework gráfico detrás de muchos proyectos de código abierto muy importantes de la actualidad como Atom, Visual Studio Code, Discord y Whatsapp.
Sobre Electron
El secreto de Electron es una combinación de dos procesos; el proceso main o principal y el proceso renderer.
- El primer proceso, que es el main o principal es un proceso de Node.js; este proceso tiene acceso a varias APIs de Electron.js con el cual, podemos comunicarnos con el Sistema Operativo.
- El segundo proceso, es el de renderer el cual usa Chromium; este proceso tiene un Node.js incluido y con esto, acceso a todos sus módulos.
Chromium, un proyecto de código abierto detrás del navegador Google Chrome y Node.js, un tiempo de ejecución de JavaScript basado en el motor de JavaScript V8 de Chrome.
Electron usa Chromium para el frontend y Node.js para el backend. Proporciona un amplio conjunto de interfaces o APIs con las cuales poder acceder al sistema operativo y con las cuales, permiten a nosotros, los desarrolladores crear aplicaciones multiplataforma que comparten un mismo código HTML, CSS y JavaScript.
En definitiva, puedes ver el proceso principal como el servidor, en el cual tenemos las conexiones a la base de datos y los accesos al sistema operativo, y el proceso de renderer, el lado del cliente, en el cual, armamos la pantalla para que el usuario final pueda interactuar; es importante señalar que podemos comunicar ambos procesos de manera directa.
Electron.js es un framework web con el cual, podemos crear aplicaciones de escritorio multiplataforma (no nativas) que funcionan en Windows, MacOS y Linux, con una envoltura web empleando JavaScript, HTML y CSS y sin necesidad de tener experiencia en desarrollo nativo.
Electron.js funciona mediante dos procesos:
- El de main, que es un proceso de Node, la aplicación en sí misma, en la cual tenemos acceso a algunos módulos provistos por la API de Electron.js (algunos que sirven para comunicarnos con el Sistema Operativo, por ejemplo, crear menús multiplataformas.
- El de renderer, que es un proceso de Chromium que adicionalmente, tiene un Node.js incorporado y acceso a todos sus módulos, desde este proceso, podemos desarrollar la UI de la aplicación.
Guía para dar los primeros pasos con Electron.js
Electron.js es un framework facinante e interesante si quieres crear aplicaciones de escritorio usando todo el poderio de Node.js; como primer punto, comencemos hablando sobre como funciona electron:
¿Cómo funciona el Electrón JS en la creación de aplicaciones de escritorio para Mac y Windows?
El siguiente paso, es el de crear un proyecto:
Antes de empezar a desarrollar, como comentamos antes, Electron.js es tecnologia web, especificamente JavaScript, por lo tanto, tener activo la consola de desarrolladores es fundamental:
Activar la consola de desarrolladores en Chrome (Debug) de una ventana en Electron.js
Una vez creado el proyecto, debemos de conocer como crear nuestros primeros componentes, especificamente el proceso de reenderizado y proceso principal:
Comencemos creando nuestras primeras aplicaciones en Electron.js:
Electron tiene una API muy interesante para trabajar con los menus:
Finalmente, Electron es un framework que se mantiene actualizado, por lo tanto, aprende a actualizar el framework:
Para muchos desarrollos, es importante habilitar la integración con Node, de esta forma, podremos emplear Node desde el proceso de reenderizado:
Ya conociendo como crear opciones a nuestros menús, es buena idea conocer como crear atajos de teclados para poder ejecutar funciones en base a combinación de teclas:
Poder comunicar el proceso principal con la página web es fundamental para poder garantizar la correcta integración de nuestra aplicación, en lugar de realizar peticiones axios para comunicarcar ambos procesos, lo hacemos de manera directa:
Como siguiente paso, generaremos nuestra aplicación para producción:
Finalmente, tenemos varios tutoriales en donde vamos creando una app reducida de un listado de elementos:
Inicializar listados entre el proceso principal y el proceso de renderizado en Electron JS 16
Curso y Libro para dominar Electron.js
En este libro y curso, vamos a conocer cómo está formado el framework, su API y que nos provee, las características básicas que nos permiten desarrollar con esta tecnología junto con otras tecnologías web para tener aplicaciones escalables usando todo el poderío de Node junto con Electron.
Estas guías tienen la finalidad de dar los primeros pasos con Electron.js; con esto, vamos a plantear dos cosas:
- No tiene por objetivo conocer al 100% Electron.js, o de cero a experto, ya que, sería un objetivo demasiado grande para el alcance de esta guía, si no conocer su ecosistema, que nos ofrece y cómo funciona el mismo en base a varios ejemplos y/o aplicaciones pequeñas con alcances limitados.
- Se da por hecho de que el lector tiene conocimientos al menos básicos en el lenguaje de programación de JavaScript, al igual que en tecnologías web como HTML y CSS y por supuesto Node.js.Estos son solamente algunos posts que estan disponibles y puedes ver todos los posts en el listado completo: