Xaml MVVM, Comet MVU and Mobile Blazor Binding in #DotNetMaui

Luis Matos

While it’s true that .Net Maui (#DotNetMaui) xamarin forms evolution comes with a lot of new features, there are a few things that the community is quite interested in, and these are the design patterns.

That’s right, .NET MAUI will support different design patterns in which Model-View-ViewModel (MVVM) and XAML, Model-View-Update (MVU), and Blazor stand out.

The video is focused on giving my opinion on the subject as we analyze them from different points of view. We will not delve into any of the topics covered.

This article is focused on providing a starting point for those who do not know about the topics to be discussed. Similarly, we won’t delve into them.

.NET MAUI

.NET MAUI is an evolution of Xamarin.Forms. .NET MAUI simplifies options for .NET developers by providing a single stack that supports all modern workloads: Android, iOS, macOS, and Windows. The native functions of each platform and UI control are at your fingertips in a simple, cross-platform API so you can deliver seamless user experiences while sharing even more code than before.

When we talk about .NET Maui and everything that comes with this evolution, by Microsoft, with Xamarin Forms there is something that attracts a lot of attention to us and is how the patterns will be handled.

Patterns

MVVM and XAML

Model-View-ViewModel (MVVM) and XAML, the predominant pattern and practice with Xamarin Forms will continue to work the same way. It will continue to grow and evolve to help developers be productive in building and maintaining applications.

The following is an example basic counter in the XAML MVVM style written in .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 and Comet?

Within .Net MAUI, developers want to give developers the option to write a user interface with C-O fluently while implementing an increasingly popular pattern such as Model-View-Update (MVU). MVU promotes a one-way flow of data and state management, as well as a first-party code development experience that quickly updates the user interface by applying only the necessary changes.

The following is an example basic counter in the MVU style written in .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) enables developers to create native and hybrid mobile apps using C- and .NET for Android, iOS, Windows, and macOS using familiar web programming patterns. MBB uses Razor syntax to define the components and behaviors of an application’s user interface. UI components are based on native UI components and, in hybrid applications, are mixed with HTML elements.

The following is an example basic counter in the Mobile Blazor Bindings style written in .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 allows developers to define user interfaces in Xamarin.Forms applications using markup rather than code.

XAML has several advantages over equivalent code:

XAML is often more succinct and readable than equivalent code.
The parent-child hierarchy inherent in XML allows XAML to mimic with greater visual clarity the parent-child hierarchy of user-interface objects.
XAML can be easily hand-written by programmers, but also lends itself to be toolable and generated by visual design tools.

There are also disadvantages, mostly related to limitations that are intrinsic to markup languages:

XAML cannot contain code. All event handlers must be defined in a code file.
XAML cannot contain loops for repetitive processing. (However, several Xamarin.Forms visual objects—most notably ListView —can generate multiple children based on the objects in its ItemsSource collection.)
XAML cannot contain conditional processing (However, a data-binding can reference a code-based binding converter that effectively allows some conditional processing.)
XAML generally cannot instantiate classes that do not define a parameterless constructor. (However, there is sometimes a way around this restriction.)
XAML generally cannot call methods. (Again, this restriction can sometimes be overcome.)

C#

Actually, the code between languages is very similar and a developer with a little experience can adapt to any environment in a few hours. Although it is true, with C # the creation of user interfaces can be a bit verbose, there are tools that help us create declarative interfaces in a cleaner way, such as C# for Markup.

It has several advantages over XAML:

Faster than XAML
Better IDE support
New developers don’t need to learn XAML
Best IntelliSense (for example, margins in XAML are strings)
It does not affect the MVVM layout as it literally only changes the XAML to CSharp
Removes binding mechanisms. You do not need XAML Extensions, Value Converter, Triggers, XAML Compilation , or Compiled Bindings.
You can continue to separate the UI and logic from your UI into separate partial classes/files, such as HomePage.cs + HomePage.logic.cs.

One of the most notable disadvantages is that it does not have official hot-reload support; this means you’ll need a third party.

Conclusions

Something quite interesting to mention is that the .NET MAUI team only makes the mention of XAML and MVVM, MVU with C# and Blazor; what about this note that we are not mentioning Mobile Blazor Bindings here and we are not mentioning what Comet is either.

So that’s what makes me think is either the names of these experiments are not fully 100% validated or that within our projects we will be able to use different parts of what we need. For example, use a razor page using MVU or XAML. I mean, there won’t be a dependency on it.

But this is just an assumption. There’s still nothing 100% confirmed.

It’s our turn to wait for new updates.

Resources

If you want me to delve de further into these topics let me know in the comments or on my Twitter, I’m being very active over there.

Remember that your interactions are the ones that help me know where to direct the content. In the end, the idea is to help as much as we can.

I hope this content is useful to you. A hug, and until next time.

Share this content!