Electron

``

Electron es un framework para crear aplicaciones de escritorio multiplataforma usando tecnologías web como HTML, CSS y JavaScript. Permite desarrollar aplicaciones para Windows, macOS y Linux con una única base de código.

Recursos oficiales

  • Electron framework desktop apps – Repositorio oficial en GitHub con el código fuente, ejemplos, issues y comunidad activa.
  • Electron docs – Documentación completa con guías de inicio, API reference, tutoriales y buenas prácticas.

Características principales

  • Multiplataforma: soporta Windows, macOS y Linux.
  • Integración con Node.js: permite usar módulos de Node y acceder al sistema operativo.
  • Renderizado web: las interfaces se crean con HTML, CSS y JS.
  • Actualizaciones automáticas: permite implementar mecanismos de actualización de la app.
  • Seguridad: ofrece opciones como contextIsolation y sandbox para proteger la aplicación.

Arquitectura

  • Main process – Controla el ciclo de vida de la app, ventanas y comunicación con el sistema operativo.
  • Renderer process – Cada ventana de la app corre en un proceso de renderizado independiente usando Chromium.
  • IPC (Inter-Process Communication) – Canal de comunicación entre Main y Renderer para enviar mensajes y datos de manera segura.

Herramientas y ecosistema

  • Electron Forge – Herramienta para scaffolding, empaquetado y distribución de apps Electron.
  • Electron Builder – Utilidad para generar instaladores y paquetes para distintas plataformas.
  • Electron Packager – Empaqueta aplicaciones para distribución multiplataforma.
  • DevTools – Integración con las herramientas de desarrollo de Chromium para depuración y profiling.

Seguridad y buenas prácticas

  • Habilitar contextIsolation y nodeIntegration: false en los renderer processes.
  • Validar y sanear toda entrada del usuario.
  • Evitar cargar contenido remoto directamente en la app sin filtros.
  • Mantener dependencias actualizadas y revisar vulnerabilidades con npm audit.

Recursos adicionales

Electron Avanzado

Electron permite ir más allá de la base de apps de escritorio, habilitando funcionalidades complejas, integraciones y optimización avanzada.

Integraciones y frameworks frontend

  • React + Electron – Crear interfaces reactivas con React y manejar ventanas desde el main process.
  • Vue + Electron – Integración con Vue CLI o Vite para construir apps con binding declarativo.
  • Angular + Electron – Usado en aplicaciones empresariales con gestión avanzada de estados y rutas.
  • Svelte + Electron – Permite apps ligeras con menor consumo de memoria y alto rendimiento en renderizado.

Testing en Electron

  • Spectron – Framework de pruebas end-to-end para Electron, usa WebDriver y Mocha.
  • Jest + Testing Library – Para tests unitarios y de componentes en renderer processes.
  • Playwright / Puppeteer – Automatización de UI y pruebas de integración de ventanas y navegación interna.

Performance y optimización

  • Minimizar procesos renderer y usar solo los necesarios para reducir memoria.
  • Lazy loading de módulos y recursos en renderer processes.
  • Uso de nativeImage para optimizar gráficos y evitar sobrecarga de memoria.
  • Evitar re-render innecesario usando frameworks con virtual DOM o técnicas de memoization.

Empaquetado y distribución avanzada

  • Electron Builder – Creación de instaladores personalizados, firma de código y actualización automática.
  • Code signing – Firmar apps para Windows, macOS y Linux, evitando alertas de seguridad.
  • Auto-update – Integración con servidores de actualización para mantener apps siempre en la última versión.
  • Generación de AppImage, DMG, EXE, MSI y Snap packages según plataforma.

Características avanzadas de escritorio

  • Integración con sistema operativo: menús nativos, bandeja del sistema, notificaciones nativas.
  • Acceso a hardware: USB, Bluetooth, cámara y micrófono mediante Node.js o APIs nativas.
  • Multi-window y multi-monitor: soporte completo para apps con múltiples ventanas y monitores.
  • Context menus y drag & drop nativos en todos los sistemas operativos.
  • Dark mode y theming sincronizado con la configuración del sistema operativo.

Electron en entornos empresariales

  • Apps internas de dashboard, monitoreo y administración de sistemas.
  • Integración con servicios cloud y APIs REST/GraphQL.
  • Uso de contenedores o CI/CD para empaquetado y distribución segura.

Recursos avanzados

  • Electron Forge – Herramienta para scaffolding, empaquetado y publicación.
  • Electron Builder – Empaquetado multiplataforma con opciones avanzadas de firma y actualización.
  • Spectron – Testing end-to-end de apps Electron.
  • Awesome Electron – Lista curada de proyectos, herramientas y tutoriales avanzados.

Electron: APIs Nativas, Optimización y Seguridad

Esta nota cubre áreas avanzadas de Electron, enfocándose en interacción con el sistema, optimización de recursos, debugging profundo y prácticas de seguridad enterprise.

APIs nativas del sistema operativo

  • File System Access – Lectura/escritura de archivos y carpetas usando Node.js (fs) o el módulo dialog de Electron.
  • Notifications – Notificaciones nativas del SO con acciones personalizadas.
  • Clipboard – Interacción avanzada con el portapapeles (texto, imágenes, formatos múltiples).
  • Power Monitor – Detectar suspensión, reactivación, apagado y estado de batería.
  • Screen / Display – Obtener información de monitores, resolución, DPI y capturas de pantalla.
  • Global Shortcuts – Registrar combinaciones de teclado globales a nivel del sistema operativo.
  • Tray / Dock – Personalización de icono en bandeja del sistema o dock, menús contextuales y eventos.
  • Protocol – Registro de protocolos personalizados (myapp://) para deep linking en la app.
  • Native Modules – Integración con librerías nativas de C/C++ usando node-gyp para funcionalidades específicas de hardware o sistema.

Optimización de memoria y CPU

  • Mantener renderer processes ligeros y dividir ventanas o funcionalidades críticas en procesos separados.
  • Uso de lazy loading de módulos y assets solo cuando se necesitan.
  • Offload de tareas pesadas a worker threads o procesos Node.js independientes.
  • Control de event listeners y eliminación de listeners innecesarios para reducir consumo de memoria.
  • Monitorización con process.getCPUUsage() y process.getSystemMemoryInfo() para identificar hotspots.
  • Evitar re-render loops en UI usando técnicas de virtual DOM o debouncing.

Debugging profundo

  • Uso de DevTools avanzadas en renderer y main process para profiling y heap snapshots.
  • Integración con Visual Studio Code para debugging de main y renderer con breakpoints y watch expressions.
  • Logging centralizado con Winston o Bunyan para capturar eventos de app, errores y métricas.
  • Monitorización de crash reports con Sentry o Electron CrashReporter.
  • Uso de app.getAppMetrics() para inspeccionar CPU, memoria y handles de procesos en tiempo real.

Seguridad avanzada

  • Activar contextIsolation y deshabilitar nodeIntegration en todos los renderer processes.
  • Habilitar sandboxing de renderer processes para limitar acceso a recursos del sistema.
  • Validar y sanear toda entrada del usuario, incluyendo URLs y archivos locales.
  • Evitar cargar contenido remoto sin filtros o Content Security Policy (CSP).
  • Uso de Electron Security Warnings para detectar prácticas inseguras durante desarrollo.
  • Firmado de código y notarización en macOS, y validación de certificados en Windows.
  • Revisión periódica de vulnerabilidades con npm audit y actualizaciones de dependencias.

Recursos avanzados

Electron Recursos 2025‑2026

Versiones y estado actual (2025‑2026)

  • Última versión estable conocida: Electron 39.2.7 lanzada el 12 de diciembre de 2025.
  • Versión preview/beta activa: 40.0.0‑beta.5 con fecha 5 de enero de 2026. Wikipedia

Cambios importantes recientes

Actualizaciones de Node.js en el ecosistema

  • A partir de enero/febrero 2025, todos los paquetes del ecosistema (como @electron/… y @electron‑forge/…) migran para requerir Node.js 22 como mínimo.
    • Esto facilita usar utilidades nativas más modernas (por ejemplo fs.glob, node:test, node:sqlite).
    • Promueve mayor compatibilidad y seguridad de dependencias. Electron Blog

Notas de lanzamiento y cronograma

  • Electron sigue una hoja de ruta pública con lanzamientos regulares de actualizaciones menores y parches de seguridad.
  • Releases estables 2025 incluyen: 34.x, 35.x, 36.x, 37.x, 38.x, 39.x.
  • Se menciona una pausa del proyecto en diciembre de cada año para mejorar procesos y volver con fuerza en enero siguiente. Electron Blog

Seguridad y vulnerabilidades recientes

  • CVE‑2024‑46993: Problema de heap overflow en funciones nativeImage.createFromPath() y createFromBuffer() en versiones anteriores a 28.3.2/29.3.3/30.0.3. Corregido en esas versiones posteriores. INCIBE
  • CVE‑2025‑55305: Bypass de integridad ASAR al modificar recursos si los fusibles embeddedAsarIntegrityValidation y onlyLoadAppFromAsar están habilitados. Corregido en versiones 35.7.5, 36.8.1, 37.3.1 y 38.0.0‑beta.6. INCIBE

Proyectos comunitarios y herramientas 2025

  • UpgradeLink: herramienta open source para actualización automática de apps Electron en Windows, Mac y Linux, diseñada para integrarse fácilmente con APIs estándar de Electron. Reddit

Cambios en APIs y componentes

  • Deprecación de BrowserView: reemplazada por WebContentsView para alinearse mejor con la arquitectura de Views de Chromium, permitiendo integraciones UI más sólidas y menos bugs a futuro. Electron Delta

Google Summer of Code (GSoC)

  • Electron Google Summer of Code 2025: Ideas list y guía de contribución para estudiantes, promoviendo mejoras y nuevos proyectos dentro del ecosistema. Electron Blog

Tendencias / Comunidad

  • Interés en portar o ejecutar apps Electron en Android (experimental por ahora, sin planificación oficial). Reddit
  • Debates en comunidades (como Reddit) sobre rendimiento en macOS Tahoe (v26) y cómo versiones antiguas de Electron pueden generar lag/uso alto de GPU; muchos apps populares han actualizado para mitigar estos problemas. Reddit

Fuentes de información oficiales

Guía Completa de Electron

Electron permite crear aplicaciones de escritorio multiplataforma usando tecnologías web y Node.js. Esta guía cubre arquitectura, casos de uso, ejemplos de código y configuración inicial.

Arquitectura de Electron

  • Main Process
    • Es el proceso principal que controla el ciclo de vida de la app, ventanas y comunicación con el SO.
    • Gestiona menús, tray, notificaciones y creación de ventanas (BrowserWindow).
  • Renderer Process
    • Cada ventana de la app corre en su propio proceso de renderizado usando Chromium.
    • Se encarga de la UI y puede comunicarse con el Main Process mediante IPC (Inter-Process Communication).
  • IPC (Inter-Process Communication)
    • Canales de comunicación seguros entre Main y Renderer.
    • Ejemplos de métodos: ipcMain.handle(), ipcRenderer.invoke(), ipcRenderer.send(), ipcMain.on().
  • Node.js Integration
    • Permite usar módulos de Node en el Main Process y, si se habilita, en el Renderer.
    • Se recomienda habilitar contextIsolation y nodeIntegration: false en Renderer para seguridad.

Casos de uso típicos

  • Editores de código: VS Code, Hyper
  • Mensajería y colaboración: Slack, Discord
  • Herramientas de productividad: Notion, Figma Desktop
  • Dashboards internos de empresa: Monitoreo de sistemas, apps internas
  • Reproductores multimedia y streaming

Ejemplo básico de proyecto Electron

Estructura de carpetas


my-electron-app/
tab package.json
tab main.js
tab index.html
tab renderer.js

`

package.json

{
	"name": "my-electron-app",
	"version": "1.0.0",
	"main": "main.js",
	"scripts": {
		"start": "electron ."
	},
	"devDependencies": {
		"electron": "^39.2.7"
	}
}

`

main.js

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

function createWindow() {
	const win = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			preload: path.join(__dirname, 'renderer.js'),
			contextIsolation: true,
			nodeIntegration: false
		}
	});

	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();
});

renderer.js (preload)

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
	sendMessage: (msg) => ipcRenderer.send('message', msg),
	onMessage: (callback) => ipcRenderer.on('message', (event, data) => callback(data))
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mi App Electron</title>
</head>
<body>
	<h1>Hola Electron!</h1>
	<button id="sendBtn">Enviar Mensaje</button>
	<script>
		const btn = document.getElementById('sendBtn');
		btn.addEventListener('click', () => {
			window.electronAPI.sendMessage('¡Hola desde Renderer!');
		});
	</script>
</body>
</html>

Configuración recomendada

  • Seguridad: contextIsolation: true, nodeIntegration: false, sandbox: true
  • Actualizaciones automáticas: Usar electron-updater o electron-builder
  • Debugging: Abrir DevTools con win.webContents.openDevTools()
  • Optimización: Lazy load de módulos, dividir procesos renderer para ventanas independientes

Recursos útiles

Electron Avanzado: Multi-Window, Tray, Notificaciones, Hardware y Seguridad

Esta guía muestra cómo implementar funcionalidades avanzadas de Electron sin cubrir lo básico repetido anteriormente.

Multi-Window

  • Permite crear varias ventanas independientes dentro de la misma app.
  • Cada ventana tiene su propio renderer process y puede comunicarse con el main process.

Ejemplo de código

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

let mainWindow;
let secondaryWindow;

function createWindows() {
	mainWindow = new BrowserWindow({ width: 800, height: 600 });
	mainWindow.loadFile('index.html');

	secondaryWindow = new BrowserWindow({ width: 400, height: 300 });
	secondaryWindow.loadFile('secondary.html');
}

app.whenReady().then(createWindows);

`

Tray / Bandeja del sistema

  • Permite mostrar iconos en la bandeja (Windows/Linux) o dock (macOS), con menús contextuales y eventos.

Ejemplo de código

const { Tray, Menu } = require('electron');
const path = require('path');

let tray = new Tray(path.join(__dirname, 'icon.png'));
const contextMenu = Menu.buildFromTemplate([
	{ label: 'Abrir', click: () => mainWindow.show() },
	{ label: 'Salir', click: () => app.quit() }
]);
tray.setToolTip('Mi App Electron');
tray.setContextMenu(contextMenu);

Notificaciones nativas

  • Muestra alertas y mensajes al usuario de manera nativa en cada sistema operativo.

Ejemplo de código

const { Notification } = require('electron');

function showNotification(title, body) {
	new Notification({ title, body }).show();
}

showNotification('Hola!', 'Esta es una notificación nativa de Electron.');

Acceso a hardware y sistema

  • Permite interactuar con recursos del sistema: portapapeles, cámara, micrófono, sensores, USB, Bluetooth.

Ejemplo: Portapapeles

const { clipboard } = require('electron');
clipboard.writeText('Texto copiado al portapapeles');
console.log(clipboard.readText());

Ejemplo: Captura de pantalla

const { desktopCapturer } = require('electron');

async function getScreenSources() {
	const sources = await desktopCapturer.getSources({ types: ['screen'] });
	console.log(sources);
}
getScreenSources();

Seguridad avanzada

  • Context Isolation: contextIsolation: true en todas las ventanas.
  • Node Integration: nodeIntegration: false en renderer processes.
  • Sandbox: Habilitar sandbox: true para aislar procesos.
  • Validación de entrada: sanitizar cualquier dato del usuario o archivos externos.
  • CSP (Content Security Policy): limitar recursos externos y scripts.
  • Evitar eval() o remote: usar IPC para comunicación entre procesos de forma segura.

Ejemplo de configuración segura

const win = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
		preload: path.join(__dirname, 'preload.js'),
		contextIsolation: true,
		nodeIntegration: false,
		sandbox: true
	}
});

Recursos útiles