UNO Platform — Open Source Cross Platform

What is UNO?

The Uno Platform is a Universal Windows Platform Bridge that allows UWP-based code (C# and XAML) to run on iOS, Android, and WebAssembly. This allows the use of UWP tooling from Windows in Visual Studio, such as Xaml and C#, to build an application as much as possible on Windows, then validate that the application runs on iOS, Android, and WebAssembly. The XAML User Interface (UI) provides the ability to display the same XAML files on Windows, iOS, Android, and WebAssembly platforms. Uno also provides support for the Model-View-ViewModel (MVVM) pattern on all platforms, with binding, styling, control and data-templating features.

Why UNO?

Developing for Windows (phone, desktop, tablet, Xbox), iOS (tablet and phone), Android (tablet and phone) and WebAssembly at once can be a complex process, especially when it comes to the user interface. With Xamarin, C# comes to all these platforms; however, it only provides transparent translations of the UI frameworks available for iOS and Android. Most non-UI code can be shared, but when it comes to the UI, almost nothing can be shared.

One can avoid learning the UI-layout techniques and approaches for each platform, Uno.UI mimics the Windows XAML approach of defining UI and layouts. This translates into the ability to share styles, layouts, and data-bindings while retaining the ability to mix XAML-style and native layouts.

UNO is a platform for building native mobile, desktop, and Web Assembly apps with C# and XAML from a single codebase. Sharing logic between platforms has always been relatively simple, but sharing user interfaces was not really possible. This meant that, with the help of Xamarin.Forms, you could have a similar look and feel on your Android and iOS devices, but not for the Web. This is where UNO is closing the gap. With UNO, you can write the UI once. With the use of native controls, UNO deploys the native UI look and feel to all the other platforms, meaning, you write the same code for a button regardless of the platform the button is for.

How it work?

The Uno Platform works differently depending on what you’re building. The platform-specific UI is created by taking the visual tree 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, well, 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 Mono runtime. When it all comes together, it looks a little like this:

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 logic and UI that you wrote for your mobile apps.

2. Uno uses the Web Assembly Bootstrapper to take any .NET standard library and execute these files in the JavaScript console.

3. Mono runtime then executes the code

The ability for Uno to utilize 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 logic and UI that you wrote for your mobile apps and Web Assembly Apps.

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 code you’ve already written for mobile and web.

Setting up your development environment

Prerequisites:

• Visual Studio 2019 16.3 or later, with:
• Universal Windows Platform workload installed.

• Mobile development with .NET (Xamarin) workload installed.

• the iOS Remote Simulator installed (for iOS development)
• A working Mac with Visual Studio for Mac, XCode 8.2 or later installed (for iOS development)
• Google’s Android x86 emulators or a physical Android device (for Android development)
• ASP.NET and web workload installed, along with .NET Core 2.2 (for WASM development)

• .NET Core 2.2

Installing the Uno Platform Solution Templates with Visual Studio

1. Launch Visual Studio, then click Continue without code. Click Extensions -> Manage Extensions from the Menu Bar.

2. In the Extension Manager expand the Online node and search for Uno Platform Templates, install the Uno Platform Solution Templates extension or download it from the Visual Studio Marketplace extension, then restart Visual Studio.

Create an application from the solution template

To easily create a multi-platform application:

• Create a new C# solution using the Cross-Platform App (Uno Platform) template, from Visual Studio’s Start Page:

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

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

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

Conclusion

UNO could be a better platform to develop mobile, desktop, and web apps from a single codebase. People are expecting their presence on every platform like web & mobile. This post will give you a basic idea and information about the UNO platform, how it works differently, and setting up the development environment. Give it a try and the outcome will be amazing.