Intro to Blazor Hybrid (.NET MAUI Blazor)

you've probably seen a video or two on net maui already but maybe you weren't really thrilled with using xaml for application development maybe you're a web developer and don't want to learn a new markup language just to develop a mobile app fortunately there is another option blazer hybrid also known as blazer maui is a way to write mobile applications using the same syntax as other blazer projects in this video we will look at how to build a blazer hybrid app what it can do how do we use our existing blazer resources in a new maui app and more now if you don't know me my name is tim corey it's my goal to make learning c-sharp easier i do that by providing videos here on youtube multiple times per week plus i have a weekly podcast i also provide courses on c-sharp web development and much more on imtimory.com the profits in those sales are what pays the free content here on youtube so that everyone can have a great education in c sharp not just those who can afford it now in this video as in most of my videos i am going to create some source code if you like a copy of the source code use the link in the description all right let's go to visual studio and yes we are using the preview version of visual studio because the current visual studio 2022 does not yet support blazer maui it will in the near future but for right now we still have to use the preview version blazer maui has been out right now as according as of recording this video for about i think six weeks so it's still very very new but let's go ahead and dive into creating a new project and we're going to choose a ablate or sorry a maui project let's search for maui in our choice here of a net maui app that's a kind of traditional maui app that's been built with xaml we have a maui class library we also have the.net maui blazer app we're going to choose the blazer app hit next and we're going to choose call this blazer maui and we'll call this blazer maui app and we hit next and yes.net 6 and create now let's talk a bit about what a blazer maui app is a blazer maui app is it really runs a web server that then runs your app so that's how this is set up it's if you're familiar with electron that's a similar concept here so it really runs a kind of browser that interprets your code in the background just like you would in a in a a progressive web app or something similar only in this case it has access to a lot more resources basically almost the full resources of your your mobile device so you have access to the same things or similar things to what you would in a regular blazer i'm sorry a regular maui app but we're going to use razer syntax so if you're familiar with the blazer project this looks very similar we still have the h1 tag and the survey prompt and we have the counter page and all this looks very familiar because it's really the same it's really just like a blazer project if you look here yes there's some differences here we have a static class and a static create maui app and so on so it's a little different here with setup but it's pretty close and then after that it's the same so let's actually launch this i'll launch it in a android emulator i have a galaxy nexus let's launch that and i just want to show you that yes this really is like a blazer web application only it's going to run on a mobile device as a native mobile app so it takes a little bit to actually run actually push play first so there we go it's going to build it's going to take a bit the first time to run which is why we have hot reload because hot reload allows us to continue to change and tweak it while it's still running which means we'll have to restart now don't get caught up in the idea that hot reload will work with everything there are some things will cause hot reload not to work you'll have to restart the app and that should be logical hot reload is not designed to be the the replacement for like a a visual preview it's meant to be more for tweaking the visuals that's really the the majority of what's there for now they have turned into almost a live preview editor which is great but there are some things especially with async communication things like that that will cause it to say hey i can't keep doing this we have to restart just know that's going to happen all right so here's the blazer page notice it looks very similar to what you see in a mobile app and we have here our counter click the counter the counter still works we have a fetch data page which is a weather forecast it looks like a web page but it's actually a mobile app and yes you could install this yes you could put this in the app store you can deploy it but it's a essentially the same address very similar to like i said an electron app if you're familiar with that so it's running a browser that's then running this so it's a browser component in a native app that then runs a web app so that's kind of where you're at so it has access to more than a progressive web app would because it is a a web component in a native application so that's where we're sitting right now so i want you to see this and if we come here to let's say counter page we have one two three four let's change this to plus equals eight and hit save and that will reload this and then we can say there you go 12 20 and so on so it's already reloaded just by making that change so we can we can tweak other things too to say uh counter page like so and that will show up on this page there we go notice it didn't reset 52 so we can write practically native apps that install natively using a web component so if not maui this is very similar but maui actually installs those native components this is installing a native component that is a web component that runs your page so it's a little bit extra layer here okay so now we got that out of the way i think you have a good idea of what this is doing let's take a look at how it's doing it because now that you know what it's doing maybe you have a better picture of do i even want to use it now there's one other question that i had initially that i want to answer for you because i think it's important and that question is going to be where is the deploy to the web and there isn't one because a blazer hybrid app has access to native controls you do not have access to native controls on the web so we really couldn't make a blazer hybrid app into a a web app as well now there are certain things that do create web apps that also are native but that's a bit different so with this it's not a web app it's a blazer app that only works on mobile devices as an actual installer well mobile and desktop because we have we have windows we also have ios for actual desktop applications as well as for android for mobile and ios for mobile so we can deploy to a lot of different places but it's just desktop and mobile it's not the web as well now i do want to take a minute here though to say it's not the web but it's almost the web so let's talk about how we could basically reuse the components in more than one spot i think that's probably the question comes up a lot is well yeah it looks like the web and the code looks very very similar so why couldn't israel use this for the web and the answer is you kind of can you can create a blazer product like a blazer server app or a blazer web assembly app that uses these same components as long as they don't do anything with native components so we'll see that in just a minute let's walk through the pieces of this project so first off we have our data folder that's just a sample with our forecast stuff then we have our pages those are all just standard across every blazer project then we have a platforms folder this is for code that's specific to a specific platform so if you have android code that only runs on androids you can put it in this folder however just so we're clear you can also have compiler statements in your regular code that says hey if you're on android run this code otherwise do this so you can put platform specific code anywhere but code in these locations will be just for the platform specified so basically you have two different options so that's the platform specific folders then you have resources that's resources for your app so app icon fonts images and so on we have the shared that's standard for blazer we have wwe root again that's standard for blazer and standard for any web project we have our imports that's standard as well our app.xaml that's pretty standard there's a little bit extra stuff here because it is a a mobile app but otherwise it's it's a standard design and same with main we have our routing that's a standard routing we have our uh main page and again it's a little bit we using some resources for colors but that that's all standard stuff and then the the one really unique thing is instead of program.cs we have maliprogram.cs and we have our static class myprogram and our static entry point for our application here so this is a bit different than what you would expect from any other.net 6 project this is next 6 code but that's because blazer i'm sorry maui was developed kind of in in parallel with net six and it hasn't really uh brought all the.net stuff into it yet i don't think so i would anticipate this is gonna change for net seven to be more of the uh the single file that we're used to in um every other dot nets program for this the program.cs but we'll see but it's the same kind of structure create the builder and our any services we have down here here's our configuring fonts this is telling where to start so it started app which app.xaml in here tells it how to start the application so that's where we're starting and then down here we have our services if we're in debug mode that's a compiler statement we're going to add the developer tools and then here's our our service flow weather forecast otherwise that's it that's how we start our application so with that that's really all the differences between a regular i guess you call it blazer application that's blazer server blazer web assembly versus a blazer hybrid app so let's look at making this work with both the web and mobile so let's do this let's create a a little to-do app and to do apps are great for your phone you can track things they're also great to have in the web too and maybe you can use it on both places now we're not gonna do a complete to-do app but let's create a little to-do app and to do that i'm actually gonna create a library so let's right-click on solution add new project instead of maui i'm going to say library and i want a razer class library and if you're familiar with blazer you've heard me kind of gripe and complain about this a a razor class library is for blazer so yes it's a little weird that they call it a razor class library because it's it's not razer pages but it uses the razer syntax so that's why they call it razer class library we hit next and let's call this our um let's keep it simple razer library hit next yes.net 6 no we don't want to support pages and views we're just going to support blazer components which are razer pages not sorry they're razor pages not razor pages yes that's that's why it's so confusing i will show you let's walk through this so let's collapse this for a minute and we'll just have the razer library up for now it starts at www root which we can get rid of these two sample things here delete delete and we can get rid of component1.razer delete that and we can get rid of example.js interop as well get rid of that we don't need any setup or any common things instead we're going to create all of our own so let's right click on razer library add new folder we'll call it models and we're going to do is create one model here for todos so class and we'll call this the to do model we'll put a semicolon at the end of namespace i love that trick that was shared by a viewer of my youtube videos so now you have the file scope namespace that's what it does but now we have our class to do model in here we're going to say prop int id prop string and to do item and prop bool is complete and in fact we're not even doing a database let's get rid of the id let's not worry about it we're keeping this really simple okay so we have our to do item and we have whether or not it's complete which has to be de uh false by default that being done let's get back let's just say it right at the root right click add new item razor component and let's call this our to-do control this would be a blazer page so in here what we'll do is let's um let's actually go our import statement and add a using for the models using razer library dot models so we have that and in here we're going to let's create a list of models in here private list to do model call it to do's and we'll instantiate that and we'll have a private to do model called to do we'll instantiate as well and that will be the the new one you're adding and then let's create a method as well private void add to do and what that does it says to do's dot add to do and then to do equals new what's going to happen is when you call this method it's going to take this to do add to our list of to do's and then reinstantiate that variable that way we can add to-do's to our to-do list so let's create a an edit form to actually edit this to do so come up here and let's get rid of the h3 for now and we're going to say edit form i have to close these out and before doing that close it out however this right here i need to add this to the using statement so let's do it this and we'll come over to imports and say using and paste that back in so it doesn't have the forms component we're going to add that in okay now that i have my edit form i can say model equals to do so that's the form does and then i'm going to have let's say div class equals margin bottom of three if you're not familiar this right here is bootstrap with strap five specifically for talking to um or using these classes that bootstrap provides to give us a way to not have to write all the css ourselves so this right here sits a margin bottom of three um it's not three is not a measure instead it's they have one through five which are different settings i believe i believe three is actually a uh one rem which is one times the the pixel size for the standard font so if the standard font is 16 pixels that's 16 pixels high because that's one times 16 is 16. so that's one ram is what it is okay let's have a label i'll say for equals to do item class equals form label these classes again are all bootstrap classes to do item and then in here we'll say input text bind value equals to do dot to do item and class equals form control and then we need to add that the id as well let's put the next line and that's to do item which matches up with the um right here so the label matches the four matches the id here just do a self closing here i'll have a button with a class equal to btn and btn-primary again i'll bootstrap and the on click equals add to do we'll call this just add so we have here is a little form that's a really standard blazer form that has two values one it's got a label for it says to do item we have an input text for filling unit to do and we have a button that says add that to do that's it and that add to do we'll call this method that adds the to-do to the to list cool so we're not going too deep into learning blazer itself we're learning how to use blazer maui or blazer hybrid so we're not going to go much deeper into explaining this but i think that kind gives you a good overview of how to create a form right so now let's create a list so i'll say that's an h3 here that says to do list and let's capitalize d so let's create just an unordered list here that has all of our items ul inside here we'll do a 4-h and we'll say 4-ht in todos now normally we do a check first to make sure the list isn't null but right down here we're instantiating it right away so it'll never be null therefore it may be zero but for each is going to say oh a zero in it no problem don't show anything but if there is something in it let's show our our entries but we have that is complete checkbox so let's say if t dot is complete and if it is oops there we go let's do a span and i'm going to say style equals normally i'd put this in css but we're not going to do any css in this video we're just going to put it online if it's not included right in bootstrap which this one i don't believe is so text decoration line through just so if it's complete we're going to put a strike through that that element and it's just going to say t dodge to do item so if it's very complete it'll have the words but it will have a line through them meaning it's crossed off but if it's not complete then let's show the item and then we're going to have a button class equals btn btn ah warning and also btn-sm for small and we're going to say um margin at the start of three that's gonna put some spacing between the button and the item and then a new line where i say on click equals but instead of calling a method here we can just say empty parens and then the arrow and say t dot is complete equals true just change the the flag from false to true for is complete for that item which you may say which which item well that's the t here so whatever to do it was on and we'll say in between we'll say complete so that button will say complete we click it and it's now struck through that's a really simple simple and easy thing to do well that's all there is to creating a control let's actually use this control so let's go to our blazer mounting page right click on dependencies say add project reference razer library hit okay cool now we can go to our imports here and say using razer library dot uh actually it's razor library now we don't have to reference it and now on our let's go pages let's go to our index page and change this get rid of the survey prompt get rid of everything about hello world let's call actually leave hello world and we'll say to do control which comes from our razer library that's it let's run this so it's running it's compiling again it's going to take a little bit but it's going to build our application and it's going to turn it into a a actual android application that's what we're demoing on here we could do windows it actually installed in windows i find that kind of a pain so i tend to test on android because i've got a nice emulator here but once i get closer to the actual finished application now i test on all of them of course but this allows me to at least run it without installing a bunch of different applications so it should be launching any second now but once this does this and we see that it works hopefully it works then what we'll do is we're going to see us run on a blazer web application too so we got a hello world application we say to do item let's add something let's add testing one two three add all right there's our first entry and we come back up here and say hello youtube ad oh well that's kind of messed up because i think we messed up the um the list item let's go back and find out so let's come down here to our to do control and yes we have our for each and the if we'll have a list in here let's let's do this let's cut this out put a list item in here then paste it back in this will probably ask for reboot but let's try it oh nope there we go cool um problem solved i would probably also say class equal to margin bottom of two there you go see it see how nice that hot reload is i get to just change things and it does it um so now i've got a couple things in here i can say um i don't know goodbye add that as well so i have three items let's complete hello youtube now it's crossed off all right so we've got to do lists and it it works i mean we could cross things off we could have more things on a list in theory we could save it to a database or something else local storage of some kind but that works right well let's see this again so we're going to stop this and i'm going to minimize this for a minute and i'm going to right click my solution i'm going to say add new project i'm going to choose to look for a blazer project let's do a blader server app and we'll call this blazer blazer server because that's clear what it is dot net six everything else the same keep the defaults okay let's close all this down and in blazer server i'm to right click on dependencies add project reference the razer library let's go to pages index page get rid of this oh let's add our import statement as well using and it is razer library so we can say to do control like so and then let's set this as a startup project it says startup project let's run this wait for it to launch there we go hello youtube how are you does this look so similar it works the same way so we have created a blazer or razer library which has blazer controls in it that we have reused in both a blazer server application which is a web application as well as a blazer maui application which is a mobile and desktop application so we really can reuse blade of components across both now if you want to have access to some of the the mobile and desktop specific things file system or camera or picture library whatever things you want to have access to that you can get on a mobile device you probably get those same things on a web device therefore you'll have to account for that maybe you don't put those things in your razer library you just have them in your blazer maui project that's fine because they're specific to mobile and desktop and maybe they're even more specific to a specific platform in which case you put it there so this allows you to create components that are shared across both web and mobile and desktop where it makes sense and then when it doesn't make sense you can put it in the project where it does make sense so you get to be generic and share with everything for the things it can and when you find you can't share a certain thing then you put it in the areas where it it does work okay so this allows you to reuse as much of your code as possible this is a great platform so if you're already using blazer and you're already into it this will be a great way to increase your reach of your applications in fact maybe if you have a progressive web application maybe or a um a mobile applicator or a web application that you design in blazer where you say you know what that'd be kind of cool as a mobile application well you could potentially just copy over that code or create a library and reuse that code in your maui application and be able to get both your your web application and your mobile application will look similar and work similar now i do want to point out that that's not how great mobile apps work okay this is still a step above progressive web applications but it still feels kind of like a web application so if you looked at you know what this looks like it looks like a web application and it looks the same on android and ios and that's kind of a bummer it kind of looks like a web application and that's because it is now you can style it to look like the platform you're on but at the end of the day it still is a web application so where does this fit in the hierarchy of all of our different application types well if you want to develop for the web blazer is a great option and if you want to have some offline access a blazer webassembly application will allow you to create a progressive web app that is easy to install you can install without going the web to the app store it can have some offline access no things like that but it's not really a mobile app or a desktop app so you have to contend with if the user clears their browser history or broader cache that can wipe out your offline storage so that's a problem in fact progressive web apps if they aren't open i think it's every 7 or 14 days on ios they get wiped out well that's a bummer so the next level up is a blazer hybrid app like we're seeing here because this actually installs goes through the app store it installs as a native app and it has a lot of the the abilities of a native app but it really is running a web app to run your actual application so a little bit more of a speed issue compared to a true desktop or true mobile app but we've been continuing that for years with things like vs code vs code is not a native app it runs an electron so we're used to this i mean it's that's a very common thing to do to have these cross-platform apps that are that look similar and work similar across all platforms because they are basically just web apps so it is a viable option and it does give you more options than a progressive web application does and it even allows you to do things like monetize it you put in the app store and charge for it so that's the next level up and you can create one interface in the same web interface you're used to and serve all platforms but then if you want to have that native speed if you want to have the native look and feel if you want to have even better access to native controls then you go with a net maui app which uses a xaml so if you don't like that well too bad um that's what they offer but that dot net maui app will create that native app for your almost native it's still a formed app which has a translation layer but it's very tiny it's still native like so that's kind of a hierarchy we'll talk more of this in future videos but this i think fits in really nicely in that next level up from progressive web application while reusing all your code or most of it so that's what a blazer maui app is now we haven't gone into deployment that's a whole set of videos on its own because deployment that's kind of tough that's kind of tricky still and that's not really a microsoft thing that's just a every store does it differently and there's a lot of hoops to jump through we'll get there but this allows you to see how you create these apps and how to set them up and they're really just if you know a blazer you know how to build a blazer maui app or a blazer hybrid app whichever you want to call it okay so that's the video i hope you've enjoyed the intro look i'd love to know if you want to know more what do you want to know more about what do you want to see more of do you want to see a full app built in in blazer maui or blazer hybrid um do you want to see a full app built-in.net maui where do you think this fits for you in the hierarchy of what you want to do and is it a viable product for you and your organization okay let me know down in the comments i'd love to hear your thoughts on what you think about this new my products okay thanks for watching as always i am tim corey [Music] [Applause] you

Channel: IAmTimCorey

Views: 52,588

Keywords: .net, C#, Visual Studio, code, programming, tutorial, training, how to, tim corey, C# course, C# training, C# tutorial, .net core, vs2022, .net 6, blazor hybrid, .net maui, maui blazor, maui blazor app, maui blazor hybrid, maui blazor tutorial, blazor server

Id: v36s9snCrXU

Length: 37min 17sec (2237 seconds)

Published: Mon Jun 27 2022