Idioma: ES
LuisLlamas Logo
Buscar
⏲️ ~ 4 minutos Iniciación
que-es-y-como-empezar-con-electron

Qué es y cómo empezar con Electron

Electron es un framework que permite desarrollar aplicaciones de escritorio utilizando tecnologías web como HTML, CSS y JavaScript.

Fue creado por GitHub en 2013 para construir su editor de código Atom y desde entonces ha ganado popularidad en la comunidad de desarrollo por su facilidad de uso..

Electron.js utiliza Chromium, el mismo motor de renderizado web de Google, y Node.js, un entorno de tiempo de ejecución de JavaScript basado en eventos, para proporcionar una plataforma de desarrollo de aplicaciones de escritorio.

Con Electron.js, podemos crear aplicaciones de escritorio que se ejecutan en Windows, macOS y Linux utilizando tecnologías web familiares.

Ventajas de Electron,

  1. Multiplataforma: Electron permite desarrollar aplicaciones que se ejecutan en Windows, macOS y Linux sin necesidad de modificar el código
  2. Uso de tecnologías web: Los desarrolladores pueden utilizar tecnologías web familiares como HTML, CSS y JavaScript
  3. Acceso a APIs nativas: A través de Node.js, Electron proporciona acceso a APIs del sistema operativo, permitiendo la creación de aplicaciones con capacidades nativas
  4. Gran comunidad y soporte: Electron cuenta con una gran comunidad de desarrolladores y un ecosistema de herramientas y bibliotecas que facilitan el desarrollo
  5. Actualizaciones automáticas: Electron incluye soporte para actualizaciones automáticas, lo que facilita mantener las aplicaciones actualizadas

Como punto negativo, principalmente el rendimiento y el uso de consumos. Al final, Electron “levanta” un navegador cada instancia del programa. Lo cuál supone un considerable uso de recursos.

Electron es Open Source y todo su código y documentación están disponibles en la página oficial Electron.orgy el repositorio del proyecto enGitHub - electron/electron

Instalación

Para empezar a usar Electron necesitas Nodejs y NPM (Node Package Manager). Si no sabes lo que son, o quieres aprender más, te dejo por aquí estos dos cursitos 👇.

Una vez que lo tengamos instalado, abrimos una terminal y navegamos al directorio donde deseas crear tu proyecto. Ejecuta el siguiente comando para inicializar un proyecto npm:

npm init

Una vez que el proyecto npm esté inicializado, instala Electron como dependencia de desarrollo:

npm install electron --save-dev

Estructura del proyecto

La estructura básica para un proyecto Electron es la siguiente:

mi-app-electron/
├── package.json
├── main.js
├── index.html
└── preload.js
ArchivoDescripción
package.jsonArchivo de configuración de npm
preload.jsUn script que se ejecuta antes de que la página web se cargue en el renderizador
main.jsEl script principal que controla el ciclo de vida de la aplicación
index.htmlLa interfaz de usuario de la aplicación

Configuración de Electron

Vamos a ver como configurar los ficheros necesarios para ejecutar nuestra primera aplicación de Electron, y el papel de cada uno de ellos.

El archivo main.js es el punto de entrada de tu aplicación Electron. Aquí se crea la ventana principal y se controla el ciclo de vida de la aplicación:

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

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

El archivo index.html define la interfaz de usuario de tu aplicación:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mi App Electron</title>
</head>
<body>
  <h1>Hola, Electron!</h1>
  <p>Bienvenido a tu primera aplicación Electron.</p>
</body>
</html>

El archivo preload.js se ejecuta antes de que la página web se cargue y puede exponer APIs seguras al renderizador:

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

Ejecución de la aplicación

Para lanzar nuestra aplicación en Electron vamos a añadir una acción (script) en el fichero de configuración package.json

"scripts": {
  "start": "electron ."
}

Ahora, para ejecutar la aplicación de Electron simplemente tenemos que hacer,

npm run start

electron-demo-screenshot

Distribuir la aplicación

Una vez que tenemos nuestra app lista, habrá que empaquetarla y distribuirla. Para ello podemos usar Electron Forge. Lo instalamos con el siguiente comando

npm install --save-dev @electron-forge/cli

Una vez terminado, ejecutamos Electron Forge con el siguiente comando:

npx electron-forge import

Es necesario que en el fichero package.json esté relleno Author y Description

Descarga el código

Todo el código de esta entrada está disponible para su descarga en Github. github-full

En esta página