Compose desktop and mobile UIs with Blazor Hybrid apps

The world of app development is very exciting and every day we come across the news of some new app being launched in the market. Now we are in the age of hybrid apps as they can access all of the native platform’s features such as GPS, camera, accelerometer, and more. Hybrid apps can be downloaded from a platform’s application store like a native app and are, in at least one way, a type of native app. Blazor Hybrid apps are native apps that can leverage web technologies like HTML and CSS for additional functionality and it is an ASP.NET feature that allows building interactive web UIs employing C# for consumer and server code.

Blazor hybrid app uses the embedded WebView control to render the Blazor and Blazor components directly rendered in native devices without using WebAssembly. Blazor provides developers access to any library as needed, provided it is compatible with the .NET Standard and the Blazor components will run natively on .NET using Xamarin. In addition to using existing .NET libraries, it can also access JavaScript APIs and libraries for client-side UI and provides flexibility to use a different editor using the .NET command-line tools. .NET and Blazor bring the web development and mobile application worlds closer together as Blazor also allows the sharing of code and libraries as well as reusable web UI components. 

The advent of consumer-facing smartphones and app ecosystems began changing the face of computing over a decade ago and Microsoft’s commitment to a cross-platform world is perhaps one of the biggest transitions to its growth platform during the past few years. Its purchase of Xamarin kickstarted a sea transition that’s taken to today’s Visual Studio–powered growth setting that brings in GitHub at one end and the cross-platform .NET 6 at the other, with applications that operate at scale in cloud Kubernetes networks and on mobile equipment. Blazor code executing on the server uses the same security sandbox as JavaScript frameworks and connects directly to a database, building on top of the flexible Blazor web UI framework, Blazor Hybrid blends the two technologies to lend you a way of creating UIs that span more than desktop and mobile, adding aid for the web with natively rendered controls on all platforms. Visual Studio and Visual Studio Code can be used for Blazor development on Windows, Linux, and Mac OS, and the active community “Awesome Blazor’ is also a resource for getting answers, referring samples, accessing tutorials, and books, and more. 

New web and modern advancements go hand in hand

Web development has been going through fundamental changes since the internet became a popular tool for commercial use at the beginning of the ‘90s and there’s a lot to like about this approach to UIs. For one, the key lesson to be considered is to design the APIs first. That makes UI just another API client, using REST and JSON to communicate with microservices and can then have many different UIs working against the same back end, all using the same calls and having the same impact on the service as today’s internet landscape presents a very different picture. Internet users demand interactive websites that offer both attractive design features as well as intuitive, user-friendly navigation and this simplifies design and allows to predictably scale application architectures. Application programming interfaces, or APIs, simplify software development and innovation by enabling applications to exchange data and a fixed set of APIs means that service owners can update and upgrade their code without affecting clients. Its performance is near-native and tooling and debugging are easier and faster and you can even work offline where necessary, a model that becomes even more interesting. For server-side code execution, any JavaScript code is executed seamlessly by Blazor on the client and it also provides flexibility to use a different editor using the .NET command-line tools.

Blazor Hybrid in MAUI

Blazor Hybrid combines Web technologies (HTML, CSS, and optionally JavaScript) with native in .NET MAUI Blazor and MAUI support for Blazor Hybrid is an interesting feature of the new platform. It extends it beyond the traditional desktop and mobile clients so you can share user experience elements with web applications as MAUI is a cross-platform framework for creating native mobile and desktop apps with C# and XAML. .NET MAUI Blazor target cross-platform development that sets it apart from other solutions and the web side of things, there’s the option for ASP.NET Core applications to share code with other projects. It reduces developer workload and allows you to develop once and then deliver across all your target environments. MAUI is the evolution of Xamarin.Forms, which initially targeted iOS and Android, and the obvious first step is to build an MAUI app to host your code, though you’re not limited to one .NET UI approach, particularly if you’re directed on providing desktop versions of prevailing enterprise web applications to Windows customers. Using MAUI, you'll write cross-platform applications in a single solution with the option of writing platform-specific code as needed, and building a Blazor Hybrid MAUI application is like building any other MAUI application. In practice, this shouldn’t have any problems, as Android employs a Chromium browser, and although iOS’s hosted Safari may not have all the characteristics of Chrome, it should benefit from Blazor factors and .NET MAUI provides a single framework for building the UIs for mobile and desktop apps.

Web applications are typically developed using Java, .NET, Node.js, and other similar languages and if you’ve set up MAUI correctly in Visual Studio 2022 Preview, you should find the option to create a .NET MAUI Blazor App. Creating this solution sets up a new C# project with the required platform dependencies for all its target environments and Blazor allows you to create web UIs in C# instead, a very prominent development language as it boosts catch errors at the moment of compilation relatively than during runtime. If you’ve set up MAUI correctly in Visual Studio 2022 Preview, you should find the option to create a .NET MAUI Blazor App, and creating this solution sets up a new C# project with the expected platform dependencies for all its target grounds. MAUI is full-stack .NET, sharing code, logic, testing, and tooling across the solution is possible and the project sets up a basic Blazor UI that’s ready to run and, of course, ready to change.

The Blazor Hybrid pattern is composed upon MAUI and executed through the BlazorWebView, an MAUI element used to formulate an embedded Blazor Web view using the WebView2 runtime, and possessing prebuilt scaffolding benefits a lot, as it demonstrates how to host a BlazorWebView in your application’s XAML and how to operate Razor content in hosted HTML. In addition to native UI frameworks, 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, what’s extensively crucial is creating a responsive Blazor page that can scale across phones and PCs. Through a BlazorWebView component, MAUI apps can use the Blazor Web framework to create a .NET MAUI Blazor application.

Blazor Hybrid across Windows .NET

.NET MAUI uses a single API to unify Android, iOS, macOS, and Windows APIs but you’re not limited to MAUI for Blazor Hybrid. It's moreover aimed to be a beneficial workload for standard Windows .NET UI tools so you can utilize it inside common frameworks such as Windows Presentation Foundation or Windows Forms. The .NET runtime is used for the execution environment for MAUI applications, as it’s in preview, you’ll need to run a Visual Studio 2022 preview release with the .NET desktop development tools installed. .NET MAUI Blazor enables both native and Web UI in a single application and once you have your tools set up, create a standard WPF application using .NET 6 or later. 

Blazor is extremely easy to use and this now lets you use Blazor components in your application, using the same techniques we use to add HTML and JavaScript to WebView UIs. Don’t forget to edit your view’s XAML to configure a BlazorWebView that uses your content’s local URL as a start page and you should then be ready to compile and run any Blazor code, wielding it to bind to back-end services or toil with the local subject, rooting web apps in your .NET code.

Conclusion

Being part of the open-source .NET platform, it has a strong community of contributors and it’s interesting to see Microsoft experimenting with its UI platforms this way. Having ultimately provided a single cross-platform .NET, this approach bringing together MAUI with ASP.NET Core is currently a lot simpler to provide. Blazor is also fast evolving and capabilities are being added to use the technology for creating Progressive Web Apps (PWAs), hybrid apps, and fully native apps, while it’s still early days, and a model that could extend UIs even further than the four most popular desktop and mobile operating systems allowing an enterprise to have the full-stack .NET development experience.