¿Qué es electron?
Electron es un framework que permite la creación de aplicaciones de escritorio utilizando JavaScript puro, a través de un runtime con APIs nativas, enfocado en aplicaciones de escritorio, en vez de servidores web, es de código abierto y multiplataforma (funciona bajo Linux, Mac y Windows).
Esto no significa que Electron sea un binding de librerías GUI para JavaScript. Electron utiliza páginas web como su GUI, por lo cual puedes verlo como un navegador Chromium mínimo, controlado por JavaScript.
Compañías como Microsoft, Facebook, Slack y Docker utilizan esta plataforma.
Electron en acción
Primeramente para continuar necesitas tener instalado Node.js, para luego continuar con los demás pasos:
# Clonar el repositorio
$ git clone https://github.com/electron/electron-quick-start
# Ir al repositorio
$ cd electron-quick-start
# Instalar dependencias y correr aplicación
$ npm install && npm start
El resultado de eso sería:
Ahora bien, si deseamos modificar el proyecto:
-Abrir el archivo package.json (si deseamos cambiar la versión, descripción del proyecto, entre otras cosas):
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "Hola Mundo!!!",
"main": "main.js",
"scripts": {
"start": "electron main.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/electron/electron-quick-start.git"
},
"keywords": [
"Electron",
"quick",
"start",
"tutorial"
],
"author": "GitHub",
"license": "CC0-1.0",
"bugs": {
"url": "https://github.com/electron/electron-quick-start/issues"
},
"homepage": "https://github.com/electron/electron-quick-start#readme",
"devDependencies": {
"electron-prebuilt": "^0.37.0"
}
}
-Por último modificamos el archivo index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hola Mundo!</title> </head> <body> <h1>Hola Mundo!</h1> We are using node <script>document.write(process.versions.node)</script>, Chromium <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html>
-Ejecutamos el siguiente comando para ejecutarla:
npm start
-Y este sería el resultado:
