Microsoft’s commitment to a cross-platform world is perhaps one of the biggest changes to its development platform in recent years. His purchase of Xamarin kickstarted a sea change that brought us to today’s Visual Studio-powered development environment that integrates GitHub on one side and cross-platform .NET 6 on the other, with apps that run at high scale in cloud Kubernetes systems and on mobile devices.
Recently, I looked at the development of the successor to Xamarin’s Cross-Platform Forms UI tools: .NET’s Cross-Platform Application UI or MAUI. Related to this, another new Microsoft UI technology is designed to integrate these large-scale web applications into your devices and onto your desktop. Building on the flexible Blazor web UI framework, Blazor Hybrid combines the two technologies to let you build UIs that extend beyond desktop and mobile, adding support for the web with natively rendered controls on all platforms.
Modern web and modern development go hand in hand
There’s a lot to like about this approach to user interfaces. For one thing, it builds on what I consider to be the key lesson of the last decade on the web: we need to design our APIs first. This makes the UI another API client, using REST and JSON to communicate with microservices. We can then have many different user interfaces working on the same main server, all using the same calls and having the same impact on our service. It simplifies design and allows us to predictably scale application architectures. At the same time, a fixed set of APIs means service owners can update and upgrade their code without affecting customers.
This approach has led to the development of concepts such as Jamstack, using JavaScript, APIs and markup to deliver dynamic static websites, simplifying the design and publication of web applications. Blazor Hybrid takes these concepts and brings them to your code while skipping the browser and integrating a render surface alongside the rest of your app. You can work offline if needed, a model that becomes even more interesting when working with locked down environments such as the Windows 11 SE education platform.
Hybrid Blazor in MAUI
MAUI support for Blazor Hybrid is a nice feature of the new platform; it extends it beyond traditional desktop and mobile clients so you can share user experience elements with web applications. On the web side, ASP.NET Core apps have the ability to share code with other projects, reducing developer workload and allowing you to develop once and then release to all of your target environments. . While ASP.NET Core projects are unlikely to be part of the same project as MAUI code, they can still be part of the same solution, and code can be copied between projects as needed.
Blazor Hybrid is currently in preview, but it’s worth exploring if you want to extend the reach of existing ASP.NET Core web apps. The obvious first step is to create a MAUI app to house your code, although you’re not limited to a .NET UI approach, especially if you’re focused on delivering desktop versions of web apps. existing enterprise accounts to Windows clients.
Building a Blazor Hybrid MAUI app is like building any other MAUI app. The Chromium-based WebView2 control hosts your code on Windows. Non-Windows platforms use their own web application hosts for Blazor content. In practice, this shouldn’t be a problem, as Android uses a Chromium browser, and while Safari hosted on iOS might not have all the features of Chrome, it should support Blazor components.
If you have correctly configured MAUI in Visual Studio 2022 Preview, you should find the option to create a .NET MAUI Blazor application. Creating this solution sets up a new C# project with the required platform dependencies for all of its target environments. The project sets up a basic Blazor UI that’s ready to run and, of course, ready to change.
Having a pre-built scaffold helps a lot, as it demonstrates how to host a BlazorWebView in your app’s XAML and how to use Razor content in hosted HTML. Since most of your app’s UI logic will be in ASP.NET Core Razor code hosted in WebView along with all Blazor components, there’s not much to do before you start writing. your web user interface.
The value here isn’t so much in MAUI as it is in running client-side Blazor code. MAUI provides a convenient cross-platform host for your Razor code, and while your C# skills work well on both sides of the WebView divide, the most important thing is to create a responsive Blazor page that can scale across phones and PCs.
Hybrid Blazor on Windows .NET
You are not limited to MAUI for Blazor Hybrid. It is also intended to be a supported workload for standard Windows .NET UI tools so that you can use it in familiar frameworks such as Windows Presentation Foundation or Windows Forms. Since it’s in preview, you’ll need to run a preview build of Visual Studio 2022 with the .NET desktop developer tools installed.
Once your tools are set up, create a standard WPF application using .NET 6 or later. (You can use the current .NET 7 preview build if you want to be on the cutting edge of .NET development.) Next, install the WebView WPF NuGet package manager to host your Blazor code. Once installed, you can start coding using the Razor SDK to build your app’s Blazor UI elements.
This now lets you use Blazor components in your app, using the same techniques we use to add HTML and JavaScript to WebView UIs. Once you have the framework for a web application in place, you can start using Blazor’s Razor syntax to add components and inline code to your HTML. If you know the old pre-.NET ASP syntax, then Razor will be very familiar, using inline C# in your HTML with Razor directives to add functionality to buttons and load view components that are controlled from of your C# code.
Don’t forget to edit your view’s XAML to set up a BlazorWebView that uses your content’s local URL as the start page. You should then be ready to compile and run any Blazor code, using it to connect to back-end services or work with local content, integrating web applications into your .NET code.
It’s interesting to see Microsoft experimenting with its UI platforms in this way. After finally delivering a single cross-platform .NET, this approach, bringing MAUI and ASP.NET Core together, is now much easier to implement. Although still in its infancy, there is certainly promise here and a model that could extend user interfaces even further than the four most popular desktop and mobile operating systems.
Copyright © 2022 IDG Communications, Inc.
