Introducción a Electron JS: guía completa y recursos de aprendizaje
By
tito kamunya
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.
electrón js
electrón 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 mezcla de Nodo.JS y Chromium, 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.
- Nodo.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.
- 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. Node.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 -vnpm -vSi 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.
- 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 puedes 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-appnpm initEl 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 electronPaso 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 startProceso 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.jsPuede 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á
Ejemplos de aplicaciones: Electron JS
#1. Aplicación de escritorio Slack
Flojo es uno de los más populares herramientas de colaboración remota. 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 2 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. Visual Studio Code
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
Documentación de electronjs es creado y mantenido 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
electrón maestro 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
Reacción de electrones 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).
Resumen
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.
También puede explorar algunos mejores marcos de JavaScript para construir una aplicación moderna en menos tiempo.
