¿Reinventando angular?

Esta crónica es el relato de un evento reciente en mi haber y quiero arrancarla con una frase trillada (en cualquier idioma) pero cierta: «…hay momentos en la vida que te marcan…».

Instantes fugaces que se quedan en tu memoria, en especial, aquellos que son «primeras veces», por ejemplo: el primer día de clases, la primera consola de videojuegos, tu primer coche, tu primera casa, tu primer trabajo, el primer sueldo, el primer beso, el primer amor… pero como todo en la vida, el equilibrio se hace presente y no todo es mágico, también está: el primer rompimiento, la primera hospitalización, la primera infracción, la primera mala calificación, el primer despido, la primera vez que tienes que decir adiós a un ser querido.

Trasladando esos primeros instantes al quehacer de la programación, llega el día D, el evento que cambia tu forma de ver la interacción de un programa de tu autoría con los datos, el punto de no retorno, el momento en que tu programa conecta con una base de datos en un servidor en red, tu primer sistema cliente-servidor.

Ahí estás tú, en la cima del mundo observando tu creación. Tu usuario haciendo inicio de sesión con una clave de usuario y su contraseña, viendo como las pantallas cobran vida, los datos aparecen, yendo y viniendo hacia y desde el servidor de base de datos. Mientras tanto tú estás en el servidor ejecutando instrucciones SELECT para corroborar que lo que atestiguas no es un sueño.

Sí, yo tuve también ese momento triunfal en el que dejé de ser un programador que guarda datos en archivos de texto locales para convertirme en un programador de nivel superior que ahora conecta a bases de datos. Fue un programa hecho en Visual Basic 6 usando una base de datos MS Access compartida en red en otro equipo, servía para registrar apartados de vehículos en una concesionaria automotriz. Fue el primer encargo «profesional» que tuve; lo hice con ayuda de uno de mis mejores amigos. Él tenía unidad escritoria para CDs (hablamos de 2001 aproximadamente), y tratamos de hacer la entrega lo más profesionalmente posible, con un CD etiquetado que incluía instalador.

Espero que la descripción haya logrado hacerte imaginar que se trataba de una aplicación madura y funcional, para revelarte que estaba lejos de serlo. Funcionaba, sí, pero no era útil. Lo más complicado era actualizarla. Por tratarse de una aplicación para Windows, cada versión nueva (tampoco es que hayan salido tantas versiones) se tenía que actualizar en cada equipo, manualmente uno a uno. No tenía ningún tipo de reportes o esquemas de seguimiento, realmente era como sustituir una libro de cálculo de Excel por un programa con una base de datos centralizada.

¿A qué voy con todo esto? Conforme tu abanico de conocimiento y herramientas se expande, las facilidades y funcionalidades vienen acompañadas de nuevos problemas, inconvenientes y situaciones que hay que atender.

Habiendo tenido mi experiencia en la concesionaria automotriz, eventualmente la vida me llevó a toparme con una de las trinidades de la programación: Apache Web Server, MySQL y PHP.

Para mí fue un salto cuántico. Dejaba atrás la base de datos Fisher Price y comenzaba mi interacción con una que podía usarse en un Servidor de Base de datos. Nuevos nombres y términos empezaron a emerger: puerto de red, protocolo, servicio, script, server-side programming, cgi, el popular localhost. Como mencionaba al inicio de la crónica, con las maravillas también llegan nuevos problemas asociados: direcciones de red que no coinciden, reglas de firewall, antivirus interponiéndose, html mal construido, configuraciones erróneas de mod en Apache, errores que no entiendes del intérprete de PHP.

Es justo en el reino de las aplicaciones web donde se centra mi crónica. No ahondaré en lo que la aparición de javascript y posteriormente HTML5 hicieron en la evolución de estas tecnologías o lo que significó para mí el conocerlas, vaya, el solo hecho de que estés leyendo este blog es prueba de lo que estos componentes pueden hacer (desde permitirme escribirlo, almacenarlo y distribuirlo a tu pantalla).

Ahora sí, al tema de la crónica.

Estoy trabajando en un proyecto personal, una aplicación web de punto de venta, con las funcionalidades típicas:

Registrar datos del vendedor

Registrar datos de un comprador

Generar la lista de venta

Nota y/o factura

Inventario de productos

Todo esto hecho con PHP, MySQL y el servidor de toda la vida, Apache. Las vistas para registrar los datos del vendedor, comprador y detalles de un producto, resultaron bastante sencillas, incluso rutinarias:

Se genera una vista en HTML con un formulario

Se mandan los datos por POST a un script PHP

El script PHP procesa y devuelve la respuesta en otra vista, de éxito o error.

No quise hacerlo más complicado ya que las vistas son bastante sencillas e ir y venir de PHP resulta rápido y eficiente. Para algunos catálogos sí le metí un poco de «complejidad»; el listado de códigos postales, las unidades de medida, entre otros, se cargan mediante AJAX con peticiones HTTP al mismo servidor.

Hasta ahí todo iba bien, el proyecto funcionando y avanzando sin problemas, hasta que llegué a la vista para registrar una venta.

Estoy usando una plantilla gratuita hecha con Bootstrap y JQuery, por lo que todo el asunto AJAX lo estoy controlando así, con JQuery. Elegir los datos de un vendedor y un posible cliente ya registrado se hace obteniendo los datos por AJAX también y toda esta información es despachada desde el mismo servidor que expone la aplicación web con PHP. Sin embargo, trabajar con los productos de forma dinámica se empezó a complicar desde el simple evento de agregar un registro a la posible lista de venta final.

Pensé en hacerlo en 2 vistas, una donde ves la lista de los productos que ya tienes y que te proporciona botones para agregar, editar o borrar productos, y una vista independiente para cada una de estas operaciones, como se aprecia en el diagrama siguiente:

Aunque esto habría funcionado (me consta porque así he hecho otros proyectos) cambiar de vistas es una forma de programación que se aprecia, digamos, vieja. Hoy día lo normal es que todo ocurra en la misma ventana, más si se está utilizando JQuery, que incluso también es un viejo conocido y según la palabra popular, en declive.

Pues a fin de hacer ver más moderna la aplicación empecé a trabajar con JQuery y JS para hacer que la misma pantalla de venta pudiera trabajar en la misma pantalla con la lista de productos de forma dinámica, es decir:

Mostrar los productos en una lista.

Agregar los productos elegiéndolos desde una pantalla emergente.

Editar la cantidad y descuento desde la lista de productos.

Calcular automáticamente el importe del producto según su cantidad, precio unitario y descuento.

Calcular automáticamente el subtotal e impuestos conforme se agregan o eliminan productos a la lista,

No soy experto en Javascript, por ende tampoco en JQuery, así que los problemas los empecé a tener desde trabajar de forma dinámica agregando renglones a la tabla que muestran los productos. Eliminar un producto y redibujar la tabla también. Quizás tú que estás leyendo esta parte la tengas controlada, pero no fue mi caso.

Se me ocurrió generar una clase para luego instanciar objetos y llenar sus datos con los datos de los productos, es decir, haría un lista de objetos Producto, y luego con funciones y eventos, ir llamando al producto en turno, ajustar la tabla de productos y demás.

Así se ve la pantalla a la fecha de esta crónica:

Está horrible, no es nada amigable, es difícil de usar y en pantallas pequeñas no es práctica. Lo sé.

Conforme iba avanzando, cada vez la programación se iba haciendo más compleja. Ya antes había leído acerca de Angular y lo que hace. También en su momento lei e hice algunos ejercicios con otras herramientas como Svelte o Vue.js. Al progresar (o atascarme) en la programación con javascript, más y más me convencía de que, además de que no lo estaba abordando correctamente, muy probablemente alguna de estas herramientas ya haría lo que yo estaba intentando reinventar y mal.

Analicé nuevamente Vue.js, Svelte y Angular. Vue.js suena muy bien en su introducción, supuestamente tiene una curva de aprendizaje muy corta y es fácil de usar, pero, francamente no me quedó claro cómo se usa. Hay una frase que quien presenta Vue.js la usa como definición de diccionario:

-Vue.js es un framework progresivo que te permite solo agregar lo que necesitas.

Svelte me pareció mucho mejor. También tiene su definición de diccionario que todos sus avatares repiten, sin embargo, no continue con él porque cuando vi la parte básica de Angular, me pareció que Angular se usaba de forma muy similar y veo éste último mejor posicionado, con más tiempo de vida y ya no digamos, mejor pagado.

Evidentemente no me puse a reinventar Angular, más bien, me di cuenta que estaba intentando hacer algo que alguien más ya había pensado e instrumentado mucho mejor. No es la primera vez que me pasa (con código propio), también en mi haber profesional me encontré con situaciones similares. En un sistema que estuve trabajando durante 3 años, quien tenía a cargo el sistema (hecho en java) en lugar de usar algún framework para manipular y modelar los datos como Hibernate o Mybatis, se puso a inventar clases de conexión a base de datos y entidades que simulan las tablas modeladas. La herramienta casera funcionaba medianamente bien, pero para nada se comparaba a Hibernate, colapsaba con volumen, el manejo de la conexión a base de datos era MUY pobre y darle mantenimiento, algo todavía peor.

En síntesis, si ves que te tropiezas constantemente, investiga, probablemente alguien ya se tropezó antes con lo mismo y habrá alguna solución similar a la que estás pensando (ya hecha) o mejor. Y si no… podrás ser la persona que la proporcione.

Respecto a mi experiencia con Angular, la verdad es que ha sido fenomenal. La documentación y foros abundan, es sencillo encontrar respuestas a preguntas, pero tampoco es todo rosa. Si no sabes Javascript bien (mi caso), el avance es lento. Hay muchos conceptos íntimamente ligados a JS en Angular, como promise, que te harán ir muy lento si no le inviertes tiempo primero a eso.

Hay más de qué hablar con esta inclusión de Angular en este proyecto, pero ya hablaré de ello en la siguiente crónica.