Skip to content
Home > Build Desktop and Mobile UIs with Blazor Hybrid Apps

Build Desktop and Mobile UIs with Blazor Hybrid Apps

    Microsoft's dedication to a multiplatform world is probably one of the biggest changes to its growth platform over the past few years. The purchase of Xamarin began a radical change that brought us the current growth environment based on Visible Studio that brings GitHub on one end and cross-platform .NET 6 on the other, with purposes that are executed at scale on Kubernetes techniques in the cloud and on mobile devices.

    I've recently noticed the growth of the successor to Xamarin's cross-platform UI tools: .NET's Multiplatform App UI or MAUI. Tied in with this is another new UI experience from Microsoft designed to bring these Internet purposes in a big way to your gadgets and your desktop. Building on the culmination of the versatile Blazor Internet UI Framework, Blazor Hybrid combines the two applied sciences to present you with a means of building user interfaces that span across desktop and mobile, including support for natively rendered controls. on all platforms.

    Modern Internet and Modern Growth Go Hand in Hand

    There's a lot to love about this approach to UIs. On the one hand, it builds on what I consider the most important lesson of the last decade on the Internet: first, we need to design our APIs. This makes the UI simply another API consumer, using REST and JSON to communicate with microservices. We can then have many alternative UIs working towards the same finish, all using the same calls and having the same effect on our service. It simplifies design and allows us to predictably scale utility architectures. At the same time, a hard and fast set of APIs means service owners can replace and improve their code without impacting buyers.

    This method has led to the emergence of ideas like Jamstack, utilizing JavaScript, APIs, and markup to ship dynamic static web sites, simplifying the design and publishing of Internet utilities. Blazor Hybrid takes these ideas and brings them to your code while skipping the browser and incorporating a rendering floor alongside the rest of your utility. You can work offline in the vital location, a model that becomes much more fascinating when working with closed environments such as the Windows 11 SE educational platform.

    Blazor Hybrid in MAUI

    h2>

    MAUI assistance for Blazor Hybrid is a fascinating feature of the new platform; it extends you beyond standard desktop and mobile buyers so you can share personal experience components for internet purposes. On the online side of things, there is the option of ASP.NET Core for the purpose of sharing code across different tasks, reducing developer workload and allowing you to develop once and then ship to all your target environments. While ASP.NET Core tasks are unlikely to be part of the same challenge as MAUI code, they can be part of the same resolution and the code can be copied between tasks as important.

    Blazor Hybrid is in preview right now, but it's worth exploring if you want to extend the reach of ASP.NET Core's current internet purposes. The first simple step is to create a MAUI application to host your code, although you are not restricted to 1 .NET UI method, especially if you intend to provide current enterprise-purpose desktop versions of the Internet to Windows buyers. p>

    Building a Blazor Hybrid MAUI utility is like building all other MAUI utilities. Chromium-based WebView2 management hosts its code in home windows. Non-Home Windows platforms use their own internet utility hosts for Blazor content. On a side note, this shouldn't have any point since Android uses a Chromium browser, and while Safari hosted on iOS doesn't have all the features of Chrome, it should support the parts of Blazor.

    In If you have organized MAUI accurately in Visible Studio 2022 Preview, you need to discover the option to create a .NET MAUI Blazor application. Creating this resolution creates a new C# challenge with the necessary platform dependencies for all of your target environments. The challenge creates a Blazor core UI that can be run and in fact prepared for variation.

    Having pre-built scaffolding helps a lot, because it shows the best way to host a BlazorWebView< /a> in your utility's XAML and the best way to use Razor content in the hosted HTML. Since most of the utility's UI logic may be in the ASP .NET Core Razor code hosted in WebView with any parts of Blazor, there isn't much else to do before you start writing your Internet UI.

    The value here won&#039;t be much in MAUI as it is operating client-side Blazor code. MAUI provides a useful cross-platform host for your Razor code, and while your C# experience works fine on both sides of the WebView divide, the most important thing is to create a responsive Blazor web page that scales for phones and PCs.</p>

    Blazor Hybrid on Windows Home .NET

    You are not restricted to MAUI for Blazor Hybrid. It must also be a supported workload for normal Windows .NET UI tools so you need to use it in known frameworks like Windows Presentation Base or Windows flavors. Because it is in preview, you must run a preview release of Visible Studio 2022 with the .NET desktop development tools installed.

    After organizing your tools, create a regular WPF utility using .NET 6 or later. (You need to use the current preview release of .NET 7 if you really feel like being on the sidelines of .NET's growth.) Next, configure the WebView WPF NuGet package manager to host your Blazor code. Once this is entered, you can start coding, using the Razor SDK to build your app's Blazor UI components.

    This now helps you use parts of Blazor in your utility, using the same methods we use to add HTML and JavaScript to WebView UIs. Once you get the framework of an online utility, you can start using Blazor's Razor syntax to add parts and inline code to your HTML. If you are familiar with the outdated pre-.NET ASP syntax, then Razor may be very familiar, utilizing C# built into your HTML along with Razor directives to add performance to buttons and load display parts that can be managed outside. of its code C#.

    Don't forget to edit your view's XAML to configure a BlazorWebView that uses your content's native URL as a landing page. It's better then to be able to compile and run any Blazor code, using it to connect to backend companies or work with native content by embedding internet applications into your .NET code.

    It's fascinating to see Microsoft experimenting with its UI platforms in this way. Having finally delivered a single cross-platform .NET, this method – bringing together MAUI with ASP.NET Core – is now a little easier to ship. While it's still early days, there's certainly promise here and a model that would extend UIs even further than the four most popular desktop and mobile working techniques.

    0