Prácticas para el desarrollo multiplataforma con base de Electron utilizando AngularJS y PouchDB.

Resumen

El desarrollo de sistemas informáticos constituye una disciplina de notable impacto en la sociedad, dado a los resultados de los procesos de informatización que se llevan a cabo en la sociedad. Múltiples sistemas de software son construidos con diferentes plataformas objetivo así como sistemas operativos. El desarrollo multiplataforma ha venido a estandarizar formas de desarrollos, de manera que evoca a la unicidad de las soluciones. Tomando ello como premisa son varias las plataformas de desarrollo que han surgido con este fin entre las cuales se encuentran Apache Cordova, NW.js, NativeDroid y Electron. Éstas mencionadas utilizando tecnologías web como JavaScript, HTML y CSS para su desarrollo. El presente artículo muestra una serie de prácticas para el desarrollo de aplicaciones multiplataforma teniendo como base Electron. A su vez el desarrollo efectuado sobre AngularJS como framework de JavaScript y como gestor de base de datos PouchDB.

Palabras clave: Electron, JavaScript, Angular, PouchDB.

Abstract

The software development is a discipline that has a significant impact on society, given the results of the computerization processes carried out in society. Multiple software systems are built with different target platforms as well as operating systems. Multiplatform development has come to standardize forms of development, in a way that evokes the uniqueness of solutions. Taking this as a premise are several development platforms that have emerged to this end among which are Apache Cordova, NW.js, NativeDroid and Electron. These are mentioned using web technologies like JavaScript, HTML and CSS for their development. This article presents a series of practices for the development of multiplatform applications based on Electron. In turn the development carried out on AngularJS as a JavaScript framework and as a PouchDB database manager.

Keywords: Electron, JavaScript, Angular, PouchDB

Introducción

El desarrollo multiplataforma de aplicaciones ha conllevado el surgimiento de disímiles herramientas que colaboren con este fin. Como objetivo se busca estandarizar en un mismo proceder la construcción de aplicaciones. Sobre todo aquellas que poseen un contexto similar. En este caso se pueden ejemplificar las aplicaciones de gestión. El desarrollo de aplicaciones distribuidas ha impulsado el auge de las tecnologías web, existiendo un amplio conocimiento de dicha rama evidenciado sobre todo en comunidades de desarrollo e instituciones. Sin embargo la tecnología de escritorio aún persiste existiendo escenarios, donde no hay necesidad de implementar todo un conjunto de servicios solamente para alojar una aplicación web. Como alternativa a ello existe el desarrollo de aplicaciones nativas de escritorio utilizando tecnologías como C# y Java pero también la opción de llevar el mismo desarrollo web hacia un mecanismo que permita ser insertado en un ambiente de escritorio. En este escenario se encuentra representadas tecnologías como NW.js de IBM (IBM, 2016) y Electron de GitHub (GitHub, 2016). Ambas plataformas utilizan como tecnologías para su desarrollo JavaScript, HTML y CSS. Como complemento a ello se pueden utilizar una variedad de frameworks y bibliotecas de clase para el desarrollo como jQuery, ReactJS, Vue y AngularJS. Al utilizar alguna de estas herramientas es necesario conocer sus principales características, estructuras y modelos para construir aplicaciones teniéndolas como base. No seguir las prácticas puede influir de manera negativa en la escalabilidad, legibilidad y mantenimiento de sistemas que hayan sido construidos con esta base. El presente artículo tiene como objetivo presentar una guía de buenas prácticas para el desarrollo de aplicaciones de escritorio, tomando como plataforma base Electron, utilizando tecnologías de desarrollo web como AngularJS(Inc, 2015) y PouchDB (Smith & Harvey, 2017).

Materiales y métodos o metodología computacional

Patrones Arquitectónicos

Una de las principales disciplinas en la construcción de sistemas de software lo constituye la selección de la arquitectura de software(Bass, Clements, & Kazman, 2003) como una descripción de la estructura de los sistemas. Su análisis y selección asienta las bases para la intercomunicación en todo el sistema. La elección de la arquitectura más acertada según el contexto influirá en el éxito de la aplicación final. Entre las líneas para decidir existen un conjunto de patrones o estilos arquitectónicos aplicables al desarrollo. En el uso de tecnologías web está la aplicación del patrón arquitectónico Modelo Vista Controlador(Castro, Angel, Barros, & Nelson, 2010). La distribución en Vista, Controlador y Modelo, permite trabajar de manera independiente e interoperable cada sección del sistema. El controlador responde a las acciones de la interfaz de usuario y el modelo contiene la lógica de negocio de la aplicación. La ventaja que supone la separación de conceptos en capas e independencia entre ellas supone una característica muy utilizada por desarrolladores.

Patrones de Diseño

Los patrones de diseño comprenden el siguiente factor a considerar. Su utilización permite reutilizar conceptos que son el par problema solución ante situaciones comunes durante el proceso desarrollo de software. Como conceptos aplicados en el desarrollo se evidencia la separación de conceptos. Permitiendo controlar según el dominio diversos manejadores de entidades que contienen una lógica intrínseca independiente del contexto que se les utiliza. Una evidencia de ello es la utilización de las factorías de objetos(Allan Shalloway & R. Trot, 2000). Su utilización permite separar la lógica de la creación de objetos, permitiendo un diseño cohesivo.

Patrón Composite

El patrón composite (Alan Shalloway & Trott, 2004), patrón estructural que permite construir objetos complejos, en ocasiones utilizando estructuras recursivas. En AngularJS se ve reflejado en el componente de construcción de la interfaz de usuario. Para ello se declaran los estados de la aplicación y se compone cada objeto de la vista.

Patrón Factory

En la creación de objetos independiente de su implementación está el patrón Factory (Alan Shalloway & Trott, 2004). En AngularJS se expone todo un componente que permite la creación de objetos con propiedades y métodos que logran encapsular lógica de negocio a utilizar horizontalmente en las aplicaciones desarrolladas.

Esquema de datos

En la actualidad se ha prescindido de la utilización tradicional de esquemas relaciones en la persistencia de los datos, apareciendo sobre todo en la web el esquema llamado "NoSQL" (Pokorny, 2013). El trabajo en la recuperación de datos se realiza de manera diferente, no sólo enfocado a relaciones, sino también a otros aspectos como recursos o documentos, como es el caso de PouchDB.

Resultados y discusión

Al construir una aplicación web con angular se debe estimar su complejidad a partir del alcance de los requisitos o historias de usuario identificadas según la metodología de software que se utilice. Según la complejidad es el tamaño que se estima y con ello la base de código y estructura de la aplicación sobre todo para aplicaciones basadas en AngularJS. En (John Papa, 2014) se realiza una guía de las consideraciones a tener en cuenta cuando se va a comenzar un proyecto en AngularJS. Según sus dimensiones se establece la distribución de directorios y ficheros que componen el código fuente.

Figura 1 Disposición de ficheros y directorios.

Una vez establecido los directorios es hora de ir estableciendo cada interior de la aplicación. Una de las prácticas utilizadas en este entorno son las aplicaciones de una sola página (Mesbah & Van Deursen, 2007) que permiten en una misma interfaz establecer las acciones hacia todas las funcionalidades con navegación mínima. En este caso a través de la composición de las vistas se logra hacer estableciendo estados por los escenarios de la aplicación. Utilizando para ello el mecanismo de rutas que trae AngularJS.

Figura 2 Mecanismo de rutas de AngularJS

Ya establecidas las rutas de la aplicación entonces se pueden comenzar con los controladores donde se capturan las acciones de los usuarios y se interactúa con el modelo. En el modelo es recomendable escribir la lógica donde entonces se realiza todo el proceso de interacción con los datos.

Figura 3 Controladores

En cuanto interfaz de usuario al utilizar aplicaciones basadas web, se hace necesario realizar trabajo con los componentes visuales. Usualmente en ello recae los manejadores de eventos, filtros en la vista o componentes específicos. AngularJS propone un mecanismo para llevar a cabo la manipulación de los componentes visuales (Lerner, Murray, Taborda, & Coury, 2015) llamado directivas así como también filtros.

Figura 4 Directiva en AngularJS

Las directivas corresponden la componente adecuada para el trabajo con eventos también.

Una vez desarrollada la aplicación desplegarla en Electron (Xalambrí, 2016). Para ello se especifica la estructura de la aplicación en los ficheros de configuración. Luego se ubica la aplicación en el directorio app respectivamente.

Conclusiones

El desarrollo de aplicaciones de escritorio con tecnologías web como base supone alternativa a las aplicaciones tradicionales. Si bien no cambia la manera en que se conciben las aplicaciones web tradicionales el resultado es comparable con el uso de las tecnologías tradicionales como .Net. Es sabido que en cuanto a rendimiento no logran estar al mismo nivel que aplicaciones arquitectónicamente bien desarrolladas, pero constituye una alternativa para desarrollos de aplicaciones de gestión ligeras o de poco alcance. La presente investigación relata prácticas a tener en cuenta cuando se quiere desarrollar aplicaciones con tecnologías web, pero teniendo como resultado una aplicación de escritorio, para ello propone la utilización de patrones de diseño y arquitectónicos que aseguran la escalabilidad y mantenimiento de sistemas de poca o mediana complejidad.

Referencias

Bass, L., Clements, P., & Kazman, R. (2003). Software Architecture in Practice (2nd ed.). New York: Addison-Wesley Professional.

Castro, U. Z., Angel, M., Barros, R., & Nelson, J. C. (2010). Guía de Arquitectura N-Capas orientada al Dominio con . NET. (Microsoft, Ed.) (Microsoft). Spain: Microsoft Iberica.

GitHub. (2016). Documentation | Electron. Retrieved May 24, 2017, from https://electron.atom.io/docs/

IBM. (2016). NW.js Documentation. Retrieved May 24, 2017, from http://docs.nwjs.io/en/latest/

Inc, G. (2015). AngularJS. Retrieved March 8, 2016, from https://angularjs.org/

John Papa. (2014, February). John Papa: Angular App Structuring Guidelines. Retrieved May 24, 2017, from https://johnpapa.net/angular-app-structuring-guidelines/

Lerner, A., Murray, N., Taborda, C., & Coury, F. (2015). Build custom directives with AngularJS | ng-newsletter – the free, weekly AngularJS newsletter. Retrieved May 24, 2017, from http://www.ng-newsletter.com/posts/directives.html

Mesbah, A., & Van Deursen, A. (2007). Migrating multi-page web applications to single-page Ajax interfaces. In Software Maintenance and Reengineering, 2007. CSMR"07. 11th European Conference on (pp. 181–190).

Pokorny, J. (2013). NoSQL databases: a step to database scalability in web environment. International Journal of Web Information Systems, 9(1), 69–82. http://doi.org/10.1108/17440081311316398

Shalloway, A., & R. Trot, J. (2000). Design Patterns Explained. A new perspective on Object Oriented Design. Addison-Wesley Longman Publishing Co., Inc.

Shalloway, A., & Trott, J. (2004). Design Patterns Explained: A New Perspective on Object-Oriented Design (2Nd Edition) (Software Patterns Series). Addison-Wesley Professional.

Smith, G., & Harvey, D. (2017). PouchDB, the JavaScript Database that Syncs! Retrieved May 24, 2017, from https://pouchdb.com/

Xalambrí, S. D. (2016). Desarrollando aplicaciones de escritorio con Electron.js. Retrieved May 24, 2017, from https://platzi.com/blog/aplicaciones-escritorio-electron-js/

Autor:

Felix Ivan Romero Rodríguez 1*

Yelena Islen San Juan 2

1 Zunzun Education Services Ltd. Codechanic. Habana.

2 CITMATEL. Departamento de multimedia. Habana.