Embracing the hybrid Blazor approach in .NET MAUI

.NET MAUI has introduced a groundbreaking 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 take a look at the benefits of this approach and how it can streamline your development process.

Using NPM packages for style consistency

One of the standout features of the Blazor Hybrid approach is the ability to include npm packages in your project. This is especially useful if you want to maintain style consistency across platforms. For example, if you use a front-end library in your web app, you can easily share the same styles across your MAUI app, ensuring a uniform look and feel.

Integrate NPM into your MAUI project

To add npm to your MAUI project, you will need to follow these steps:

1. Initialize npm in your project folder:

   npm init -y

   This command creates a package.json file in your project.

2. Install your desired front-end library:

   npm install your-library-name

   Replace your-library-name with the actual library you want to use.

3. Build your JavaScript library:

   npm run build

   This command builds your JavaScript and CSS assets based on the scripts defined in your package.json.

4. Include the compiled library in your index.html file:HTML

By following these steps, you can seamlessly integrate front-end libraries into your MAUI app, improving 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 accessibility standards such as ARIA (Accessible Rich Internet Applications) attributes, making the app usable by people with different disabilities.

HTML vs. XAML: Aimed at front-end developers

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

Integrate BlazorWebView into 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 harness the full power of Blazor within your MAUI app.

Here’s an example of how to do one BlazorWebView to your XAML:

XAML

 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">

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

In this excerpt:

• The xmlns:blazor namespace is declared to refer to the Blazor components.
• The BlazorWebView tag specifies the host page displayed in the MAUI app.
• The RootComponent label inside BlazorWebView.RootComponents defines the Blazor component to use, referenced by the selector (in this case #app).

Then to register the use of this package, make sure you add it to your Maui program file

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

        builder.Services.AddMauiBlazorWebView();

        return builder.Build();
    }

Adding this code to your MAUI app allows you to seamlessly integrate Blazor components, allowing you to use standard web technologies like HTML and CSS for your user interface.

Navigating the cons

While the Blazor Hybrid approach offers numerous advantages, there are also disadvantages. Navigation can become more complex, especially when it comes to navigation within a Blazor WebView and between navigation pages within the app. Developers must manage routing carefully to ensure a smooth user experience.

Conclusion

The Blazor Hybrid approach in .NET MAUI provides an attractive option for developers looking to create cross-platform applications with shared styles and shorter 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 worthwhile consideration for your next project.