Mi-Saldo-TransMi

El Problema Inicial: Migración de SPA Pesada a una Arquitectura Híbrida Ágil

El proyecto original, desarrollado en Angular, presentaba desafíos de sobrecarga en el dispositivo del cliente debido al peso del framework para una funcionalidad enfocada principalmente en la consulta rápida de saldos de transporte urbano. El reto consistía en migrar la solución hacia un modelo más ligero, minimizando el tiempo de carga inicial y reduciendo la complejidad del despliegue sin perder las capacidades en tiempo real que ofrece Firebase para la autenticación y la base de datos de los usuarios.

Arquitectura y Solución Técnica

Se diseñó una arquitectura híbrida optimizada utilizando Node.js y Express como servidor web ligero para renderizar plantillas EJS (Embedded JavaScript templates) en el lado del servidor (SSR). Esto elimina la necesidad de compilar un bundle SPA pesado para el cliente:

• Servidor Express (app.js): Actúa como el motor de enrutamiento y despacho de vistas estáticas y dinámicas.
• Motor de Plantillas EJS: Permite modularizar la interfaz del usuario e integrar dinámicamente hojas de estilo adaptadas con TailwindCSS para un renderizado ultra-rápido.
• Integración Directa con Firebase SDK: Se descentralizó la gestión del estado crítico del lado del servidor, delegando la autenticación de usuarios y la persistencia de datos con Firestore directamente al cliente a través de un archivo centralizado de Vanilla JS public/js/main.js.

Retos de Implementación

El mayor desafío técnico radicó en desacoplar la lógica de negocio anteriormente gestionada por la inyección de dependencias de Angular. Se debió recrear el sistema de reactividad y sincronización de UI utilizando Vanilla JS clásico. Adicionalmente, asegurar que las credenciales expuestas en la constante firebaseConfig del cliente no vulneraran la seguridad de la base de datos requirió la implementación estricta de Reglas de Seguridad de Firestore (Security Rules) basadas en tokens de autenticación de usuario.

Resultados de Rendimiento Esperados

La transición de una SPA monolítica a este enfoque híbrido con Express + EJS reduce drásticamente el First Contentful Paint (FCP), eliminando el overhead de procesamiento del framework del lado del cliente. La aplicación resulta altamente eficiente, logrando cargas instantáneas idóneas para usuarios en movilidad urbana con conexiones de red móvil restrictivas.