Refactorización en React de la lista de conexiones del cuadro de mandos de PieSync
Metadatos
Mostrar el registro completo del ítemcomunitat-uji-handle:10234/158176
comunitat-uji-handle2:10234/71324
comunitat-uji-handle3:10234/107061
comunitat-uji-handle4:
TFG-TFMEste recurso está restringido
Metadatos
Título
Refactorización en React de la lista de conexiones del cuadro de mandos de PieSyncAutoría
Tutor/Supervisor; Universidad.Departamento
Berlanga Llavori, Rafael; Universitat Jaume I. Departament de Llenguatges i Sistemes Informàtics; De Berdt, PeterFecha de publicación
2018-06Editor
Universitat Jaume IResumen
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 ... [+]
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. [-]
Palabras clave / Materias
Descripción
Treball Final de Grau en Enginyeria Informàtica. Codi: EI1054. Curs acadèmic: 2017/2018
Tipo de documento
info:eu-repo/semantics/bachelorThesisDerechos de acceso
http://rightsstatements.org/vocab/CNE/1.0/
info:eu-repo/semantics/restrictedAccess
info:eu-repo/semantics/restrictedAccess