Blazor Power Hour: Everything You Need to Know About Blazor Hybrid

hello blazer fans welcome to another blazer power hour i'm ed charbonneau and today we're going to be talking about a laser hybrid and blazer hybrid is pretty amazing and i've gotten to where i'm pretty comfortable with things now so today we're gonna do an overview of blazer hybrid uh check out where all the moving pieces are and then i'll show you how to merge a an existing web app into a blazer hybrid app with very little effort this is super cool stuff uh i can't wait to get started so let's jump in uh we've gotta get into visual studio 2022 preview you're gonna need the preview bits for this to work you're going to want to make sure that you have the correct workloads installed too i'll bring up my visual studio installer just to make sure you all know where to find this so i've got visual studio 2022 preview on here and i'm going to go into the modify tab for just a moment you're going to want to make sure you have mobile development enabled here and if you look at the mobile development tab we have individual components here in maui sdks for ios mac catalyst and so on are in there and i you may need the desktop development as well on that so make sure you have at least these two uh workloads enabled on your machine and you should be good to go with the maui stuff again it's under individual components you'll see the maui bits light up in there and once you have that installed you get a file new project template that has a brand new net maui laser app in it notice mine still says preview on it that's because this is not releasing um as a uh global available or general availability until next middle of next year some somewhere around first second quarter uh this will be fully supported so we are working with preview bit just be aware of that so let's go ahead and fire up this new maui blazer app template and see what we've got here uh the naming here doesn't really matter too much do not call it maui app though um i have seen some issues with namespaces and things colliding so you want to give it some kind of name besides the default here so we'll just say uh maui demo one hit create we're gonna do two different demos today we'll fire up a brand new maui app we'll dig into it and then oh hey welcome smab uk welcome to the show i do have a hard out here in one hour as well so we're going to cover as much as we can in an hour and uh i am certain we'll be able to do everything i want to do a little heads up it's going to be a very quick show it is the blazer power hour so all right so we've got our brand new maui app uh let's take a look and see what kind of folders we have in our maui app so we have a data folder this is just some demo stuff in the data folder here uh we've got uh pages these are razer files that we'll get into in just a minute we'll open up platforms take a look in there but this is essentially all of the platform specific code that you may need for all of the things that maui supports so this would be mac catalyst windows ios and android resources is specific uh platform specific resources things like images and stuff that you want deployed with your application um it's a little bit different than what you see in wwe root uh this is more of a native platform static resources folder where ww root is more of a webified shared static asset folder so we also have a shared this is our general shared components throughout the application main layout nav that sort of thing if you're familiar with blazer you've probably seen those before uh we do have a www root folder this has our bootstrapping file for blazer in it and some other static resources for the webified portion of the app we have imports.razer app xaml main razer main page xaml and mauiprogram.cs so we'll look at all of those in in better detail here just a second just want to give a quick overview of what's in these folders the main ones to focus on right now will open up pages and shared and inside of pages and shared you'll see we have the obligatory counter dot razor fetch data and index.razer if you've done any blazer at all this is super familiar stuff these are indeed razer component files in here they're not um anything maui specific at this point this is just regular blazer stuff same goes for shared the main layout nav menu survey prompt that's uh all template stuff from the blazer application these are razer files you can even see we have css files here so we have the css isolation features of blazer all working within the blazer hybrid application www root things change ever so slightly so if we look under www root we do have our css files our fav icon and an index html but inside this index html there is one very small but very significant uh change in here we have our typical document head our body the div where our app actually lives our blazer app lives um when the blazer app boots it it gets injected into this div with the idf app on it this is where the entire laser application is rendered inside of this div tag here and this is the piece that changes everything this blazer webview.js if you're running a blazer application on the web this is going to be blazer blazer.webassembly.js if you're running this on the server it's going to be blazer.server.js when we're running it in blazer hybrid it's blazerwebview.js so there there's a very significant value to the way this is set up so just keep that in mind as we talk about the second portion of this where we blend a an existing web application with our maui app that they use two different base uh javascript kind of bootstrappers so index.html does have a little bit of a change in it everything else so far is pretty familiar again familiar stuff here won't go through all those bits these are just the usual references for our blazer application let's close these guys down and take a look at platforms so our platform folder here has platform specific bits in it so we've got one for each platform we're developing four we have things like an app manifest in here so these are the metadata basically for the things that go inside of the application when it's packaged up uh each platform has some very specific assets and things that belong in here for example if you want to deploy something to the android store the place google play store you're going to have to have the resources and manifest files to build up the proper uh apk file to deliver that to the store you can also put inside of these folders uh platform specific code that needs to run on those platforms create specific views and things for those platforms as well i don't know how to get into all that just yet but i know those things are possible with maui uh resources are going to be static assets for the native application so you have things in here like fonts uh some svg images things that are going to load up with the app when they're used natively so kind of different than the wwe root folder but yet it's not kind of similar there's a little bit of overlap there but once for the native environment once for the web app.xaml let's take a look at app.xaml so we've got um one of the key entry points here to our application this is the main um the main uh xaml page for our app um we also have a little bit of a code behind here and this is kind of just bootstrapping that view we also have main page dot xaml and this is the bootstrapping mechanism for the blazer part of the application this is the first page that loads up after the app saml launches mainpage.xml uh this is the uh the content within that shell that maui shell that gets loaded up so we have a page here this is a uh a xamarin or maui page remember maui uh is the predecessor of uh our xamarin is the predecessor of maui maui is uh where we're transitioning to um this is our our xaml page that we're loading up now inside of that xaml page is a blazer web view and this is what blazerfies are maui application so we have a full maui app with just a regular page in it a regular maui application page in it inside of that page is a blazer web view that blazer webview is what takes the application and transforms that view into a page that can run html css javascript and c sharp this is very cool stuff here on the blazer web view component there is a host page parameter here and that points to our index.html file we're going to circle back to this later when we start merging our two applications together our maui app and our web application so this will be very important later on what's uh what's nice to note here is um we can host the entire page using this index html uh we can change this to something very specific if we wanted to and we also inside of that index page that we're booting up we can define what component we want to load into that index page so remember the index page is kind of the wrapper that boots up the uh the blazer experience it's our our entry point for blazer and we're gonna tell this index page we're gonna load the main component into it so we can actually come in here and change this main component into something else if we'd like uh the way this works right now is it's going to load main.razer so if we look at this in detail we're calling out uh the component type of main it's getting that from here from main.razer so if we wanted let's say to take our entire application and just load one opponent in it we could pull the counter component from pages instead of main.raiser and just boot the counter component by itself so this is something we have full control over here we could point that to counter instead and then our entire application is just going to be a counter so we do have ways of manipulating how this boots up and what it boots into very easily too um let's see maui program.cs so we've looked at uh kind of most of the bootstrapping mechanisms so far remember we're gonna boot a maui app the maui app's going to boot a blazer app inside of it so there's kind of that double bootstrapping process and then of course there's the index.html page that that boots up the app as well so it's kind of a little bit of a three tier of three tiers of abstraction that takes place in and gets the app running now in maui app we run the typical builder pattern that we see in all of our net applications these days so if we're building you know a console app a desktop app uh blazer app these are all very familiar patterns the builders generally generally build something different on each of those platforms but the pattern is the same so we're going to create a builder and we'll register our maui web view this is just setting up all of our services that make this app possible we're going to use a maui app and this points to that root app.xaml page we're going to configure any fonts these are the local resources that i talked about that use or add the fonts to the native portion of the application and then we can call our service collection and add in our dependencies to that service collection just like we would in a blazer or an asp.net core application so we'll call builder.servicesadd we can add singleton scope to all those things we'll add a blazer web view here as well and what's nice about this is we only have to define these services in one place and both the maui application and the blazer webview get these services injected into them so it's one stop shopping there as far as dependency injection goes so that makes things super easy all right so let's give this a run running maui apps this is a good point to a learning opportunity here in a point to make so i've got various emulators set up here actually i think i might have wiped them out and restarted so i might not have various ones but i have at least a android emulator set up here i've got the pixel 5 on this one um if i hit this drop down box here you'll see there are a lot of options for running this application i can run on an android i can run on windows machine i can run on several ios devices now compiling an ios device requires a mac don't complain to me i know all about it it's uh this is a an apple um oh how do i put this politically apple wants you to buy their stuff and they're not gonna let you compile applications for their stuff without buying some of their stuff uh they're not one of the or the most profitable company on the planet right now because they're nice guys so you do have to have some apple hardware to compile these applications for um ios and mac os now there are services that will do this for you so you may not actually have to have hardware on premises to do this you might be able to form that out to a third party service to do but at some point it's touching some mac hardware to do the compilation i have a device i haven't set it up for this yet but you can remote uh into it through visual studio compile and you can also run it on that remote machine um i'll be doing that shortly uh samba zoo my good friend uh here at progress is gonna join me one day and help us set that up and we'll we'll live stream that so uh you can all get an understanding of how that remoting and compiling through that remote machine works with visual studio and maui so that'll that'll be interesting and fun so for now we won't be using these not for today i don't have this set up yet but we can run the android emulator um and we can run on windows so we do have those options so let's go ahead and fire this guy up now i will warn you this first build does take a while it did come up awful quickly there that's just the emulator popping up and the emulator itself has an older app that i built so we can see if we can knock this off uh it's kind of froze while it builds up here okay so these this first compile uh expect it to take some time there we go finally cleared that page that is not the app we just created and google is it thinks i'm thinks i'm trying to use the voice assistant which i am not all right so you can see it building in the background it's nice to know that the emulator is up so if you build this for the first time and your app fails to deploy it will say deployment failure that may be because your emulator has not started up yet and visual studio is trying to deploy an apk to an emulator that is offline so sometimes this will take two builds so that's why i said it was nice to see that my emulator had popped up so just keep that in mind try it twice before you give up and start troubleshooting so we've got our maui application up and running um it is in a an android pixel 5 emulated device and it is a blazer application so this is a full blazer app is taking over the entire ui experience for the maui application here so we've got our fetch data we've got our counter component and we've have our home page with our survey component on it as well and this gets installed to the device you can see we've got our uh card actions here on the um the android app and it does get a logo and all of that stuff so this is a real true um application it's not like a pwa or anything like that there's anything wrong with pwas but that's not what we're setting out to build today if we look there's several of these demos in here that i've done over the past couple days so they they are getting installed on the devices apks and they do have a um an icon that sits on the home screen of that device so this is working so that's nice to see uh this ran um on the first try we're gonna go over and run this on windows now so we'll switch this off to a windows machine up here at the top and we'll go ahead and run that as well these don't take as long to compile the mobile devices seem to take a little bit to get compiled working this is a little bit quicker generally to get your desktop application deployed uh depending on your machine uh mileage may vary uh but generally we have a deployment error here so that might be a good learning experience for us it seems like it's trying to do something it's not allowed to do so let's double check here if you see deployment here sometimes what you see is we have windows machines selected here but underneath of the framework it somehow got out of sync here so you can see it right here it is set for a windows machine but the framework is set to android i don't know why visual studio does this i think it's just part of the fact that we are in a preview environment all the bells and whistles haven't been fine-tuned yet so just if you run into those deployment errors again make sure your emulator is running if you're doing an android application and if you're doing windows um double check your framework and make sure that it matches the type of device you're trying to deploy to so if you're on windows make sure that this says windows as well if you're on android make sure it's set to android it should sync those two things up but obviously it doesn't do it every time so go try that deploy again and see uh it will run on the desktop this time fingers crossed but i'm pretty certain it's going to work and we get a full debugging experience here too i believe so everything looks like it's connecting up in the back end and there's our application so we have a maui app running on our desktop uh you can see we've got an icon down at the bottom of the screen so that is working it's installed as an application on my machine matter of fact we called this what demo one there should be a maui demo one app in our applications on our machine now it's installed right here on the windows device so there's our maui application running on the desktop nice and fast too so one of the things that's going on here is that um that index file that boots the blazer.webview.js is not using webassembly it is telling blazer to use the net runtime that's available here on windows so uh web webassembly is not as fast is net running on a native environment it does a lot of interpretation to work inside of web assembly things are just in time compiled on the native devices and you're going to get a lot better performance here on the desktop so we have that and we can also do all the things that windows gives us with our app so we can pin it to the side of the screen etc cetera all those things work inside of a maui app we can also call native environment apis too so if we wanted to call some native windows api apis from within this app say we wanted to take the weather that's on this page and cache it locally on disk on this machine we could do that we could do that on android as well um i don't have the api calls ready up top my head that's not something we're going to going to get into today but it's relatively easy there's something called maui essentials i believe that gives you a lot of the common apis with all of the different devices that you're deploying to and lets you write fairly common code to do uh most tasks for um every environment that's there so we've not only got the accessibility into javascript but we can use net libraries that are just general business logic and then we can also use apis that can do system level things with our devices that's pretty powerful stuff and we can do it all with web technologies html css and c-sharp and javascript if we want that too so very cool stuff there um we've built a maui app we've run a maui app um let's go ahead and talk about building an application that uses both the maui application for doing web desktop or sorry desktop and mobile but also adding in a web experience as well so we have the ability for users to come to our website and use it with any device through a browser this will cover things like just browsers in general but maybe linux users we don't have a way to deploy to linux with maui yet so this can be very helpful for that and we can we can take an existing web application and then package that up as a maui desktop or mobile app as well so there's a lot of opportunities there so let's go ahead and start again new i'm going to close this solution here i'm going to use one of the telerik templates to get a blazer app up and running that has more than just the hello world experience for a blazer app so let's go and do a new project and i'm going to create a telerik c-sharp blazer application this is a template that comes with the teler ui for blazer you do need to install the visual studio extension to get this but it's fairly straightforward once you have it it's going to give you a nice uh setup for creating web apps with blazer so we're going to use this one so we'll call this teller laser app demo and we're going to create a brand new project for that [Music] and of course something's gonna go arrive here for me this morning the name already exists okay that makes more sense so i'll just give it a unique name here and this worked yesterday it's not going to work today maybe we need to restart visual studio let's try that and there weren't any updates to any of the products that i'm showing here or any of the visual studio stuff there we go so it looks like visual studio just had a little hiccup there um so i'm going to start with the um admin template for our teller qui for blazer stuff and i'm going to start with the net 6 framework we need to make sure we're on the latest.net framework here and i want to choose web assembly from my hosting models here so it's a webassembly app we're going to get the server shared and client projects that we normally see with a full stack blazer application and we're going to get some nice ui bits here as well and it's getting a little warm in the studio here give me one sec okay so we'll start with the admin app and we're going to choose a theme um let's go with a material theme this time a nice dark theme with the we'll do the line and this will give us a nice starting point for an application so this is a typical blazer web assembly application full stack uh hey rick how are you doing welcome to the show nice to see you there so we've got a full stack blazer app here with a client server shared setup so we have a an asp.net core server for this we just saw that that's not required for a maui app but generally speaking you're going to have some kind of back end you're connecting to to get data in and out of your app so it's nice to have the server as part of this project we also have a client webassembly app here this is a web application built with blazer and the teller ui for blazer and then we have things that are shared between the server and the client application so let's go ahead and give that a run and while that compiles up we should have a nice uh dashboard experience here there we go a little bit of a dark theme going on material ui we have our our tab here uh tab navigation here to the left and this is like a nice accordion menu that can come in and out we have charts and graphs and data grids and all that nice stuff to get us started and these are drag and drop as well so we can move these things around our dashboard there's a couple different pages and things here it's a nice starting point to get us moving towards an admin type application like this so uh this is something that i want to take and embed inside of a maui app this is a webassembly app right now let's add a desktop deployment to this as well so inside of my solution i'm going to go ahead and add that maui template so we'll say add new project um.net maui app blazer preview and again this doesn't really matter what we call it go ahead and add that to our project all right so now we've got four different solution projects in our solution here we've got our webassembly client project so we've got web assembly at the top we've got our asp.net core server we've got a common shared library and we have our web our sorry our desktop and mobile shell for maui in this project the next thing we need to do is tell the maui app how to find uh the um the blazer application so i've got some notes here i'm just going to pull off to the side here oh i don't have those anymore that's not that's not good my cheat sheet's gone so we'll have to wing this um the first thing that we want to do here is uh we have this stuff that comes with our application uh template so we have that pages and shared folder that i showed you earlier uh that has the counter and fetch data in there we don't need that anymore we have pages in a shared folder inside of our web application that we want to use we don't need any of those we also have a ww root folder in our web application and when we link these things together the maui app is actually going to be able to see that so we don't need our css files uh we can ditch the favi icon and we do need the index page because remember there's one line in there that is different it boots up the index different on the maui application so we'll call this one maui and because we changed the name there we're going to come down to the mainpage.xml file and make sure that we change it here as well so we've got maui.html if we didn't change that there would be a compiler error that says you have two index html files in your ww root folder uh and it would be getting one from our uh webassembly app and one from our maui app and it would see a conflict there and throw an error so that fixes that uh the next thing we need to do is uh we need to get the pages and um components from our client application so we want to link together client app with the maui app so we want to put those two things together we can do that by saying add a project reference we can reference the client application so that's just step one the next thing we need to do is tell the blazer webassembly uh or the blazer web view that you see here where to find the pages and routes that are in that other assembly so we're going to come into uh app.xaml and sorry round one sorry main main.razer the entry point for the blazer application and notice some things are already red squiggles in here because we deleted some resources so what i want to do is say this is telerik laser app six dot and now we start getting some intellisense here that main layout is going to be found under client uh shared in layout and we need to get that component and it's also repeated here so we're just fully qualifying that namespace and then to find the routes we need to come up to our router and say add additional assemblies um i always forget the syntax for this one i'm going to go ahead and look it up usually this is where i usually keep some notes but i seem to have lost them so uh we'll just say the laser routing additional assemblies into google and that will pull up the docs for this and this is pretty easy uh straightforward stuff um it's just i can never remember how that that route is defined uh route from multiple there we go so we'll take this line additional assemblies equals a new array and then we pass in the array of items that we want to go find so we'll drop down to a new line i will say add additional assemblies new array of type and this is going to be um pretty much any part of our our webassembly project we can point to so i'll just say teller laser app 6 client and then app here so this will allow the blazer application to search this assembly and find any routes that have been defined in the components there yes fuel snabble this is maui so we are now connecting our maui app with our blazer app so we can reuse our existing uh uh blazer uh webassembly application within maui so we've got that done i also have some dlls that some dependencies that exist in the webassembly application that i need to add inside of my maui app that is correct fuels novel it is a glorified uh web launcher now it's it's a little tiny bit more than that but uh that's a pretty good summary so i have some teller components in here um if you have any third-party components you know things you didn't build yourself inside of your blazer app dll or nuget package references you may need to add them to your maui app as well so it can find those uh dll files when it's deployed so we'll go ahead and add that and i'm getting some sort of error here still let's go ahead and clean this um i have noticed that you can get some odd behaviors like this where the compiler gets a little confused uh as you delete and add things to your application uh so let's make sure we don't we haven't broken any of the markup here um so we have proper opening and closing quotation marks and all that stuff sometimes it helps to just close these files out and reopen them so let's go ahead and pull that main.razor back up and it looks like that has sorted itself out so uh the razer editor and the compiler can get a little bit confused as you go through this process of setting things up there's a lot of deleting the files and adding new dependencies to things and let's go ahead and try to run this let's do a build first and something failed let's wait and see oh i know what the error is here if i go into my imports.razer we deleted this shared folder so we'll take that out and it's getting that from the webassembly app so that's gone and it's not needed anymore so go ahead and build again and it's working it's busy down here in the corner i know it's probably hard to see and we still have something missing here sure does not exist there goes that one finally cleared up um could not find file this one is just going to be a clean and we will rebuild again so clean and build once we get a compiled app we should be able to run it and i don't oh i know there's one more key piece here that we're going to need one more key piece um but we'll we'll run it with an error first i want to run it with the air so you can see um that's not the air i'm talking about uh let's try closing this down we'll close down visual studio let's go ahead and make sure the emulator is off as well i think this is just growing pains here it's trying to compile the application and it says that a dll is missing from the project reference that we made um i think this is just again all the moving pieces that we just had there uh have gotten the apple or the compiler a little confused so we'll go back into the demo that we were working on it was teller demo six and let's just make sure that the bin folders are gone so when it recompiles everything it doesn't have any old references left over inside of any of these folders you might not always need to do this it did do this to me earlier just keep in mind these are new bits they are in preview so sometimes things get a little weird so that that got cleared out go ahead and try this one more time and it is setting the app back up and we should be good to run this in just a moment again i do expect it to fail but i do expect it to compile and run this is going to be a runtime error that i want to show you how to fix uh still working background there we go all right let's try this again cross your fingers hopefully it got that dll that it cashed out of the way and come on come on compiler we're cheering for it we're rooting for you you can do it rosalind almost there uh and something failed again look at that something failed in the client application this time so let's see if there's and there's nothing in the error list to let us know what's going on it still hasn't finished compiling yet live demos am i right sometimes they work sometimes they don't build succeeded it says okay so i guess it didn't fail it just pretended to fail all right so one thing that we need to do is go into our shared uh sorry air server application and in our server application we're going to open up a new terminal and down in our terminal over here right here we're going to do dot net run so i'm going to say dot net run that's going to run the server part of the application again we do have some apis that we're calling from our web server and we need to be able to locate those uh and and get responses back or none of this works so that's step one then we need to come over to our maui app and we're gonna tell our maui app to set as the startup project uh and then when we do the maui app as our startup project notice the top here changes and we get that um at android windows machine dialogue good morning napalm welcome to the show uh and i'm gonna double check this again make sure the framework is set to windows it is and then we should be able to run this and hopefully we'll see our maui app but i do know for a fact we will have an error all right so it's loading up we should see our shell come up and then once the maui app starts to load in we will see this ugly yellow banner at the bottom of the maui app that says an unhandled exception has occurred that's not good but fortunately i've been through this before so i can show you where the problem exists in a blazer webassembly application in program cs um you'll notice we have uh the http client here uh and it says add scoped http client with a base address of uri builder such and such a address um we're working with a different platform here so we're going to call in this http client we don't have a reference for it here so we'll go ahead and add a using statement so what is happening in this instance is i have in my maui application uh the blazer webview running and by default the maui application doesn't use http client so that that exception that we saw even though we didn't see the text for it what that exception is it would have said a service is not defined for http client so dependency injection and failed to um inject a proper service and i don't know why that's not working um give me one second to grab another file uh let's open visual studio code here and go browse another project where i've done this before and we'll get the uh correct um we'll get the correct uh source code that belongs there so let's see here um trying to remember which one of these projects had that working i think this might yeah go and we should be able to dive into it's a web app but no it's not platforms properties resources yeah that folder should be fine uh yes i trust this it's fine uh in maui program cs here is the actual code that we want right here i don't know what i was miss typing with the uri over on this end but it didn't like it but we want this to say um oh i know what it is it's a using statement after all that it was just a using statement i was missing we do have a little bit more significant code here though so we can talk about this as a happy accident two things that you want to do here one is fire up a new http client you want to do a base address that finds it in a more a less static way than i'm defining it here but for demo purposes we're just going to point at the server that we're using for the back end of the application for the data this is running on localhost 5001 in my stereo so this may change depending on what you're running again i need to find a better way to do this but for now just hard coding it like this works fine another thing that i found is that your maui app will not attach the proper request headers to [Music] to your http calls by default so you want to set your default request headers to user agent request uh for using it with external apis i found this was a problem with something like the github api once we have our http client configured we'll inject that here and then we can run this on our windows machine again and this should run in our desktop just fine and we do have another error uh maybe my my server shut down so let's double check that um i did have uh let's see where are you at yeah i don't have the server running again so let's open that in terminal again i think when i shut down visual studio that stopped run make sure the web server is running and it failed so let's try kicking is if it's up it's not um yeah the web server is not running correctly or something and it's hung so let's see uh let's try that again one more time there it goes there's our web server let's try our app and of course it's not going to work for me today all right all right we're running out of time here too i can't remember what exactly else i had to change here it looks like there's some sort of request that's still not getting through um let's try let's run the server application again make sure that we're getting here we go let's go to the website make sure that it is okay double check that real fast okay so our app does work there looked like there was some missing assets or something still and i'm not sure why um see we change oh i know what it is i know what it is uh there was one more thing we needed to do so there are two different index html pages we need to copy the head from our index.html page in the webassembly application and paste it into the html page in our maui application because it contains javascript files and css files and i pasted it three times for some reason so we need things like the references to our css and any javascript interops that we have and any themes that are installed on the web app so we'll go ahead and uh i ran the wrong one nope i ran the right one there we go and it works so there's a couple moving pieces there but a lot of it is just deleting out all the the templates from the maui app and then you want to add in your um the head of your html you want to map the dependency injection for http client and then look for the routes inside of your webassembly application once you do those three main things the rest of it starts to come a little bit easy and there's our application our um our dashboard app running in maui and uh we have web desktop and mobile covered now and if i make any changes to my client blazer app it will affect the maui app because um there are no uh resources inside of the maui app or any of the web ui bits or any of the business logic or any of that all it's doing is hosting the application inside that shell i could add inside of my um my app service that can um inside of my maui app um i could come into my maui app now and i could say add new item add a class here and i could say uh let's just call it something stupid for demo sake we'll say windows api service you wouldn't really call something this but just for demo sake i could say this is a service that i want to call inside of my blazer code and i could have an interface of some service and when i call it on the maui app it's actually storing things on the windows disk instead of making uh you know calls to local storage or saving things through http client or whatever so i can actually go out and do things on disk on the client's machine so i can have different code paths for these different devices so this leaves me the opportunity when i'm on desktop to inject services that rely on desktop and windows infrastructure to do work so call native apis on the device basically i won't have time to show you any more of that today but you you've got a starting point now well we'll do some more of this stuff in the future it'll be fun um maybe next uh next week or um i think we have some stuff planned for next week but on a future show we'll make some uh calls to the windows api get some um iterate through the drives and collect like disk space or something like that to show um how easy it is to actually make those calls through maui so it's cool stuff glad you could stop by for the blazer power hour hope you learned something new today uh feel free to um oh thank you very much aztec appreciate it i stumbled on these things earlier in the week so it was uh kind of the second attempt at failing but it's all good i appreciate the compliment um we'll see you here very soon make sure you hit follow on the channel here if you want to get updates on when we go live again and of course we'll put all of our replays up on youtube so thanks again for joining me i've got a heart out i will talk to you all soon

Channel: Progress Telerik

Views: 279

Keywords: Telerik, blazor, dotnet, blazor power hour, blazor hybrid, blazor hybrid apps, blazor .net maui, .net blazor maui, blazor hybrid desktop apps, blazor hybrid maui, blazor hybrid web, blazor web app, blazor ui, telerik ui for blazor, ed charbeneau, everything you need to know about blazor hybrid, what is blazor hybrid

Id: 6O4f49-S2jk

Length: 55min 58sec (3358 seconds)

Published: Mon Dec 13 2021