Build desktop and mobile UIs with Blazor Hybrid apps

.NET and Blazor bring the worlds of web and mobile app development closer together. Microsoft’s commitment to a cross-platform world is perhaps one of the biggest changes to its development platform in recent years. The Xamarin acquisition started a sea change that brought us to today’s Visual Studio-driven development environment, with GitHub on one end and cross-platform .NET 6 on the other, with applications that scale and run on Kubernetes cloud systems and mobile devices. . I’ve recently been looking at developing Xamarin’s cross-platform successor to Forms UI: .NET’s Multiplatform App UI, or MAUI. This includes another new user interface technology from Microsoft designed to bring web applications at scale to your devices and your computer. Based on Blazor’s flexible web UI framework, Blazor Hybrid combines these two technologies to give you a way to create user interfaces that go beyond desktop and mobile, adding support for the web with rendered controls. which is native on all platforms. [Also on InfoWorld: The Rise of WebAssembly] Modern web and modern development go hand in hand There’s a lot to like about this approach to user interfaces. First, it builds on what I believe to be the most important lesson of the last decade on the web: we need to design our APIs first. This makes the UI another API client that uses REST and JSON to communicate with microservices. We can have many different UIs running on the same backend, all making the same calls and having the same effect on our service. This simplifies design and allows us to predictably scale application architectures. At the same time, a fixed set of APIs means that service owners can update and upgrade their code without affecting clients. This approach led to the development of concepts such as Jamstack, the use of JavaScript, APIs, and tags to provide dynamic static web pages, simplifying the design and publishing of web applications. Blazor Hybrid takes these concepts and brings them to your code, bypassing the browser and embedding the rendering container in the rest of your application. You can work offline as needed, a model that may be more interesting if you’re working in locked-down environments like the Windows 11 SE educational platform. Blazor Hybrid in MAUI MAUI support for Blazor Hybrid is an interesting feature of the new platform; it goes beyond traditional desktop and mobile clients and allows you to share elements of the user experience with web applications. On the web page, there is the ability for ASP.NET Core applications to share code with other projects, reducing developer workload and allowing you to develop once and then deliver to all your target environments. Although ASP.NET Core projects may not 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 if necessary. Blazor Hybrid is currently in Preview, but if you’re looking to extend the reach of your existing ASP.NET Core web apps, it’s worth exploring. The obvious first step is to create a MAUI application to host your code, even if you’re not limited to a .NET UI approach, especially if you’re focused on providing desktop versions of existing enterprise web applications to Windows clients. Creating a Blazor Hybrid MAUI app is like creating any other MAUI app. The Chromium-based WebView2 control hosts your Windows code. Non-Windows platforms use their own web application hosts for Blazor content. In practice, this shouldn’t be a problem since Android uses the Chromium browser, and while hosted Safari on iOS may not have all the features of Chrome, it should be supported, it’s Blazor components. If you have set up MAUI correctly in Visual Studio 2022 Preview, you should find the option to create a .NET MAUI Blazor App. Creating this solution will set 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 is ready to run and of course ready to change. Having the scaffolding pre-built helps a lot because it shows how to host BlazorWebView in XAML in your application and how to use Razor content in the host HTML. Since most of your app’s UI logic will be in ASP.NET Core Razor code hosted on a WebView along with all Blazor components, there’s nothing left to do before you start writing your web UI. The value here is smaller in MAUI than when running Blazor code on the client side. MAUI provides a convenient cross-platform host for your Razor code, and while your C# skills will work well on both sides of the WebView divide, the most important thing is to create a responsive Blazor page that can scale to phones and desktops. Blazor Hybrid over Windows .NET You are not limited to MAUI for Blazor Hybrid. It is also intended as a supported workload for standard Windows .NET UI tools, so you can use it in familiar frameworks such as Windows Presentation Foundation or Windows Forms. As it is in preview, you must run Visual Studio 2022 Preview with the .NET Desktop Development Tools installed. Once you have your tools set up, create a standard WPF application using .NET 6 or later. (If you feel like you’re on the cutting edge of .NET development, you can use the current .NET 7 preview version.) Next, install the WebView WPF NuGet package manager to host your Blazor code. Once it’s installed, you can start coding using the Razor SDK to integrate Blazor elements into your app’s user interface. It allows you to use Blazor components in your application using the same techniques we use to add HTML and JavaScript to a WebView. Once you’ve created your web application framework, you can start using Blazor’s Razor syntax to add components and code to your HTML. If you’re familiar with the old pre-.NET ASP syntax, Razor will be very familiar because it uses inline C# in your HTML along with Razor directives to add functions to buttons and load display components controlled by your C# code. Don’t forget to edit the XAML in your view and configure BlazorWebView to use the local URL of your content as the splash page. You must be ready to compile and run any Blazor code, use it to connect to back-end services or work with local content, embed web applications in .NET code. It will be interesting to see how Microsoft experiments with UI platforms in this way. This approach—combining MAUI with ASP.NET Core—finally delivers cross-platform .NET and is now easier to ship. While it’s still early days, there’s definitely promise and a model that can expand user interfaces beyond the four most popular desktop and mobile operating systems.