From Web to Native with .NET MAUI and Blazor | .NET Conf: Focus on MAUI

Blazor uses the latest open web standards to enable full stack web development with .NET. But what if you need to build a native client app? Blazor has expanded beyond the web to enable building native client apps using a hybrid of web technologies and .NET. In this session we’ll look at the new Blazor Hybrid support in .NET MAUI for building cross-platform native client apps for mobile, desktop using your existing Blazor web UI components.
Speaker: Dan Roth
/ danroth27
Links:
- .NET MAUI Self-guided Learning on Microsoft Learn: aka.ms/maui/ms...
- .NET MAUI Website: aka.ms/maui/we...
- Install .NET MAUI: aka.ms/maui/in...
- .NET MAUI Documentation: aka.ms/maui/docs
- .NET MAUI on GitHub: aka.ms/maui/gi...
- .NET MAUI Workshop: aka.ms/maui-wo...
- .NET MAUI Beginner Series Videos: aka.ms/maui/be...
- .NET KZbin - / dotnet
- .NET on Twitter - / dotnet
🙋‍♀️🙋‍♂️ Get your questions answered on the Microsoft Q&A for .NET: aka.ms/dotnet-qa
🏫 Learn C#, F#, and .NET with free self-guided learning from Microsoft Learn: aka.ms/learndo...
#dotnet #dotnetmaui #dotnetconf

[@andrewbeeman84]

Posted my first app to the Play / App store yesterday. Still awaiting approval. I always wanted to but alas, I was a C# front end dev. Thanks for making it happen!

[@andrewbeeman84]

@Tony hybrid ftw

[@jomydepp1633]

Can you share link of your app plz

[@jomydepp1633]

@Tony can you share your app plz

[@chillydill4703]

This is the one of the most exciting stuff happened last year!

[@orhancanoguz4423]

Perfect intro , more than "Hello world" level. Thanks.

[@Kubatko]

This was such a great demo. Really excited and hoping to adapt a bit of Blazor in our company as well.

[@amirhmahmoodi4607]

Man, that's crazy🔥♥️

[@atari1040]

Guys.... It's all great but... You have to reinvent these bindings, I mean WTH is that: Selector="#app" or ComponentType="{x:Type local:Main}" --> this is ALL insane! Please WORK HARD on simplifying the syntax for this because in general I think that XAML is best thing that could happen to UI but that markup gets worse which each new release and/or new set of features etc. I understand and know exactly what is behind the scenes and that is why I think this CAN be done. Good luck!

[@kolesplace]

I"ve been developing in Blazor Server. Seeing this MAUI with shared pages really sparks my interest, however, I don't see how I can share pages when my pages depend upon DI services. I would love to see those projects for an example.

[@rpreviato]

How about UINavigationView? Swipe to delete actions. I'm thinking how can I manage to do that using Blazor 😥

[@post_eternity]

Thanks for the video, pls put link to the playlist blazor code repo and the one you are demoing

[@keisoft7257]

thank you! maui and blazor

[@emreaka3965]

15:20 the loading text is bothering me. It must be loaded when the application is getting started.

[@mentalstatement]

Why cant they make a C# to Javascript converter.. So you can code in c# and access all the browser / javascript API's and just have it converted to javascript on compile?

[@mykolamykhaliuk]

Nice demo. How good is performance on mobile apps? fps?

[@pandaheroes2649]

Greate Work Sir

[@LibyaMicro]

what type of Android Emulator you use , name or company plz

[@AnassELBACHI]

Thanks for this awesome video. I have a brief question. Is blazor hyprid app support local storage? For exemple converting a web app that use browser local storage to native app.

[@chezchezchezchez]

It's nice how Microsoft gets RIGHT BACK to you, and answers the question. Don't they WANT developers to get solutions?🙄 I want to know too!

[@souleykane8967]

Blazor Hybrid app don't use the browser, so no local storage support. You don't need local storage because you have access to file system etc..... Your components should be using DI, so that you don't need to modify them for Blazor WASM app or Blazor Hybrid. You can be saving to local storage with blazor WASM and to file system with Blazor Hybrid with the same component thanks to DI.

[@souleykane8967]

@@chezchezchezchez Answer below.

[@alexanderm8169]

Haven't been able to run the git repo on Mac M1 chip having issues installing WASP tools and tried to run it an install with brew put still no success :(

[@S3Kglitches]

when will IDisposable work in MAUI Blazor?

[@munawarkhurshid1201]

Excellent. I have a question, for auth I navigate to a different XAML Page that has an embedded web view. After successful Auth I need to navigate back to the root of the app which happens to be MainPage.XML and I am not able to do so. I have tried Navigation.PopToRootAsync nothing seems to make it go back to the Main Page. Any ideas..

[@cissemy]

Is .Net Maui Blazor running in the webview like ionic ?

[@emreaka3965]

Yes, It does BUT It is not slow like Ionic.

[@randallstephens1680]

It needs support for Linux.

[@fieryscorpion]

How about no HTML? Just paint XAML on canvas and thats it. C# for running code in browser and XAML for markup. Why are we making this complex with Webview, JS and so on?

[@franciscofernandezcasas7924]

I love MAUI, BUT why is Microsoft NOT using MAUI in their own major projects, such as their own flagship applications? Only when Microsoft creates their flagship products using MAUI, the community will feel confident on this product. As that will prove that Microsoft will have to make MAUI successful for making their flagship products successful.

[@briannielsbergh]

This is all great! great!! - I have been experimenting with MAUI (xaml and blazor), but man it's buggy. I have been playing with it for the last week on two different pc's, my company laptop (vs2022) and my private (brand new monster pc) also with vs2022, and......man its buggy. Nothing works - every 1 minute i need to restart visual studio, then it cant compile, then it complains about android sdk's, then the windows machine version won't start, then visual studio crashes, then the android emulator won't start.......this is so so time consuming, that even though i would give my right arm to make it work, because i find it "COOOL" and something i have been waiting for, ever since "windows phone", and easy way to make apps that just work on windows and android. But, i must admit, im running out of patience. - Also, there are great videos on youtube to explain how to get started, but they all show the same "click click" app or hello world. - I really need a way to receive push notifications, and i can't find a single example :(

[@chezchezchezchez]

Did you make it all work yet? It's nice how Microsoft gets RIGHT BACK to you, and answers the question. Don't they WANT developers to get solutions?🙄 I want to know too! I'm in your SAME BOAT! ARRGGHH!

[@seanknowles9985]

Can maui and blazor apps work on linux?

[@IronJmo]

Microsoft is expecting the community to add support for Linux.

[@abou3542]

Blazor yes,Maui only for android development for now using cli.

[@teejstroyer]

I wish Microsoft just rewrote a lightweight rendering engine for html and css but no js support unless that doesn’t improve build size. And then all “dom” manipulation will be in c# and have much greater performance. Effectively if xaml was just traditional html controlled by c# instead of js

[@lx2222x]

I think HTML should be fully replaced since it is completely messy. HTML is not a good invention...

[@Borlays]

they can do same as flutter did, if they paint xaml on canvas and since we can run c# code in browser with web assembly, we could use MAUI on web easily, but nope...

[@teejstroyer]

@@Borlays exactly…. Truly native blazor without having to use a webview component.

[@Borlays]

You doing opozite that you should be doing. How about no html? Like flutter did, just paint xaml on canvas and thats it. You would have a web without html and javascript. Now you transfering the worst markup language (html) to the best one (xaml) instead of removing the worst one and replacing with the best one. And on top add 10x complexity. All you have to do is paint xaml on canvas and all problems solved since you can run c# code in browser already.

[@fieryscorpion]

This makes so much sense. Why isn't Microsoft doing something similar? Sigh...

[@hurolinci5986]

Two reasons come to mind. #1 you alienate non dotnet developers to give it a shot since all web developers know html but not xaml. 2# How you gonna make your XAML always translate perfectly into HTML? it's possible sure, but another layer means more complexity and therefore more bugs.

[@Borlays]

@@hurolinci5986 1. True, but it's not the way to go if we want to progress we need to change existing technologies with better ones. 2. You don't need to translate it to HTML, you can just render on canvas everything like flutter does (it has 2 options, one as canvas, other translation to html which doesnt work properly). And since they have logic to render XAML, i don't think it would be something hard to make it render on canvas. Obviously there are always challenges but i think there is nothing that is impossible to do.

[@hurolinci5986]

@@Borlays I agree with you. I also would prefer using XAML instead of HTML. But I assume that microsoft decided on behalf of the two reasons I mentioned above. It's up to us to develop the missing pieces I guess.

[@marvelleonardoabdinegoro6329]

Pros : Actually Write Once Deploy Anywhere, Cons: Uses bulky shells to showcase the app within mobile apps (bulky ios shell for ios app, bulky android for android), and stores the code in user data portion of the app, a portion that usually offered by space optimizer apps to clear. over 100MB of user data and 18 MB of shell just to display a simple hello World? Come on!.. tried clearing the user data and voila... the app died

[@pattatest7901]

deployment this app

[@andrewbeeman84]

I just posted my app the the Play / App stores yesterday.

[@SMECmicrodeveloper]

hahaha they can’t even near to flutter thanks google

[@ioneocla6577]

Why is that ?

[@SMECmicrodeveloper]

@@ioneocla6577 Flutter covers Ios , Android , Web , Wimdows desktop , Mac desktop, linux as well.

[@ioneocla6577]

@@SMECmicrodeveloper maui covers windows macos iOS Android tizen and the web (kinda) which is impressive considering that flutter only supported iOS and Android when it first came out

[@SMECmicrodeveloper]

Dont take it personal its my personal professional opion, we cant wait for another 5 years to do the things which is already available in other mature platforms like React and Flutter. They stepped doen Silverlight , They are stepping down Xamarin Forms and moving to MAUi. I am using Microsoft products since Silverlight and I developed few apps in XF as well but even XF is not as rich as Flutter and react .

[@ezecel9]

maybe, but if you are a C# developer, .net maui is easier and faster to learn

[@SMECmicrodeveloper]

Way behind to Flutter. Cheater