MVP

TLDR
Both C# Markup and Mobile Blazor Bindings result in the same, big reduction of markup when compared to XAML.
Both use the same UI framework, which is the biggest part of the learning curve.
They differ in syntax, data update pattern, friction and freedom.

Update 2020-7-12: I reformatted the XAML example of the original author to reduce the number of lines from 100 to 71, for a more fair comparison.
However, comparing this to 21 lines in Mobile Blazor Bindings or C# Markup the conclusion remains that this is a big reduction.

C# Markup was added in Xamarin Forms 4.6 as an experimental feature. It is already included in .NET MAUI and has these proposed enhancements.
Like C# Markup, Mobile Blazor Bindings offers an alternative to XAML markup. It is a separate experiment, the learnings of which will also land in MAUI.

A good way to compare markup languages is to build the same UI in them. In his post Mobile Blazor Bindings – Getting Started + Why You Should Care, Dylan Berry already did this for XAML and Mobile Blazor Bindings. Conclusion: Mobile Blazor Bindings can result in much less lines than XAML.

I took Dylan’s example and used PropertyChanged.Fody to simplify the viewmodel. After this, the C# code needed for XAML and Mobile Blazor Bindings is practically the same.

So the real difference is in the markup. Then I reformatted the XAML markup to reduce the number of lines, for a more fair line line count comparison. The result after this:

XAML: 71 lines
MBB : 21 lines!

Impressive. So how does MAUI C# Markup compare?

To illustrate this, I implemented part of the proposed enhancements for MAUI C# Markup in these helpers, and used them to build the same UI. I used the viewmodel from the XAML implementation. This is how the markup compares:

The number of lines for C# Markup and Mobile Blazor Bindings is the same (some empty lines added for readability – not counting those):

XAML: 71 lines
MBB : 21 lines!
C# Markup : 21 lines!

What else comes to mind when comparing MBB and C# Markup?

Learning Curve – Syntax versus Framework

In my years of thinking about, discussing and working on XAML versus C# Markup, I learned that using a single language as good as C# for logic and markup has significant advantages. Less cognitive load, no need for language bridging mechanisms – your markup is all in one place and in one syntax. The learning curve is shorter, there is less friction overall. You have the freedom to customize anything you want with little effort. No extra skills needed. No big complex engine added that resists you.

On the other hand, developers who already know and like Blazor / Razor web development will appreciate that Mobile Blazor Bindings uses the same XML syntax and the same C# integration syntax. The data update pattern is also the same as in Blazor (it is not the MVVM pattern used by XAML and C# Markup). Initially this may give the impression that Blazor and Blazor Mobile Bindings are quite similar.

However, the biggest chunk of knowledge you need to build UI is about the Xamarin Forms UI framework. This is a huge API, which requires a lot of experience to master. How to create bug-free, performant layout is an art in itself. To be able to implement a given design, you need to internalize a complex mental model of how all the layout types can be made to behave – alone and combined. What are their strengths and weaknesses, etc. Compared to this part of the learning curve, the amount of knowledge needed for syntax and data update pattern is small. The UI frameworks of Blazor and Mobile Blazor Bindings have nothing in common: one is HTML, the other is Xamarin Forms.

Just like XAML, Mobile Blazor Bindings adds a different syntax on top of the existing C# framework. Plus an engine to translate that syntax to C#, plus language bridging patterns to connect the two worlds. The appeal is that Mobile Blazor Bindings looks similar to Blazor – but in reality they are very different.

Perhaps surprisingly, the difference between Mobile Blazor Bandings and C# Markup is relatively small; mainly in the syntax + data update pattern.

Tooling – Hot Reload or Not

C# Markup has first class stateful hot reload in LiveSharp. This is fast, works in any editor, requires no debugging (just run the app and save the source), and it is not limited to UI code. It also works in Blazor. Mobile Blazor Bindings however does not have hot reload, and at this time no concrete approach for how to add that has been formulated. That’s a big productivity downside.

Emotion

The above are all rational considerations, but developers are human just like anyone else (no, really!). So emotion also plays a part. And emotional preferences are equally valid to rational ones; we are not machines.

So how do you feel about a familiar versus an unfamiliar looking syntax? Do you like MVVM or rather the Blazor data update pattern? If you look at the examples above, which markup style appeals more to you? Do you prefer freedom or consistency?

Conclusive – Inclusive

.NET MAUI continues the proud inclusive mindset that was adopted by the Xamarin Forms team. This is about giving developers options, and letting them choose and combine those as freely as possible. Markup in XAML and C# Markup and Blazor. Data update in MVVM and MVU and Blazor. Choice is good!

I hope the above helps you choose with an open mind. Make your .NET MAUI development experience a joy!

About the Author
Vincent Hoogendoorn is a Microsoft MVP Developer Technologies with over 20 years of experience as hands-on .NET innovator / architect / engineer. He is currently focused on full stack C#: Microsoft Orleans backends and browser/native frontends with C# Markup 2 for Windows App SDK, Uno Platform and Xamarin/Maui. Xamarin cross-platform mobile veteran, passionate about developer productivity. Principal Software Engineer at InnoWvate.NET, Technical Director at Applicita.

Leave a Reply


*

captcha *