Put Windows apps on the web with Uno

There’s a lot of focus on WebAssembly at the moment, as an alternative to JavaScript and as a way of delivering more-complex, more-powerful user experiences in progressive web applications and inside cross-platform JavaScript-hosting frameworks such as Electron. But there’s one place it falls down: There’s little scope for delivering desktop-like user interfaces.

Microsoft’s experimental Blazor is one option, although it works with embedded Razor C# and ASP.Net’s web controls, making it hard to have the same code running everywhere. In looking at WebAssembly and .Net I came across another approach, building on Microsoft’s open source tools and targeting the web with not only familiar Windows development tools but also familiar ways of working.

Introducing Uno: Universal Windows Platform in the browser

Uno is an intriguing alternative to using Xamarin for cross-platform application development. Like Xamarin it’s a way of using C# and XAML to render controls on any device. Unlike Xamarin it doesn’t rely on reimplementing Windows controls in its own XAML, to either use native features or to render a set of mobile-first forms that still require delivering a separate Windows UI. Instead it takes familiar UWP controls and delivers them to a browser via WebAssembly.

Uno was developed by nventive, a Montreal-based application development consultancy perhaps best known for building many of the Windows Phone-branded applications for companies such as Flickr. Uno builds on its experience working with Windows design in a cross-platform environment from Silverlight to Windows Phone, all the way to modern UWP applications. The company had invested in building Xamarin apps, using its .Net skills, but found that Xamarin forms were limited compared to the capabilities of UWP controls.

That led the team to consider a different approach, one that could use WebAssembly as a bridge to deliver a better user experience. Building the first prototype took three weeks, using a WebAssembly port of the open source Mono to the WebAssembly runtime and validating it with UWP controls. As François Tanguay, nventive’s CEO, told me, “Once you have web, it can run anywhere.” After proving its Mono-based WebAssembly runtime on client projects, nventive began to share with other developers, open sourcing the project and naming it Uno.

Portable code for web and desktop

Using C# and UWP on the web gives Uno access to a rich set of APIs, and the capability of bringing UWP controls to a wider range of platforms. You don’t need JavaScript, and you don’t need to throw away your existing tools. If you’ve built Windows desktop apps you can quickly move them to Uno, running them anywhere you can run WebAssembly, and soon, anywhere that supports the new Web Assembly System Interface browserless runtime.

One big advantage here is that your app’s business logic will be the same on all three platforms, with C# code running on desktop, on mobile, and on web. There’s the added bonus that you use the same user interface for each platform: UWP’s adaptive control designs allow the same elements to work across all three.

Architecturally you can best think of Uno as an extension of Xamarin, providing its own UWP-based controls as an alternative to Xamarin Forms when you build code for mobile devices. Windows desktops (and soon any .Net Core desktop app) will simply be standard UWP code, with web using WebAssembly via Mono. That means where necessary you can mix in native controls, for example if you want to expose native file system dialogs or need to access hardware-specific features on Android and iOS devices.

Building UWP on the web with Uno

Building an app using Uno is relatively straightforward. You’ll need an up-to-date version of Visual Studio 2019 (the free Community Edition will work), configured with workload support for UWP, .Net mobile applications, and ASP.Net. You can use these to develop and build your code; however, debugging can be an issue since Visual Studio doesn’t yet support WebAssembly debugging. One alternative is to use Chrome’s experimental WebAssembly debugger, which exposes a .Net debugger in its DevTools.

Uno’s Visual Studio tool is available from the Visual Studio Marketplace and installs a set of solution templates that can be used to create a new cross-platform app. You’ll find two new options: one for libraries that can be used in multiple projects and one for a complete cross-platform XAML-based app.

The Uno website walks you through building a simple UWP app that can be deployed as a single-page web app, using the common model-view-viewmodel. It uses the Microsoft Community Toolkit controls via the Uno.UI NuGet package, which you manage and configure as you would for any Windows app, using standard XAML markup. For example, you’d use XAML to define and format a grid control, setting up rows and spacing, and using bindings to link XAML to code running in linked C#. You’re not limited to the type of control you can use, so a grid control can be used alongside text boxes and sliders, mixing data bindings and events to handle in your underlying code.

If you’ve built a UWP app, or any XAML code from the early days of .Net onwards, you’ll find working with Uno doesn’t require any real learning curve. There’s nothing new here; you’re building apps the way you always have. That, of course, is the new old thing. You’re taking that XAML and C# and compiling them for WebAssembly at the same time as for Windows or for a mobile device. Uno’s Uno.UI has the same namespace as UWP, though there are some differences due to limitations in WebAssembly. To simplify things, if there’s a Uno way of working with a control, then you should use it, even if you’re targeting other platforms; a workaround for the web will still function on a PC or a phone.

As Tanguay says, “[With Uno] we’re not building a new ecosystem, we’re tapping into an existing one through its open source capabilities.” Microsoft’s open sourcing of its Windows UI UWP control libraries and .Net simplifies bringing new controls to Uno, for instance, the UWP tabbed control that’s been developed for the new Windows Terminal. All that’s needed is a recompile of the control source so it runs on Uno, ready for your apps.

It’s certainly an interesting approach to bringing your Windows development skills to new platforms. .Net’s architecture makes it a good fit for WebAssembly, and with Microsoft’s Blazor running on both web and server and its shift to a Chromium-based browser we should see WebAssembly debugging tools make their way into Visual Studio, giving new platforms such as Uno the end-to-end experience they need to be truly successful.