Electron

> Temas > Electron
Editar

Electron, también conocido como ElectronJS, es un framework para el desarrollo de aplicaciones de escritorio multiplataforma basadas en Javascript, HTML y CSS.

Electron es un framework de código abierto que permite desarrollar aplicaciones de escritorio usando las tecnologías estándares de la web, por lo que se trata de una herramienta muy apropiada para los desarrolladores que tienen experiencia en la plataforma web, con Javascript y por supuesto HTML y CSS.

Con Electron podemos hacer todos los pasos del flujo de proyectos de aplicaciones, desde la construcción hasta la compilación y generación de los instaladores para cada sistema operativo.

Una de las características más importantes de Electron es que permite la construcción de aplicaciones "cross platform", es decir, aplicaciones para todos los sistemas operativos más importantes, como Windows, MacOS y Linux.

Para conseguir todo esto ElectronJS se basa en Chromium, el navegador de código libre de Google a partir del que se desarrolla el propio Chrome. Además por debajo usa NodeJS para poder realizar todo tipo de tareas con el ordenador donde las aplicaciones están instaladas. Por tanto, con conocer estos lenguajes, y el propio framework Electron, es suficiente para poder introducirse en el desarrollo de aplicaciones de escritorio, sin necesidad de tener conocimientos para el desarrollo nativo en cada uno de los sistemas operativos populares.

Más información:

Electron
Nombres alternativos: ElectronJS, Electron.js Año de lanzamiento: 2013 Compañía: GitHub Lenguaje desarrollo: Javascript, Node.js, HTML, CSS Licencia: MIT Plataforma/s: Multiplataforma

Manuales

Manual de Electron

Manual de Electron

El Manual de Electron nos enseñará a crear aplicaciones desktop multiplataforma usando el framework Electron, que se basa en NodeJS y tecnologías web como Javascript, HTML y CSS.

Características de Electron

Las características más importantes de Electron son: Desarrollo para desktop con lenguajes de la web y la posibilidad de compilar los proyectos para cualquier plataforma.

De manera adicional, Electron nos facilita una serie de tareas del flujo habitual de desarrollo de aplicaciones de escritorio como:

  • Uso de interfaz gráfica vitaminada por el HTML y CSS, pero además cualquier librería de interfaces de usuario que quieras implementar, como React, Vue, jQuery y por supuesto Web Components.
  • Compilación de proyectos y generación de los paquetes de instalación en plataformas diversas. Además, es posible publicar los proyectos realizados con Electron en las stores de aplicaciones de los sistemas operativos.
  • Posibilidad de que el software se actualice automáticamente según se publican nuevas versiones.
  • Herramientas para el reporte de errores en los proyectos
  • Posibilidad de usar cualquier stack de herramientas frontend de la web, como TypeScript, React, Vue, Angular, Lit, Bootstrap, Tailwind CSS, frameworks de testing, etc. Además de todos los paquetes de NodeJS existentes en npm.

Editar

Aplicaciones desarrolladas con Electron

Existen muchas aplicaciones populares desarrolladas con el framework Electron, que seguramente usas en tu día a día como desarrollador, o como usuario en general de los sistemas operativos.

Algunos ejemplos populares son:

  • Editores de código como Visual Studio Code o Atom
  • Herramientas de comunicaciones como Skype, Microsoft Teams, Slack o Discord
  • Herramientas de productividad como 1Password, Trello o Notion
  • Herramientas de diseño y desarrollo como Figma, GitHub Desktop, Hyper o Postman.

Esos son solo unos pocos ejemplos de aplicaciones populares, en el Showcase de Electron encuentras muchas más.

Editar

Comenzar una aplicación con ElectronJS

Si estamos queriendo comenzar una aplicación con Electrón tenemos dos posibilidades que se resumen aquí:

Empezar desde cero

Esto significa comenzar con un directorio vacío e instalando con npm todas las dependencias, como el propio framework Electron. Esta opción es interesante desde un punto de vista didáctico, para que aprendas las distintas partes del proyecto, las dependencias necesarias y sepas cómo montar un proyecto por tu propia cuenta.

Este modo es el que explicamos en el artículo de comenzar un proyecto con Electron. No obstante, no la recomendaría para un proyecto que vas a poner en producción, porque necesitarías hacer muchas cosas a mano y aún así puede que no estén de todo bien hechas.

Usar Electron Forge

La alternativa más adecuada para comenzar un proyecto "real", que vayas a realizar no solo para aprender sino quizás para un trabajo propio o un desarrollo para un cliente sería usar Electron Forge. Este complemento al propio framework te ofrece un scaffolding más completo en el que tendrás muchas cosas configuradas de antemano, además de una estructura de aplicación un poco más avanzada.

Este modo de comenzar se explica en el artículo de Electron Forge.

Editar

¿Quieres añadir algo sobre Electron?

Crea artículos, recursos o comparte información sobre Electron

Crear un bloque

Preguntas y respuestas de Electron

Se han recibido 3 faqs en Electron

Hacer una pregunta