Add Web Platform-Target (Like React Native Web)

MichaelPeter commented 2 years ago

Description

Scenario: I have build this super cool maui app which runs on iOS, Android, Windows and mac which is very successful. But now I notice for a lot of users it is an entry barrier to download and install the App. It would be really cool to have an WebApp, which they could test-drive and then download the actual app.

Or I want to build something like WhatsApp Web or Spotify Web

If I have Ionic I can quickly just host my app on a webpage, since everything is HTML anyway. If I have React Native, I "just" need to make it compatible with React Native Web. If I have UNO I can run in the Web for the start. If I have Flutter, I can use Flutter Web

If I have Maui I currently need to rewrite the whole app in Blazor or Simular. Or would need to convert to Blazor Hybrid, which would loose the Advantage of Native Controls.

Since I have all these controls which can render as Windows Controls, iOS Controls and Android Controls, why can't I build a renderer under WebAssembly and Html+Css for these controls?

Now I am a big fan of Blazor and Blazor Hybrid, but sometimes I just want the advantages of Native Apps. Also I don't see this as an competitor to Blazor, its just a very good complimentary option for Blazor and even better with Blazor Hybrid.

Public API Changes

Add a Plattform Target for WebAssembly/Blazor which renders the controls as HTML/CSS.
Maybe Utilize even PWA functionalities

Intended Use-Case

Make a Web Version of an already successfull App without having to rewrite.

ghost commented 2 years ago

We've moved this issue to the Future milestone. This means that it is not going to be worked on for the coming release. We will reassess the issue following the current release and consider this item at that time.

Xyncgas commented 2 years ago

What about Maui Blazor

RaulRG commented 2 years ago

I think this is a great idea, but please don't use HTML+CSS as proposed. This will make it just impossible to look as expected. I think the right approach would be to use Skia for rendering the components. As fas as I know, there is a WASM version of Skia and you are already using the library. You would benefit from the work done in Blazor for executing .NET as WebAssembly. Any improvements done there would help with MAUI.

Apps like Figma already show the possibilities with WASM. A Skia / WASM version of MAUI would be a dream come true for UI development!

bricelam commented 2 years ago

In case nobody here has heard of them, Ooui and Uno Platform were both, at one point, capable of running Xamarin.Forms apps in the browser. I don't, however, know their current status regarding .NET MAUI.

(Note, I'm just disseminating information here. I'm not endorsing either product, and I don't mean to diminish the value of this issue--built-in support would be great.)

RaulRG commented 2 years ago

I think Uno is doing a great job and it is sad that Microsoft didn't join forces with them to create the ultimate UI framework. Sometimes is nice to have different choices, but if you are writting very big enterprise applications, you need something with good support from third party libraries. I hope this would be the case with MAUI, although I don't know how the support for Uno is now.

MichaelPeter commented 2 years ago

I think this is a great idea, but please don't use HTML+CSS as proposed. This will make it just impossible to look as expected. I think the right approach would be to use Skia for rendering the components. As fas as I know, there is a WASM version of Skia and you are already using the library. You would benefit from the work done in Blazor for executing .NET as WebAssembly. Any improvements done there would help with MAUI.

Apps like Figma already show the possibilities with WASM. A Skia / WASM version of MAUI would be a dream come true for UI development!

@RaulRG: I think the issue HTML vs Skia is not so easy. Skia creates a canvas and renders everything there. This also has certain disadvantages:

Screenreaders (for blind) don't work
SEO (Search Engine Optimization) doesn't work.
For example for flutter it adds 2MB download size
Optimizations for certain elements don't work (if you click on a combo box on your smartphone a fullscreen selection appears)
Global CSS Styles and Design Systems don't work.
Copy Paste will not work
Browser: Find on page will also not work

If we look at the competitors: Flutter has a Skia renderer (purse canvas) and a HTML renderer (Where the HTML Renderer seems more like a hybrid - which uses html elements and canvas), by default on mobile the html renderer is used (https://docs.flutter.dev/development/tools/web-renderers)

Uno uses a Skia render. (https://calculator.platform.uno/) Check out the sample app - quite long loading times no copy pase, think about if that is the experience you want.

React Native Web: Uses an HTML renderer, think the user experince is much nicer, even if a bit of an web look and feel. https://codesandbox.io/s/ucjns?file=/pages/index.js

My personal preference would be a html renderer for the named reasons, but this has to be a pro/con list. Maybe also a Hybrid, which renders texts and comboboxes as native elemements.

@Xyncgas: What about Maui Blazor: As stated with Blazor you need to start in the beginning, if you have a mobile app you want to port it, you have to rewrite it to blazor. Also sometimes you want native controls or the webpage is an afterthought.

Ionic rebuild all mobile controls in html to be able to be rendered on mobile and web, but still people prefer react native for their native controls. And there are reasons for it, like performance and that you don't need an ionic update to get the look of the latest iOS and Android Version.

RaulRG commented 2 years ago

Yes, there are lots of issues, but as I understand it the MAUI team is already implementing Skia-based components and so they will need to resolve them. The matter with the download size is a problem to be solved for Blazor as well. I think what is needed here is a way of caching the assets at the client side. You download things like the .NET framework or Skia in this case and cache them at the client.

I really think that for WASM to be the alternative for very rich clients they will need to solve this matter.

ParadiseFallen commented 2 years ago

it seems WASI will made this possible. bc we can compile whole maui app to WASI and just run ?

evolcano commented 2 years ago

The compiled code of MAUI can be run in the browser is really needed! Compile the code into a WEB server, or into a WASI application run in browser. Blazor or Skia definitely could be used.

But I prefer to USE WASI, so AI algorithms and media process lib could run in WEB Browser。

Maybe dynamic class loader and Microsoft's ClickOnce like method which realized the dynamic binary upgrade could accelerate the running speed.

Thanks！

davidbuckleyni commented 2 years ago

What u are describing is kinda how one click publishing work

ParadiseFallen commented 2 years ago

any work on this?

drewid commented 1 year ago

Having Maui available for Web is such an obvious hole it is shocking it isn't available. This is absolutely needed to provide a true universal approach. Trying to make it also work for web, and share is very cludgey

manishbisen commented 1 year ago

Web is must needed in Maui with single codebase

Rand-Random commented 1 year ago

Reference: https://github.com/dotnet/maui/discussions/62

plamen-i commented 1 year ago

@danroth27 Can we expect some progress on this now when .NET 8 is released? Maybe for .NET 9?

plamen-i commented 9 months ago

@davidortinau Can you shed some light what to expect in the future?

evolcano commented 9 months ago

It' cost and unnecessary to write some code for a app, and another code repeatedly for Web. Unfortunately, most enterprise application need both app and browser access.

I want to code ONCE in MAUI and run anywhere, like flutter, Avalonia, Uno Platform.

dotnet / maui