Embracing the Blazor Hybrid Approach in .NET MAUI

.NET MAUI has introduced a game-changing approach to cross-platform development with its Blazor Hybrid model. This innovative framework combines the best of both worlds: the rich ecosystem of .NET with the flexibility and familiarity of web technologies. Let’s dive into the benefits of this approach and how it can streamline your development process.

Leveraging npm Packages for Style Consistency

One of the standout features of the Blazor Hybrid approach is the ability to incorporate npm packages into your project. This is particularly beneficial when you want to maintain style consistency across different platforms. For instance, if you have a front-end library used in your web app, you can easily share the same styles in your MAUI app, ensuring a uniform look and feel.

Integrating npm into Your MAUI Project

To add npm into your MAUI project, you’ll need to follow these steps:

Initialize npm in your project directory:

npm init -y

This command creates a package.json file in your project.
Install your desired front-end library:

npm install your-library-name

Replace your-library-name with the actual library you wish to use.
Build your JavaScript library:

npm run build

This command compiles your JavaScript and CSS assets, based on the scripts defined in your package.json.
Include the compiled library in your index.html file:HTML

<link rel="stylesheet" href="path/to/your-library.css"> <script src="path/to/your-library.js"></script>

By following these steps, you can seamlessly integrate front-end libraries into your MAUI app, enhancing style consistency and reducing development time.

Accessibility Considerations

Accessibility is a crucial aspect of application development. The Blazor Hybrid approach in MAUI allows developers to leverage web standards for accessibility, such as ARIA (Accessible Rich Internet Applications) attributes, ensuring that the app is usable by people with various disabilities.

HTML vs. XAML: Catering to Front-End Developers

A significant advantage of the Blazor Hybrid model is that it caters to developers who are more comfortable with HTML and CSS than XAML. This familiarity allows front-end developers to jump into MAUI development with minimal learning curve, utilizing their existing skills to create rich user interfaces.

Integrating BlazorWebView in XAML

When working with the Blazor Hybrid approach in .NET MAUI, you can integrate your Blazor components directly into your XAML files using the BlazorWebView component. This allows you to leverage the full power of Blazor within your MAUI app.

Here’s an example of how to add a BlazorWebView to your XAML:

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             x:Class="YourAppNamespace.MainPage">

    <blazor:BlazorWebView HostPage="wwwroot/index.html">
        <blazor:BlazorWebView.RootComponents>
            <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </blazor:BlazorWebView.RootComponents>
    </blazor:BlazorWebView>

</ContentPage>

In this snippet:

The xmlns:blazor namespace is declared to reference the Blazor components.
The BlazorWebView tag specifies the host page that will be displayed within the MAUI app.
The RootComponent tag within BlazorWebView.RootComponents defines the Blazor component to be used, which is referenced by its selector (in this case, #app).

To then register the use of this package you should ensure to add it into your Maui program file

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()

        builder.Services.AddMauiBlazorWebView();

        return builder.Build();
    }

By adding this code to your MAUI app, you can seamlessly integrate Blazor components, enabling you to use standard web technologies like HTML and CSS for your UI.

Navigating the Drawbacks

While the Blazor Hybrid approach offers numerous benefits, it’s not without its drawbacks. Navigation can become more complex, especially when dealing with navigation inside a Blazor WebView and between navigation pages within the app. Developers need to carefully manage routing to ensure a smooth user experience.

Conclusion

The Blazor Hybrid approach in .NET MAUI presents a compelling option for developers looking to create cross-platform applications with shared styles and reduced development time. By embracing web technologies, developers can build accessible, consistent, and visually appealing apps while leveraging their existing front-end expertise. Despite some challenges with navigation, the benefits of this approach make it a worthy consideration for your next project.

Blog