Introducción a Electron

Aprenda los conceptos básicos de Electron, el marco creado por GitHub que impulsa una gran cantidad de aplicaciones multiplataforma innovadoras y muy populares.

Electron es una herramienta de código abierto y gratuita para la construcciónaplicaciones de escritorio multiplataformacon JS, HTML y CSS, construido por GitHub

Es muy popular y las aplicaciones de gran éxito lo utilizan, incluidos VS Code, Slack, Discord y muchos, muchos más.

Electron es un gran proyecto que revolucionó el desarrollo de aplicaciones de escritorio nativas, al hacer viable que sea un proceso basado en JavaScript.

Eso sí: era posible escribir aplicaciones de escritorio basadas en JavaScript incluso antes que Electron, con otras herramientas, pero Electron lo hizo mucho más convencional.

Y en particular, Electron permitió crear aplicaciones de escritorio multiplataforma. Antes, no existía ninguna herramienta que le permitiera ejecutar la misma aplicación en todas partes.

Hasta 2014, cuando se lanzó Electron.

Un vistazo rápido a los componentes internos de Electron

Básicamente, Electron está agrupando la biblioteca de renderizado Chromium y Node.js (Chromium, el proyecto de código abierto creado por Google, en el que construyen el navegador Chrome).

Tiene acceso a un lienzo impulsado por Chromium, que ejecuta el motor JavaScript V8, y usa cualquier paquete Node.js y ejecuta su propio código Node.js.

Es una especie de Node.js para el escritorio, si lo desea. No proporciona ningún tipo de elementos de GUI, sino que le permite crear interfaces de usuario utilizando HTML, CSS y JavaScript.

Electron tiene como objetivo ser rápido, de tamaño pequeño y lo más delgado posible, pero brindando las características principales en las que todas las aplicaciones pueden confiar.

¿Qué tipo de aplicaciones puedes crear con Electron?

Puede crear muchos tipos diferentes de aplicaciones, que incluyen:

aplicaciones normales, con un icono de muelle y una ventana
aplicaciones de la barra de menú, que no tienen ningún icono de base
demonios
utilidades de línea de comando

Una buena colección de aplicaciones de Electron está disponible en el sitio oficial:https://electronjs.org/apps. Con Electron puede crear aplicaciones y publicarlas en la tienda de aplicaciones de Windows y Mac.

La aplicación Electron API

Usted puededescarga la aplicación Electron API Demos, que es una aplicación de escritorio de muestra oficial creada con Electron.

Electron app demo

La aplicación es muy buena y te permite experimentar con varias funciones de Electron. Es de código abierto y el código está disponible enhttps://github.com/electron/electron-quick-start.

Electron app demo

Cómo crear tu primera aplicación de Electron

Primero, cree una nueva carpeta en su sistema de archivos y en ella ejecute:

npm init -y

para crear unpackage.jsonexpediente:

{
  "name": "testelectron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Agregue esta línea en elscriptssección:

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

Ahora instale Electron:

npm install -D electron

Electron ahora se puede comenzar con

npm start

Sin embargo, si lo hace, verá un error que le indicará que no hayindex.jsarchivo, que es lo que escribimos en elpackage.jsonarchivo para ser el principal punto de partida de nuestra aplicación:

¡Una aplicación GUI de Hello World Electron!

Creemos una aplicación que muestre un Hola mundo en una ventana.

Crea 2 archivos,main.js:

const { app, BrowserWindow } = require('electron')
function createWindow() {
// Create the browser window.
  const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
})
// and load the index.html of the app.
  win.loadFile(‘index.html’)
}
app.whenReady().then(createWindow)

yindex.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node
    <script>
      document.write(process.versions.node)
    </script>
    , Chrome
    <script>
      document.write(process.versions.chrome)
    </script>
    , and Electron
    <script>
      document.write(process.versions.electron)
    </script>
    .
  </body>
</html>

Ahora corre de nuevoyarn start, y esta ventana debería aparecer:

Activity monitor

Esta es una aplicación de una ventana muy simple, y cuando cierra esta ventana, la aplicación se cierra.

Facilitando la vida del desarrollador de aplicaciones

Electron tiene como objetivo facilitar la vida del desarrollador. Las aplicaciones tienen muchos problemas en común. Necesitan realizar cosas que las API nativas a veces complican un poco más de lo que uno podría imaginar.

Electron proporciona una forma sencilla deadministrar compras en la aplicación, Notificaciones, arrastrar y soltar, administrar atajos de teclas y mucho más.

También proporciona unservicio alojado para actualizaciones de aplicaciones, para que la actualización de sus aplicaciones sea mucho más sencilla que si tuviera que crear un servicio por su cuenta.