Refactorización en React de la lista de conexiones del cuadro de mandos de PieSync

Abstract

Durante los meses de febrero y marzo del 2018, he realizado las prácticas externas e internacionales en PieSync[4] (Gante, Bélgica). Ha sido una experiencia nueva, agradable, interesante y me ha enseñado tanto “hard-skills” como son ES6, React y la programación funcional, como “soft-skills” como por ejemplo trabajar en equipo (con normas y metas) y mantener una planificación rígida. PieSync es una startup, una empresa joven que está en auge. Solo están satisfechos con un producto de una calidad muy alta ya que esto les permite estar en un mercado muy competitivo. Por ello, al iniciar las prácticas me han dado tiempo suficiente para investigar y aprender bien las tecnologías que tenía que usar con el fin de poder producir código legible y de alta calidad. Mientras estaba realizando el producto, siempre han mantenido un ambiente muy agradable, ayudándome cuando lo necesitaba y revisando el código que producía con regularidad, tanto para asegurarse de la calidad del código y del producto final (redirigir y corregir cuando era necesario) como también para ayudarme con mi aprendizaje de estas nuevas tecnologías. El producto, o bien servicio, que PieSync vende es una cuenta en su aplicación web que sincroniza los contactos de diferentes servicios del tipo Customer Relationship Management (CRM), como pueden ser Google Contacts, Mailchimp o bien Hubspot. Es una sincronización en tiempo real en dos sentidos: añadir un contacto en una aplicación de la conexión implica que también se añade al otro servicio. Esto se puede manejar mediante una serie de reglas que el usuario define al principio de crear la conexión. Es un servicio muy útil para empresas pequeñas y medianas que no tienen la capacidad económica para tener a un equipo informático que se encargue de esta tarea. Los objetivos del proyecto son la refactorización de la página inicial del cuadro de mandos, que muestra la lista de conexiones del usuario, y la integración de ésta en la aplicación, como también crear un manual (o guía) de estilo. En realidad el proyecto no es una refactorización, ya que tengo que crear esta lista de conexiones desde 0. Empiezo con un diseño nuevo creado por el diseñador de PieSync y además tengo que crear todos los componentes que constituyen esta página en un lenguaje distinto al que han usado para crear la página actual. Esto quiere decir que no puedo usar nada ya existente. Lo que pretenden conseguir es código nuevo, legible, limpio, eficiente y que su mantenimiento sea fácil. De esta forma, actualizan tanto el diseño como también el código con el fin de tener una aplicación robusta y preparada para los próximos cinco años. Para empezar, tuve que aprender ECMAScript 6 (abreviado ES6, que es un estándar de JavaScript) para la parte front-end, y la programación funcional, algo totalmente nuevo para mí. Fue una experiencia increíble, me ha dado una nueva forma de ver la programación y, aunque el lenguaje en sí no es muy complicado, la programación funcional sí requiere una cierta adaptación ya que es bastante diferente de la programación orientada a objetos que se enseña en la UJI. Además, toda la parte front-end se tenía que conectar con el back-end, escrito en Ruby on Rails, otro lenguaje nuevo para mí. Ruby también es un lenguaje pionero en cuanto al uso de .map y .filter, lo que hace su curva de aprendizaje bastante empinada. Añade a esto el Ruby on Rails framework, con toda su magia, y conseguimos una mezcla de tecnologías bastante interesante.

Luego, para poder empezar a crear los componentes que posteriormente consistuyen la aplicación web (la lista de conexiones del cuadro de mandos), tuve que aprender React, una librería que (también) introduce nuevos conceptos en la estructura de código de una aplicación web. Supone la parte Vista del modelo MVC (Modelo, Vista y Controlador) pero toda la lógica y los estilos de los componentes se juntan para crear componentes independientes, que engloban toda la funcionalidad y se pueden importar en cualquier otro módulo o componente. Veremos que no se usa la estructura MVC en este proyecto. Finalmente, todos los componentes tenían que estar disponibles en una “style guide” con el fin de ofrecer a los actuales (y futuros) desarrolladores una guía que deben seguir cuando integran estos componentes en otras partes del cuadro de mandos. Por lo tanto, se requiere un código muy limpio y bien documentado para facilitar el uso de éste en un futuro. Conseguí realizar esta “style guide” como también la lista de conexiones, aunque aún no ha salido a producción ya que falta hacer más tests. Es posible que aún haya pequeños cambios en el diseño o la funcionalidad. Pero lo que este proyecto pretendía conseguir se ha conseguido, algo que me da cierta satisfacción personal. Todo esto conlleva que he aprendido mucho en tan solo dos meses de jornada completa. No solo a nivel profesional (las nuevas tecnologías y metodologías), sino también a nivel personal ya que uno se da cuenta de sus puntos fuertes y débiles al estar rodeado de gente más capacitada. Es un período de reflexión que te permite comparar con los profesionales, y te da mucha perspectiva en cuanto a la capacidad profesional que uno posee. Por último informar que la memoria detallada va a continuación en inglés para facilitar la lectura tanto para el jurado como para PieSync.