Electron, framework Javascript para crear aplicaciones de escritorio

| 2016-04-26 | No hay comentarios »

¿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:

windows

 

 

 

 

 

 

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:

-Y este sería el resultado:

windows2

Acerca del autor: Rodrigo Paszniuk

Ingeniero Informático, amante de la tecnología, la música, el ciclismo y aprender cosas nuevas.

Posts Relacionados

  • twitter-card Tutorial: Autenticación de usuarios en Node.js con Facebook utilizando Passport
  • maxresdefault Tutorial: Autenticación basada en Token utilizando Node.js + Express.js + MongoDB
  • nodejs-and-express Generador de aplicaciones de Express.js
  • JSF 2 con Maven – Hola Mundo