Uno Platform

In the beginning, there were iOS, Android, and the Web. Entirely separate platforms that had to be developed as such.

Then, along came Xamarin. Developers could write iOS and Android apps using a single codebase, but we were still on our own for Web development.

Now, Uno has emerged. Building on top of Xamarin, it gives us the power to write iOS, Android, Web, and even UWP applications using shared logic and UI!

what does this mean?

If you have any experience building a mobile app and a subsequent web app, you have essentially had to build both separately, potentially sharing data through an API.

Before Xamarin, you would even have had to build iOS and Android apps separately using different languages (Swift/Objective-C and Java/Kotlin respectively). Uno introduces a way to build for iOS, Android, Web, and UWP using shared logic and UI.

This is huge.

Sharing logic between platforms has been the “easy” part for developers. Sharing UI, however, has been difficult. There is a huge difference between the interfaces of Android and iOS, and an even larger difference between web and mobile. Xamarin.Forms allows us to share interfaces for Android and iOS but we were still on our own for the web.

Uno enables you to write the interface once, then, using native controls, deploy native look and feel to each of your platforms. This means, you can use the same code for a button on each platform, and users will see the native button for that platform.

how does it work?

The Uno Platform works differently depending on what you’re building.

The platform specific UI is created by taking the visual tree (the structure of visual objects as defined by the Visual base class) and rendering into what the platform supports:

• iOS - UI Kit
• Android - ViewGroups and Views
• Web - Native controls

The logic is also deployed differently for each platform.

When building a UWP app, Uno runs on top of UWP and WinUI. When building Android and iOS apps, Uno runs on top of the Xamarin Native Stack. Finally, when you’re building a web app, Uno runs on top of WebAssembly. The mobile apps and web apps all run with the Mono runtime. When it all comes together, it looks a little like this:

well this looks nice, but what’s really happening under the hood?

Let’s break it down:

Android and iOS

1. You write your C# and XAML code in Visual Studio.
2. Uno takes the code and lets you add any Xamarin specific libraries or tools.
3. Mono runtime executes the C# code.

This process is essentially the same as regular Xamarin. The big difference between Xamarin and Uno comes with the ability to run the same UI on the Web.

Web Apps

1. You reuse both your mobile app logic and UI.
2. Uno uses the Web Assembly Bootstrapper to take any .NET standard library and execute these files in the JavaScript console.
3. The Mono runtime then executes the code.

The ability for Uno to use Web Assembly (which is what allows you to write your code in C# and not JavaScript) is what makes Uno so unique.

UWP

1. You reuse both your mobile app / Web Assembly logic and UI.
2. Your code is run through the Windows UI which does not need the Mono runtime to execute.

The big difference here is that UWP apps already have the Windows namespaces and do not need to reference the Uno UI. The benefit Uno provides here is the ability to reuse the mobile and web code you’ve already written.

now that we have an idea of how this beauty works, let’s write some code!

To get started with Uno, follow their instructions

When you create your Uno solution in Visual Studio, there is a similar feel to a Xamarin.Forms solution. Here is a look at the projects that are auto-created:

As you would see in a Xamarin.Forms solution, there are separate projects for each platform and a single shared project. The Droid, iOS, UWP, and WASM projects are all the same as if you had created a blank app for each. The only difference being a reference to the Uno UI. The magic happens in the Shared project.

Similar to the Shared project in Xamarin.Forms, the Uno shared project is where you will write all your shared logic and UI. Uno provides support for the MVVM pattern, which many developers are familiar and comfortable with.

so, what does a finished product look like?

Here are examples from each of the four platforms using the example “TODOS” app provided by Uno.

iOS

Android

UWP

Web

These projects all use logic and UI from the shared project. Code once, four apps.

let’s talk debugging.

Debugging in Uno can be a bit different depending on which platform you are trying to debug.

• Android and iOS - For mobile, you will use the same Mono debugger you are used to using in Visual Studio, with access to all your favorite breakpoints, value changes, etc.
• Web - Currently there is only support for chromium debugging, which means Chrome and Edge.
• UWP - Here, the tooling comes from .NET studios which is not as efficient with the mono runtime.

Want to try out Uno but don’t want to go through the steps to get set up through Visual Studio?

Then checkout their playground!

The Uno Playground is a fun and easy way to look at how different items render on different platforms. They make it quick and easy to try out new styles. This is a great tool for beginners and tutorials.

what future features can we look forward to?

1. Support for MacOS or Linux
2. More features from UWP API
3. Support for smart watches

The true beauty of Uno is that it encompasses what we as developers should all be striving to achieve - building on each others’ accomplishments. We don’t need to re-create the wheel. Real innovation happens when you stand on the shoulders of giants and we all move upwards.

Happy coding!

Tags: technology csharp mobile xamarin