Blazor Mobile, Uno Platform, and WebAssembly – piling up the tech

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 version here. 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. 


SOURCE:Paper.li

Recent Posts

See All

Build simple fuzzer - part 1

First of all, we are learning here and this fuzzer is in no way going to be a proper tool used against real targets (at least not initially). This is why we are going to code it in python. For real to

Build simple fuzzer - part 2

In the previous part of this mini-series we’ve implemented a very simple fuzzer. As the main idea behind it is being an exercise therefore I don’t think it is capable of finding bugs in complex target