JavaScript es uno de los lenguajes de programación más utilizados. El hecho de que se pueda usar tanto para el desarrollo del lado del servidor como para el front-end lo ha convertido en el favorito de muchas personas.

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

Electron. js es una poderosa plataforma de código abierto que brinda a los desarrolladores web la capacidad de desarrollar aplicaciones nativas utilizando sus habilidades existentes. Este artículo le enseñará sobre Electron. js y cómo puede usarlo para realizar su próxima idea increíble.

Electron JS

Electron JS es una plataforma 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 única base de código JavaScript y desarrollar aplicaciones de escritorio multiplataforma que pueden ejecutarse 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 convirtió en 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 con Electron JS. Esta compatibilidad facilita el uso de las características/funciones de estas bibliotecas y marcos al crear una aplicación Electron.
• Marco reutilizable. Satisfacer las diferentes necesidades de los clientes puede resultar costoso. La ventaja de Electron JS es que se puede utilizar tanto para aplicaciones web como de escritorio. Una única base de código significa que se puede utilizar en diferentes sistemas operativos.
• Tiene acceso a sus propias API. Los desarrolladores que trabajan en Electron JS tienen acceso a las API nativas de los sistemas operativos en los que trabajan. Por lo tanto, los desarrolladores pueden crear aplicaciones de escritorio que tengan un acceso similar a funciones de bajo nivel, como mostrar notificaciones.
• Admite tecnologías web. Electron JS es fácilmente adaptable porque los desarrolladores no necesitan aprender un nuevo lenguaje de programación para desarrollar aplicaciones. Por lo tanto, esto significa que si comprende un paquete de idioma particular que ya usa para crear aplicaciones web, también puede usarlo para crear una aplicación de escritorio.
• Código y gestión de aplicaciones. No necesita mantener diferentes comandos para mantener aplicaciones y código para diferentes sistemas operativos. Electron JS le permite mantener la misma base de código para los sistemas operativos Linux, Windows y Mac.
• Facilidad de construcción/implementación. Electron’s Package Manager ayuda a los desarrolladores a empaquetar los paquetes apropiados. Por lo tanto, puede lanzar una aplicación de escritorio para Linux, Mac y Windows de la misma base de código utilizando este Administrador de paquetes.

Arquitectura de Electron JS

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

La arquitectura de electrones incluye JavaScript Engine V8, Node. js y LibchromiumContent.

• Node. js es un entorno de tiempo de ejecución JavaScript de código abierto que se ejecuta en el motor 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 el código JavaScript sin procesar a través de un shell interactivo.
• LibChromiumContent es una biblioteca de renderizado de Chromium de código abierto compatible con Google Chrome. Chrome tiene una interfaz de usuario minimalista y usa Blink como motor de diseño y V8 como su motor JavaScript.
• V8 JavaScript Engine es un motor JavaScript de código abierto escrito en C ++ y JavaScript y desarrollado por Google.

№1. Node. js.

Para comenzar con Electron JS, debe instalar Node. js en su computadora local.

Elija la versión correcta del nodo dependiendo del sistema operativo instalado en su computadora.

Verifique que Node. js se instale correctamente ejecutando estos comandos;

nod o-v

np m-v

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

№ 2. Línea de comando

El acceso a la línea de comando depende de su sistema operativo.

• Linux dependerá de la distribución.

• Windows: PowerShell o la línea de comando.
• MacOS: Terminal.

Algunos editores de código, como Visual Studio Code, vienen con un terminal incorporado.

№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 programas que puedes probar.

Cómo instalar Electron JS

Paso 1: Cree un proyecto de node. js.

Use estos comandos para comenzar;

mkdir my-electron-app & amp;& amp; cd my-electron-aplicación

inicio npm

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 su nombre de carpeta predeterminado como el nombre de su aplicación. Sin embargo, no olvide configurar el punto de entrada de su aplicación como main. js.

Los campos como el autor y la descripción pueden tomar los valores que desee. Su paquete. json se verá así una vez que siga los pasos a continuación:

Paso 2: Instalar electrón

Utilice este comando;

npm install --save-dev electrón

Paso 3: agregue el comando de inicio a su paquete. json

Paso 4: Ejecute la aplicación

Utilice este comando para iniciar la aplicación en modo de desarrollo.

inicio de npm

Flujo de trabajo de Electron JS

Continuaremos creando la aplicación en función de las personalizaciones que acabamos de realizar anteriormente. La aplicación Electron tiene dos tipos de procesos; principal y renderizador.

El proceso principal es.

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á la secuencia de comandos principal en el archivo package. json que ya ha personalizado al crear la plantilla de la aplicación.

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

toque main. js

Puede agregar el siguiente código a main. js

constante< 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 el archivo HTML local con fines de demostración.

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

     
¡Hola desde el renderizador Electron!
 
👋
   

El proceso de renderizado

El renderizador renderiza el contenido web. Los scripts de precarga vienen con un código que se ejecuta durante el proceso de renderizado antes de que el contenido web comience a cargarse.

Cree preload. js en la 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 tipo de ['chrome', 'node', 'electron'])< replaceText(`$-version`, process.versions[type]) > >)

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

Aplicaciones de ejemplo: Electron JS

№1. Aplicación Slack para escritorio

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

№ 2. Aplicación de escritorio de WordPress

WordPress es el sistema de gestión de contenido más grande. El hecho de que pueda lanzar un sitio web incluso sin habilidades básicas de programación ha atraído a muchos usuarios. Se puede acceder a WordPress a través de aplicaciones de navegador y escritorio en Mac, Linux y Windows. El escritorio de WordPress actualizado utiliza Electron JS.

№3. Aplicación de escritorio de whatsapp

WhatsApp es una de las aplicaciones de mensajería más populares del mundo hoy, ya que más de 2 mil millones de personas lo usan. WhatsApp se desarrolló inicialmente como una aplicación móvil, pero ahora se ha convertido en una plataforma para diferentes dispositivos. WhatsApp Desktop utiliza Electron JS y está disponible en los principales sistemas operativos.

№ 4. Código de Visual Studio

Visual Studio Code, propiedad de Microsoft, es uno de los editores de código más populares. Visual Studio Code admite HTML, CSS y código escritos en varios lenguajes de programación como JavaScript, Python, PHP, Java y Ruby, por nombrar algunos. La aplicación de escritorio creada con Electron JS está disponible para 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 varias tecnologías. La documentación siempre se actualiza cada vez que se introducen mejoras o nuevas características.

№ 2. Electron maestro: aplicaciones de escritorio con HTML, JavaScript y CSS

Master Electron es un curso pagado en Udemy que le presenta a Electron JS. Aprenderá a crear aplicaciones de escritorio para varios sistemas operativos como Mac, Linux y Windows. Master Electron también es un recurso ideal si desea comprender todo el proceso de la API de electrones.

№3. Tutorial de React Electron

Electron React es un curso pagado sobre Udemy que enseña a los desarrolladores cómo construir aplicaciones de electrones usando React. js. React es una de las bibliotecas JavaScript más famosas creadas por Meta (anteriormente Facebook).

Para resumir

Electron JS es una increíble biblioteca de JavaScript para crear aplicaciones de escritorio en el mundo actual donde necesita usar aplicaciones multiplataforma. El hecho de que pueda usar HTML, CSS y JavaScript significa que los desarrolladores no necesitan aprender nuevas pilas de tecnología para construir estas aplicaciones. Tener una comunidad grande y de apoyo también es una ventaja, ya que siempre tiene apoyo garantizado.

También puede aprender algunos de los mejores marcos de JavaScript para crear una aplicación moderna en menos tiempo.