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 muchos bibliotecas y marcos que expanden 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.
ElectronJS
electrón js es un marco que los desarrolladores pueden utilizar para crear aplicaciones de escritorio utilizando HTML, CSS y JavaScript. Electron JS fue creado y mantenido por GitHub .
El marco es una combinación de Nodo.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 originalmente se llamaba 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 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.
- Hombresable marco . Atender las necesidades de diferentes clientes puede resultar costoso. Lo bueno de Electron JS es que se puede utilizar tanto para aplicaciones web como de escritorio. La base de código única significa que también se puede utilizar 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 acceso similar a funciones de bajo nivel, como mostrar notificaciones.
- Soporte 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 es necesario 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 de Electron ayuda a los desarrolladores a empaquetar en sus respectivos paquetes. Por lo tanto, puede lanzar una aplicación de escritorio para 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.
- Nodo.JS : un tiempo de ejecución de 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 código JavaScript sin formato a través de su shell interactivo.
- contenido de libcromo- 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 Node.js instalado 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 -vCopiar
npm -vCopiar
Si se instala correctamente, estos comandos mostrarán las versiones de nodo y npm, respectivamente.
#2. Línea de comando
Cómo accedes a la de línea de comandos dependerá de su sistema operativo.
- Linux dependerá de la distribución.
- Windows: PowerShell o símbolo del sistema.
- macOS: Terminal.
Algunos editores de código, como Visual Studio Code, vienen con un terminal integrado d.
#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 puedes probar.
Cómo instalar Electron JS
Paso 1: Crea un proyecto node.js.
Use estos comandos para comenzar;
mkdir my-electron-app && cd my-electron-appCopiar
npm initCopiar
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.
Campos como autor y descripción pueden aceptar 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"
}Copiar
Paso 2: Instalar electrón
Utilice este comando;
npm install --save-dev electronCopiar
Paso 3:Agregue el comando ‘iniciar’ a su paquete.json
{
"scripts": {
"start": "electron ."
}
}Copiar
Paso 4: Inicie su aplicación
Use este comando para iniciar su aplicación en modo de desarrollo
npm startCopiar
Proceso de trabajo de electrones JS
Continuaremos construyendo la aplicación a partir de la configuración que acabamos de realizar anteriormente. Una aplicación de Electron tiene dos tipos de procesos; principal y renderizador.
El principal Process
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.jsCopiar
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();
}
});Copiar
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 código inicial;
<!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>Copiar
proceso de renderizado
El renderizador representa contenido web. Los scripts de precarga vienen con código que se ejecuta en un proceso de renderizado antes de que se necesite que el contenido web comience 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])
}
})Copiar
Ejecute el servidor de desarrollo usando npm start, y esto es lo que se mostrará
Ejemplos de aplicaciones: Electron JS
#1. Slack aplicación de escritorio
Slack es una de las herramientas de colaboración remota más populares . Los usuarios pueden enviar y recibir mensajes, realizar llamadas y compartir archivos mediante esta aplicación. Slack tiene aplicaciones de escritorio y basadas en web en 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 sistema de gestión de contenidos más grande. El hecho de que se pueda iniciar 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 de WordPress renovado utiliza Electron JS.
#3. Aplicación de escritorio WhatsApp
WhatsApp se encuentra entre las aplicaciones de mensajería más populares del mundo moderno, ya que la utilizan más de 2 mil 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 admite 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.