Actualizar a la última versión de Electron js mediante Node

Electron es un poderoso framework que nos permite crear aplicaciones de escritorio mediante tecnologías web (HTML, CSS y JavaScript) empleando Node.js en su núcleo. Esto nos da acceso a un ecosistema inmenso y a herramientas que ya conocemos. A diferencia de una web tradicional, Electron nos permite interactuar con el sistema operativo, dándonos la capacidad de crear aplicaciones complejas y ricas en funcionalidades.

El equipo de Electron publica nuevas versiones con frecuencia, incorporando mejoras de seguridad, nuevas características, y actualizaciones de las tecnologías subyacentes como Chromium y Node.js. Mantener tu aplicación actualizada es crucial para la seguridad y el rendimiento. En esta guía, veremos en detalle cómo actualizar Electron a su última versión de forma segura.

Recuerda que venimos de los eventos en Electron

¿Por qué es importante actualizar Electron.js?

Antes de entrar en materia, es importante entender los beneficios de mantener Electron actualizado:

• Seguridad: Las nuevas versiones suelen incluir parches para vulnerabilidades descubiertas. Una versión obsoleta puede ser un riesgo de seguridad para tu aplicación y tus usuarios.
• Nuevas características: El equipo de Electron y la comunidad constantemente añaden nuevas APIs y funcionalidades que pueden enriquecer tu aplicación.
• Mejoras de rendimiento y corrección de errores: Cada nueva versión viene con optimizaciones que pueden hacer tu aplicación más rápida, más estable y con un menor consumo de recursos.
• Compatibilidad: Mantenerse al día asegura una mejor integración con las versiones más recientes de Node.js y Chromium, que son el corazón de Electron.

1. Verificar tu Versión Actual de Electron

Antes de actualizar, es fundamental saber qué versión estás utilizando. Esta información se encuentra en el archivo package.json de tu proyecto. Electron, por lo general, se instala como una dependencia de desarrollo (devDependencies).

Busca una sección similar a esta en tu package.json:

{
  "name": "mi-app-electron",
  "version": "1.0.0",
  "main": "main.js",
  "devDependencies": {
    "electron": "^41.0.0"
  }
}

En este ejemplo, la versión de Electron es la 25.2.0.

2. El Proceso de Actualización

Actualizar el paquete es sencillo, pero es importante usar el comando correcto para asegurarse de que se guarde como una dependencia de desarrollo.

Usando NPM

Para actualizar a la última versión estable de Electron, ejecuta el siguiente comando en tu terminal. La bandera --save-dev (o su atajo -D) es crucial.

$ npm install electron@latest --save-dev

Usando Yarn

Si tu proyecto utiliza Yarn, el comando equivalente es:

$ yarn add electron@latest --dev

Usando PNPM

Para proyectos con PNPM, el comando es:

$ pnpm add electron@latest --save-dev

Este comando hará lo siguiente:

• Buscará la última versión estable de Electron en el registro de NPM.
• La descargará e instalará en tu proyecto.
• Actualizará la versión en tu archivo package.json gracias al flag --save-dev.

3. Verificar la Actualización

Una vez que el comando finalice, puedes volver a revisar tu archivo package.json. Verás que el número de versión de Electron ha cambiado.

{
  "name": "mi-app-electron",
  "version": "1.0.0",
  "main": "main.js",
  "devDependencies": {
    "electron": "^29.1.5"  // <-- ¡Versión actualizada!
  }
}

Además, es una buena práctica eliminar la carpeta node_modules y el archivo package-lock.json (o yarn.lock) y volver a instalar todas las dependencias desde cero para evitar conflictos.

$ rm -rf node_modules package-lock.json
$ npm install

4. Consideraciones Importantes y Posibles Problemas

Actualizar una dependencia tan importante como Electron puede tener efectos secundarios. Aquí hay algunas cosas que debes tener en cuenta:

¡Cuidado con los "Breaking Changes"!

Al saltar entre versiones mayores (por ejemplo, de la 25.x.x a la 28.x.x), es muy probable que te encuentres con "breaking changes" o cambios que rompen la compatibilidad. Esto significa que parte de tu código podría dejar de funcionar como esperaba.

Es muy recomendable leer las notas de la versión (release notes) de Electron para entender qué ha cambiado y cómo adaptar tu código.

Actualizar no es solo cambiar un número de versión. Especialmente en saltos de versiones mayores (por ejemplo, de 25.x.x a 26.x.x), puedes encontrar "breaking changes" o cambios que rompen la compatibilidad.

Leer las Notas de Lanzamiento (Release Notes)

Este es el paso más importante. Antes de actualizar, visita la página de lanzamientos de Electron en GitHub. Revisa las notas de todas las versiones mayores entre tu versión actual y la última. Te informarán sobre:

• APIs obsoletas (deprecated): Funciones que serán eliminadas en el futuro.
• APIs eliminadas: Funciones que ya no existen y que romperán tu aplicación si las usas.
• Cambios de comportamiento: Modificaciones en cómo funcionan ciertas partes del framework.

El caso de contextIsolation

Desde Electron 12, el valor por defecto de contextIsolation cambió a true por motivos de seguridad. Si vienes de una versión muy antigua, es posible que tu aplicación deje de funcionar. En lugar de simplemente ponerlo en false, lo ideal es adaptar tu código para usar preload scripts, que es la forma segura y recomendada de exponer APIs de Node.js a tu proceso de renderizado.

const win = new BrowserWindow({
    webPreferences: {
        preload: path.join(__dirname, 'preload.js')
    }
});

Relación con Node.js y Chromium

Cada versión de Electron viene empaquetada con una versión específica de Node.js y Chromium. Al actualizar Electron, también estás actualizando estas dos tecnologías. Esto puede ser una gran ventaja (acceso a nuevas APIs de JavaScript y del navegador), pero también puede causar problemas si tienes dependencias nativas de Node que necesitan ser recompiladas para la nueva versión.

Ejemplo de Refactorización Común

Un cambio común en versiones pasadas fue la modificación de cómo se maneja la seguridad en el proceso de renderizado (la ventana de tu aplicación). Por ejemplo, el valor por defecto de contextIsolation cambió a true. Si tu código dependía del comportamiento anterior, necesitarás refactorizarlo para usar un preload script y comunicar el proceso principal con el de renderizado de forma segura.

// main.js - Ejemplo de configuración de la ventana
const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        // Es crucial definir un preload script para exponer APIs de Node
        // de forma segura al proceso de renderizado.
        preload: path.join(__dirname, 'preload.js'),
        contextIsolation: true, // Valor por defecto y recomendado
        nodeIntegration: false // Valor por defecto y recomendado
    }
});

Conclusión

Mantener Electron actualizado es una buena práctica que mejora la seguridad y el rendimiento de tu aplicación. Si bien el proceso es simple, requiere atención a los detalles, especialmente a los posibles cambios que rompen la compatibilidad. Al seguir un enfoque metódico (verificar, actualizar, verificar de nuevo y, sobre todo, leer las notas de lanzamiento) te asegurarás una transición suave y exitosa a la última versión.

Siguiente paso, genera tu estupenda aplicación de Electron.js en Producción.