Integrate Blazor Support for MAUI

[RyanNieburViewpoint]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the Modus style guidelines

Proposal

Phase 1:

• Get my Stencil output plugin built and published internally
• Get my repository in shape for "Internal" visibility instead of private
• Get a PR into the modus-wc-2.0 repository to build with this (publish nuget.org?)

Phase 2:

• Update my AGENTS.md file and refine it to be fully consumer focused
• Update "Demo" project and remove extra "Maui" layer that was not needed
• Create a custom template for "dotnet new" to generate starter projects

Phase 3:

• Look at building out MCP capabilities to make use of this output
• Decide on approach for publishing documentation (like docfx before)
• Ship the proof-of-concepts I have in progress using this to production

Motivation and context

No response

What is the issue regarding?

@trimble-oss/modus-wc

Priority

High

What product/project are you using Modus Components for?

Modus

What is your team/division name?

CMS

Are you willing to contribute?

Yes

Are you using Modus Web Components in production?

Yes!

[RyanNieburViewpoint]

@ElishaSamPeterPrabhu Hello! @mitch-trimble sent me your way to get my work integrated.

I have shared to you access to my repository, where I built the Blazor Stencil magic originally:
https://github.com/trimble-oss/ModusWebComponents.Maui

My plan to move this work forward is described in Description of ticket above. Phase 1 work:

• Get my Stencil output plugin built and published internally: trimble-oss/ModusWebComponents.Maui#6
• Get my repository in shape for "Internal" visibility instead of private: trimble-oss/ModusWebComponents.Maui#5
• Get a PR into the modus-wc-2.0 repository to build with this: trimble-oss/modus-wc-2.0#1009

Our thought is that the stencil-razor-output-npm package stays in my repo, and use it here.

[ElishaSamPeterPrabhu]

@ElishaSamPeterPrabhu Hello! @mitch-trimble sent me your way to get my work integrated.

I have shared to you access to my repository, where I built the Blazor Stencil magic originally: https://github.com/trimble-oss/ModusWebComponents.Maui

My plan to move this work forward is described in Description of ticket above. Phase 1 work:

• Get my Stencil output plugin built and published internally: trimble-oss/ModusWebComponents.Maui#6
• Get my repository in shape for "Internal" visibility instead of private: trimble-oss/ModusWebComponents.Maui#5
• Get a PR into the modus-wc-2.0 repository to build with this: trimble-oss/modus-wc-2.0#1009

Our thought is that the stencil-razor-output-npm package stays in my repo, and use it here.

Thanks @RyanNieburViewpoint , Will look into it and get back to you. Initial thoughts: the MauiBlazor component can work within a .NET MAUI Blazor setup. But it essentially runs on .NET MAUI by using Blazor components inside a WebView, right? Would that be the ideal approach for MAUI users?

[RyanNieburViewpoint]

@ElishaSamPeterPrabhu That's exactly right. It uses BlazorWebView to render the UI, though it's worth noting the .NET code (Razor templates) actually runs natively in the application process on the device with MAUI, not in a WebAssembly sandbox.

As for whether it’s the 'ideal' approach, it really depends on the user's goals. If a developer wants pure, platform-specific UI controls (like a native iOS UIButton), standard MAUI XAML is the way to go. However, if the goal is to maximize code reuse (potentially even sharing some UI code between Web and Mobile), Blazor Hybrid is the Microsoft-recommended path. It essentially acts as the bridge that lets them use our existing web ecosystem to build native mobile (or even desktop) apps, while still keeping full access to native device features.

The beauty of MAUI is that developers don't have to choose just one approach. They can mix and match. They can use our web components inside the BlazorWebView for complex, shared UI (like dashboards or complex forms), and still put native MAUI XAML controls on the very same page. For MAUI users who want to leverage the maturity of our web component library without reinventing the wheel in XAML, this could definitely be an ideal approach!

[RyanNieburViewpoint]

@ElishaSamPeterPrabhu I do hope to use this on an upcoming project, to share complex form UI between Web & Mobile.

But in the meantime, examples of the demo app built for this Blazor Modus framework, and an app to test a Trimble SDK:

[ElishaSamPeterPrabhu]

@ElishaSamPeterPrabhu That's exactly right. It uses BlazorWebView to render the UI, though it's worth noting the .NET code (Razor templates) actually runs natively in the application process on the device with MAUI, not in a WebAssembly sandbox.

As for whether it’s the 'ideal' approach, it really depends on the user's goals. If a developer wants pure, platform-specific UI controls (like a native iOS UIButton), standard MAUI XAML is the way to go. However, if the goal is to maximize code reuse (potentially even sharing some UI code between Web and Mobile), Blazor Hybrid is the Microsoft-recommended path. It essentially acts as the bridge that lets them use our existing web ecosystem to build native mobile (or even desktop) apps, while still keeping full access to native device features.

The beauty of MAUI is that developers don't have to choose just one approach. They can mix and match. They can use our web components inside the BlazorWebView for complex, shared UI (like dashboards or complex forms), and still put native MAUI XAML controls on the very same page. For MAUI users who want to leverage the maturity of our web component library without reinventing the wheel in XAML, this could definitely be an ideal approach!

Thanks @ @RyanNieburViewpoint this helps a lot

[ElishaSamPeterPrabhu]

@ElishaSamPeterPrabhu I do hope to use this on an upcoming project, to share complex form UI between Web & Mobile.

But in the meantime, examples of the demo app built for this Blazor Modus framework, and an app to test a Trimble SDK:

Sounds great! Is there a way we can test this from our QA side? Maybe something similar to our Storybook setup with all the componetns listed out, so we can have QA test it. Also, testing as an Android app would be preferred.

[RyanNieburViewpoint]

@ElishaSamPeterPrabhu yes, there is a clone called "Blazing Story" that can be used for this, I will look at getting that set up. It could even potentially just be tested on the web, if that would be easier? Blazor components work the same on web and mobile.

[ElishaSamPeterPrabhu]

@ElishaSamPeterPrabhu yes, there is a clone called "Blazing Story" that can be used for this, I will look at getting that set up. It could even potentially just be tested on the web, if that would be easier? Blazor components work the same on web and mobile.

That works. While web testing is easier, we should still validate it in the mobile environment too, just to ensure there aren’t any platform-specific issues.
@RyanNieburViewpoint

[ElishaSamPeterPrabhu]

@ElishaSamPeterPrabhu yes, there is a clone called "Blazing Story" that can be used for this, I will look at getting that set up. It could even potentially just be tested on the web, if that would be easier? Blazor components work the same on web and mobile.

That works. While web testing is easier, we should still validate it in the mobile environment too, just to ensure there aren’t any platform-specific issues. @RyanNieburViewpoint

@RyanNieburViewpoint
Any updates on this?