Blazor Mobile, Uno Platform, and WebAssembly – piling up the tech
Tags: news, underthehood
Published: 2020-01-17 16:45:49

---
title: Blazor Mobile, Uno Platform, and WebAssembly – piling up the tech
published: true
date: 2020-01-16 18:58:36 UTC
tags: News,Under The Hood
canonical_url: https://platform.uno/blazor-mobile-uno-platform-and-webassembly-piling-up-the-tech/
---

On Tuesday, the ever-impressive Blazor team [announced a new experimental project](https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-experiment/): Mobile Bindings that allow developers to write Blazor-style syntax that produces [Xamarin.Forms](https://dotnet.microsoft.com/apps/xamarin/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](https://platform.uno/xamarin-forms/), 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](https://todo-blazornative-wasm.platform.uno/): 

 ![](https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2020/01/16103359/To-do-tasklist-wasm-1024x550.gif)

# 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](https://docs.microsoft.com/en-us/windows/uwp/get-started/create-uwp-apps). 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](https://www.mono-project.com/)’s runtime for [WebAssembly](https://webassembly.org/).  

![](https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2020/01/16113307/TechStack-mobile-bindings-and-Uno-1024x871.jpg)

# See it in action 

To test whether this would work, we used the [TodoApp sample](https://docs.microsoft.com/en-us/mobile-blazor-bindings/walkthroughs/todo-app) released along with the Blazor Mobile Bindings announcement.  **Check****  out the ****fully-functioning web version [here](https://todo-blazornative-wasm.platform.uno/)**. All the code we used is [up on GitHub](https://github.com/unoplatform/uno.blazor.native.todoapp) – download it and run it in Visual Studio at your leisure! 

![](https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2020/01/16103359/To-do-tasklist-wasm.gif)

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](https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-experiment/). There you have it side by side – Blazor mobile bindings running in browser with help from Uno and WebAssembly

![](https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2020/01/16095801/blazor-android-counter-2-1.gif) ![](https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2020/01/16133622/Todo-Counter-Blazor-Uno.gif)

# 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](https://platform.uno/xamarin-forms/) – 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](https://platform.uno/contact/).

The post [Blazor Mobile, Uno Platform, and WebAssembly – piling up the tech](https://platform.uno/blazor-mobile-uno-platform-and-webassembly-piling-up-the-tech/) appeared first on [Uno Platform](https://platform.uno).