Blazor Mobile, Uno Platform, and WebAssembly

On Tuesday, the ever-impressive Blazor team  announced a new experimental project : Mobile Bindings that allow developers to write Blazor-style syntax that produces  Xamarin.Forms  UI controls instead of HTML elements, therefore producing native iOS and Android applications.   

When we at the Uno Platform noticed that they were using Xamarin.Forms, we immediately saw a fun means to validate and stress-test our  Xamarin.Forms renderers for WebAssembly , in order to bring Blazor Native to WebAssembly. Also, a few of you asked about it on Twitter, so we gave it a shot.   

Introducing the Blazor-Xamarin.Forms-UWP-Uno-WebAssembly  uber-stack ! In less than 24hrs we were able to port the ToDo App to WebAssembly : 

1. Blazor to Xamarin.Forms  

This is the part that the Blazor team announced on Tuesday. Essentially taking a UI defined in Razor syntax (a mix of markup and C# code), processing it, and converting it into a tree of Xamarin.Forms controls.  

2. Xamarin.Forms to UWP  

Although the Blazor team’s announcement highlighted the ability to produce mobile apps for iOS and Android, Xamarin.Forms also supports Windows as a compilation target, using the  UWP framework . The Blazor X.Forms Bindings work perfectly well with UWP.  

In this step, Xamarin.Forms converts its visual tree to a tree of UWP view elements.  

3. UWP (or WinUI) to Uno Platform  

Here’s where Uno comes in. The Uno Platform allows you to build apps for iOS, Android, and the web using C# and XAML. It’s 100% compatible with UWP/WinUI. Uno’s Xamarin.Forms renderers for WebAssembly  allows Xamarin.Forms apps to run in the browser, without any changes.  

4. Uno to WebAssembly  

In the last step, Uno takes the visual tree and produces native HTML, running  natively  in  the browser using  Mono ’s runtime for  WebAssembly .   

See it in action  

To test whether this  would work, we used the  TodoApp   sample  released along with the Blazor Mobile Bindings announcement .   Check  out the  fully-functioning web versionhere .  All the code we used is  up on GitHub  – download it and  run it in Visual Studio  at your leisure !  

Our version is using the exact same Razor components as the original sample, and as you can see it looks very like the Android/iOS version published on ASP.NET Blogs for mobile blazor bindings . There you have it side by side – Blazor mobile bindings running in browser with help from Uno and WebAssembly

Public service announcement  

Let’s make one thing clear.  We’re not advising you to run out and use this in production  – after all if you like Blazor syntax and you’re targeting the web,  the original  Blazor has you covered.   

Our motivation was to put our Xamarin.Forms renderer for WebAssembly work to the test, and as far as we are concerned, Uno passed it with flying colors. It just works. We were able to stack all this technology, and reuse the code from the showcased ToDo app in less than a few hours after Mobile Blazor Bindings were announced at the ‘.NET Conf – Focus on Blazor’ virtual conference. We believe this showcases Uno’s versatility and extensibility too.   

In Closing   

We’re serious about this part : if you’re already a Xamarin.Forms developer, and running your existing app on the web without having to rewrite the UI is something that interests you, go ahead and  try out Uno’s Xamarin.Forms renderers for WebAssembly  – adding WebAssembly support to an existing project is as easy as ‘dotnet new wasmxfhead’. Or if you’d like to ask any questions and chat about this tech mash-up –  contact us .