Interfaces multiplataforma basadas en electron

 

Introducción:

Cada vez queda más patente la necesidad de hacer aplicaciones multiplataforma
que se adapten a dispositivos de todos los tamaños de la forma más general posible para evitar en la medida de lo posible el tener que hacer varias versiones distintas y poder ahorrar tiempo y dinero.

Uno de los principales problemas que han tenido los desarrolladores de iOS, ha sido el ver como con el paso de los años, una única interfaz de tamaño determinado ha sufrido cambios y han tenido que adaptarse en este proceso. Por su lado, Android, abordaba esta temática con su sistema de layouts, no era ni es un sistema perfecto pero facilitaba bastante el desarrollo en un ecosistema tan variado como lo es el de Android.

Mientras tanto, Apple fué sacando sobre la marcha un sistema de constrains (restricción) que desde mi punto de vista era una chapuza que no solucionaba ni facilitaba la vida a los desarrolladores. Únicamente los más veteranos y centrados profesionalmente en esta tarea sacaron provecho en su trabajo. Sin duda, este sistema era insuficiente para los que no teníamos tantos desarrolladores con experiencia para afrontar desarrollos de un nivel de calidad alto.

Entre todo este jaleo, y aun siendo bastante reticente al paso web para usar como interfaces, me he fijado en la tecnología que ofrece electron y en sus posibilidades. La conocí a traves del editor de Software libre, Atom, y está enfocada a hacer interfaces siguiendo el MVC (modelo vista controlador)
que es justo la pieza que me faltaba en el desarrollo de aplicaciones multiplataforma (Android, iOS, escritorio...) donde se busca delegar la lógica de negocio a una librería en C++, scripts python, o directamente en una libreria javascript, puede tener sentido utilizar algo tan extendido como es la combinación de JS, HTML, Bases de datos, json, y muchas otras tecnologías web, que aun (a mi parecer) lejos de ser perfectas y todo lo ordenadas
y estrictas como a mi me gusta en un desarrollo, con una metodología adecuada y una buena organización creo que sería posible delegar algo tan importante como es hoy en día lsa interfaces rápidas y visualmente atractivas a una parte de una aplicación.

Estas tecnologías combinadas con la versión 2 del framework Angular 2  promete ser una poderosa herramienta para afrontar este reto. Este utiliza MongoDB para manejo de datos, Express.js como framework de servidor, y utiliza Nodejs como ayuda del entorno de ejecución. Angular pone énfasis en la programación declarativa, esto es el QUE quiero hacer, y no tanto COMO lo quiero hacer. De esta forma se puede generar interfaces de usuario que sin entrar en la complejidad del funcionamiento, pueden ser el complemento a
aplicaciones que si lo sean. La wikipedia ofrece algo más de información.

Con el tiempo os contaré mis impresiones tanto en los aciertos como en los fracasos, para todo aquel que pueda estar interesado en estos temas pueda tener un experiencia en la que apoyarse para tratar de usar esta tecnología
en la resolución de este complejo problema. Mi idea es utilizarlo en varios proyectos que tengo entre manos y que explicaré más adelante. Como ya he comentado, este post trata de rellenar el hueco de la parte `bonita` que deje en pendiente en el post de aplicaciones multiplataforma. También me gustaría experimentar con una idea del proyecto GNU llamada guile. Pero es algo que aun está en desarrollo y que aun no he podido explorar a fondo para sacar
conclusiones. Vi este proyecto interesante y estaré pendiente a los avances
que se den para ver lo que me puede interesar.

Cosas que te interesa saber sobre este framework

• El fichero main es el encargado de crear el objeto BrowserWindow. Puede haber varios y cada uno de estos objetos funciona en un proceso independiente con su propio ciclo de vida de aplicación. 
• Cada brower tiene un ciclo de vida que si ya lo has utilizado, tiene cierto
  parecido al de Android, aunque lógicamente es distinto.
• Existe gestión de input de usuario muy parecido al de Java de Android. Con eventos onClick, funcioner declaradas inline en los variables. En Java se podían declarar antes de ser usadas, en javascript no lo sé, así que tengo TODO  comprobar si se puede o no. Quizá no tenga sentido al ser interpretado o no haya diferencia.
• Existe gestión de excepciones y cuelgues para reaccionar ante problemas en la ejecución de una aplicación.
• El fichero renderer es el encargado de actualizar la interfaz y de recoger los
  eventos que suceden en ella.
• Tu aplicación puede tener un menu superior customizado a tu gusto, o puedes crearla sin menu. Solo ventana.
• La aplicación es capaz de acceder al sistema de ficheros del ordenador mediante el file manager del S.O
• También puede acceder al protocol handler para realizar acciones en otras aplicaciones, como por ejemplo lanzar un juego en Steam.
• Al igual que una web puedes acceder a información del ordenador, como sistema operativo, versión, y de la aplicación.
• Puedes personalizar los shortcuts de tu aplicación, en las referencias hay una pequeña guia para no sobreescribir los del sistema operativo que lo ejecute.
• Al igual que iOS y Android, puedes crear dialogos para dar o recibir información.
• También se puede crear un icono de aplicación para colocar en la barra de notificaciones.
• Está a disposición del desarrollador un modulo para comunicar distintos procesos, ya sea de forma asíncrona o síncrona. 
• Para más información puedes utilizar las demos del Electron API demos v1.0 (link) que contiene demos interesantes de lo que puedes hacer con electron y todo dentro de una aplicación generada con Electron.

 Organización

Una posible organización del proyecto debería estar más o menos organizada así:

• README.md, Información de la aplicación.
• LICENSE,md, Licencia
• index.html, página web de la interfaz del proyecto.
• renderer.js, renderizador de la web para los cambios a lo largo del tiempo.
• assets, carpeta con todas las imagenes y otros recursos necesitados por la app.
• scripts, carpeta con todos los scripts en javascript necesitados por la app.
• node_modules, carpeta con las dependencias de la app instaladas con npm

Conclusión

Espero que con esta entrada os hayais introducido en conceptos e ideas básicas del MVC para uso de interfaces y en el futuro podamos evaluar lo fácil o no que son de usar y si ahorran tiempo de desarrollo frente a otros métodos de interfaces. Alternativamente puedes hacer distinción usando MVP.