Bootstrap 5 VS MudBlazor

welcome to just basic programming today we have a comparison video on two UI libraries one of them being bootstrap 5 and the other one being mud Blazer now bootstrap 5 is the newest version of bootstrap but it's not the one that comes with blazer off the bat you have to do some extra steps in order to get it and mud Blazer is its own component thing that you have to either add it after the fact or you can build your own template which I will get into uh into that in a moment so the key difference between mod laser and bootstrap is the fact that one of them is a component based Library AKA you use basic components in order to implement its many uh different elements and stuff while bootstrap 5 is not which type 5 is is like how um it's a very old library and also it's used inside the actual HTML elements that you you can have within components that you make so one of them is a little bit easier to implement if you already have stuff created while the other one is better to implement in the beginning and you're basically using those components from uh from then on but there are some other things that it offers that it could be advantageous to you if you feel the need to use them so let's get into this bootstrap Vibe versus mud Blazer right now whoa did I lie to you did you think you were gonna start it right now without me plugging my cheat sheet well if I were you I'd get that Blazer Chichi what does it have in it well in case you ever had to go to the microsoft.com to get very simple information like how do I do my input text input select blah blah blah blah all that stuff you can go get all that from my laser cheat sheet has a bunch of references that were useful for me when I make my projects because you know I don't want to scour the internet every single time I have a very basic question so you go to adjustblazer.com put your name put your email and you know you get your free Blazer Chichi it's free anyway so it's a win-win anyways another thing if you are a software developer out there that wants to get your career started or you just want to keep improving your career whatever it is go to contractlancer.com this is where I do my Consulting sessions they are free 15-minute sessions Right Here Right Now go to contourlaster.com and learn from me personally remember if you want to go for that one hour there's only four slots in a month so back to the video so when it comes to deciding what you want to add to your projects there are a few questions you need to ask yourself the first one is whether or not a project actually has a good amount of resources devoted to it AKA does it have documentation does it have help online are they supported blah blah blah so the good news is that both mud Blazer and Boot Shop 5 especially bootstrap 5 has a lot of documentation for it and they do have a fairly robust communities behind them that actually can and will support it or answer questions unless they stock overflow bootstrap by the nature of it being a lot older has a lot more resources available to it in that sense so where we can find these resources at least the first uh the first place I like to look for is the actual documentation that the creators make because every good project needs documentation and that is how I choose whether or not to add something into my projects whether it is support and whether or not there is decent documentation in both of them thankfully are really decent in that regard so there are two ways you can add this to your project now here is a bit of confusion because yes your Blazer has bootstrap in it but the problem is that the bootstrap that Blazer comes in is not updated to bootstrap 5 so you have to go out of your way to update it and there are two parts to it the first part is the actual CSS components you need for bootstrap and the JS components that you need luckily for us I believe that we do not have to use any of the JS interops to make this work uh but I will show you what I did for my project in a moment so the so what I did is I decided to Showcase both uh ways of doing it so you could have I believe um you could have your JS uh Scripts or your CSS scripts uh be through cdns AK you can have a link basically on your layout page so as an example I have this already made up so um what I have here is actually just the JS CDN in my layout so you can have that as your jscript just make sure you have it under the Blazer one so that uh this takes practice I believe that's how it works yeah I'm the expert but uh but yeah but you definitely need either this here or you need it somewhere uh within the uh the WWE root project and then you have to reference it here so either one of the two but because I want to show you both uh to show you that they both work the CDN for the JS is going to be here but I actually did move over the files for bootstrap 5 here so you might not see this as a difference but I promise you this bootstrap file is bootstrap 5. leave version 5.0 so the way I did that is actually by going to here and going to the downloads section then you download your files then you're gonna it's basically gonna download uh you're gonna download a zip file that has both ajs folder in it and a CSS folder which is going to be looking like this because I have it over here it's going to call you know whatever the name of the bootstrap version whatever this drops a distribution my bad and then um in this case I just want the CSS so what I did in that project is I just took these three folders and move them right into the same place where the bootstrap CSS stuff was so it's all the same therefore you don't have to actually go out of your way to change any of the style sheet stuff and you can leave that there as is so in case you do want to change it to somewhere else or you want to make it in a different like uh and put in a different folder a different directory or something like that then you will have to change the link as well but I decided I didn't want to do that so everything was able to be kept the same so bootstrap was is still in the same place it's still the same name and the only thing that I changed here was the actual CDN for the JS because you need that for some components so when it comes to uh uh the differences between mud Blazer and uh bootstrap is that bootstrap has its logic within JS um the the JavaScript while modblazer is built with C sharp so one of them follows the Blazer way of doing things it is a little bit more restricted because you have to follow the actual components and whatever the properties they accept however in exchange for that you do get the fact that every component runs on the Blazer logic where in this case you have bootstrap instead you have JavaScript as your the logic for some of these things yeah so I'm going to demonstrate to you in a moment um you can't really change them from here you're going to have to go all the way to change them outside of them using JS so if you're in a Blazer project you may actually need to do some js interops in that case if you want to do that wherein mud Blazer does not need to do it because it's all uh Blazer components and they their own and they do have something to run on JS so they admit that themselves but that is their basically their problem that's something behind for them and there's something you don't have to worry about uh the other thing about this is the fact that by the way this is my sample so what I did just copy paste a bunch of components that I'm going to compare and contrast between bootstrap and mud Blazer and the main difference is the fact that mostly like all the components basically are just controlled by classes so anytime you want to make a component use the bootstrap convention or whatever you have to add a class for it so form control but that's a blue shark component here all this writing here those are booty components column border border primary so I'll explain what all these are if you have your drop down and you have your modal in case you know what model is is that dialog box that comes up and obviously we got our buttons so button button primary that's a bootstraps uh these are bootstrap um classes so what does that mean it means that in order for you to invoke bootstrap in your um in your project you just have to add it to the HTML elements directly whereas in order to add mud Blazer to your product you have to actually add the mud blazing components which I'm going to show you now uh after I show you this little example and then we'll compare and contrast it too because that's going to be basically the uh the main difference between the two components versus HTML uh classes so uh I guess that's I guess it's all good now so let's just run the file remember I've added the bootstrap 5 um CSS files in it along with the JavaScript that's coming from the CDN and you will notice that that this works so this model and the drop down box both use JavaScript in order to do their functions so that means that we do not really need to do any JS interops in this case uh in order to make this work so in case there's any confusion in that I just want to make that clear well you will need Json or Ops in the future is if you decide to create JS classes and stuff in order to interact with this in some way then you might need to go out a way to do that but as is you're fine because it basically takes in the jss the JS files for the CSS and it does whatever it needs to do so this is the counter so uh yeah this is just the same button We have basically this is a form so I know that I'm missing the form HTML tags on it but it's not going to change very much so there's no you're not gonna really see much of difference here uh you can have validation and stuff but again that's all through the um through the logic portion of all this and what you see here this is the grid so this is how we demarcate a space on the web page basically and that's how bootstrap handles it so I made sure to put the borders around it or else we wouldn't see the differences so this is how it handles it and how it's going to look like and obviously we you already show you the drop down and the modal so let's go into mud Blazer before I you know talk more about this because I'm gonna I really do want to make this comparison so my blazer time my blazer is a little bit different my blazer is a component based Library so that means that you will be using Blazer components directly whatever basic components they have given you so if I go to Docs and by the way uh documentation all that stuff is is pretty decent here in fact they even went further to explain how to actually uh uh they went and explained the apis behind them so you can know uh what's available to you when it comes to using the parameters within the components that are allowed basically so all the information you need to know in order to work with these is it within here and you can find information online as well and it's one of the more popular mud Blazer um uh UI Library packages whatever so as you can see everything is a a component so if you want to use this app bar it will be an app bar component you want to use a card there's going to be a card component here as well so everything runs just like mud blade just like normal blazing components except that they're the ones providing it to you so if you want to use any of the that's also a bit of a caveat that there's also a bit of a con that if you want to work with any of these in order to manipulate them you have to follow their rules so that's that's basically the the drawback of doing this however because they are mod laser components you are using C sharp uh logic they do have some things that um that bootstrap does not have bootstrap does not bring with it a drop zone thing like this this is all done through logic it's within this so it's able to actually have this particular component work in this way and there's other things there's one more thing actually uh there was that and and a data grid so they do bring a data grid but it's experimental now that's something that is not brought in with a bootstrap bootstrap basically is just a plain grid but they do have this data grid here but I wouldn't be using their other data grids out there and in fact I'm probably gonna make a video about that later you might not like data grids but data grid is going to be part of your life you're going to go into the.net uh space whether you like it or not because grids are used everywhere and in every single product that I've ever been on so I'm sure there's more stuff that I'm missing and when I figure it out I'll let you know but until then oh yeah that's right the time Pickers so these are usually required to have like another library to do with but in this case we actually have uh it's really nice that they actually do have this already available to you I don't think boot shop 5 does not have this at all so if you ever need to use like dates because dates are typically really important within any web application um or having the ability to choose some dates or something then this is probably a decent option as it's already been built for you and you don't have to go through the process of finding a third party or bullying it yourself so even for these just a few things that you could use it's actually really useful uh and very and it saves time so let's go into the mod Blazer template so to get mud Blazer into your project you have two ways actually I may go back here and just go to installation piece you could download either the.net template itself so that you can have that as a project that you can create like you would create a normal Blazer project or you could do a manual install I have done a manual install before and I've shown you how to convert the bootstrap project into a mud Blazer project which is in a different video if you want to see it I'll put it here and uh you know see it after the video but you could do that or you could just create a template they give you so I'm going to go over how to create the the template real quick and the options you have when that when you decide to do that so I'm not going to actually create this we're just going to go to like the the step before actually creating it so in case you missed that go to create new project mud Blazer templates so if you did this step here and you downloaded uh you'd put that in a new install mod laser templates you'll finally have uh right here you'll be able to see this and then once you click this call it whatever you want sure my blazer 10 best three and then you'll have your options here so these options are similar to the options you would get to creating a Blazer project normally um the only difference is that you will not have the option to apply the identity stuff so you can't apply identity logic to this you have to do that manually later and when you do the hosted options you'll have the same hosted structure that's created like the other like the um the the non-mud Blazer version of of it so you'll have the three projects in there the shirt for the the shared project the server project and the client project when you create this or if you create a server project it'll just be the server project if um you know just basically how it looks like except that you're going to be using um mud Blazer components so let's say you do that I'm not going to create that because I have one already created so I'm just going to go into uh in this index here because you can see the the index is completely different than let's say the index from a normal mode Blazer a normal Blazer project huh because you'll be using mud mud Blazer components basically everywhere so everything that we have is a mud Blazer component this is both a pro and a con the pro is that now you have a bunch of things available to you that you are going to follow the Blazer convention and there's no real need for you to do any JavaScript basically at all at this point the only problem is that you will have to learn how mud Blazer implements these things and what to implement by how to uh put things in the parameter it's not as simple as adding classes to certain HTML elements if you're more used to that I know some people have come from like the Razer space that that is how things were done and bootstrap was a very popular um UI library for that in this case you have actual Blazer components that you have to deal with and they all can have you know logic and stuff that um then you're gonna have to either apply for apply on the component itself that you're trying to create or or you know there's other issues that can come with it when it comes to components but for the main the main Crux of this is that uh you're basically locked into using the mud laser way of creating components if you want to use the all the nice looking uh all the components you know I keep saying that over and over again anyways let's go to my mud Blazer example here so this is a very similar example to the bootstrap one where I have just a bunch in on a line so we have our our button here says the mud button we have our form we have our select statement we have the mud grid so we could actually we're gonna look at how it does its grid and we have a modal so the model is a bit different here the model isn't um handled a hundred percent by mud Blazer you actually have to go out of your way and create the modal yourself through this mud dialogue component so this was not something that it gave you I ripped this off from the mud Blazer site this was the example it gave but that means that you have to go out of your way and create this so there's actually quite a few of these that you will have to create the logic for and then have that as a component they're the pro and con of doing that is that it isn't locked away in JavaScript uh like the bootstrap ones and obviously the the con is that you have to go out of your way and actually make it um but it does also make it more flexible for you if you feel like this dialect opponent needs more stuff in it you can add more stuff in it pretty easily or you know keep it as is and you don't have to worry about doing all these JS interrupt stuff that you would have to worry about when you go through the bootstrap the bootstrap Library let's run this one this was directly a template so that means I didn't have to go through the process of adding all the extra you know installation steps and stuff whereas if you do it manually that there is you're gonna have to go through all those steps and again I have a video for that um in case you want to go and do it this is how it looks like and this these are basically everything that was created so this is the form I believe the form already has uh some validation already in there that I'm not controlling right now we you could control it but I think in the commands if I go here go back here real quick sorry about that yeah so you could do the you could change the validation on the Fly right here whereas in bootstrap uh you have to go to the JS way of doing that and we have our drop down we have our grid so this is how the grid is going to look like this is its example and then we have a modal dialog which is what you just saw and that's how that looks like so this is basically a picky poison kind of thing and let's just go do the side-by-side comparison um real fast we're just going to have these two side by side as promised go to counter right here yeah it's fine perfect so uh this is a little bit different because I just copied their example now if not then it would just be like maybe two of these or just a text area and the uh input area but as you can see I think they're both pretty nice it depends if you like material design or not do you want to use the component based way of doing it where you have to do a little bit more work and you possibly might be stuck using mud Blazer conventions versus having to have HTML um versus having something that's a little bit more flexible if you already have a project and has a lot of HTML already and uh the only caveat is if you need to up use some special things like this you need JS for that and if you want to go beyond that then yes you will have to go into the JS interrupt route and create that kind of uh those kinds of libraries or those kinds of like files so personally I'm more used to the uh to the bootstrap stuff but that is because I've been using bootstrap with Razer for a while now and that's my go-to so I've already already know that I I should use the HTML stuff and then put them in the HTML and it's pretty simple to do and then I just write my own jsrp that's how it was for a very long time if I were new starting out I would probably look into mud blazer because I do like the material design and a lot of people have some some hems and ha's about it but I personally do like it and it's very simple this form here is basically a complete form with completed validation that's very easy to uh to change so if I showed you that here there's just some validation that's out of the box and it's pretty simple because it's all do uh all being done through the component as uh parameters so that's pretty nice of that the only thing I will say there is quite a bit of logic being done so I'm just going to go through the logic here because it's kind of unfair to go through uh the other one but not go through this one so there is a bit of logic that's already being done that I ripped from the uh from mud Blazer site but you can do this yourself if you are more inclined to using C sharp and you're more comfortable with this and then there are some things that you will have to go out of your way to do and then of course there are some extra options that mud Blazer offers that uh that you don't get with a bootstrap including the time picker and the drop down or the Drop Zone my bad so if you want to have one of these you're better off using mud laser than you are using the bootstrap components uh but I think they're both viable options and there's a reason why Microsoft added bootstrap in the first place into this because bootstrap is a pretty decent and not a very obtrusive way of having nice UI on your on your web website and that's another key factor if you already have a project do you want to download the mud Blazer product and then start using the mug laser components as Blazer components or are you more comfortable if you need to do like a massive change in the UI to use the bootstrap way of doing because it's less obtrusive in the sense that your component logic will not change if you use bootstrap whereas in my blazer it could change because now you're using the mud Blazer components that's something to that's something you have to uh figure out that's something you have to answer for me if I was starting a new project then I would just bite the bullet probably using the mud Blazer templates here at the end of the day uh unless I'm doing something really special there's really nothing too crazy that's out of the ordinary for this to use and I could always fall back to using uh Blazer normal Blazer components anyway uh with normal HTML and stuff the difference is it's not going to have the the nice looking UI unfortunately when it comes to this on the other hand then it's a lot easier to implement this with existing projects um there is some caveats with the fact that it does use JavaScript libraries and if you want to interact with those libraries somehow then you'll have to create a JavaScript libraries yourself and and this is how I did and then you know the look and feel of it that's uh that's a personal thing but either one is fine I think you could develop pretty good apps with either one in fact I've developed quite a few with bootstrap personally on a Razer on Razer projects in the past and mud Blazer it just looks good to me I have not created admittedly a fully first like model Blazer project of some sort but I have used it I have made videos on it and it does seem to work pretty well once you get the hang of the parameters in the API and the stuff that it has limitations on but you do save a lot of time either or so I think that would be it for the video thank you very much I hope you enjoyed my Boost job versus uh mud Blazer comparison at the end of the day every project is different your needs are different and you must consider the needs uh of those needs in order to choose the right Library so just to sum it up real quick use bootstrap basically if you don't want to create laser components and be stuck using basic components or use modblazer if you are basically starting out or if you really need those extra components that you don't have like the drop zone or the time picker and you really like the look and feel and you just want to stick with blazer you know logic all the way through your your uh your project you don't want to deal with JS at all and that's all there is to it so hopefully you know I'll see you later I'll see ya

Channel: Just Blazor Programming

Views: 7,904

Keywords: blazor, C#, blazor C#, blazor 2022, blazor tutorial, .net blazor, C# blazor, what is blazor, .net 6, blazor webassembly, .net programmer, programmer, software developer, how to blazor, C# developer, Microsoft, .net, wasm, blazor wasm, mudblazor, bootstrap 5, bootstrap how to, mudblazor how to, mudblazor vs bootstrap, bootstrap., bootstrap for blazor

Id: 3r3K7cM8Yzc

Length: 26min 0sec (1560 seconds)

Published: Thu Oct 20 2022