Blazor Hybrid Development with MAUI

---

Enterprise Architecture & Performance Optimization for Senior .NET Architects

---

Executive Summary

Blazor Hybrid represents a fundamental shift in cross-platform development strategy for organizations aiming to unify web, mobile, and desktop development under a single C# codebase.

Instead of maintaining separate stacks for web (JavaScript), mobile (Swift/Kotlin), and desktop (WPF/WinUI), Blazor Hybrid with .NET MAUI enables shared business logic, UI components, and deployment patterns across all platforms.

The real power lies in the convergence of:

• Native platform performance
• Direct access to device APIs
• Mature .NET tooling
• Web-based UI development with Razor, HTML, and CSS

The question for senior architects is no longer “Does Blazor Hybrid work?”
It’s “When is Blazor Hybrid the optimal architectural choice?”

---

Deep Dive: Internal Architecture & Execution Model

The Hybrid Execution Model

Blazor Hybrid operates using a dual-runtime architecture:

• .NET MAUI hosts the native application
• Blazor components render inside an embedded WebView

This differs fundamentally from other Blazor models:

• Blazor Server → Server-side rendering over SignalR
• Blazor WebAssembly → Client-side .NET runtime in the browser
• Blazor Hybrid → Native app + WebView + local .NET runtime

Why This Matters

Because the app is not running inside a browser sandbox, you gain:

1. Direct access to device APIs
2. Offline-first capabilities
3. Native performance characteristics
4. No network latency for component interaction

---

WebView Interop & Marshaling

Blazor Hybrid still uses JavaScript interop, but with major differences:

• Calls are local process calls, not network calls
• No browser security restrictions
• Full control over the WebView lifecycle

Performance note:
Interop serializes data (usually JSON). For high-frequency operations, batching and virtualization are critical.

---

Component Lifecycle & State Management

Lifecycle hooks behave like standard Blazor, but platform awareness is essential:

• OnInitializedAsync → Permissions, sensors, platform setup
• OnAfterRenderAsync → Native + WebView coordination
• Dispose / DisposeAsync → Cleanup native resources

State often spans:

• MAUI services
• Blazor components
• Optional JavaScript interop

This is where dependency injection and mediator patterns shine.

---

Enterprise Architecture: Recommended Layering

A four-layer architecture scales best in real systems.

---

Layer 1: Shared Business Logic (Platform-Agnostic)

public record OrderProcessingCommand(
    string OrderId,
    decimal Amount,
    ReadOnlyMemory<byte> EncryptedPayload)
{
    public static OrderProcessingCommand Create(
        string orderId,
        decimal amount,
        byte[] payload)
        => new(orderId, amount, new ReadOnlyMemory<byte>(payload));
}

---

Layer 2: Data Access & Persistence (Abstracted)

public interface IOrderRepository
{
    ValueTask<Order?> GetOrderAsync(
        string orderId,
        CancellationToken ct = default);

    ValueTask<IAsyncEnumerable<Order>> QueryOrdersAsync(
        OrderFilter filter,
        CancellationToken ct = default);
}

---

Layer 3: Blazor UI Components

@page "/orders/{OrderId}"
@inject IOrderRepository OrderRepository
@inject ILogger<OrdersPage> Logger

@if (order is not null)
{
    <h3>Order @order.Id</h3>
    <p>Total: @order.Total.ToString("C")</p>
}

@code {
    [Parameter]
    public string OrderId { get; set; } = string.Empty;

    private Order? order;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            order = await OrderRepository.GetOrderAsync(OrderId);
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "Failed to load order {OrderId}", OrderId);
        }
    }
}

---

Layer 4: Platform-Specific MAUI Code

public partial class MainPage : ContentPage
{
    private readonly IServiceProvider _serviceProvider;

    public MainPage(IServiceProvider serviceProvider)
    {
        InitializeComponent();
        _serviceProvider = serviceProvider;
    }

    private async void OnOrderSyncClicked(object sender, EventArgs e)
    {
        var syncService =
            _serviceProvider.GetRequiredService<IOrderSyncService>();

        await syncService.SyncPendingOrdersAsync();
    }
}

---

Performance Optimization (Production-Grade)

1. Ahead-of-Time (AOT) Compilation

AOT is mandatory for production, especially on iOS.

<PropertyGroup>
  <PublishAot>true</PublishAot>
  <OptimizationPreference>Speed</OptimizationPreference>
</PropertyGroup>

Avoid reflection-heavy patterns:

// ✅ AOT-safe registration
services.AddScoped<IOrderRepository, OrderRepository>();
services.AddScoped<IOrderService, OrderService>();

// ❌ Avoid reflection-based scanning
// services.Scan(scan => scan.FromAssemblyOf<...>());

---

2. Virtualization & Lazy Loading

For large datasets, always virtualize.

@using Microsoft.AspNetCore.Components.Web.Virtualization

<Virtualize Items="orders" Context="order">
    <div class="order-row">
        <strong>@order.Id</strong> — @order.Total.ToString("C")
    </div>
</Virtualize>

@code {
    private List<Order> orders = new();

    protected override async Task OnInitializedAsync()
    {
        orders = await OrderRepository
            .QueryOrdersAsync(new OrderFilter { PageSize = 50 })
            .ToListAsync();
    }
}

---

3. Memory Management & Disposal

Long-running hybrid apps must clean up resources.

public class OrderSyncService : IAsyncDisposable
{
    private readonly CancellationTokenSource _cts = new();
    private readonly Timer _timer;

    public OrderSyncService()
    {
        _timer = new Timer(
            async _ => await SyncAsync(),
            null,
            TimeSpan.FromMinutes(5),
            TimeSpan.FromMinutes(5));
    }

    public async ValueTask DisposeAsync()
    {
        _timer.Dispose();
        _cts.Cancel();
        _cts.Dispose();
        GC.SuppressFinalize(this);
    }

    private async Task SyncAsync()
    {
        try
        {
            await Task.Delay(100, _cts.Token);
        }
        catch (OperationCanceledException)
        {
            // Expected on shutdown
        }
    }
}

---

Real-World Enterprise Scenario

SaaS Order Management Platform (500+ tenants)

Traditional Approach

• Web: ASP.NET + React
• Mobile: Swift + Kotlin
• Desktop: WPF

Result:
3 teams, duplicated logic, slow releases.

Blazor Hybrid Approach

• Shared .NET domain + application layers
• Blazor Server / WASM for web
• Blazor Hybrid + MAUI for mobile & desktop

Outcome:

• ~45% faster development
• Single QA pipeline
• Unified release cycles

---

Performance Benchmarks

Metric	Blazor Hybrid	Native	Blazor WASM
Startup Time	~2.3s (AOT)	~1.8s	~3.5s
Memory (Idle)	~85MB	~95MB	~65MB
Offline Support	✅	✅	⚠️
Device API Access	✅	✅	❌
Code Reuse	70–80%	0%	60–70%

---

Decision Matrix

Scenario	Best Choice
Cross-platform enterprise apps	✅ Blazor Hybrid
Offline-first mobile apps	✅ Blazor Hybrid
Web-only SaaS	Blazor Server
Performance-critical games	Native
Rapid MVP with .NET team	Blazor Hybrid

---

Platform-Specific Code Isolation

public class PlatformFeatureService
{
#if WINDOWS
    public Task<string> GetDeviceIdAsync() =>
        Task.FromResult("WindowsDeviceId");
#elif ANDROID
    public Task<string> GetDeviceIdAsync() =>
        Task.FromResult("AndroidDeviceId");
#else
    public Task<string> GetDeviceIdAsync() =>
        throw new PlatformNotSupportedException();
#endif
}

---

Debugging Tip: Hybrid + Web App Template

Run the same app in the browser for fast iteration:

if (OperatingSystem.IsBrowser())
{
    services.AddScoped<IDeviceService, BrowserDeviceService>();
}
else
{
    services.AddScoped<IDeviceService, NativeDeviceService>();
}

---

Conclusion

Blazor Hybrid with .NET MAUI eliminates the false choice between native performance and development velocity.

For organizations with strong .NET expertise and cross-platform needs, it delivers:

• Unified architecture
• Shared business logic
• Faster delivery
• Lower long-term cost

Blazor Hybrid is no longer experimental — it’s production-ready and architecturally sound when used with discipline.

The real question is no longer “Should we use Blazor Hybrid?”
It’s “How do we design it correctly to maximize its strengths?”

---