¿Alguna vez desarrollaste una web y pensaste en convertirla en una aplicación de escritorio sin tener que escribir todo desde cero? Pues estás de suerte. Hoy en día, gracias a frameworks como Electron, es posible transformar aplicaciones web en versiones de escritorio completas, disponibles para Windows, Linux y macOS. Es un recurso valioso tanto para desarrolladores freelance, startups como para empresas que buscan una forma rápida y flexible de distribuir su software.
La gran ventaja de Electron es que te permite aprovechar tus conocimientos en tecnologías web —HTML, CSS y JavaScript— para crear aplicaciones que se ejecutan fuera del navegador, utilizando las mismas herramientas que ya conoces del entorno web. Si la idea te resulta atractiva, quédate, porque te vamos a contar todo lo que necesitas saber para empezar a construir apps de escritorio con este potente framework.
¿Qué es Electron y cómo funciona?
Electron es un framework desarrollado por GitHub que permite empaquetar aplicaciones web y convertirlas en aplicaciones de escritorio multiplataforma. Esto significa que puedes desarrollar tu software una sola vez y, con pequeños ajustes, hacerlo funcionar en Windows, macOS y Linux.
Para lograr esto, Electron combina Chromium, el motor del navegador de Google Chrome, con Node.js, permitiendo que tu aplicación tenga capacidades web y acceso a funcionalidades nativas del sistema operativo. De esta forma, puedes cargar una interfaz HTML, estilizada con CSS, y ejecutarla con JavaScript, mientras que Node.js se encarga del trabajo de bajo nivel como acceso al sistema de archivos, creación de menús, notificaciones, y más.
Procesos principales de Electron
Una aplicación en Electron se divide en dos procesos básicos: Main Process y Renderer Process.
1. Main Process
El Main Process es el motor principal de la aplicación. Es responsable de controlar el ciclo de vida de la app, crear y manejar las ventanas (instancias de BrowserWindow), y ejecuta sobre Node.js, por lo que tiene acceso directo a las APIs del sistema operativo.
Desde este proceso puedes controlar eventos del sistema como cierres de ventana, notificaciones, gestión de menús, o incluso el comportamiento al iniciar la app. Cada vez que necesites abrir una nueva ventana, el Main Process se encargará de generarla, asignándole contenido específico.
2. Renderer Process
Cada ventana creada desde el Main Process lanza un Renderer Process, que se encarga de mostrar y gestionar la interfaz de usuario. Aquí se ejecuta el código HTML, CSS y JavaScript de tu aplicación, ofreciendo una experiencia similar a la de una página web.
Este proceso funciona de forma aislada, como en los navegadores modernos. Cada ventana tiene su propio hilo, lo que mejora la estabilidad y seguridad de la aplicación, ya que si una ventana se bloquea, no afecta al resto.
Este proceso funciona de forma aislada, como en los navegadores modernos. Cada ventana tiene su propio hilo, lo que mejora la estabilidad y seguridad de la aplicación, ya que si una ventana se bloquea, no afecta al resto.
Comunicación entre procesos: ipcMain e ipcRenderer
Electron proporciona dos módulos clave para permitir la comunicación entre el Main Process y el Renderer Process: ipcMain e ipcRenderer.
Desde el proceso de renderizado puedes usar ipcRenderer para enviar un mensaje al proceso principal, y el Main Process puede manejar esos mensajes con ipcMain. También puedes usar ipcMain.handle() para recibir un mensaje y devolver una respuesta asincrónica al Renderer, lo que es útil para operaciones como confirmar que una acción fue exitosa.
Adicionalmente, puedes usar contextBridge para exponer una API segura y controlada desde el Preload Script, permitiendo que tu frontend acceda solo a las funciones que necesitas sin comprometer la seguridad de la app.
Ventajas de trabajar con Electron
¿Por qué elegir esta tecnología frente a otras opciones? Aquí te dejamos algunas razones de peso:
- Multiplataforma: Desarrollas una sola vez y puedes generar versiones para Windows, macOS y Linux.
- Reutilización de código: Si ya tienes una web hecha con React, Vue o Angular, puedes reusarla casi íntegramente.
- Acceso a funciones de sistema operativo: Menús, notificaciones, sistema de archivos, entre otros.
- Comunidad activa y respaldo: Electron tiene una comunidad muy activa y está respaldado por GitHub.
Limitaciones a tener en cuenta
Todo lo bueno tiene su contraparte. Estas son algunas desventajas que debes considerar:
- Alto consumo de recursos: Una aplicación «Hola Mundo» puede consumir más de 60 MB de RAM.
- Seguridad: Si no se gestiona correctamente la comunicación entre procesos, puedes exponer tu app a riesgos innecesarios.
No obstante, muchas de estas desventajas se pueden mitigar con buenas prácticas de desarrollo, optimización del código y evitando cargar recursos innecesarios.
Herramientas que facilitan el desarrollo
Hay varias utilidades que te facilitan trabajar con Electron:
Electron Forge
Electron Forge es una de las herramientas más utilizadas para inicializar proyectos, empacar tu aplicación y generar instaladores. Además, tiene compatibilidad con Webpack, Vite y TypeScript, lo que te da mucha flexibilidad para usar el stack que tú prefieras.
Electron Builder
Esta utilidad te permite crear ejecutables para cada sistema operativo de forma sencilla, generando archivos .exe para Windows, .dmg para macOS y .deb o .AppImage para Linux.
Ten en cuenta que para generar correctamente un ejecutable para macOS necesitas hacerlo desde un equipo con ese sistema operativo.
Transformando una web en una app con Electron
Imagina que ya tienes una aplicación web hecha con Vue, React o Angular. Transformarla en app de escritorio es tan sencillo como integrar Electron como dependencia y configurar el archivo principal.
Para empezar:
npm install --save-dev electronY luego indicar en el package.json el archivo principal (por ejemplo, main.js) donde se encuentra el código del Main Process.
Desde ahí, puedes usar BrowserWindow para cargar tu HTML o la URL de desarrollo de tu frontend y tener una ventana de escritorio funcional.
Ejemplo práctico: Puzzle Game con Vue + Electron
Supón que quieres construir una app tipo juego de puzzle. Puedes iniciar tu proyecto con Electron Forge y un template de Vite + Vue como este:
npm init electron-app@latest mi-app -- --template=vite-typescriptUna vez instalado, tienes una estructura donde el render process está separado del main, y puedes configurar tu aplicación desde los archivos vite.renderer.config.mjs y main.ts.
Para mostrar el juego, puedes crear un componente Vue (como Game.vue) y usar una librería como slide-puzzle-engine para generar dinámicamente el tablero.
Con un poco de lógica en Vue y la ayuda de onMounted y watch, puedes detectar cuándo el rompecabezas ha sido resuelto y mostrar un mensaje de éxito.
Consideraciones para una app más completa
Además de renderizar la interfaz y controlar los flujos básicos, puedes añadir funciones como:
- Temporizador: Para medir el tiempo que tarda el usuario en resolver el puzzle.
- Ranking local: Guardar las mejores puntuaciones en el almacenamiento local del sistema.
- Sustituir números por imágenes: Para mejorar la experiencia visual.
- Accesos a carpetas: Permitir al usuario abrir o guardar archivos usando APIs nativas.
Casos de éxito con Electron
Electron no es una tecnología experimental. De hecho, muchas apps reconocidas a nivel mundial han sido construidas con este framework. Algunas de ellas incluyen:
- Visual Studio Code (VS Code)
- Slack
- Discord
- Postman
- WhatsApp Desktop
Estas aplicaciones son ejemplos de que, si se desarrolla de forma optimizada, Electron puede entregar muy buen rendimiento y una experiencia de usuario profesional.
Cuestiones finales a tener en cuenta
A medida que avances en el desarrollo con Electron, notarás que la estructura del proyecto puede variar dependiendo de si usas Webpack, Vite o simplemente HTML y JavaScript puro. También notarás que la clave del rendimiento está en minimizar lo que cargas en las ventanas y evitar procesos innecesarios.
Si tu aplicación web ya está bien estructurada, migrarla a Electron puede ser cuestión de integrar el contexto de Node.js, adaptar los scripts y empaquetarla correctamente. Una vez lista, puedes distribuirla directamente o incluso subirla a tiendas como Snapcraft, la App Store de macOS o la Microsoft Store.
Optar por Electron para crear una aplicación de escritorio tiene múltiples ventajas, especialmente si ya dominas el desarrollo web. Es rápido, eficiente y permite aprovechar todo el ecosistema JavaScript sin tener que aprender otros lenguajes como Java o C. Si bien consume más recursos que las apps nativas, las posibilidades que ofrece en funcionalidad, diseño y tiempo de desarrollo hacen que merezca la pena.
Con una buena organización del código, herramientas como Electron Forge y Builder, y un enfoque responsable, puedes crear aplicaciones robustas, atractivas y funcionales que no tienen nada que envidiar a soluciones más complejas. Comparte la información para que otros usuarios conozcan la herramienta.