Consideraciones sobre la app Hello World de Electron
En la entrada anterior de mi blog, veíamos un ejemplo tipo «Hello World» con Electron.
Ahora bien, me gustaría antes de avanzar con algún ejemplo más, hacer alguna consideración al respecto.
package.json
Si recordamos, veíamos en el archivo package.json que indicábamos la siguiente línea:
«main»: «main.js»,
En Electron, se mirará si existe «main».
Si no existe, intentará index.js.
Este es el comportamiento general de Node.
Al ser una aplicación Node, adicionalmente añadiremos el campo script dentro del cual indicaremos el campo start para indicarle a Node que ejecute el paquete que queremos ejecutar.
De ahí que en nuestro código de package.json tengamos:
«scripts»: {
«start»: «electron main.js»
},
El hecho de poner electron delante de main.js es para indicar a Node que queremos reemplazar a Node por Electron.
La estructura base de un ejemplo tipo de Electron será por lo tanto del tipo:
your-app/
├── package.json
├── main.js
└── index.html
Exactamente tal y como la hemos realizado en el típico ejemplo «Hello World».
Más allá de todo lo comentado con respecto a package.json, vamos a hablar de alguna consideración relativa más con Electron.
Módulo electron
Como veíamos en el ejemplo «Hello World», el módulo electron expone características y funcionalidades en su namespace.
En el ejemplo «Hello World» decíamos que en app declarábamos el ciclo de vida de nuestra aplicación.
En realidad, utilizábamos una forma abreviada de trabajar con electron.app.
De la misma manera, la declaración de ventanas se realiza a través de electron.BrowserWindow.
En ese mismo ejemplo, veíamos que declarábamos:
const electron = require(‘electron’)
const {app, BrowserWindow} = electron
Y si quisiéramos ahorrarnos algo de código, podríamos haberlo declarado todo en uno como:
const {app, BrowserWindow} = require(‘electron’)
Otra consideración a tener en cuenta es la declaración global de win con la declaración:
let win
De esta manera, mantendremos en la referencia global al objeto window.
En caso de no hacer esto, la ventana se cerrará de forma automática al entrar el objeto JavaScript en el recolector de basura.
Por lo tanto, main.js debería crear la ventana principal y manejar todos los eventos que se pudieran desencadenar en nuestra aplicación.
Obtener versiones de paquetes y de Chrome
Como curiosidad, comentar que tenemos diferentes formas de saber o conocer con qué versión de entorno estamos trabajando.
De esta forma, podemos saber la versión de Chrome con:
process.versions.chrome
Y la versión de Node y Electron con:
process.versions.node
process.versions.electron
Por lo que poniendo en el código de index.html que añadimos en el ejemplo la siguiente instrucción:
Chrome <script>document.write(process.versions.chrome)</script>
Obtendríamos la versión de Chrome que estamos utilizando para mostrar las ventanas.
Clonar repo desde GitHub, restaurar paquetes y ejecutar app
Finalmente, recuerda que puedes copiar el repo de los ejemplos que iré publicando en tu repo local con el comando:
git clone https://github.com/J0rgeSerran0/electron-samples
Luego deberás entrar en el directorio electron-samples que se habrá creado e instalar las dependencias on el comando:
npm install
O bien con:
npm install restore
Y finalmente lanzar la app con el comando:
npm start
Happy Coding!