Hi Tim. Thanks for the video. One of the great benefits of the Blazor Hybrid approach not really mentioned, is the access to the amazing API's provided by libraries such as Maui Native Platorms and the Maui Community Toolkit. It takes a little work to flip your thinking from web to native device - you can now easily access the file system, geolocation, camera, etc. Keep the awesome videos coming!
wow, this was a great video even in 2023. thanks! I am just starting to understand this and plan on showcasing this at my job's hack day, which is just developers showing off different technologies.
Love it. Thank you so much Tim for doing this video post, I learn a lot on how to get Blazor into a MAUI project. What I love to learn and yet to find anything on that extends from this video is how to talk from a MAUI-Blazor project to native phone. EG camera, ... The super big one is database. I like to have a MAUI-Blazor project like this talk to a off-line database that sits on the phone. But if the user use the app on a web browser, not a phone, it know it's not the phone app and just updated the data using EF (know your not keen on EF) or Dapper :). EG a user is out and about and no Internet access. He opens his MAUI-Blazor app on the phone and the webpages are all their as off line, but if he hit a button or jumps around (no internet), it will update and build the page based on the phone database (native). That is something I am yet to find anywhere and would pay for a course like this.
Dang, I really want to learn HTML and CSS now. Sadly only been Desktop Dev and didn't need it until now. But definetly gonna look into it. That's really awesome and powerful stuff. Love it. Thank you for your intro! Helped alot!
@@armincal9834 I've been trying to learn CSS for years and it just never clicks. I always just stare at a blank page unless I leverage some component library. I mean yea, I understand flex and fundamental CSS syntax but I have no idea how to make good looking things myself so I just use libraries. The boring thing is that all apps look the same.
Hi @IamTimCorey on 24:30 its a nice one to dont klick dependencies/reference etc. you can just drag and drop in the solutionexplorer the library-projectname on your Maui app. vs2022 wil automatically create a reference to the lib. hope you find it useful - *thumbsUp for the Video
Good morning Sir Tim. I am so grateful to you because of your inspirational video tutorial. Actually I was amazed by how you integrate blazor maui to blazor web. You are so impressive that you have done that and it was inspirational for me to do likewise. Keep up the good work Sir Tim and sure enough you have inspired many people out there as well. Also, thanks to your file as I have resources that I could follow your instructions as well. God bless you Sir Tim :)
Cool Intro! You pretty much answered all questions I had about using blazor for both web and app/native-like. I really like blazor+MAUI and hopefully Microsoft continues to support it :). Maybe in the future the blazor-code even gets compiled down to native Code *fingers crossed* ;).
I enjoyed, this, very useful introduction. My suggestion for future content: A demo with some access to some native device functionality, camera, GPS, offline storage.
So basically the idea is you can make a blazor client project, and then port those to native apps because of the web view. Pretty cool to quickly hit up every single platform
Excellent video Tim. I've developed a couple of good projects in Blazor WASM, and now Maui looks like a great way to take these projects to mobile devices. In any case, I've been tasked to extend one of the WASM apps to also work on Android, so I'll find out soon if Maui is as good as it looks. Thanks!
As for your last question yes we are finally doing our mobile apps in C# because of MAUI Blazor. And not in MAUI XAML because it's got too many issues. But I guess MAUI Blazor will be the way to go!
@@ghevisartor6005 You are right, swipe stuff is missing in web UI. We will have to use long tap/rightclick and display context menu to replace the swipe menu feature, which is the only option for context menu in MAUI. However in the current state of MAUI XAML UI (Android), the swipe control is broken. It's got bugs in the default look and if you try using your own item template, it does not work at all (nothing is displayed). Also, the classical desktop-like context menu feature is not available in MAUI at all. Multiple issues like these made us go for Blazor because as you can see, the advantages are only theoretical in the current state of .NET MAUI.
@@IAmTimCorey there are still issues with MAUI Essentials APIs, mostly on Windows (connectivity event handler crashes, capturing photo/video returns null), but replacing XAML with Blazor helps get rid at least of the UI issues even though Blazor UI is limited compared to native UI.
Based on watching a lot of bBlazor Hybrid videos my understanding is that there is no 'extra layer' between using MAUI+XAML vs MAUI+Blazor. In each case (Windows, IOS and Android) they use native UI renderers built into the OS. There is no 'browser' of any sort being launched to execute code. All these operating systems built in native chromium/webkit rendering into the OS. It may turn out that XAML is faster to render than html + css but that is besides the point. They are both fully native with no extra layers.
Blazor Hybrid isn't the same as .NET MAUI. The XAML of MAUI gets translated to native controls directly. The HTML, CSS, and Razor syntax of Blazor do not get converted to native controls. Instead, they are executed inside of a native control (a web component). So, there is a bit of an extra layer compared to a MAUI app.
@@IAmTimCorey Interested if you can do a video on the differences (pros and cons) between Blazor Hybrid and .Net Maui? Which is really best suited for mobile.
Good timing as I previously rewrote/adopted a lot of work and volunteer work stuff to Blazor Server...figured out how to harness HTML + C# with .NET APIs etc...Friday I brought up the MAUI Blazor sample thinking cool I can now convert some of my clunky boring Xamarin apps...today I was going to try to get deeper then got immediately road blocked as won't show the image in the Windows debug screen or Android...the fun and pain of being an early adopter again with no samples out there
You are correct that early adoption is pain. But it would remiss to ignore there are gains to be had too. To be able to write C# on the backend, frontend and in native apps is no mean feat - at least for me whose JavaScript level is nowhere near my C# level.
Is there a feasible way to deploy MAUI Blazor to non-development machines now? When I checked a few weeks ago it was impossible to sideload or use MS store app credentials?
i wish they did what they are trying to do with Blazor mobile bindings, sometimes a xamarin component would be usefull inside a razor one, but of course that project requires a ton of work on its own.
I would have suggested 3 projects. The third should have been a class library for models and other stuff that does not care about what ui is being used that did not rely on blazor at all.
That would not have added anything of value to this demo. This isn't a "real" project. If it was, I would have had a class library with actual data access, I would have added logging, etc. Don't get so caught up in ceremony that you forget to actually look at the context of what you are building. The context in this case did not call for a third library.
I am using MAUI blazor hybrid App. I want to know that when we run the app login page shohld be open instead of Home page, so where we define this page? Please just help where we can define this routing. ? I am using .Net 8.0
Question Tim that other may also want the Answer. Is a .net Maui Blazor Hybrid project - I take is a Blazor Web Assembly type project, not a Blazor Server Side project. That is it can run off line once downloaded and do things like Content Delivery Network (CDN).
Actually no, a Blazor Hybrid project is its own type. It isn't one of the existing Blazor types. What happens is we write the code in Blazor. The application compiles to a native app, but has the Blazor code as part of it. When the app runs, the web control renders the Blazor code dynamically. There is no call to the web. Everything is done locally in the app. So there are no CDNs because the app is installed locally and natively.
@@IAmTimCorey Excellent Tim. Just what I needed to know. A new project soon is for farmers that have poor to no internet here in New Zealand. The phone app needs to work on a off-line state but try to update when it can.
Hello Tim. A question. Have you done any video using Blazor Hybrid and setting it up ready for Authentication? Happy with doing this with a WebAssembly but not sure all the steps to make this work for a Hybrid so all the authentication is working as it should at the web level of it.
Hi Tim i wish you talk about how to fetch blazor component from website which built on maui into a phone app which is as well built in maui, without updating the phone app, the idea is having a web app runs on server when i update the website or add components into it, the phone fetchs the new component into the app without being updated through app stores, I've tried a webview but i lost native functions.
It looks really interesting. But I don’t see the appsettings.json in the project. Where do you store settings and for example a Connection String? How can you work with configurations in Hybrid app?
You wouldn't want to store a connection string in a Blazor Hybrid app. Doing so would expose your connection string to the user. Instead, you would want to connect through an API. That way you can keep your database safe.
I'm doing some more digging to find out. According to one of the MAUI developers, it is not much at all. However, I've heard dissenting opinions on that. It shouldn't be a ton, simply because it is a web control that is rendering the HTML locally (no web involved). However, I want to see some tests first that verify the difference.
Excellent now can you make another video on how to apply Authentication and Authorization login using sql server to the same Hybrid App, I tried but not working Thanks
Hi, Tim, since the Blazor Server does not directly connect with the server and should call an API if it does need to connect to DB, should we use Blazor Assembly instead of Blazor Server for this demo?
There's a bit of confusion in this comment. Let me see if I can clarify some things. First, Blazor Hybrid cannot talk directly with the database and needs an API. Blazor Server CAN talk directly with a database and does not require an API. Second, we weren't connecting to a database in the demonstration. We were demonstrating that components could be reused across different Blazor platforms. That meant that we could choose any of the Blazor products to do this demonstration.
Not really. The biggest "limitation" is that your code is running in a web control. It isn't calling out to the web, to be clear, but running in a web control does mean a small performance hit compared to native controls.
File Scoped Namespaces allow us to declare the namespace at the top but not use the curly braces. That allows every line in the entire file to be indented one less level. It essentially saves us 4 spaces per line of horizontal space. I cover more about it in this video: ruclips.net/video/HXm2sRtVT8Y/видео.html
This is superb. I love Blazor Server but one issue I have with it is disconnection issue when the website is viewed on mobile. As soon as a user jumps from the browser to the home screen or another app on mobile, the server gets disconnected. And I believe blazor hybrid will not be like that. Also I noticed there is no appsetting file in Blazor MAUI so I'd like to know how to input connection strings to connect to SQL server for db access. And lastly, I don't know if this video really covered it. But I'd like to properly migrate my existing blazor server app with individual authentication to blazor hybrid. Would it be that I can add my existing blazor server project folder into my new blazor Maui solution and add reference? Or I'd have to use a razor class library ? I'd like to figure out how to complete that task soon. But in all this looks amazing !
Blazor Server creates a website. Blazor Hybrid creates a mobile app. They are different. Let's address your questions: 1) Blazor Hybrid does not have the constant connection open using SignalR like Blazor Server does, so yes, you will not have a disconnect problem when switching off of it and back to it. 2) There are no appsettings because you cannot talk directly to SQL from a Blazor Hybrid app. Instead, you need to talk to an API. That is because your code gets put on the user's device. It would not be secure to have a connection string stored there. The same is true for Blazor WebAssembly (a fully client-side application). 3) You cannot just put your Blazor Server app inside of your Blazor Hybrid app. You can potentially reuse some of the code if you put it in a Razor Class Library. I show that off in this video.
Thank you, as always for a great rundown. However, they (not you) lost me around the 14 minute mark when you had to start explaining all of the Microsoft naming shuffle. I love .net, c#, visual studio, and most of the technologies that fall in to that world, like blazor, but I hate how hard it is to keep up with what is what. Another one that confused me enough to bug me is the asp.net core web api project. Is it core? It uses .net 6 by default. Technically that IS core, but I thought we stopped calling it core at 6.....
I agree it is confusing. I'm working on a solution to help with that. In the meantime, Blazor Hybrid is a mobile app project type (not web). Blazor Server and Blazor WebAssembly are web project types. ASP.NET Core refers to the web framework that came with .NET Core (and beyond). Even though we have .NET 6 now, which dropped the "Core" in the name but is still Core, we still have ASP.NET Core because ASP.NET refers to the .NET Framework version of the web platform. So ASP.NET Core Web API is the .NET 6 version of the API web project type.
Hi TIm , Thanks for giving wonderful videos , when ever i am stuck with some challenge in my code , i will refer to your youtube channel.. The reason for putting this Message is .... there are many youtube channels that providing similar content of yours ,but i did not find any youtube channel that teach an experience guy to become a solution architect . if you can help us in this space we will be very happy
That isn't a "study hard and you will get it" role. It is a role that comes with a lot of experience building applications. The more experience you have building applications, the better you will be at architecting solutions.
@@IAmTimCorey Hi Tim , Thank you very much for giving reply to you . I am a very good number of years of experience and i designed many applications as well , i never architected any application so far , so i am bit worried how to do that. there are many people like me who have sound knowledge on programming but when going for architect roles they are like zeros . if you do one video it will be very helpful to me and people like me.
Is there a way to enable right click n use browser spell Check with maui? From Last 3mnth have been building a software for screenplay. Most of the things were smooth. Only struggling to get a menu on right click and spell checker
Sorry if I wasn't clear/spoke incorrectly. The app uses a WebControl to render the HTML from our Blazor code. It is all done locally, but it is a web control not a browser per se. There are no browser-like inspection tools on mobile.
@@IAmTimCorey In web world an Http Request is passed on to Web Server. And Web Server returns an Http Response. When browser receives the Http Response. Then its browser engine (like Blink for Chrome) renders the response as a Web Page which a user can view. What happens in the Blazor MAUI case? I think HttpRequest and HttpResponse is not there. Therefore, no need of Web Server. Then razor components are directly rendered by WebView? If yes, then how the WebView works? For example in normal browsers we can check through "View Source" feature that how our mark up was rendered by underlying Brower Engine. And we could inspect the mark up, styling and JS through DevTools. And then apply the fixes in our code. In Blazor MAUI case how will do this? I mean we will have to apply the styling fixes directly in code and re-run/hot-reload the App to view those fixes ?
In the case of Blazor MAUI, the HTML code is all stored locally. There is no call out to a remote site. The web control takes the HTML that is generated by the application and renders it locally.
@@usmanfarooq_dev I think it's similar to having a webview on xamarin. Then the razor syntax is converted to be rendered by that webview, but some things are altered to give it a native-like feel. And most native functionality will be run by MAUI itself, and the result will be translated back to the webview.
It is a bit more nuanced than that, but yes. The actual UI is HTML rendered in a web view. Everything is done locally, though. Nothing is sent over the web.
Blazor Hybrid apps are not web apps. They cannot be deployed to the browser. You would need to copy that code to a Blazor Server or Blazor WebAssembly project in order to deploy it to the web. It would need some changes, though, if you used any .NET MAUI items in your Blazor code.
@@IAmTimCorey Hi Tim, thanks for the reply. Well I thought Blazor Hybrd will be like Flutter/Avalonia/Uno where i only need to maintain one codebase but access it everywhere, just like what it promised. If that's the case, seems like Avalonia/Uno will be my best bet in order to still leverage my C# skill. Thanks again!
One major problem I noticed when watching the video is the intellisense for the css was not working. I had the same problem when using razor class libraries. Do you know if there is a solution for that. Because otherwise, its a real pain if a person has to memorize the css classes. The other option would be to create a library where you have options that would determine what css classes are used. It would be very hard for a person to memorize the css. Its also very error prone because a person is likely to misspell slightly and would be very difficult to pinpoint the problem. Intellisense solves those issues.
You need to know the classes to use. I know Intellisense is useful, but it won't get all classes from Bootstrap reliably. I haven't found an editor yet that really does. Even if it did, though, you still need to know which classes you need. If you wanted to add a margin on top and you typed "mt" and Intellisense did work, it would give you mt-0 through mt-6, plus mt-0-sm through mt-6-xxl for a total of 42 combinations. That wouldn't tell you which one to use. You would need to know what those classes represent. That's why you use the documentation. It will tell you which class to use and what it will do (here is the breakdown for my example: getbootstrap.com/docs/5.2/utilities/spacing/#margin-and-padding). You don't have to memorize the classes in Bootstrap. You just need to know where to look (the documentation). However, once you actually use Bootstrap for a bit, you will find that the logic of how the classes are named makes it rather easy to predict what a class will be named. Editor tools are an aid, not a crutch. You need to be able to work without them. Sure, you will create more errors. That's ok. You can debug and fix those errors easily enough. As for creating a library, that's a bad idea. The solution to every problem isn't another library. The solution is practice.
Hello Tim, I found that I cannot run this app if I configure it for Windows Machine. I am using VS 2022 community latest version 17.4.1. I get an error 'doesn't understand how to run the profile 'windows machine' with command MsixPackage. I have not found much about this issue other than confirming the correct items have been installed for VS 2022 with respect to .NET Desktop and being sure to check the box Deploy in Configuration Manager. However, that is a problem: the checkbox is disabled and I cannot find a way to enable it. Do you have any ideas what could be the issue? note: when I ran Microsoft's .net Maui default project with no changes, the exact same behavior is encountered. Android works but not Windows.
I think you are missing some installation bits. Besides .NET Desktop, you also need to install the Universal Windows Platform development package and the .NET Multi-platform App UI development package.
@@IAmTimCorey final question, is it possible to do MAUI in VSCode only or is it required to use Visual studio? I just like the speedy/snappy customisable experience of VSCode, even though been a life long visual studio guy
I think the idea of xaml and design time experience is cool, especially when you develop complex controls, or compound components. However, MSFT didn`t put too much effort on it in recent years. It`s a pitty.
I noticed that blazor hybrid apps are much bigger in size and need more memory!! That's a con If you run it on desktop and observe it in task manager you will notice how many web views it's using I hope they improve it Am i correct? @IAmTimCorey
Remember that these apps aren't going to be running on just Windows. iOS doesn't have Windows explorer. Neither does Android. Typically mobile apps don't do direct file system browsing like that. You can get access to the file system, though. Just not through Windows Explorer.
@@IAmTimCorey my app will only be used in Windows. I've tried Process.Start(explorer) but this jus opens the explorer and not allow me to select a folder to get the path. Any ideas?
@@S3Kglitches No clue. We have a Discord server with a couple of RUclips Creators and we're all complaining about it. Actual spam messages get through and people like you are being deleted and think that us creators might just delete it :( RUclips is saying there are no issues according to them.
We don't. The only comments we delete are ones that are advertisements (spam) and hateful comments that continue after a warning. RUclips is especially hard on .NET developers, though, since it sees ASP.NET as a URL. It doesn't like URLs. That can be why. If you use .NET in a sentence and forget the space in front of .NET, that also makes a "URL". Other than that, I'm not sure why they delete comments. I do check the "Held for review" section to be sure the "real" comments get released for public view if RUclips tells me about them. However, they seem to just delete some right away as well.
@@IAmTimCorey Thanks Tim! I am sorry for making a wrong assumption. I hope the issue which Gerald described gets solved soon by RUclips so that there is no more confusion.
Atleast in Sweden i can see a rise in Blazor demand overall. i have recently been to multiple comanies on interviews where they request Blazor knowledge. so i wouldnt say there's no job opportunities for it.
There are currently 229 job openings that are remote-friendly in the US on Indeed.com. That's just the ones that specifically say Blazor and just the ones that will let you work remotely. There are 10 times that many jobs if you ask for ASP.NET Core, which is what Blazor is. There are over 16,000 jobs that ask for C#. And remember, these are just US-based remote jobs that are available right now (the "inventory" changes about every week). There are plenty of opportunities out there. The thing to remember is that established businesses do not start new applications every year. Their main applications may be 10+ years old. Blazor is only a couple years old. That means you are more likely to work primarily with the .NET Framework for the main application and .NET Core and beyond for side applications and for the eventually upgraded main application. So yes, it is definitely worth it to learn Blazor. Just remember that the UI is a SMALL part of what you should be learning. Your primary focus should be on the language (C#) and knowing that really well so that you can get a job regardless of the UI they are using at the time (which will change anyway).
This isn't the replacement for Silverlight. That was Blazor Server and Blazor WebAssembly. Blazor Hybrid doesn't work on the web. It only works on desktop and mobile.
Not sure why that is a bad thing. Blazor Server and Blazor WebAssembly replaced the functionality of Silverlight and they have been out for years, so they are stable.
How do you compare C# to JavaScript? (think type safety, etc..). But the whole point of Blazor, I think, is to enable C# developers to create SPAs without going too deeply into JavaScript or JavaScript frameworks e.g. Angular.
@@vincentotieno9197 javascript frameworks, especially when used from typescript are still more productive than using c# through blazor. Especially with typescript you'll find more type safety than in C#, and the C# compiler is rather stupid in comparison.
@@SigSeg-V You'll be hard pressed to realize any performance benefits from C# in webassembly over well written Javascript in average applications. Even in specialized usecases you can end up with the opposite.
Hi Tim. Thanks for the video. One of the great benefits of the Blazor Hybrid approach not really mentioned, is the access to the amazing API's provided by libraries such as Maui Native Platorms and the Maui Community Toolkit. It takes a little work to flip your thinking from web to native device - you can now easily access the file system, geolocation, camera, etc. Keep the awesome videos coming!
Interesting
wow, this was a great video even in 2023. thanks!
I am just starting to understand this and plan on showcasing this at my job's hack day, which is just developers showing off different technologies.
Great!
Love it. Thank you so much Tim for doing this video post, I learn a lot on how to get Blazor into a MAUI project.
What I love to learn and yet to find anything on that extends from this video is how to talk from a MAUI-Blazor project to native phone. EG camera, ...
The super big one is database. I like to have a MAUI-Blazor project like this talk to a off-line database that sits on the phone. But if the user use the app on a web browser, not a phone, it know it's not the phone app and just updated the data using EF (know your not keen on EF) or Dapper :). EG a user is out and about and no Internet access. He opens his MAUI-Blazor app on the phone and the webpages are all their as off line, but if he hit a button or jumps around (no internet), it will update and build the page based on the phone database (native). That is something I am yet to find anywhere and would pay for a course like this.
Thanks for the suggestion. Please add it to the list on the suggestion site so others can vote on it as well: suggestions.iamtimcorey.com/
Dang, I really want to learn HTML and CSS now. Sadly only been Desktop Dev and didn't need it until now.
But definetly gonna look into it. That's really awesome and powerful stuff. Love it.
Thank you for your intro! Helped alot!
They are super easy you can learn both in like a month even less
@@armincal9834 I've been trying to learn CSS for years and it just never clicks. I always just stare at a blank page unless I leverage some component library.
I mean yea, I understand flex and fundamental CSS syntax but I have no idea how to make good looking things myself so I just use libraries. The boring thing is that all apps look the same.
Have been waiting for you to do a video on Blazor Hybrid. Thank you
You are welcome.
Cannnnn't wait for a full Maui tutorial after. Net 8 official release 😍😍😍
👍
Here we are😂🎉 @IAmTimCorey
Hi @IamTimCorey on 24:30 its a nice one to dont klick dependencies/reference etc. you can just drag and drop in the solutionexplorer the library-projectname on your Maui app. vs2022 wil automatically create a reference to the lib. hope you find it useful - *thumbsUp for the Video
Thanks for sharing.
Good morning Sir Tim. I am so grateful to you because of your inspirational video tutorial. Actually I was amazed by how you integrate blazor maui to blazor web. You are so impressive that you have done that and it was inspirational for me to do likewise. Keep up the good work Sir Tim and sure enough you have inspired many people out there as well. Also, thanks to your file as I have resources that I could follow your instructions as well. God bless you Sir Tim :)
Thank you!
Will watch this one for sure! Thank you Tim
You are welcome.
I was using a webview + html5/js/css :-). Now I'm learning this. 😊😊
Great!
Fantastic video. Very excited about .net maui blazor. Would love to see more on this subject.
Thank you!
Cool Intro! You pretty much answered all questions I had about using blazor for both web and app/native-like. I really like blazor+MAUI and hopefully Microsoft continues to support it :). Maybe in the future the blazor-code even gets compiled down to native Code *fingers crossed* ;).
I enjoyed, this, very useful introduction. My suggestion for future content: A demo with some access to some native device functionality, camera, GPS, offline storage.
Thanks for the suggestion. Please add it to the list on the suggestion site so others can vote on it as well: suggestions.iamtimcorey.com/
Just the thing I needed... Thank you Tim ❤️
You are welcome.
i recently purchased the blazor course. id love a maui course.
Thanks for sharing!
Oh Tim, I've been waiting for this video
Great!
Nice video Tim Can't wait your videos on .NET MAUI
Great!
Thanks a lot, Tim. Great video.
You are welcome.
So basically the idea is you can make a blazor client project, and then port those to native apps because of the web view. Pretty cool to quickly hit up every single platform
Very good, unfortunately we can't consider it yet, but I'm looking forward to it, congratulations
Thanks!
Excellent video Tim. I've developed a couple of good projects in Blazor WASM, and now Maui looks like a great way to take these projects to mobile devices. In any case, I've been tasked to extend one of the WASM apps to also work on Android, so I'll find out soon if Maui is as good as it looks. Thanks!
You are welcome.
Thanks for the overview!!
You are welcome.
As for your last question yes we are finally doing our mobile apps in C# because of MAUI Blazor. And not in MAUI XAML because it's got too many issues. But I guess MAUI Blazor will be the way to go!
Sounds good.
will u make ur own components for example for detecting swipe? xamarin components have a lot of built in functionality.
@@ghevisartor6005 You are right, swipe stuff is missing in web UI. We will have to use long tap/rightclick and display context menu to replace the swipe menu feature, which is the only option for context menu in MAUI.
However in the current state of MAUI XAML UI (Android), the swipe control is broken. It's got bugs in the default look and if you try using your own item template, it does not work at all (nothing is displayed).
Also, the classical desktop-like context menu feature is not available in MAUI at all.
Multiple issues like these made us go for Blazor because as you can see, the advantages are only theoretical in the current state of .NET MAUI.
@@IAmTimCorey there are still issues with MAUI Essentials APIs, mostly on Windows (connectivity event handler crashes, capturing photo/video returns null), but replacing XAML with Blazor helps get rid at least of the UI issues even though Blazor UI is limited compared to native UI.
Future is near, it's exciting !
I agree.
Always hated XAML so this is cool
It is a nice option for sure.
Based on watching a lot of bBlazor Hybrid videos my understanding is that there is no 'extra layer' between using MAUI+XAML vs MAUI+Blazor. In each case (Windows, IOS and Android) they use native UI renderers built into the OS. There is no 'browser' of any sort being launched to execute code. All these operating systems built in native chromium/webkit rendering into the OS. It may turn out that XAML is faster to render than html + css but that is besides the point. They are both fully native with no extra layers.
Blazor Hybrid isn't the same as .NET MAUI. The XAML of MAUI gets translated to native controls directly. The HTML, CSS, and Razor syntax of Blazor do not get converted to native controls. Instead, they are executed inside of a native control (a web component). So, there is a bit of an extra layer compared to a MAUI app.
@@IAmTimCorey Thanks for always giving good answers! What are some of the consequences of this? is it only a hit to performance?
@@IAmTimCorey Interested if you can do a video on the differences (pros and cons) between Blazor Hybrid and .Net Maui? Which is really best suited for mobile.
@@aveshn I'm interested too
I'd love to see a full tutorial for .net Maui Hybrid with offline data storage support using SQLITE and back-end to sync to.
Thanks for the suggestion. Please add it to the list on the suggestion site so others can vote on it as well: suggestions.iamtimcorey.com/
Awesome!
Thanks!
Obrigado pelo vídeo!
You are welcome.
Hi Tim, what about memory consumption and performance of the application in the actual device?
Great video.
Thanks!
Good timing as I previously rewrote/adopted a lot of work and volunteer work stuff to Blazor Server...figured out how to harness HTML + C# with .NET APIs etc...Friday I brought up the MAUI Blazor sample thinking cool I can now convert some of my clunky boring Xamarin apps...today I was going to try to get deeper then got immediately road blocked as won't show the image in the Windows debug screen or Android...the fun and pain of being an early adopter again with no samples out there
I hope to have even more content out soon that should help.
You are correct that early adoption is pain. But it would remiss to ignore there are gains to be had too. To be able to write C# on the backend, frontend and in native apps is no mean feat - at least for me whose JavaScript level is nowhere near my C# level.
Great idea !!!
Thanks!
Is there a feasible way to deploy MAUI Blazor to non-development machines now? When I checked a few weeks ago it was impossible to sideload or use MS store app credentials?
i wish they did what they are trying to do with Blazor mobile bindings, sometimes a xamarin component would be usefull inside a razor one, but of course that project requires a ton of work on its own.
I love you videos, do you have planned any videos on practical usage of DAPR?
That is on my radar, yes.
How do we do validation with data annotation?
it is not working for me.
Please put a video on how to validate on MAUI as well thanks.
Does Blazor Maui support stuff like background jobs like a Blazor server app? Do those background jobs run natively on IOS/Android/Linux?
I would have suggested 3 projects. The third should have been a class library for models and other stuff that does not care about what ui is being used that did not rely on blazor at all.
That would not have added anything of value to this demo. This isn't a "real" project. If it was, I would have had a class library with actual data access, I would have added logging, etc. Don't get so caught up in ceremony that you forget to actually look at the context of what you are building. The context in this case did not call for a third library.
I am using MAUI blazor hybrid App.
I want to know that when we run the app login page shohld be open instead of Home page, so where we define this page? Please just help where we can define this routing. ?
I am using .Net 8.0
Question Tim that other may also want the Answer. Is a .net Maui Blazor Hybrid project - I take is a Blazor Web Assembly type project, not a Blazor Server Side project. That is it can run off line once downloaded and do things like Content Delivery Network (CDN).
Actually no, a Blazor Hybrid project is its own type. It isn't one of the existing Blazor types. What happens is we write the code in Blazor. The application compiles to a native app, but has the Blazor code as part of it. When the app runs, the web control renders the Blazor code dynamically. There is no call to the web. Everything is done locally in the app. So there are no CDNs because the app is installed locally and natively.
@@IAmTimCorey Excellent Tim. Just what I needed to know. A new project soon is for farmers that have poor to no internet here in New Zealand. The phone app needs to work on a off-line state but try to update when it can.
I have accessed local folder files via my app then want preview it inside my app in their native view. But i cannot achieve that ,please help me
Hello Tim.
A question. Have you done any video using Blazor Hybrid and setting it up ready for Authentication? Happy with doing this with a WebAssembly but not sure all the steps to make this work for a Hybrid so all the authentication is working as it should at the web level of it.
I haven't done any videos on that yet, but I might after .NET 8 comes out.
Is there any plans to make a tutorial on how to implement B2C auth system with Blazor Hybrid?
No plans yet, although it might happen.
Hi Tim i wish you talk about how to fetch blazor component from website which built on maui into a phone app which is as well built in maui, without updating the phone app, the idea is having a web app runs on server when i update the website or add components into it, the phone fetchs the new component into the app without being updated through app stores, I've tried a webview but i lost native functions.
Please sir.... how to CRUD using SQL in Same Method ????
Great , can we use sqlserver to make pages ???
Is there any way to see how the UI looks without building the app?
In WPF it's cool to have a design view.
The best way at this point is to build it. Just like a web app.
This is great one Tim, but for simulator to run properly what would be the minimal system configuration, i.e. RAM /CPU..
I believe 16gb RAM
Also, can struggle to get this working on a VM; I think that makes it a VM inside a VM, so if you run on a VM it might be very challenging.
ncie sir
Thanks!
Is it possible to create a login page before getting to this default MainLayout page and how ?? Navigation seems tricky in blazor hybrid
Is it possible to add Services in Razor Class Lib?
It looks really interesting. But I don’t see the appsettings.json in the project. Where do you store settings and for example a Connection String? How can you work with configurations
in Hybrid app?
You wouldn't want to store a connection string in a Blazor Hybrid app. Doing so would expose your connection string to the user. Instead, you would want to connect through an API. That way you can keep your database safe.
Tim, but then where should the credentials for API authorization be stored?
If it was a Blazor WebAssemble app, then the RazorLIbrary would be added to the client project right?
Correct.
Tim, could you please give insight as to how much overhead it is to use MAUI Hybrid over using MAUI (native if that is the right word)? thanks
I'm doing some more digging to find out. According to one of the MAUI developers, it is not much at all. However, I've heard dissenting opinions on that. It shouldn't be a ton, simply because it is a web control that is rendering the HTML locally (no web involved). However, I want to see some tests first that verify the difference.
Hey Tim I wonder how to use dependency injection in Maui Blazor
Thanks for the suggestion. Please add it to the list on the suggestion site so others can vote on it as well: suggestions.iamtimcorey.com/
Thank you for the video. is there any way I can create an HTML page and use CSS to style it ? if yes, how can I do it in the wwwroot ? Thank you!
Any universal http client ?
Excellent now can you make another video on how to apply Authentication and Authorization login using sql server to the same Hybrid App, I tried but not working Thanks
Thanks for the suggestion. Please add it to the list on the suggestion site so others can vote on it as well: suggestions.iamtimcorey.com/
Hi, Tim, since the Blazor Server does not directly connect with the server and should call an API if it does need to connect to DB, should we use Blazor Assembly instead of Blazor Server for this demo?
There's a bit of confusion in this comment. Let me see if I can clarify some things. First, Blazor Hybrid cannot talk directly with the database and needs an API. Blazor Server CAN talk directly with a database and does not require an API. Second, we weren't connecting to a database in the demonstration. We were demonstrating that components could be reused across different Blazor platforms. That meant that we could choose any of the Blazor products to do this demonstration.
Are there limitations when compared to the XAML version of MAUI?
Not really. The biggest "limitation" is that your code is running in a web control. It isn't calling out to the web, to be clear, but running in a web control does mean a small performance hit compared to native controls.
@@IAmTimCorey Thank you!
Final scoped namespace. What does that do as opposed to leaving it be?
File Scoped Namespaces allow us to declare the namespace at the top but not use the curly braces. That allows every line in the entire file to be indented one less level. It essentially saves us 4 spaces per line of horizontal space. I cover more about it in this video: ruclips.net/video/HXm2sRtVT8Y/видео.html
This is superb. I love Blazor Server but one issue I have with it is disconnection issue when the website is viewed on mobile. As soon as a user jumps from the browser to the home screen or another app on mobile, the server gets disconnected. And I believe blazor hybrid will not be like that.
Also I noticed there is no appsetting file in Blazor MAUI so I'd like to know how to input connection strings to connect to SQL server for db access.
And lastly, I don't know if this video really covered it. But I'd like to properly migrate my existing blazor server app with individual authentication to blazor hybrid. Would it be that I can add my existing blazor server project folder into my new blazor Maui solution and add reference? Or I'd have to use a razor class library ?
I'd like to figure out how to complete that task soon.
But in all this looks amazing !
Blazor Server creates a website. Blazor Hybrid creates a mobile app. They are different. Let's address your questions:
1) Blazor Hybrid does not have the constant connection open using SignalR like Blazor Server does, so yes, you will not have a disconnect problem when switching off of it and back to it.
2) There are no appsettings because you cannot talk directly to SQL from a Blazor Hybrid app. Instead, you need to talk to an API. That is because your code gets put on the user's device. It would not be secure to have a connection string stored there. The same is true for Blazor WebAssembly (a fully client-side application).
3) You cannot just put your Blazor Server app inside of your Blazor Hybrid app. You can potentially reuse some of the code if you put it in a Razor Class Library. I show that off in this video.
Thanks very much. That is perfectly explained and I totally understood the difference now. I'll be looking forward for more blazor hybrid videos. 👍🏾
Thank you, as always for a great rundown. However, they (not you) lost me around the 14 minute mark when you had to start explaining all of the Microsoft naming shuffle. I love .net, c#, visual studio, and most of the technologies that fall in to that world, like blazor, but I hate how hard it is to keep up with what is what. Another one that confused me enough to bug me is the asp.net core web api project. Is it core? It uses .net 6 by default. Technically that IS core, but I thought we stopped calling it core at 6.....
I agree it is confusing. I'm working on a solution to help with that. In the meantime, Blazor Hybrid is a mobile app project type (not web). Blazor Server and Blazor WebAssembly are web project types. ASP.NET Core refers to the web framework that came with .NET Core (and beyond). Even though we have .NET 6 now, which dropped the "Core" in the name but is still Core, we still have ASP.NET Core because ASP.NET refers to the .NET Framework version of the web platform. So ASP.NET Core Web API is the .NET 6 version of the API web project type.
@@IAmTimCorey Impressive how well you keep up with EVERYTHING.
Hi TIm , Thanks for giving wonderful videos , when ever i am stuck with some challenge in my code , i will refer to your youtube channel..
The reason for putting this Message is .... there are many youtube channels that providing similar content of yours ,but i did not find any youtube channel that teach an experience guy to become a solution architect . if you can help us in this space we will be very happy
That isn't a "study hard and you will get it" role. It is a role that comes with a lot of experience building applications. The more experience you have building applications, the better you will be at architecting solutions.
@@IAmTimCorey Hi Tim , Thank you very much for giving reply to you . I am a very good number of years of experience and i designed many applications as well , i never architected any application so far , so i am bit worried how to do that. there are many people like me who have sound knowledge on programming but when going for architect roles they are like zeros . if you do one video it will be very helpful to me and people like me.
Is there a way to enable right click n use browser spell Check with maui? From Last 3mnth have been building a software for screenplay. Most of the things were smooth. Only struggling to get a menu on right click and spell checker
MAUI doesn't use the browser, so there isn't a way to tap into the browser's spell check. You would need to bring in an external spell checker.
@IAmTimCorey, Please, can i use SQL server with .net Maui blazor hybrid?
Not directly. You want to go through an API for that (that’s true of any mobile app).
Tim, which Web Server is used in mobile device and how is it used? Also , how can we use browser's dev tools to inspect elements and debugging?
Sorry if I wasn't clear/spoke incorrectly. The app uses a WebControl to render the HTML from our Blazor code. It is all done locally, but it is a web control not a browser per se. There are no browser-like inspection tools on mobile.
@@IAmTimCorey In web world an Http Request is passed on to Web Server. And Web Server returns an Http Response. When browser receives the Http Response. Then its browser engine (like Blink for Chrome) renders the response as a Web Page which a user can view.
What happens in the Blazor MAUI case? I think HttpRequest and HttpResponse is not there. Therefore, no need of Web Server. Then razor components are directly rendered by WebView?
If yes, then how the WebView works? For example in normal browsers we can check through "View Source" feature that how our mark up was rendered by underlying Brower Engine. And we could inspect the mark up, styling and JS through DevTools. And then apply the fixes in our code.
In Blazor MAUI case how will do this? I mean we will have to apply the styling fixes directly in code and re-run/hot-reload the App to view those fixes ?
In the case of Blazor MAUI, the HTML code is all stored locally. There is no call out to a remote site. The web control takes the HTML that is generated by the application and renders it locally.
Awesome, thanks for replying.
@@usmanfarooq_dev I think it's similar to having a webview on xamarin. Then the razor syntax is converted to be rendered by that webview, but some things are altered to give it a native-like feel. And most native functionality will be run by MAUI itself, and the result will be translated back to the webview.
Any chance of adding PayPal as a payment option on the "Thanks" button, please? Thanks
That's up to RUclips. I don't control what options are available.
so basically it's a webview i'm i right ?
It is a bit more nuanced than that, but yes. The actual UI is HTML rendered in a web view. Everything is done locally, though. Nothing is sent over the web.
wooow my visual studio dosen t have MAUI, when is the release date.
I mentioned that in the beginning, but you need the preview version of Visual Studio. MAUI is production ready but the tools aren’t quite there yet.
how tp deploy/access the blazor part of hybrid app in web browser?
Blazor Hybrid apps are not web apps. They cannot be deployed to the browser. You would need to copy that code to a Blazor Server or Blazor WebAssembly project in order to deploy it to the web. It would need some changes, though, if you used any .NET MAUI items in your Blazor code.
@@IAmTimCorey Hi Tim, thanks for the reply. Well I thought Blazor Hybrd will be like Flutter/Avalonia/Uno where i only need to maintain one codebase but access it everywhere, just like what it promised. If that's the case, seems like Avalonia/Uno will be my best bet in order to still leverage my C# skill. Thanks again!
I think better use MAUI App Native Components. MAUI Blazor is equals Web Responsive.
One major problem I noticed when watching the video is the intellisense for the css was not working. I had the same problem when using razor class libraries. Do you know if there is a solution for that. Because otherwise, its a real pain if a person has to memorize the css classes. The other option would be to create a library where you have options that would determine what css classes are used. It would be very hard for a person to memorize the css. Its also very error prone because a person is likely to misspell slightly and would be very difficult to pinpoint the problem. Intellisense solves those issues.
I also has issue with VS 22 where the undo doesn't work
You need to know the classes to use. I know Intellisense is useful, but it won't get all classes from Bootstrap reliably. I haven't found an editor yet that really does. Even if it did, though, you still need to know which classes you need. If you wanted to add a margin on top and you typed "mt" and Intellisense did work, it would give you mt-0 through mt-6, plus mt-0-sm through mt-6-xxl for a total of 42 combinations. That wouldn't tell you which one to use. You would need to know what those classes represent. That's why you use the documentation. It will tell you which class to use and what it will do (here is the breakdown for my example: getbootstrap.com/docs/5.2/utilities/spacing/#margin-and-padding).
You don't have to memorize the classes in Bootstrap. You just need to know where to look (the documentation). However, once you actually use Bootstrap for a bit, you will find that the logic of how the classes are named makes it rather easy to predict what a class will be named.
Editor tools are an aid, not a crutch. You need to be able to work without them. Sure, you will create more errors. That's ok. You can debug and fix those errors easily enough.
As for creating a library, that's a bad idea. The solution to every problem isn't another library. The solution is practice.
Hello Tim, I found that I cannot run this app if I configure it for Windows Machine. I am using VS 2022 community latest version 17.4.1. I get an error 'doesn't understand how to run the profile 'windows machine' with command MsixPackage. I have not found much about this issue other than confirming the correct items have been installed for VS 2022 with respect to .NET Desktop and being sure to check the box Deploy in Configuration Manager. However, that is a problem: the checkbox is disabled and I cannot find a way to enable it. Do you have any ideas what could be the issue? note: when I ran Microsoft's .net Maui default project with no changes, the exact same behavior is encountered. Android works but not Windows.
I think you are missing some installation bits. Besides .NET Desktop, you also need to install the Universal Windows Platform development package and the .NET Multi-platform App UI development package.
The one crummy thing about hot reload is if you make an actual code change it won't like you very much
Yep. It is still improving, though.
can it be deployed to linux or as windows app or windows store?
No to Linux but yes to Windows in the Windows Store.
@@IAmTimCorey is that because it is hybrid or just limitation of Maui at the moment?
That’s a limitation of MAUI in general.
@@IAmTimCorey final question, is it possible to do MAUI in VSCode only or is it required to use Visual studio? I just like the speedy/snappy customisable experience of VSCode, even though been a life long visual studio guy
I knew you were on the blazor hybrid team! The XAML is just kinda rubbish honestly.
It's way better writing with HTML that we are already familiar with.
I like both options. That's the trick - they both have value. Don't think that it is a "one or the other" choice.
I think the idea of xaml and design time experience is cool, especially when you develop complex controls, or compound components. However, MSFT didn`t put too much effort on it in recent years. It`s a pitty.
I noticed that blazor hybrid apps are much bigger in size and need more memory!! That's a con
If you run it on desktop and observe it in task manager you will notice how many web views it's using
I hope they improve it
Am i correct?
@IAmTimCorey
@@IAmTimCoreyhybrid apps use more memory and have bigger size. Is it right?
Hi can we read OTP from blazor Maui app please help
Not sure.
How can you add advertisements here?
Edit: It wont let me add new comment dont know why but i meant .net maui blazor.
You mean on RUclips or in a MAUI project?
tim i write maui but there is no maui project type in my .net 2022
You need to use the Preview version of Visual Studio to get the templates for now.
How would I go about opening windows file explorer and have a user select a folder to get the path selected?
Remember that these apps aren't going to be running on just Windows. iOS doesn't have Windows explorer. Neither does Android. Typically mobile apps don't do direct file system browsing like that. You can get access to the file system, though. Just not through Windows Explorer.
@@IAmTimCorey you can also use window explorer, but implement it only for windows and for other OS do it in another way
@@IAmTimCorey my app will only be used in Windows. I've tried Process.Start(explorer) but this jus opens the explorer and not allow me to select a folder to get the path. Any ideas?
@@borsuk7667 do you happen to know?
I actually figure it out. I just dependency injection to call the native Folder picker
Hi Tim, why does your team delete my comment when asking about the current state of .NET MAUI?
Doesn't have to be his team. RUclips is quite aggressive with comments they think is spam especially when they contain technical terms.
@@jfversluis strange, why is that happening or what could be the contents so that they are "not fine"?
@@S3Kglitches No clue. We have a Discord server with a couple of RUclips Creators and we're all complaining about it. Actual spam messages get through and people like you are being deleted and think that us creators might just delete it :( RUclips is saying there are no issues according to them.
We don't. The only comments we delete are ones that are advertisements (spam) and hateful comments that continue after a warning. RUclips is especially hard on .NET developers, though, since it sees ASP.NET as a URL. It doesn't like URLs. That can be why. If you use .NET in a sentence and forget the space in front of .NET, that also makes a "URL". Other than that, I'm not sure why they delete comments. I do check the "Held for review" section to be sure the "real" comments get released for public view if RUclips tells me about them. However, they seem to just delete some right away as well.
@@IAmTimCorey Thanks Tim! I am sorry for making a wrong assumption. I hope the issue which Gerald described gets solved soon by RUclips so that there is no more confusion.
Sr, do You think learning Blazor worth, there are no job opportunities for this one
Atleast in Sweden i can see a rise in Blazor demand overall. i have recently been to multiple comanies on interviews where they request Blazor knowledge. so i wouldnt say there's no job opportunities for it.
@@Klubb69music if i could move there i'd but because of haavy metal mostly
There are currently 229 job openings that are remote-friendly in the US on Indeed.com. That's just the ones that specifically say Blazor and just the ones that will let you work remotely. There are 10 times that many jobs if you ask for ASP.NET Core, which is what Blazor is. There are over 16,000 jobs that ask for C#. And remember, these are just US-based remote jobs that are available right now (the "inventory" changes about every week). There are plenty of opportunities out there. The thing to remember is that established businesses do not start new applications every year. Their main applications may be 10+ years old. Blazor is only a couple years old. That means you are more likely to work primarily with the .NET Framework for the main application and .NET Core and beyond for side applications and for the eventually upgraded main application. So yes, it is definitely worth it to learn Blazor. Just remember that the UI is a SMALL part of what you should be learning. Your primary focus should be on the language (C#) and knowing that really well so that you can get a job regardless of the UI they are using at the time (which will change anyway).
@@IAmTimCorey Thank You much for everything You share with us.
Sheez took them long enough to replace Silverlight
This isn't the replacement for Silverlight. That was Blazor Server and Blazor WebAssembly. Blazor Hybrid doesn't work on the web. It only works on desktop and mobile.
@@IAmTimCorey rats....
Not sure why that is a bad thing. Blazor Server and Blazor WebAssembly replaced the functionality of Silverlight and they have been out for years, so they are stable.
I don't get the point of Blazor. C# isn't that much of an improvement over javascript, much less typescript.
Performance and a more tightly integrated workflow free of option paralysis is why I have come to love it
How do you compare C# to JavaScript? (think type safety, etc..). But the whole point of Blazor, I think, is to enable C# developers to create SPAs without going too deeply into JavaScript or JavaScript frameworks e.g. Angular.
@@vincentotieno9197 javascript frameworks, especially when used from typescript are still more productive than using c# through blazor. Especially with typescript you'll find more type safety than in C#, and the C# compiler is rather stupid in comparison.
@@SigSeg-V You'll be hard pressed to realize any performance benefits from C# in webassembly over well written Javascript in average applications. Even in specialized usecases you can end up with the opposite.
I can code pro with C#. Tried javascript several times. Its just too much for the time that I need to spend. So I just love blazor