Xaml MVVM, Comet MVU y Mobile Blazor Binding en #DotNetMaui

Contenido

Si bien es cierto que .Net Maui (#DotNetMaui) la evolución de Xamarin Forms viene con un montón de características nuevas, hay algunas cosas que a la comunidad le interesa bastante y esto son los patrones de diseño.

Asi es, .NET MAUI soportará diferentes patrones de diseño en los cuales destacan Model-View-ViewModel (MVVM) y XAML, Model-View-Update (MVU) y Blazor.

El video va enfocado a dar mi opinión sobre el tema mientras los analizamos desde diferentes puntos de vistas. No vamos a profundizar en ningunos de los temas tratados.

Este articulo va enfocado en brindar un punto de inicio para aquellas personas que no saben sobre los temas a discutir. De igual manera, no profundizaremos en ellos.

.NET MAUI

.NET MAUI es una evolución de Xamarin.Forms. .NET MAUI simplifica las opciones para los desarrolladores de .NET, proporcionando un solo stack que admite todas las cargas de trabajo modernas: Android, iOS, macOS y Windows. Las funciones nativas de cada plataforma y el control de la interfaz de usuario están a su alcance en una API simple y multiplataforma para que pueda ofrecer experiencias de usuario sin compromisos mientras comparte aún más código que antes.

Cuando nosotros hablamos de .NET Maui y todo lo que conlleva esta evolución, por parte de Microsoft, con Xamarin Forms hay algo que a nosotros nos llama muchísimo la atención y es cómo se van a manejar los patrones.

Patrones

MVVM y XAML

Model-View-ViewModel (MVVM) y XAML, el patrón y la práctica predominantes con Xamarin Forms va a seguir funcionando de igual manera. Seguirá creciendo y evolucionando para ayudar a los desarrolladores a ser productivos en la creación y el mantenimiento de aplicaciones.

A continuación se muestra un ejemplo de contador básico en el estilo XAML MVVM escrito en .NET MAUI.

...
<StackLayout>
    <Label Text="Welcome to .NET MAUI!" />
    <Button Text="{Binding Text}" 
            Command="{Binding ClickCommand}" />
</StackLayout>
...
...
public Command ClickCommand { get; }

public string Text { get; set; } = "Click me";

int count = 0;

void ExecuteClickCommand ()
{
    count++;
    Text = $"You clicked {count} times.";
}
...

MVU ¿y Comet?

Dentro de .Net MAUI se le quiere dar la opcion a los desarrolladoresde escribir una interfaz de usuario con C# de manera fluida mientras implementan un patrón cada vez más popular como es Model-View-Update (MVU). MVU promueve un flujo unidireccional de datos y administración de estado, así como una experiencia de desarrollo de código primero que actualiza rápidamente la interfaz de usuario aplicando solo los cambios necesarios.

A continuación se muestra un ejemplo de contador básico en el estilo MVU escrito en .NET MAUI.

...
readonly State<int> count = 0;

[Body]
View body() => new StackLayout
{
    new Label("Welcome to .NET MAUI!"),
    new Button(
        () => $"You clicked {count} times.",
        () => count.Value ++)
    )
};
...

Mobile Blazor Binding

Mobile Blazor Bindings (MBB) permite a los desarrolladores crear aplicaciones móviles nativas e híbridas usando C# y .NET para Android, iOS, Windows y macOS usando patrones de programación web familiares. MBB utiliza la sintaxis de Razor para definir los componentes y comportamientos de la interfaz de usuario de una aplicación. Los componentes de IU se basan en componentes de IU nativos y, en aplicaciones híbridas, se mezclan con elementos HTML.

A continuación se muestra un ejemplo de contador básico en el estilo Mobile Blazor Bindings escrito en .NET MAUI.

...
<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}
...

C# vs XAML

XAML

XAML permite a los desarrolladores definir interfaces de usuario en Xamarin.Forms aplicaciones con marcado en lugar de código.

XAML tiene varias ventajas con respecto al código equivalente:

  • XAML suele ser más conciso y legible que el código equivalente.
  • La jerarquía de elementos primarios y secundarios inherente en XML permite que XAML imite con mayor claridad visual de la jerarquía de elementos primarios y secundarios de los objetos de la interfaz de usuario.
  • El código XAML puede escribirse fácilmente a los programadores, pero también se presta a ser herramienta y generarse mediante herramientas de diseño visual.

También hay desventajas, principalmente relacionadas con las limitaciones que son intrínsecas a los lenguajes de marcado:

  • XAML no puede contener código. Todos los controladores de eventos se deben definir en un archivo de código.
  • XAML no puede contener bucles para el procesamiento repetitivo. (Sin embargo, varios Xamarin.Forms objetos visuales, en concreto, ListView pueden generar varios elementos secundarios basados en los objetos de su ItemsSource colección).
  • XAML no puede contener procesamiento condicional (sin embargo, un enlace de datos puede hacer referencia a un convertidor de enlace basado en código que permita de forma eficaz algún procesamiento condicional).
  • Por lo general, XAML no puede crear instancias de clases que no definen un constructor sin parámetros. (Sin embargo, a veces hay una forma de evitar esta restricción).
  • Normalmente, XAML no puede llamar a métodos. (De nuevo, esta restricción a veces se puede solucionar).

C#

Realmente el código entre lenguajes es muy similar y un desarrollador con un poco de experiencia puede en pocas horas adaptarse a cualquier entorno. Si bien es cierto, con C# la creación de interfaces de usuarios puede ser un poco verboso hay herramientas que nos ayudan a crear interfaces declarativas de una manera mas limpia como es C# for Markup.

C# tiene varias ventajas con respecto XAML:

  • Más rápido que XAML
  • Mejor compatibilidad con el IDE
  • Nuevos desarrolladores no necesitan aprender XAML
  • Mejor IntelliSense (por ejemplo, los márgenes en XAML son strings)
  • No afecta al diseño MVVM ya que literalmente solo cambia el XAML por CSharp
  • Elimina los mecanismos de enlace. No necesita XAML Extensions, Value ConverterTriggersXAML Compilation o Compiled Bindings.
  • Puedes seguir separando la UI y la lógica de tu UI en clases parciales/archivos separados, por ejemplo  HomePage.cs  +  HomePage.logic.cs.

Una de las desventajas mas notable es que no tiene soporte para HotReload de manera oficial; esto quiere decir que necesitaras de un tercero.

Conclusiones

Algo bastante interesante que hay que mencionar es que el equipo de .NET MAUI sólo hace la mención de XAML y MVVM, MVU con C# y Blazor; qué pasa con esto fíjense que aquí no estamos mencionando Mobile Blazor Bindings y tampoco estamos mencionando lo que es Comet.

Entonces eso es lo que me hace a mí pensar es o los nombres todavía de estos experimentos no están totalmente 100% validados o que dentro de nuestros proyectos vamos a poder utilizar diferentes partes de lo que necesitemos. Por ejemplo, utilizar una pagina razor utilizando MVU o XAML. Es decir, que no habrá una dependencia en si.

Pero esto es solo una suposición. Todavía no hay nada confirmado 100%.

Nos toca esperar a nuevas actualizaciones.

Recursos


Nada disfruten. Si quieren que profundicemos mas con estos temas déjenmelo saber en los comentarios o en mi twitter, estoy siendo muy activo por allá.

Recuerden que sus interacciones son las que me ayudan a saber por donde dirigir el contenido. Al final, la idea es ayudar lo mas que podamos.

Espero que este contenido les sea de utilidad. Un abrazo, y hasta la próxima.

¿Qué opinas de este contenido?
 
Luis Matos

Luis Matos

I help professionals and companies to create value solutions. I am a Systems Engineer, blockchain executive, and international mobile application speaker. Founder of the Malla Consulting Agency and several international technology communities.
Suscribirte
Notificar de
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Buscar en el sitio