Aplicaciones del mundo real con Blazor y ...

Aplicaciones del mundo real con Blazor y MAUI

Dec 06, 2022

El desarrollo con tecnologías Microsoft .NET es cada vez mucho mejor para implementar aplicaciones que se puedan ejecutar en la mayoría de las plataformas, incluyendo Web, Android, iOS, Windows, e incluso en TVs.

Las tecnologías .NET hoy día nos ofrecen tantas facilidades que han hecho posible que una sola persona pueda crear sistemas completos en poco tiempo, incluso, han hecho posible que se puedan crear varios sistemas multiplataforma completos por un solo desarrollador, en menos de una semana.

Cómo es que las tecnologías .NET nos ofrecen estas ventajas tan grandes?

Esto lo hacen al ofrecernos Blazor y MAUI, Blazor es un framework para crear aplicaciones web interactivas con C# desde el backend hasta el frontend, MAUI es un framework para desarrollar aplicaciones multiplataforma, nativas, con C# y XAML, a MAUI se le conoce como la evolución de Xamarin.

Lo mejor, sin embargo, es que .NET nos permite utilizar lo mejor de ambos mundos para crear sistemas completos para la mayoría de las plataformas, con una sola base de código, MAUI Blazor o MAUI Hibrido es una forma de desarrollar aplicaciones en MAUI, utilizando también Blazor, esto quiere decir que si un desarrollador tiene experiencia con Blazor, le va a ser muy fácil desarrollar aplicaciones nativas, ya que podrá seguir utilizando su conocimiento web y aplicarlo en la aplicación nativa.

Además, .NET nos brinda la posibilidad de compartir el UI mediante librerías de clases Razor, de tal manera que podremos tener un sistema que sea vea igual en todas las plataformas, de nuevo, con una sola base de código, y disminuir en gran manera la necesidad de código específico para cada plataforma.

Veamos algunos ejemplos

En la imagen anterior vemos la solución de un sistema Open Source llamado "FairPlayDating", dicho sistema tiene un UI compartido ( SharedUI ) entre el proyecto Blazor y el proyecto de MAUI

El proyecto de UI compartido es totalmente agnostico con respecto a la plataforma en que se ejecuta, y para cuando es necesario ejecutar codigo específico de la plataforma se toma ventaja de la inyección de dependencias y utilizando clases "wrapper", por ejemplo, para las notificaciones tipo Toast, si durante la ejecucion del codigo ocurre algún Exception, lo capturamos y lo enviamos al ToastService

El ToastService lo inyectamos al componente utilizando la interfaz y no la clase abstracta, de hecho, solamente la interfaz esta expuesta para poder ser consumida desde el proyecto de SharedUI

La implementación del servicio si es específica por plataforma, o por tipo de proyecto, en este caso tenemos una para la aplicación en Blazor Webassembly, donde se utiliza Blazored.Toast de Chris Sainty, y en la aplicación MAUI tenemos otra implementación donde de utiliza el Toast del Community Toolkit

En cada uno de los proyectos se registra la dependencia

Como vemos, .NET nos da la posibilidad de utilizar lo mejor de ambos mundos Blazor y MAUI, además de permitirnos ejecutar codigo específico de la plataforma en caso de necesitarlo y reutilizar el UI, al permitirnos reutilizar el UI nos ahorramos tiempo de desarrollo, y si lo pensamos desde el punto de vista de un negocio, es vital el poder desarrollar mas rápido sin sacrificar la calidad, puesto que al poder desarrollar más rápido podemos crear estrategias de Go to Market más rápidas, lo que significa también una más rápida adquisición de usuarios y por ende más negocios, además de disminuir el tiempo necesario para la recuperación de la inversión y ser rentables.

Ahora bien, esto es con tan solo utilizar Blazor y MAUI, sin embargo, podemos incrementar aún más la productividad al utilizar técnicas un poco más avanzadas.

.NET nos ofrece la posibilidad de utilizar C# Source Generators, estos son una característica de .NET que permite a los desarrolladores inspeccionar el codigo mientras esta siendo compilado, y aumentarlo, es decir, crear mas codigo compilable, a partir de "hints", para extender la funcionalidad de nuestro sistema.

Una forma de utilizarlos es identificando patrones de codificación que se tengan o vayan a tener dentro del sistema, por ejemplo, muchas clases de servicios o incluso controllers, cuando se implementan lo mas sencillos posibles, suelen ser idénticos excepto por los nombres de clases y métodos.

En la imagen anterior vemos una clase autogenerada, dicha clase lo único que hace es exponer métodos de CRUD sobre la entidad llamada ApplicationUser, el codigo fue totalmente autogenerado utilizando un atributo en una clase parcial, como veremos en la imagen siguiente

El attribute ServiceOfEntity, se utiliza dentro de nuestra clase generadora de codigo, la cual busca clases que tengan ese atributo y genera el codigo para la entidad que se le pasa a entityName, podemos hacer algo similar con los controller

Como vemos, es el mismo formato, excepto que en este caso utilizamos el atributo ControllerOfEntity, además, como son endpoints públicos de acciones de CRUD y no queremos que cualquier usuario pueda hacer cualquier cosa, estos controllers los restringimos a ser accesados solamente por administradores.

Podemos hacer lo mismo con los ClientServices, el conjunto de clases "wrapper" que ejecutaran las llamadas al API desde una aplicación cliente

De esta manera, nuestro codigo de acciones de CRUD esta automáticamente generado para prácticamente todas las capas, listo para ser consumido desde una aplicación cliente.

Podemos incrementar aun más nuestro rendimiento a la hora de crear múltiples sistemas, lo podemos hacer estableciendo patrones predefinidos, crear uno base y utilizarlo como plantilla para todos los sistemas posteriores, incluso podemos crear una solución donde tomemos ese otro proyecto base, lo dupliquemos y le cambiemos automáticamente los nombres de archivos y el contenido de los mismos para que reflejen el nuevo sistema.


Esto nos ahorra muchísimo tiempo que generalmente es tiempo muerto, a la hora de crear nuevas soluciones, además, al utilizar los mismos patrones y la misma arquitectura, es mucho mas fácil encontrar errores, porque será mucho mas probable haberlos ya encontrado en otros sistemas que utilizan esos mismos patrones.

En los siguientes enlaces podrás encontrar información y ejemplos de código para crear sistemas multiplataforma completos con .NET MAUI, Blazor y C# Source Generators

Al convertirte en GitHub Sponsor estarás ayudando a la iniciativa FairPlay, además podrás obtener acceso a repositorios de codigo exclusivos.
https://github.com/sponsors/efonsecab

Enjoy this post?

Buy Eduardo Fonseca B a pizza

More from Eduardo Fonseca B