JavaScript es uno de los lenguajes de programación más comunes. El hecho de que se pueda usar tanto para el desarrollo de backend como de frontend lo ha convertido en un favorito para muchas personas. 

JavaScript tiene muchas bibliotecas y marcos que amplían sus casos de uso más allá de JavaScript simple (simple).

Electron.js es un poderoso marco de código abierto que brinda a los desarrolladores web la capacidad de desarrollar aplicaciones nativas con sus habilidades existentes. Este artículo le enseñará sobre Electron.js y cómo se puede utilizar para impulsar su próxima idea increíble.

Electron JS

Electron JS es un marco que los desarrolladores pueden usar para crear aplicaciones de escritorio usando HTML, CSS y JavaScript. Electron JS fue creado y es mantenido por GitHub. 

El marco es una combinación de Node.JS y Chromium, lo que permite a los usuarios mantener una base de código JavaScript y desarrollar aplicaciones de escritorio multiplataforma que pueden funcionar en Windows, macOS y Linux. 

La historia de Electron.js comenzó en enero de 2013. La idea original era crear un editor de texto multiplataforma que pudiera funcionar con JavaScript, HTML y CSS. 

Electron.js se llamó originalmente Atom Shell y se hizo de código abierto en 2014. Posteriormente, el proyecto pasó a llamarse Electron en abril de 2015, y su primera API se lanzó en 2016. 

Características de Electron JS

  • Compatible con todas las bibliotecas y marcos de JavaScript . Vue.js, Angular y React.js son solo ejemplos de marcos de JavaScript que los desarrolladores pueden usar junto con Electron JS. Esta compatibilidad facilita el uso de las características/funcionalidades de estas bibliotecas y marcos al crear una aplicación Electron. 
  • Marco reutilizable . Satisfacer las necesidades de diferentes clientes puede ser costoso. Lo bueno de Electron JS es que se puede usar tanto para aplicaciones web como de escritorio. El código base único significa que también se puede usar en diferentes sistemas operativos. 
  • Tiene acceso a las API nativas . Los desarrolladores que trabajan en Electron JS tienen acceso a las API nativas de los sistemas operativos en los que operan. De este modo, los desarrolladores pueden crear aplicaciones de escritorio que tengan un acceso similar a funciones de bajo nivel, como mostrar notificaciones. 
  • Soporta tecnología web . Electron JS es adaptable, ya que los desarrolladores no necesitan aprender un nuevo lenguaje de programación para desarrollar aplicaciones. Por lo tanto, significa que si comprende un determinado paquete de idioma que ya usa para crear aplicaciones web, también puede usarlo para crear una aplicación de escritorio. 
  • Gestión de código y aplicaciones . No necesita mantener diferentes equipos para mantener aplicaciones y códigos para diferentes sistemas operativos. Electron JS le permite mantener la misma base de código para los sistemas operativos Linux, Windows y Mac. 
  • Fácil construcción/implementación . El administrador de paquetes Electron ayuda a los desarrolladores a empaquetar en sus respectivos paquetes. Por lo tanto, puede lanzar una aplicación de escritorio de Linux, Mac y Windows desde la misma base de código utilizando este administrador de paquetes. 

Arquitectura Electron JS

La arquitectura de Electron es muy similar a la de un navegador web moderno, ya que hereda su arquitectura multiproceso de Chromium.

La arquitectura de Electron comprende V8 JavaScript Engine, Node.JS y Libchromiumcontent.

  • Node.JS : un tiempo de ejecución de JavaScript de código abierto que se ejecuta en el motor de JavaScript V8. Node.JS permite a los desarrolladores ejecutar JavaScript fuera de la ventana del navegador. Node.JS también permite a los usuarios ejecutar código JavaScript sin formato a través de su shell interactivo.
  • Libchromiumcontent: una biblioteca de representación de Chromium de código abierto y mantenida por Google Chrome. Chrome tiene una interfaz de usuario minimalista y utiliza parpadeo como motor de diseño y V8 como motor de JavaScript. 
  • Motor JavaScript V8 : un motor JavaScript de código abierto escrito en C++ y JavaScript y desarrollado por Google. 

Herramientas de creación de aplicaciones Electron JS

#1. Nodo.js

Para comenzar con Electron JS, debe tener instalado  Node.js en su máquina local.

Seleccione la versión de nodo correcta según el sistema operativo que esté ejecutando en su computadora. 

Compruebe si Node.js se ha instalado correctamente ejecutando estos comandos;

node -v
npm -v

Si se instala correctamente, estos comandos mostrarán las versiones de nodo y npm, respectivamente. 

#2. Línea de comando 

La forma de acceder a la línea de comandos dependerá de su sistema operativo. 

  • Linux dependerá de la distribución.
  • Windows: PowerShell o símbolo del sistema.
  • mac OS: Terminal.

Algunos editores de código, como Visual Studio Code, vienen con una terminal integrada. 

#3. Editor de código

Necesita un editor de código para escribir su código Electron JS. Visual Studio Code es uno de los mejores que puede probar. 

Cómo instalar Electron JS

Paso 1: Cree un proyecto de node.js.

Use estos comandos para comenzar;

mkdir my-electron-app && cd my-electron-app
npm init

El comando npm init le pedirá que complete algunos campos, como el nombre de la aplicación, el punto de entrada y la descripción.

Puede elegir el nombre predeterminado de su carpeta como el nombre de su aplicación. Sin embargo, recuerde establecer el punto de entrada de su aplicación como main.js.

Los campos como autor y descripción pueden tomar cualquier valor. Su paquete.json se verá así una vez que haya terminado con estos pasos:

{
"name": "my-electron-app",

  "version": "1.0.0",

  "description": "Hello World!",

  "main": "main.js",

  "author": "Peter Drury",

  "license": "MIT"

}

Paso 2: Instalar electrón

Utilice este comando;

npm install --save-dev electron

Paso 3: agregue el comando 'iniciar' a su paquete.json

{

  "scripts": {

    "start": "electron ."

  }

}

Paso 4: Inicie su aplicación

Use este comando para iniciar su aplicación en modo de desarrollo

npm start

Proceso de trabajo de Electron JS

Continuaremos construyendo la aplicación a partir de la configuración que acabamos de hacer arriba. Una aplicación de Electron tiene dos tipos de procesos; principal y renderizador. 

El proceso principal

El guión principal es el punto de entrada de cualquier aplicación electrónica. La aplicación se ejecutará en un entorno completo de Node.js. Electron buscará el script principal en el archivo package.json que ya configuró durante el scaffolding de la aplicación. 

Cree main.js en la carpeta raíz para inicializar el script principal. Puedes hacerlo manualmente o usar este comando;

touch main.js

Puede agregar el siguiente código a main.js 

const { app, BrowserWindow } = require('electron');

const createWindow = () => {

 const win = new BrowserWindow({

   width: 800,

   height: 600,

 });

 win.loadFile('index.html');

};

app.whenReady().then(() => {

 createWindow();

 app.on('activate', () => {

   if (BrowserWindow.getAllWindows().length === 0) {

     createWindow();

   }

 });

});

app.on('window-all-closed', () => {

 if (process.platform !== 'darwin') {

   app.quit();

 }

});

Las páginas web en Electron se pueden cargar desde una dirección web remota o desde un archivo HTML local. Usaremos un archivo HTML local para fines de demostración. 

Cree un archivo index.html en su carpeta raíz. Siempre se proporciona el código para index.html, pero puede tenerlo como su código de inicio;

<!DOCTYPE html>

<html>

 <head>

   <meta charset="UTF-8" />

   <meta

     http-equiv="Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <meta

     http-equiv="X-Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <title>Hello from Electron renderer!</title>

 </head>

 <body>

   <h1>Hello from Electron renderer!</h1>

   <p>👋</p>

   <p id="info"></p>

 </body>

 <script src="./renderer.js"></script>

</html>

proceso de renderizado

Renderer renderiza contenido web. Los scripts de precarga vienen con un código que se ejecuta en un proceso de representación antes de que se necesiten los contenidos web que comienzan a cargarse.

Cree preload.js en su carpeta raíz y agregue este código;

window.addEventListener('DOMContentLoaded', () => {

  const replaceText = (selector, text) => {

    const element = document.getElementById(selector)

    if (element) element.innerText = text

  }

  for (const type of ['chrome', 'node', 'electron']) {

    replaceText(`${type}-version`, process.versions[type])

  }

})

Ejecute el servidor de desarrollo usando npm start, y esto es lo que se mostrará 

electrón

Ejemplos de aplicaciones: Electron JS

#1. Aplicación de escritorio Slack

Slack es una de las herramientas de colaboración remota más populares . Los usuarios pueden enviar y recibir mensajes, hacer llamadas y compartir archivos usando esta aplicación. Slack tiene aplicaciones web y de escritorio en los sistemas operativos Mac, Linux y Windows. La aplicación de escritorio de Slack utiliza el motor Chromium y Node.js para generar código de alta calidad. 

#2. Aplicación de escritorio de WordPress

WordPress es el mayor sistema de gestión de contenidos. El hecho de que pueda lanzar un sitio web incluso sin conocimientos básicos de codificación ha atraído a muchos usuarios. Se puede acceder a WordPress a través del navegador y a través de aplicaciones de escritorio en Mac, Linux y Windows. El escritorio renovado de WordPress usa Electron JS. 

#3. Aplicación de escritorio WhatsApp

WhatsApp es una de las aplicaciones de mensajería más populares del mundo moderno, ya que la utilizan más de 2000 millones de personas. WhatsApp se diseñó originalmente como una aplicación móvil, pero ahora ha pasado a ser una plataforma multidispositivo. El escritorio de WhatsApp utiliza Electron JS y está disponible en los principales sistemas operativos. 

#4. código de estudio visual

Visual Studio Code , propiedad de Microsoft, se encuentra entre los editores de código más populares. Visual Studio Code es compatible con HTML, CSS y código escrito en varios lenguajes de programación, como JavaScript, Python, PHP, Java y Ruby, por mencionar algunos. La aplicación de escritorio, creada con Electron JS, está disponible para los sistemas operativos Windows, Mac y Linux. 

Recursos de aprendizaje: Electron JS

#1. Documentación oficial de Electronjs

La documentación de Electronjs es creada y mantenida por Electronjs.org. Aprenderá qué es Electron JS, cómo configurar su primera aplicación Electron y cómo crear aplicaciones de escritorio multiplataforma utilizando diversas tecnologías. La documentación siempre se actualiza cada vez que se introduce una mejora o una nueva característica. 

#2. Master Electron: aplicaciones de escritorio con HTML, JavaScript y CSS

Maestro-electrón

Master Electron es un curso pago en Udemy que te presenta a Electron JS. Aprenderá a crear aplicaciones de escritorio para diferentes sistemas operativos, como Mac, Linux y Windows. Master Electron también es el recurso perfecto si desea comprender todo el proceso de API de Electron. 

#3. Tutorial de reacción de electrones 

Electron-React-Tutorial-

Electron React es un curso pago en Udemy que enseña a los desarrolladores cómo crear aplicaciones Electron usando React.js. React es una de las bibliotecas de JavaScript más famosas y fue creada por Meta (anteriormente Facebook). 

Terminando

Electron JS es una impresionante biblioteca de JavaScript para crear aplicaciones de escritorio en un mundo moderno donde se deben adoptar aplicaciones multiplataforma. El hecho de que pueda usar HTML, CSS y JavaScript significa que los desarrolladores no tienen que aprender nuevas pilas de tecnología para crear tales aplicaciones. La presencia de una comunidad grande y solidaria también es una ventaja, ya que siempre tienes apoyo garantizado.