TLDR: The Experimental Mobile Blazor Bindings can result in much less XAML and C#, 64% less in my experiment, but the tech isn’t quite ready for prime time.
Update – 2020-02-24
I migrated my sample to the Mobile Blazor Bindings February Preview 2 Update. It only took a few minutes and fixed the issues I had previously documented and reported!
What are Mobile Blazor Bindings?
Blazor uses the ASP.NET Razor template engine to deliver html content to browser clients. Html is markup, Xaml is markup…why not use the Razor engine to build Xamarin?
That’s the question Eilon Lipton answered with Mobile Blazor Bindings. In essence, this approach uses Razor syntax with Xamarin Forms Xaml to create mobile apps.
You may find yourself wondering why you should care…as I did when this was announced. I’m not a massive fan of Razor pages and lately I’m finding myself frustrated with the huge amount of Xaml code required to do some relatively simple things in Xamarin Forms. The Mobile Blazor Bindings approach doesn’t really solve the Razor pages issue, but it certainly helps simplify Xaml and at the same time, it also helps simplify your C# by using a binding which doesn’t rely on INotifyPropertyChanged.
Getting Started with Mobile Blazor Bindings
- Install Visual Studio 2019 or Visual Studio for Mac and install Xamarin
- Download and install .NET Core 3.0 or 3.1 SDK
- Install the Mobile Blazor Bindings project templates:
dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.1.173-beta
- Create a new project:
dotnet new mobileblazorbindings -o FirstMobileBlazorBindingsApp
- This will create a
FirstMobileBlazorBindingsAppfolder containing a solution and 3 projects:
FirstMobileBlazorBindingsApp– .NET Standard 2.0 library containing Razor templates and cross platform code
FirstMobileBlazorBindingsApp.Android– Xamarin.Android head project.
FirstMobileBlazorBindingsApp.iOS– Xamarin.iOS head project.
- Open the solution in Visual Studio
- Run the Android project
Note: I had no luck with iOS, I would stick to Android for now.
Porting a Xamarin Forms MVVM screen
Let’s look at an example. Since everyone’s likely here for Xamarin, we’ll start with an options selection screen I built using Xamarin Forms and MVVM.
Xamarin Forms MVVM (188 lines)
Blazor Mobile Bindings (68 lines)
120 fewer lines for the Blazor Mobile Bindings approach. Wow. I am sold.
I was not excited about this approach until I actually saw the results. There is huge upside and promise, I’m looking forward to seeing where this goes. No having to worry about
INotifyPropertyChanged, no commanding, far more flexibility in Xaml with the tried and true Razor engine.
On the other side, I ran into 3 relatively major issues.
OnClickmethods would only fire once
IsVisibleflag set by a variable wasn’t working at all
iOS wouldn’t work (I didn’t look very close at this).
Note: these issues are all fixed in the Preview 2 update!
There is also no hot reload support at this point, which you miss very fast after getting used to it.
Great job by Eilon Lipton and everyone else from the Xamarin and Blazor teams who brought this experiment to life!