Blazorise: A Good MudBlazor Alternative? (Showcase)

welcome back to just Blazer programming I hope you didn't wait too long and today we'll be focusing on another Blazer package another Blazer Library called Blazer rise that you can add to your Blazer projects in order to give us some nice flaring colors so you're not just uh you know the last time I talked about a laser package was mud Blazer I believe so today we're gonna be discussing one of its competitors you know another UI Library another option that you can use for your packages however I do have some things to say about it because I have tested it out on my end and I want to bring it up just in case so you know what you're getting into in case you decide to implement this into your project so let's begin so the first thing you have to do is go to blazerrise.com and then it'll give you you know everything that mud Blazer had mud Blazer has all the um you know mud Blazer has all the the documentation on the website and so is this in very similar Fashions so you know it gives you the uh you know we bring all this stuff we're all this we are on our community blah blah blah you know all the good stuff I expect from a decently made package and that has a very nice you know uh front-end website so what I really care about obviously is documentation so in this case I've actually went through the trouble of building out some of these templates so that we don't have to watch me do them because it really is a step-by-step process or if you did like I did the lazy method you just do a very quick process and then you'll be fine but I will want to point out some different things that this has the metal Blazer does not have and also some issues that you might encounter so in this case um there is some modularity into the kind of Cs uh uh the look and feel of your project so you're not just stuck with bootstrap like you do you are with a Blazer you actually have the option of using material design or bootstrap four or five and design and Bulma demo now the only ones I'm going to show you today are going to be bootstrap 5 and the material demo and lucky for us they actually have uh a lot of their components already ready to go in their demos for uh blazerized material design and for bootstrap 5. so in this case it's only a very uh you know for General component use I only care about some components more than others you know buttons grids forms those kind of things are more important to me than like most other stuff because other things you'll be using the most however there are some things that I did notice within Blazer rights that um I will bring up to you but for now let's just look at these two components side by side this is this being the uh that being the blazerized demo for bootstrap 5 and then the material demo right here go to the UI I don't know if you could really tell the difference here it's not very nice look at because my screen is very small but it is you know bootstrap fives on this side and this is the material design on this side and you can do you know check differences out now in order to be fair to my blazer I'm going to use material design um as my showing of a demo so what you need to do in order to actually install mud Blazers that'll be the next part here is you could do one of two things you can install it manually or you can install it like I did and get it through a template so uh this is this being like uh do you remember mud Blazer when you had to install the mud Blazer like components and packages and stuff so you can actually make a template of it without uh going through all the manual stuff so all I did was install the.net template here so what if you don't know what I'm talking about we'll just create another project here we go create a new project so when you go through this process of installing it like all you have to do is really uh copy paste this to the command line or to your like developer command line that you'll see in the uh in the visual studio but once you do all that uh you just write blazerize and then you'll have your Blazer app so just like mud Blazer once you download the uh once you download this framework you'll have access to it and you'll have access to many to all the templates here so let's just say let's just create one to see that it actually gives you a little bit more options a little bit more uh stuff you can do before you actually go into the project to place your eyes test project it's good enough next so as you can see there's actually a lot more options here but most of these options are you know the actual like look and feel of it so if you want to change the theme from this primary color which I think is just blue to something else so I got the hex color chart here so basically in case you've never seen something like this before what you could do here is change these colors into something else unfortunately you have to actually look up the chart uh it doesn't have like a nice way of doing it here so I'm just gonna copy paste just the first one the normal color of this is like light blue or something like similar to the demos up here where is this color so we're just going to change it green you could just see it also you can choose your framework.net6.x7 and you choose what uh we're going to use latest server-based webassembly unfortunately just like um and I'm gonna do material design actually I'm gonna show you material design in a second so let's just do bootstrap five so what's going to go uh so unfortunately just like mud Blazer you don't have the option of adding like the identity stuff so that means that if you decide to go to the template route with uh Blazer rise you will have the same issue that you have with my blazer which is that you will have to if you are using some sort of identity framework you're using some third-party package you have to do it manually after the fact so keep that in mind if you want to use this as a template or if you want to add this as a project after the fact which it does allow you to do so instead of using uh uh instead of going here you have to go through these steps instead and add it to your project uh which I'm not gonna do I I'm just going to show you the template because you know uh they're both lead to the same result in the end of the day and see this is the Boost chapter 5 version and then I'm just going to quickly run it so you can see that the change actually was there and that this is a bootstrap 5. but don't worry you'll see the material design in a moment once this loads perfect so you see the the color light shows on that hex color chart uh appeared up here and if you go to the pages you go to simple form you'll see this is an example of a bootstrap 5 form and it also has a to-do app like all the templates have this they all have the uh a page a simple form a dashboard that tells you some stuff about it in the form and then a to do like little thing in here that you could just that works so you just ask but test you put add you have your to-do list here and it's ready to go so if you ever need to do one of those to-do list tutorials you could just do it from here or if you want to make a fun to-do list for you could wait for the one I'm trying to create uh later on so you know uh this is all functional so it all works and I tried it on both the bootstrap 5 version and the material version there's no real difference to it obviously the only thing that really changes is the material components and the CSS with some JavaScript in there for the material stuff and for the bootstrap stuff so that's the only real difference when you choose one over the other otherwise um that you'll get this template essentially you know with the sidebar here the nav bar up here and then the the pages that allows you to get that's it for that let's go back to our page here so when you see this you see basically everything you have to see if I go to the general UI stuff from the materials design it's not that different from what you'll get from mud Blazer I believe it's pretty much the same it is just material design and it's all it's all there so what I'm gonna go over now um instead of going over like every all the buttons and stuff like this we've already seen that before and I'm pretty sure that's pretty simple so um I'm gonna go over some of the differences that you have to keep in mind when you use blazerize so that being this actually so if I go back here various extensions and components so your component these are the components it brings so I'm just going to go over this real quickly these are all the components that it brings normally so if you download let's say the uh the normal Blazer right stuff off the bat like I did with your templates you added nothing else to it and you'll have access to all of these components so including our grids our buttons set the batch component our buttons are in there but uh but some things you have to keep in mind there's it's field component this is what you'll be using within your form and if you want to validate with for a form it's with validation um this is an example of it so this is basically what your form is going to be if you need the validation pieces if not then I'll show you how to do a data grid way which another example that they bring but I have one prepared also to show you some stuff um let's see what else got some drag and drop date picker um so basically um oh here's the button by the way I'm blind so basically everything that had mud Blazer has this has as well and there are some things that I don't like about this which I'll go over in a moment but here's probably one of the things that I'm kind of like on the fence about and is this piece here these are extensions so these do not come with your Blazer eyes um with your initial Blazer eyes package if you want to have anything like this autocomplete or this animate chart data grid which is something else um then the initial one then you will have to download these packages whatever the package is in so these are all individual packages and so that means that you have to go in there and download them into your uh into your project through nougat so if there is something that you need from here that isn't here then yeah you will have to download it now some people can say that this is a good thing because that means that if you kind of just pick and choose what you want some people are like you know what um it is kind of weird that you have if you're missing something here you have to go and check the extensions to make sure it has it but you know pros and cons for everything you might not need all this you might just need most of this up here or if you just want one or two things and maybe it's better for you that you only have um those uh specific packages however it does bring some stuff that uh mud Blazer does not have including the animate stuff so this is what I'm talking about when you see animation is when it's like just animations for your components and things I'm sure that a creative person can use the animation um uh library that it has that you can bring into it to make some game or something I'm sure that's possible however I don't think Blazer is a very good framework for making games however it would not stop people from doing so so that's pretty good also uh the only the really the only thing that I'm really kind of like whatever about is this drop down list so the way I like to do drop downs is through using a list and then having the list be filled up and you could do it either through a for Loop and then having the components or whatever uh fill up a list within a select box or in this case you just have it as a list and then it will be able to read the list essentially so so like that so it kind of sucks that you don't have this option up here uh the closest thing you have up here is this drop down let me see if it has an actual scroller boy so here we go so yeah so this kind of stuff here that you have to actually like have in here that's one way of doing it but I do prefer the drop down list method a little bit more um because it seems to be more like organized in my opinion and it's much easier to translate a list in this way again in my opinion so I am kind of sad that this is here but also this data grid is a little bit different than the one that is in um the one that that Blazer can bring the one that mud Blazer brings because mud Blazers if you don't recall if you go to the mud Blazer uh documentation real quick I know this is becoming a video of like comparing the two but you I obviously I think comparison in this case is appropriate but if I go to the data grid or mod Blazer here it says that it's experimental and to be careful with it which you know I think every JS package or any package that you bring into your project that's third party including laser packages are subject to change so that is something that you always have to keep in mind that whenever you update something that could break your project at some point down the line so I really don't really get this too much but I guess they feel they don't feel comfortable enough to say that this is ready to go but hey that's I guess that's what they want to do but apparently in this case it is ready to go so if there's and it also has you know video stuff so in case you want to build like a video related project QR codes like there's actually some more things in this that can be brought into your project than my blazer has I also it can bring in other you know types of and other UI can also change more where mud Blaze is kind of stuck with the material design and whatever it brings off the bat with that being said let's discuss um the data grid itself so here's one of the issues that I find with blazer ice and that is this here so in order for me to have because in this case I have a material design project and in this material design project I imported one of the extensions the data grid extension that is here so I followed the steps to import all this so that I'm able to have the same data grid that is within the um within this demo or something so if I went to the data binding stuff I have this data grid essentially so it's able to do stuff off the bat which is nice basic stuff nothing too crazy I like having that because grids are really annoying and if you have a free data group off the bat that can resolve a lot of problems for you then you don't have to go for one of the more expensive packages like telework or um sync Fusion or whatever so in this case the problem is that there are clashes in naming conventions so that's why you see this really weird component that has like blazerize.datagrid.datagrid because in order for me to access the data grid I want to access is coming from the blazerize.datagrid package but there is another component in there that exists that's called Data grid as well and you have to ensure you have to like um whenever you call upon these components you have to make sure that the specific component is being called upon and that there is no ambiguity between the names so that is one of my pet peeves with this particular library is that there's a lot of naming clashes including this one data grader I think is something a data Grid or having a grid is something that I think for web application development is really important because a lot of the times is how you're going to present your data or have your users interact with the data is through a grid of some sort or through form and it does suck that um the packages here are clashing in their names so that it becomes a hassle for me to actually use the right data grid and I have to find out what's going on with this and then uh figure out what the right naming convention is in this case it was Blazer rights how to integrate that they grid and I don't know I just don't like that it's unfortunate it does work though so if I actually run it you'll see you know both you'll see the material design demo essentially along with this um data grid uh extension and you could do apparently a lot with laser eyes off the bat which is why I like it but I do wish the naming convention I was a little bit tighter in this case I implemented the filtering that that comes off the bat so if I move this here so for Bob Bob there it is Stan uh what is it Chris so this filtering that I'm using is one that comes with within the package is called the data grid starts with filtering there's other stuff that you could use as well see if we could show it off contains ends with equals blah blah there's there's enough stuff here that you could use to get started on like a very basic grid and it has the ability to allow you to actually um make your own uh filtering method or whatever so you're not just stuck with it you can do your own stuff as well and it's you don't have to go out of your way for for anything here so so yeah uh and in this case I don't think this oh then oh it will okay so in that case well that's kind of weird that this was sortable false but I guess filtering and sortable sortability is different let me just show off the the sortability it's talking about doing this see Stan and Bob and whatever you could do that with these not this one strangely enough I don't know what's happening with this emo one and okay now it's back huh it looks like there might oh never mind because I'm having two filters going off of Once or two sorting things going off so I have to turn off one to do the other one all right and then in this case there's no sort you can't sort this one because you could explicitly tell what columns you want to sort that's pretty nice to have as well it is a little unintuitive that if you have one sorting method like this you can't sort with another one I I might what I would like to do is make it you know that if I decide to sort with just the last name that this will just be like forgotten but you know that's just a nitpicky thing of mine it still works you just you know there's there's some to be nippy things in this package that I have and yes you can still access the normal Blazer components in case you're wondering so I'm actually going to undo and edit form here that I have right here uh also this is one of the examples they use I just made sure to have just the data here and then made my uh my objects here so this is basically their example that they use for the data grid that all I did was add the hard-coded data so nothing crazy and you might think like why do I harp on like data grids and stuff so much and that's because every single job I've had it was always had to do with a form which I always have to work with data and always have to work with grids of some sort there was never one that didn't have one of the at least one of these things going and it's not gonna do anything I the submit button doesn't do anything here so I just want to show off this form the the normal edit form that you get off Blazer still works and it doesn't like break anything or whatever and this is the to-do list in case you want to see it of the material design one which to me looks a lot nicer I don't know some people hate material design I guess this is something can't really be helped here but um but yeah that's pretty good I do like having those tutorials there that are you know not tutorials but I pre-made more complex things there so that you can see how they are thinking when they make their implementations is it their layout and stuff so there's not much more to really see here like it is a little bit different they did go out of their way to make it much more different than um the normal Blazer stuff but it is it is I think as uh apart from some of the things that I ran into including the um the naming clashes and also the forms stuff because the forms I think is also another thing I really don't like in this package specifically so show that off so let me see can it show me the it's just a demo the okay I gotta go to the uh document here order forms so that's the thing if you want to find a form it's using the field you could use and then go to validation and this is one way of writing a form so I do find this to be very unintuitive that it's like this because Blazer has the edit form on top and then everything else within while in this case if you want to use validation you have to use this validation component instead and I'm not a fan of that because of the convention that it kind of breaks to do this instead of having like mud Blazer is following it correctly where it's using the mud uh the mud form and then it does everything inside so that makes sense uh because of the Blazer convention in this case it doesn't make too much sense to me to have the validation outside of it and then have everything else inside again you consider this nitpicky but it is kind of like it took me a bit of uh it did threw me for a loop because I'm so used to the you know you have a form and then you have your validation and then you have everything else inside of it well in this case it's you have your validation and then everything else goes inside of it so and again that's another thing you have to keep in mind that there are some differences that are enough to make you like scratch your head if you're used to the Blazer method of stuff and mud Blazer does not really do that my blazer had some things that um uh that that were based in their own conventions perhaps but they weren't crazy enough that you couldn't like figure it out in this case it goes far enough that it's a little bit more annoying but again this isn't unusable like it does actually work and it's actually has a lot more options than um than mud Blazer does if you want that also it made its options modular so that you don't not forced into using packages you don't want to use and there's actually quite a few that it does that mud Blazers just simply does not have including the animate video um and the I think QR code modblaze doesn't have that I'm not sure though but yeah anyways this is not a bad package to consider especially if you want to demo stuff there very quickly and you just want to use one of these components here I think that's pretty good to have and it does save a lot of time like if I were to build a video component or to build video uh uh you know some some video project I probably would want to use something like this and try to get it up and running as fast as possible or I'll answer some like things I have to deal with like or some requirements or whatever that stops me from using something like this I would prefer having the ability to have something that is ready to go to at least to um what do you call it a to have a minimum viable product using this that'd be pretty cool so it's actually not a bad package and I think it is a decent competitor to Mud Blazer if you want to choose that um my final thoughts on laser rise itself is that I think that if you want to use the material component stuff and there's not too much complications that you want maybe mud Blazer is better for you because it's a lot closer to the Blazer conventions you're used to well in this case there are some things that it does get thrown out even though it has some extra stuff in here that uh you might that that aren't that different and the only times I will say that Blazer eyes might be better to be used is if you already used to like the Blazer rise stuff or if there's something here that you want that isn't in my blazer including animate the video the QR code that kind of stuff otherwise then the things you should watch out for are the Blazer naming convention clashes because I think that's going to be the biggest problem going into this package is that a lot of these packages I believe the story behind most of them is that they were piecemeal packages from other people so then they've used naming conventions that were of their own like they had naming conventions that they had for their own packages and obviously the when you combine a bunch of people's different packages together into a Blazer ice package into the blazerized library as an extension you might run into this problem where you're actually clashing with them through naming Commission because these people didn't really work with each other at least that was this at least that is what I believe the story was for the anime Library so yeah I did some research before coming into this so in case if we figured out why I was having so much time I was researching some of this stuff and at the very minimum for the anime stuff it came from a different GitHub altogether and then the I guess the GitHub the guy who made that give up made this package this component thing here for animation for Blazer Blazer rise uh was was added into it like they I guess they accept it or something so I assume that this is gonna be the same story more or less for a lot of these or for some of these and that is why you see some naming clashes which is I think a problem and it's something you should watch out for so apart from that I do think that Blazer rise is a decent uh substitution for mud Blazer and if you don't like you know material design it does give you other options like ant uh bootstrap four and five and the other one uh Bulma I've never seen that one before myself but you have a more modular package here with a few caveats it still works and I do like the fight that has a to-do app in it that's pretty nice so that's all I really have to say about it I think it's a really good package overall and it does seem to work just watch out for the things I mentioned and you can make that work for you in case you need to um you know uh V MVP something really quickly so you know give it a shot give it a chance anyways that's my video for today and I'll see you later peace out guys [Music]

Channel: Just Blazor Programming

Views: 3,116

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, .net 7, blazorise, is blazorise good?, is blazorise better than mudblazor?, blazorise intro, blazorise beginner

Id: UrEgjc4TY1s

Length: 27min 10sec (1630 seconds)

Published: Mon Jan 23 2023