Publicado · en mejora
Framework · Desde 2013
Electron es un framework de código abierto para crear aplicaciones de escritorio para Windows, macOS y Linux con JavaScript, HTML y CSS.
Electron es un framework de código abierto para crear aplicaciones de escritorio con tecnologías web. Integra Chromium para el renderizado y Node.js para acceder al sistema operativo en un único entorno de ejecución, de modo que una misma base de código se distribuye como aplicación para Windows, macOS y Linux. Nació en GitHub en 2013 como Atom Shell, la base del editor Atom, y hoy es un proyecto de la OpenJS Foundation.
Electron destaca cuando un equipo con experiencia web necesita una aplicación de escritorio en poco tiempo. Es la base de las versiones de escritorio de Visual Studio Code, Slack y Discord, y permite reutilizar frameworks web como React o Vue junto con todo el ecosistema de npm. Como cada aplicación incluye su propia copia de Chromium, los instaladores y el consumo de memoria suelen ser mayores, algo que conviene valorar desde el principio.
Para empezar, instala Node.js y crea un proyecto con Electron Forge o añade el paquete electron a un proyecto vacío. El tutorial oficial explica paso a paso el proceso principal, los scripts de precarga y el renderizador, y cómo se comunican mediante IPC. Electron Fiddle permite ejecutar pequeños ejemplos sin configurar nada, una forma rápida de conocer las API.
Chromium muestra tu HTML y CSS, mientras el proceso principal usa Node.js para acceder al sistema de archivos, la red y otras funciones del sistema.
El mismo código JavaScript o TypeScript se convierte en una aplicación para Windows, macOS y Linux, empaquetada con el instalador propio de cada plataforma.
Ventanas, menús, iconos de bandeja, notificaciones, diálogos de archivos, portapapeles y actualizaciones automáticas están disponibles como API de JavaScript.
Los procesos principal y de renderizado están separados, y el aislamiento de contexto con scripts de precarga expone solo lo que la interfaz necesita.
Electron se instala y ejecuta mediante Node.js y npm. Instala una versión LTS de Node.js y comprueba que se muestran ambas versiones.
node -v && npm -vCrea un package.json en una carpeta nueva e instala electron como dependencia de desarrollo. Después, establece el campo main en main.js y añade un script start que ejecute electron .
mkdir my-electron-app && cd my-electron-app && npm init -y && npm install --save-dev electronSi quieres un proyecto que ya incluya empaquetado y publicación, usa el comando de creación de Electron Forge, la herramienta oficial. Dentro de la carpeta generada, npm start abre la aplicación.
npm init electron-app@latest my-appmain.js es el punto de entrada del proceso principal. Cuando la aplicación está lista, crea una BrowserWindow de 800×600 y carga index.html desde la misma carpeta. En macOS es habitual que las aplicaciones sigan abiertas al cerrar la última ventana, por eso la aplicación solo se cierra en las demás plataformas. Coloca un index.html sencillo junto a main.js y ejecuta npm start.
main.js
const { app, BrowserWindow } = require('electron')
function 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()
})
npm init -y
npm install --save-dev electron
npm pkg set main=main.js scripts.start="electron ."
npm startSeis capítulos que te llevan desde la instalación hasta las ideas clave de Electron.
Haz preguntas, comparte tu experiencia e intercambia opiniones sobre Electron.
Todavía no hay debates. Empieza el primero.
0 comentarios
Iniciar sesión · Inicia sesión para dejar un comentario.
Sé el primero en comentar.