In english

¿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.

  1. 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.
  2. 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:

  1. 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.
  2. 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?

Continuar leyendo 

El siguiente paso, es el de crear un proyecto:

Crear un proyecto en Electron.js

Continuar leyendo 

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

Continuar leyendo 

Una vez creado el proyecto, debemos de conocer como crear nuestros primeros componentes, especificamente el proceso de reenderizado y proceso principal:

Primeros pasos con Electron.js

Continuar leyendo 

Comencemos creando nuestras primeras aplicaciones en Electron.js:

Segunda aplicación creada en Electron.js: HTML y un poco de CSS

Continuar leyendo

Primera app con Electron, creando una ventana

Continuar leyendo 

Electron tiene una API muy interesante para trabajar con los menus:

Menús multiplataforma en Electron js

Continuar leyendo 

Finalmente, Electron es un framework que se mantiene actualizado, por lo tanto, aprende a actualizar el framework:

Actualizar a la última versión de Electron js mediante Node

Continuar leyendo 

Para muchos desarrollos, es importante habilitar la integración con Node, de esta forma, podremos emplear Node desde el proceso de reenderizado:

Habilitar la integración con Node en Electron.js

Continuar leyendo 

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:

Atajos de teclado: Shortcut en Electron.js

Continuar leyendo 

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:

Comunicación entre procesos en Electron.js

Continuar leyendo 

Como siguiente paso, generaremos nuestra aplicación para producción:

Generar una aplicación para producción en Electron.js

Continuar leyendo 

Finalmente, tenemos varios tutoriales en donde vamos creando una app reducida de un listado de elementos:

Experimentos con HTML y CSS, parte 2 en Electron.js 5

Continuar leyendo

Debug (devTools) de la aplicación en Chrome Electron.js 7

Continuar leyendo

Crear un listado de contactos con Electron.js y Bootstrap 5 8

Continuar leyendo

Crear un listado de chats con Electron.js y Bootstrap 5 9

Continuar leyendo

Caja de texto, app tipo chat en Electron.js 10

Continuar leyendo

Crear contactos en base a un array de objetos en Electron js 11

Continuar leyendo

Comunicar proceso principal con el proceso de renderizado 15

Continuar leyendo

Inicializar listados entre el proceso principal y el proceso de renderizado en Electron JS 16

Continuar leyendo 

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:

  1. 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.
  2. 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:
Ver Listado »

Acepto recibir anuncios de interes sobre este Blog.

!Cursos desde!

10$

En Udemy

Quedan 3d 01:57!


Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!