Tag Archives: Electron

Aplicaciones de escritorio con Electron

Javascript, Web

Como ya sabrás, Javascript (de ahora en adelante JS) es el lenguaje que se propone dominar el mundo. Si antes para el desarrollo de una web trabajabas con JS o algún framework que otro contados como JQuery, Mootools, Prototype,  (me refiero los mas comunes) hoy día el mundo del Frontend se a vuelto un tanto complejo a la hora de decidir una solución. Es inconcebible pensar en el desarrollo web obviando el uso de el gestor de paquetes Node NPM, un task runner como Gulp o Grunt, o usar JS del lado del servidor como con Nodejs o IO.

Además, la multitud de frameworks va creciendo cada día, como AngularJS, ReactJS, EmberJS, Backbone, quedando los nombrados anteriormente a la altura del betún, siendo usados como librerías terceras para usos específicos.

Hace años que llevamos viendo que en los móviles, también tenemos soluciones en Javascript en los móviles, apostando por aplicaciones híbridas, aprovechando conocimiento y un solo esfuerzo de desarrollo para una aplicación sea multiplataforma gracias a Phonegap/Cordova.

Pues un paso mas que da JS, es meterse en darnos facilidades en el desarrollo de aplicaciones de escritorio con tecnologías web. Esto es algo que ya lleva tiempo usándose por grandes compañías, pero no es hasta que comienza la  apuesta de las grandes marcas para que despierte nuestra curiosidad.

Con todo esto, os quiero hablar de Electron, un proyecto de la gente de Github, con el que desarrollaron el IDE Atom. La idea es tal cual como se presenta en móvil con las aplicaciones híbridas, es decir, presentar un webview, un chromium en este caso, para pintar nuestro software y dar la apariencia de aplicación nativa.

Esto lo puedes comprobar por ejemplo, abriendo tu IDE Atom, Visual Studio Code o Slack si lo usas, y abriendo el inspector de elementos pulsando Alt + CMD + i (en MAC)

Screenshot Atom Inspector

*Con Visual Studio Code o Slack no pude hacer lo mismo, parece que lo tienen capado, pero está hecho con la misma idea.

El proyecto se llama Electron (http://electron.atom.io/), anteriormente conocido como Atom Shell. He estado usándolo un poco para intentar hacer una app con ReactJS, pero aun no la tengo acabada como para ponerla de ejemplo. Pero si buscas un poco, tienes varios ejemplos para poder empezar como los Boilerplate’s:

https://github.com/szwacz/electron-boilerplate (básico)
– https://github.com/JimLiu/electron-boilerplate-react (para hacer una app con reactJS)

Una gran ventaja, es que puedes usar looooo que quieras para desarrollar tu app, cualquier framework o solución web del lado del cliente.

Y por no ser repetitivo, no voy a explicar lo que ya se comenta en la web a la par que los boilerplate que os he pasado anteriormente, y previamente ejecutando:

Si eres desarrollador web, es algo a mirarse, ya que para aquellas herramientas que nos ayudan a hacer productivos en nuestro trabajo, hay alguna que quizás nos interese tenerla como aplicación de escritorio, pues Electron es una solución notablemente aceptable para usar.

Yo sigo jugando con el, a ver si pronto puedo compartir un Boilerplate propio y alguna app util.

tags: , , , ,