Otra migración – Proyecto Personal

By   Skrigueztep Skrigueztep Sun May 12 2024

Hola de nuevo! 👋.

Hace tiempo comencé con un proyecto personal que nacío con el objetivo de probar arquitectura hexagonal aplicada a FE (Front-End) y que después realizaría como propuesta para hacerla de uso interno. Pero desafortunadamente, por tiempos, trabajo y muchas cosas que aprender, el proyecto se quedo en pausa y un tanto en el olvido.

Contexto

Comencemos desde el inicio… Toda la idea surgío porque me enfoque bastante en algunos problemas que ví y que tengo identificados en el día a día a lo largo de los proyectos. Principalmente con migraciones… Ya sea por actualizaciones de Frameworks, de dependencias, cambios y rotaciones de los miembros del equipo y en algunos casos simplemente por la obsesiva idea de cambiar de framework.

Obviamente algunos de los puntos debiles que noté fueron: la deuda técnica, la carga de trabajo, el acoplamiento existente, la extensión y prolongación tanto de los tiempos de entrega como de las actividades, junto con la mezcla entre las actividades de requerimientos sobre la marcha y las actividades de la migración, etc.. Fueron varios casos los que observé, incluyendome en cuanto a la parte de las migraciones. Dado este hecho me llamó bastante la atención; la parte de los patrones de diseño y de las arquitecturas para poder manejar un enfoque de desacoplamiento tanto de los frameworks, como de la lógica de negocio y por supuesto de cada parte que conforma cada uno de los proyectos.

Ya que encontré el patrón o la arquitectura que más encajaba o se prestaba de manera más acorde y flexible, me propuse implementarla, ya que soy más Hands-On que otra cosa.

Así que puse manos a la obra creé un monorepo para poder alojar tanto FE (Front-End) y BE (Back-End), el stack que decidí usar fue:

  • Angular v10 (Que erá la más estable pero un poco atrasada)
  • Express
  • Almacenamiento en ficheros (De forma temporal y para unas pruebas en cuanto a una migración en cuestión de Infra de forma más granular y como ejemplo)
  • Comunicación por medio de API Rest con authenticación con JWT (Temporal de igual forma, para migrarlo a un servicio de AWS e implementar Accesos basados en Roles y Feature Flags)

Y porque este Stack? Principalmente por conveniencia, ya que es el Stack que más fuerte tenia en el momento, además de que en este momento la empresa estaba completamente casada con Vue, y con el enfoque que le queria dar junto con los objetivos pues iba a ser una aplicación algo extensa y tenia que ser muy robusta.

El desarrollo fue algo pesado… principalmente porque esto lo comencé a hacer en mis tiempos libres y fines de semana… Avance bastante en 2 o 3 meses… creando varios módulos tanto de FE como de BE y registrando la info, además de ir agregando pruebas en el camino. Y vaya que tiempo después me daría cuenta que podría haber sido un poco más rapido el desarrollo si hubiera usado Vue en lugar de Angular… Por el aspecto que es muy a la forma de Angular y si no, pues tienes que adaptarlo o buscar la forma correcta de hacer las cosas, digamos que es un poco “especial” el framework en ese aspecto.

Logré hacer las funcionalidades básicas de la solución únicamente… ya que el tiempo me comia, dado que no lo hacia en horario laboral… únicamente en mi tiempo libre y los fines de semana… además de que la uni no ayudaba con las tareas y así…

Cuando terminé las funcionalidades básicas hasta el momento para poder realizar algunas actividades que necesitaba, lo dejé en pausa, ya que tenía que desarrollar, adaptar e implementar pequeños módulos externos desarrollados por mi, para poder completar del todo la funcionalidad y a su vez hacerlo bastante módular y escalable.

Motivos de la migración

Ahora, un tiempo después y bastante largo o prolongado… Por gusto y en parte por necesidad, comencé a meterle mano aun más seguido a Vue; en su versión 3 para ser más exactos.

Después de algunos proyectos, muchas pruebas y estar viendo bastante código en Code Review (CRs), investigando errores o fallos en implementaciones, dando apoyo cuando recurrian por el y asi… pues justamente fue al desarrollar un proyecto con:

  • Vue 3
  • SQLite
  • Ionic + Capacitor

Y obviamente con una arquitectura lo más acercado posible a la hexagonal, fue cuando me dí cuenta de que si realizó la migración del proyecto de Angular a Vue… el desarrollo sería más rápido y obviamente como varias cosas las tuve que acoplar a Angular… ya he tenido tiempo y experiencia para ver no solo el como desacoplarlas.. sino también en el como y hasta que punto llegar a ese “acoplamiento” que existe al final de cuentas… y con la implementación también de algunos patrones de diseño y principios SOLID…

Ventajas

Las ventajas quizá no parezcan muchas o no representen ni un gran esfuerzo ni un algo taaaan grande…. Si son, serían y van a ser algo de bastante impacto… parte de lo cual también pues voy a ir documentanto aquí en el blog… quiza no todo, pero si algunas partes interesantes… y llegado su momento quiza hasta se pueda dar a conocer el proyecto o la versión comunity.

Ventajas

  • Menor tiempo de desarrollo
  • Menor acoplamiento
  • Mayor complejidad (al inicio o para alguien nuevo, pero el onboarding es lo de menos…)
  • Mayor facilidad para las pruebas unitarias
  • Mejoras no solo en rendimiento sino en la experiencia de desarrollo
  • Mayor escalabilidad, testeabilidad, robustes y mantenibilidad

Ahora… solo falta realizar la planeación y a darle…. cosa que ya tengo “contemplada”… pero antes… vamos a ver si uno de mis conocidos, que me dijo acerca de entrar a un proyecto FE, se anima y avanzamos más rápido con el desarrollo… sino.. yo espero que al menos en algunas semanas ya tener un avance significativo…

ANUNCIO y SPOILER:

Voy a estar subiendo, quizá un poco más seguido, algunas publicaciones para poder ver que onda… tanto con avancces como con cosas interesantes que me vaya encontrando en el camino