Domina tu Arquitectura y Utiliza los Frameworks como Herramientas

"Angular empodera a los desarrolladores para construir aplicaciones que viven en la web, en dispositivos móviles o en el escritorio."
--Misko Hevery

En nuestra travesía a través de diversos frameworks, hemos llegado a Angular, un potente framework para construir aplicaciones de una sola página (SPA) del lado del cliente, utilizando HTML y TypeScript. En una aplicación Angular, todo ocurre dentro de una única página, dando la ilusión de múltiples páginas mediante la actualización dinámica de los componentes visibles en cada momento.

Al igual que en Blazor, donde el lenguaje principal es C#, en Angular se utiliza TypeScript. TypeScript es un lenguaje tipado que se compila en JavaScript, el lenguaje de ejecución final en los navegadores.

A diferencia de los frameworks que hemos explorado previamente, Angular introduce un enfoque completamente distinto, aunque guarda ciertas similitudes con Blazor en su trabajo con componentes. Mientras que Blazor permite la creación de aplicaciones tradicionales con páginas individuales y SPAs (aplicaciones de una sola página), Angular se enfoca exclusivamente en aplicaciones de una sola página.

Angular implementa el patrón de arquitectura MVC (Model-View-Controller):

En la imagen de la aplicación construida, se pueden identificar claramente los distintos componentes de este patrón:

Al igual que en otros frameworks, Angular facilita el enlace de datos (data binding) entre el controlador y la vista, y cuenta con directivas que permiten mostrar listados de información o condicionar la presentación de datos en función del estado del controlador.

Para ilustrar esto, compararemos el código de Razor y Angular para mostrar una lista de tipos de documento para un usuario de la aplicación:

Razor

Angular

Angular se centra en el desarrollo del lado del cliente, a diferencia de los frameworks anteriores donde tanto el cliente como el servidor se gestionan en el mismo proyecto. Para integrar Angular con nuestra arquitectura limpia basada en .NET Core, se desarrolló un proyecto ASP.NET Core Web API que expone diversos servicios REST que son consumidos por Angular a través del componente HttpClient.

Este proyecto Web API permite la integración con los componentes de arquitectura limpia desarrollada, facilitando la inyección de dependencias. Al final, se logró que la aplicación Angular mantuviera el mismo look and feel que con los otros frameworks, y se aplicaron los siguientes conceptos:

Intercomunicación entre componentes usando parámetros y servicios.
Manejo de componentes de terceros diseñadas para Angular, como el ngx-slick-carousel, utilizado para el slider de videos.
Utilización de servicios, una práctica recomendada que permite llamar a funciones desde diferentes componentes.
Observables, para ejecutar llamadas asíncronas y construir aplicaciones responsivas.
Pipes, que se aplican sobre los Observables para realizar transformaciones con operadores como map, mergeMap, concatMap, toArray, y finalize.
Validación, para validar la entrada de información obligatoria en los formularios de la aplicación lo cual incluyó la creación de controles personalizados para requisitos específicos como la confirmación de contraseñas.

En comparación con los otros frameworks, se reutilizó el 40% del código HTML, eliminando el código C# y adaptándolo a Angular. También se pudieron reusar todos los controladores de Blazor en el proyecto Web API con modificaciones menores.

Conexión con la Arquitectura Establecida

La integración de Angular con la arquitectura establecida se muestra a continuación:

En el esquema se puede apreciar:

La aplicación Angular del lado del cliente. Se destacan sus componentes prinipales: La Vista HTML, el controlador, el modelo y los servicios: El servicio se conecta mediante HTTPS a los servicios REST Web API construidos, y obteniene o envía la información requerida por la aplicación Angular.
Servicios REST Web API del lado del servidor: Es aquí donde se integra la arquitectura limpia en la aplicación. Y como se ve en el esquema: el componente Main actúa como el punto de entrada de la Web API construida, y es en esta componente donde se hace la inyección de dependencias y por ello es que se muestra que tiene dependencia con varias componentes. Este componente Main corresponde a los archivos Program.cs y Startup.cs. (en .NET 8 solo se usa el Program.cs).

Debido a que los servicios REST devuelven o reciben información en formato JSON, es decir, cadenas de caracteres (strings). Se detectó que la componente Presenters actual no se podía usar para obtener la informacón de los videos ya que devolvía esta información como un arreglo de bytes.

Aquí es donde la arquitectura bien diseñada mostró su valor. Modificar la componente Presenters existente no era una opción viable, ya que afectaría negativamente a otras aplicaciones que dependían de ella. En lugar de comprometer la funcionalidad existente, se decidió crear una nueva componente llamada RESTPresenters. Esta nueva componente implementa la interfaz IVideoLandingPresenter de una manera distinta, asegurando que las imágenes de los videos se devuelvan como cadenas de caracteres en lugar de como un arreglo de bytes.

Este enfoque ejemplifica el principio SOLID de Open-Closed, que establece que un artefacto de software debe estar abierto a la extensión pero cerrado a la modificación. Gracias a la implementación de interfaces desde el inicio, se pudo extender la funcionalidad necesaria sin alterar el código preexistente y funcional.

La creación de RESTPresenters demuestra la importancia de una arquitectura robusta y flexible. Al adherirse a los principios de diseño sólidos, se pudo satisfacer las necesidades específicas del nuevo framework sin comprometer la estabilidad y funcionalidad de las aplicaciones ya existentes. Esta solución no solo resolvió el problema inmediato, sino que también subrayó la eficacia de aplicar principios de diseño correctos en el desarrollo de software.

Aquí está el video de la aplicación construida con Angular: