Releasing a Unified UI for Microsoft Solutions

Microsoft-centric developers have been dreaming of a single cross-platform .NET scheme for years. Such a scheme would allow developers to work on projects for any Microsoft product without needing to change platforms, which would particularly useful for developers with multiple active projects. This goal is coming closer to reality, as disclosed during the Microsoft Build developers conference that took place in May 2020.

Microsoft unveiled a preview of .NET Multi-platform App UI (MAUI), a single-stack user interface (UI) framework that supports software development for most major operating systems (OS) such as Windows OSs, Android, iOS and macOS. MAUI won’t officially support Linux, although it may informally support Linux-based OSs through the user community. Xamarin.Forms already has built-in cross-platform support for Android and iOS mobile apps, which MAUI builds on.

Modeling is one of the most important components for bringing the various development UIs together. This process will occur over the next two years as Microsoft implements its roadmap for both Xamarin.Forms and MAUI. .NET developers with active projects will need to learn the differences and similarities between the two during this period to fully leverage the benefits of a unified UI.

Unified UI

The primary components for achieving a unified UI for .NET development is a cross-platform user experience (UX) and a Ubiquitous .NET Client Application Development Model (UNCADM).

Cross-platform UX

NET Core doesn’t directly support a UI for either desktop or mobile devices, since it wasn’t even designed with such a goal in mind until at least v2.1.0. However, this feature could greatly increase .NET’s user base, as a UI is one of its most commonly requested features.

Microsoft and Xamarin jointly own an XAML-based UX code stack consisting of Universal Windows Platform (UWP), WinUI, Windows Presentation Foundation (WPF) and Xamarin.Forms, which could form a basis for .NET 5’s UX stack. WPF is Microsoft’s .NET graphics system and is also the basis for the Silverlight system used for internet applications.

Development on .NET 5’s UX stack is currently stalled, despite its promise as a standard. Microsoft could also adopt Microsoft Fluent Design (MFD) as its UX for .NET Core, at least for Windows. It might not be practical to fully implement MFD on other platforms like MacOS since the MFP API functions quite differently. Nevertheless, the decision to use MFD as the UX could give .NET Core the lead in universal cross-platform framework development.

Hardware support will be one of the most difficult challenges for a cross-platform UX. A significant investment will be needed to create hardware-accelerated graphics and media on a cross-platform backend, even with technologies based on DirectX and OpenGL. This achievement would a modern graphics API to replace the obsolete System.Drawing API, which Microsoft implemented in .NET Core v2.1.0.

Ubiquitous .NET Client Application Development Model

Microsoft’s Visual Studio (VS) team has developed UNCADM, which uses .NET technologies. It can run in many runtime environments, including store-hosted and web-hosted. The following diagram shows a high-level overview of UNCADM:

Fig. 1 Ubiquitous .NET Client Application Development Model

The goal of UNCADM is to build deliverables for development platforms with a single .NET Client Application Project including the following:

• Windows 10

• Legacy Windows

• Unix/Linux

• Droid

• iOS

• Macintosh

• HTML5

This capability requires UNCADM to possess specific characteristics for each platform. For example, native-compiled and store-hosted platforms like Windows, Droid and iOS require native cross-platform capability. Building HTML5 projects requires UNCADM to be HTML5-compliant, and web-hosted scenarios need .NET-to-JavaScript transpilation.

UNCADM should provide a consistent UX across all scenarios for usability and brand recognition. Sharing code and assemblies between server and client boundaries also requires cross-boundary accessibility. Additionally UNCADM should use object serialization congruence, meaning the object created in memory is the same as the object defined and described in the serialized file.

Xamarin.Forms

Xamarin is a software company founded in 2011 by the engineers who created Mono for Android and MonoTouch, now known as Xamarin.Android and Xamarin.iOS respectively. Both of these products are cross-platform implementations of .NET and the Common Language Infrastructure (CLI). Microsoft acquired Xamarin in 2016.

Xamarin has also developed a self-named mobile development framework, which had 1.4 million users in 120 countries using its products as of 2017. This framework extends the .NET developer platform with tools and libraries, including a C# shared codebase. These resources allow developers to write apps for OSs like Android, iOS and Windows apps that use native UIs and share code across platforms.

Xamarin.Forms is an open-source cross-platform framework for building apps with .NET from a single shared codebase. Xamarin introduced Xamarin.Forms as part of Xamarin 3, which was released in 2014. Microsoft has subsequently modified Xamarin to work with UWP and Mobile Blazor Bindings, allowing users to develop native apps in Android and iOS by using C#, .NET and web programming patterns.

Xamarin.Forms includes controls, layouts and pages, allowing developers to build mobile apps from a single, extensible API. They can also create subclasses for these objects to customize their behavior or define them from scratch to ensure they exhibit the desired behavior. Users can also map portable controls subsets to native controls of Android, iOS and Windows Phone.

MAUI

The journey towards unifying the .NET platform begins with .NET 5, which brings .NET Core and Xamarin together in one base class library (BCL) and toolchain. This will change the way developers build applications, especially mobile apps across multiple platforms. MAUI includes a first-class UI framework and modern development patterns that provide a single-project developer experience.

The following diagram from the Microsoft Developer Blogs shows the relationship between MAUI and .NET:

Figure 2: MAUI Architecture

MAUI provides a UI for .NET that allows developers to build apps from a single codebase and deploy them to multiple devices. It will also accommodate the upcoming changes to .NET and Xamarin.Forms, which is particularly beneficial given Xamarin’s growing popularity among developers. Companies like Delta, Ernst & Young and UPS have been leveraging Xamarin on top of .NET for the past six years, especially for mobile apps.

MAUI has been highly successful in helping small businesses share code, which helps to maximize their development investment. It also extends code by adapting desktop applications for mobile devices, resulting in multi-platform applications. This capability is especially useful for new devices like the Surface Duo.

MAUI simplifies the choices .NET developers must make when building apps by providing a single stack that supports all modern workloads. The complete implementation of MAUI will also allow developers to access all the native features of each workload and control the UI from one platform, resulting in a UX that doesn’t require compromise while sharing more code than ever before.

Cross-platform Development

MAUI is designed to improve developer productivity, including project optimization and cross-platform tooling. It simplifies project structure into a single project that targets multiple platforms, allowing developers to deploy their project to the platform of their choice. These platforms include desktops, mobile devices, physical devices and emulators that developers can install their apps to with a single click.

They can also add cross-platform resources to a MAUI project such as fonts, images and translation files. MAUI automatically creates native hooks for each platform, allowing developers to focus on writing code. Furthermore, developers can always access a project’s underlying OS APIs, which will be easier with platform-specific integrations in MAUI. This feature means that developers can add source code for the native OS and APIs. MAUI keeps all these features in place, helping developers stay productive.

The following screenshots show the major components for developing a cross-platform project in MAUI:

Figure 3: MAUI Cross-platform Development

The above model shows that developers can manage project resources such as fonts and images from one location. They can also target multiple platforms by organizing platform-specific code for each platform. Once developers learn the one method for building client apps in MAUI, they can do it with all platforms.

Modern App Patterns

.NET uses architectural patterns to provide developers with more ways to implement their personal preferences, increasing their productivity. For example, they can choose the Integrated Desktop Environment (IDE) to use for a project such as Visual Studio 2019, Visual Studio Code and Visual Studio for Mac. MAUI supports the existing Model–view–viewmodel (MVVM) and XAML patterns as well as upcoming patterns like Model-View-Update (MVU), which uses multiple programming languages. MVVM and MVU deliver the same fidelity and performance for native applications, allowing developers to choose the patterns most suitable for their use cases and personal preferences.

MVVM

MVVM is a software architectural pattern that helps developers separate the graphical user interface (GUI) from back-end logic, ensuring the GUI remains independent of any specific model platform. The GUI is the view component of MVVM, whether the developer implements it with code or a markup language. The back-end logic is the model component that performs processing not directly visible to users.

The view model of MVVM exposes data objects so that developers can easily manage and present them. It performs more modeling than view in this respect, although it still handles most of the display logic. The view model may also organize access to the back-end logic around use cases.

MVVM is a variation of the Presentation Model design pattern invented by Martin Fowler. Microsoft architects Ken Cooper and Ted Peters developed MVVM specifically for the purpose of simplifying event-driven programming for UIs. Architect John Gossman first described the use of MVVM in 2005, when Microsoft incorporated it into WPF and Silverlight. MAUI includes both MVVM and XAML, which .NET developers have been using for decades. Both patterns will continue to evolve in MAUI, allowing developers to become more productive for building new apps and maintaining existing ones.

The following two code snippets illustrate the separation of UIs and back-end code in MVVM:

<StackLayout>

<Label Text=”Welcome to .NET MAUI!” />

<Button Text=”{Binding Text}”

Command=”{Binding ClickCommand}” />

</StackLayout>

public Command ClickCommand { get; }

public string Text { get; set; } = “Click me”;

int count = 0;

void ExecuteClickCommand ()

{

count++;

Text = $”You clicked {count} times.”;

}

The first snippet above shows the display code for a label and button, while the second performs the back-end logic for calculating a click counter.

MVU

MAUI also allows developers to implement the increasingly popular Model-View-Update (MVU) pattern by writing the UI in C#. MVU is a simple pattern for building web applications based on a clean separation between the application’s model, view and update capabilities. The model component is the application’s state, and the view aspect is the HTML presentation of that state to the user. The update portion of the MVU pattern describes how to update the state.

MVU is a simple, straightforward architecture that fits in easily with MAUI. Developers have a Model of the application that they send to the View component, which displays the Model to the user. The View component also calls Update methods that update the Model. MVU promotes the one-way flow of data and management of the application’s state. It also emphasizes the rapid update of the UI by only applying necessary changes.

The example below provides a simple example of MAUI code written in the MVU style:

readonly State<int> count = 0;

[Body]

View body() => new StackLayout

{

new Label(“Welcome to .NET MAUI!”),

new Button(

() => $”You clicked {count} times.”,

() => count.Value ++)

)

};

The [Body] tag in the snippet above indicates the model, which uses the view to display the Label and Button objects in the UI. The code then performs calculations for these objects that update the UI.

The MVU pattern is well-suited for reloading an application that already running, commonly known a hot reload. This capability uses fonts, gradients and styling to accomplish this task, as indicated by the following screenshot of a snippet written in C#:

Figure 4: MXU Example in C#

The above snippet describes the entire UI that will be displayed when the user reloads the application. Note how the code specifies all of the attributes for a button and its label.

Roadmap

MAUI is an extension of the effort to unify the .NET platform that began with .NET 5. It will eventually include a cross-platform API that provides native features and UI controls for supported platforms. At the same time, MAUI will also allow developers to share more code and deploy it to more targets.

This new .NET scheme should also include major changes for Xamarin, especially Xamarin.Forms. Xamarin plans to release a major version of this development framework later in 2020, with additional minor versions and service releases every six weeks until .NET 6. Xamarin.iOS and Xamarin.Android will be part of .NET 6 as part of .NET’s unification, specifically .NET for Android. and .NET for iOS.

These bindings are already part of the Software Development Kits (SDKs) for Apple and Google, so Xamarin won’t change anything for these SDKs. However, other .NET components like build tools, runtime frameworks and target frameworks will all receive updates to ensure they’re consistent with other .NET 6 workloads. Microsoft is also committed to keeping mobile SDKs current with MAUI and will ship a final release of Xamarin SDKs with .NET 6. All .NET development work will shift to .NET 6 at that point.

Microsoft initially laid out its roadmap for .NET in 2019, which showed a more aggressive journey towards a unified .NET before the COVID-19 pandemic. This plan included unifying the .NET Core and Xamarin implementations into a single BCL and SDK. After the pandemic, Microsoft had to adapt to by ensuring current operations run smoothly for its customers. Microsoft remains focused on its customers’ most immediate needs, rather than future planning. The overall vision for unifying .NET hasn’t changed, even though the timeline has.

Microsoft is currently planning to introduce MAUI in a series of previews, beginning in the fourth quarter of 2020. It’s already releasing previews of .NET 5, although MAUI won’t be part of any version of .NET 5. For example, .NET 5 Preview 4 was released in May 2020. MAUI should be fully functional with the release of .NET 6 in November 2021, which will further unify .NET development into one package. .NET 6 will then become the Long-Term Support (LTS) release for .NET.

In the meantime, upcoming features that Microsoft will add in MAUI previews include managing fonts and images from a single location and targeting multiple platforms with platform-specific code. Each .NET project will also be able to target multiple devices. Support for MVVM and MVU will also be added to MAUI between now and November 2021. MAUI already provides developers with access to the underlying OS’s APIs with native source code files, which facilitates platform-specific integrations.

Xamarin.Forms vs. MAUI

Xamarin.Forms developers with new projects in .NET. will get up to speed quickly since they’re already familiar with its APIs and controls. Developers will also be able to transition existing apps to MAUI more smoothly as its launch date approaches, assuming Microsoft provides guides as it did for .NET Core. These guides proved highly useful for helping developers migrate from .NET to .NET Core. .NET mobile developers will join this migration effort as Xamarin.Forms evolves under MAUI.

The following chart shows the differences between Xamarin.Forms and MAUI:

Figure 5: Xmarin.Forms vs. MAUI

Xamarin.Forms supports Windows OSs through the UWP and WPF communities, while Microsoft directly supports MAUI. MacOS also obtains support from Xamarin.Forms, while Microsoft provides direct support for MacOS with MAUI. iOS is also fully supported by MAUI as of iOS v10, while Xamarin.Forms has been gaining support since iOS since v9. Android has supported Xamarin.Forms since API 19 and API 21.

The biggest differences in features include renderers, which are tightly coupled to BindableOject in Xamarin.Forms but only loosely coupled in MAUI with no core dependencies. Both frameworks support the MVVM and RxUI app models, but MAUI adds support for MVU and Blazor. MAUI also supports single projects, multiple targets and multiple windows.

Additionally, MAUI will fully support .NET beginning with .NET 6, while Xamarin provides .NET support through components such as Xamarin.Android, Xamarin.iOS, Mono and .NET framework. Developers also acquire Xamarin access through NuGet and Visual Studio Installer. Additional differences include Xamarin.Form’s use of the Franken project system, while MAUI uses an SDK-style project system.

Summary

The biggest advantage of a unified UI for all Microsoft solutions is that it allows .NET developers to build apps for all these products from a single platform .NET consulting firms can also use Xamarin.Forms and MAUI to develop software for most modern OS, whether they obtain this capability directly from Microsoft or through various user communities. Microsoft will gradually add these features to .NET over next year and a half, culminating in .NET 6. The specific progression will depend on whether a project is built with Xamarin.Forms or MAUI, although most developers should eventually end up using MAUI.