Top 5 Free Blazor Resources (plus a couple of extras)

I have been spending a lot of time working a blazer recently both on the server side as well as the client side both frameworks have come a long way and they both promise a bright new future for dotnet development on the web however when you start working the blazer you probably want to have more features that are natively provided this is common since Microsoft provides the framework but then lets you build the custom items you want fortunately there are many people working with tools and designs to help support blazer applications in this video I'm going to introduce you to my top 5 free resources for blazer plus I'll give a couple of extra resources that didn't quite make the top 5 now if this is the first video you've watched of mine my name is Tim quarry and it's my goal to make learning c-sharp easier one of the ways I do that is by teaching context there are lots of toriel's out there that teach you what to do I go a few steps beyond that to show you when to do it why you should or should not do it what pitfalls to avoid and what the best practices are basically I get you ready for the real world if that's the type of training you're interested in subscribe my channel hit the little bell icon to be notified when I release new videos now if you find that you want even more blazer server content I did just release a course recently titled blazer server in depth it covers a ton of ground from learning all about the parts of blazer through authentication data access and even deployment the link to the course is in the description along with the links to all the resources that I mentioned today okay let's get started our first resource the first resource is called matte blazer which is material designs components for blazer ok and what this allows you to do is create a different look ok so let's take the date picker for example now the layout this site isn't the best but I strongly encourage you to look past that because there's some great stuff here so date picker this is all the stuff you can do with it but let's scroll down to an example here's an example of our date picker notice how nice that looks also notice that we can empty it out we can also set it now so really nice features here also time minimum maximum minimum and maximum seconds enabled there's a lot of stuff you can configure in there and you've got examples for all of these the same with file upload we have drag and drop we have read contents of the file and so on there's a lot of stuff in here that you can work with text fields different ways of doing text fields and it's all done in the material design style so if you're into material design where you like that style then this is a great component for you also note that there is the ability of Themis so you can change the color and it will change the entire theme so really cool stuff there so that is matte blazer calm the next one is if you're into charting so chart j ass is a great tool for JavaScript but what if you wanted to use just blazer and not use JavaScript directly well don't worry we have chart js4 blazer now ignore the little bit of a type of there chat yes it's not chat yes it's charge yes but we have your simple charts you have your horizontal charts you have your time charts you have your pie charts basically if you can think of a chart there's probably a chart here for it alright and this allows you to to play around to see what's how it works and then to get the source code for it as well and the source code is right there so really cool stuff you can work with actually that's just the data for it but really cool stuff to work with and that's been currently supported and is continuing to be supported so if you need charts this is a place to go now these next three of my top five are bigger and bigger okay so this the first one is DevExpress blazer and it provides 15 UI components to work with blazer and this of course is free all of these are I'm gonna show are free so this is the first kind of component set I'm showing you and there's some really cool stuff you can do here from a nice data grid a scheduler a charts pivots and all the rest now just note one of the things I've found with any of these component libraries is that when you have components these these developers make it look great but for me personally I don't have as many two skills in the design area as they do and sometimes when it comes out it doesn't quite look great or maybe their stuff looks great but if I want to add my own stuff that's not in their components it doesn't look as good so just note that that may be an issue and think through how to add your own stuff with it so that you can kind of blend those styles so might a little extra work to blend those styles but the end result is definitely worth it so they do provide a lot of adders as well so that's DevExpress and they provide a free set of utility or components for Blaser next up is Radzin and this provides this is a great-looking set of components now so now we already have for example you have buttons but they have more of a take on buttons icon buttons disabled buttons but it was a secondary style and so on notice the source is next to each one of these okay but then they have some things that are pretty cool login forms and uploaders and containers and there's even more stuff you can do the forms autocomplete it's kind of cool so you can start typing in in words and then it will complete your your phrase so Li n oh there you go so we can choose the one you want all right field set cards if you want to design cards so on there is some charting there is some validators and other things star ratings like so so this is a great set of components is about I think 40 they said components and it just kind of works together again providing more components allows you to have more things that they do without having to create your own which then have that that styling issue making sure that your your stuff matches their style all right so that is the rads n components next up is probably the biggest set of components available and that's from sync fusion this is a sync fusion blades or components now I do want a quick pause here to note that that sync fusion is not free but and this is the reason why it's in my top 5 free list because for most of you it will be free so let's scroll down first to the pricing so the retail pricing if you look at sync Fusion for blazer right here is nine hundred ninety five dollars per developer for the first year and four forty five for the second year and thereafter that's a lot of money however I want to show you this let's go back to our components page from it if we go over here to sync fusion comm slash products slash community license you can get their entire product line for free as long as your company that you work for does not make over a million dollars a year or if you're an individual course you don't well in theory you don't make more than million dollars a year if you do Koff up a thousand bucks but if you don't make more than thousand dollars a year or a million dollars a year and if you have five or less people on your team those the two stipulations it's basically the same stipulations for getting Visual Studio 2019 Community Edition for free okay so this is the same rules as community dition so if you're using Visual Studio Community Edition then you can use this for free as well but it's not just Blazer components it's actually their entire library for everything all their components so Blaser asp net core MVC web forms JavaScript angular react view xamarin wind forms Excel a whole bunch of thing Thanks okay so this is everything in the kitchen sink as well and that's all for free as long as you meet those requirements so let's look at what sink Fusion offers specifically for Blaser they do have some nice demo showcase app it's really neat but then down here these are the components they offer and there's some really neat ones in here one of the ones that call me I was the barcode generator this is something that not a lot of components do well and my first thought was I hope they at least do a QR code as well well when you get into it first of all they they provide really nice demos on the web and they have an Etna simple bar code but look over here on the Left there's a whole bunch of different bar codes that you can select with examples come down here there is a QR code there's also a data matrix code so there's a lot of different codes you can use there's a source code for each of the QR codes or that are the other bar codes and basically if you have a bar code need this probably solves it so really cool stuff that they offer there now they do have a standard date pickers and calendars and schedulers and tree views and data grids and combo box input masks this is a really nice one as actually asked for this by a viewer the other day is does Blaser have input masks by default the answer's no well now you can get an input mask from sync fusion so mobile number you know if you start typing there's your mobile number which is not really a number but that gives you a nice mask with the dashes even though you're just typing in the numbers okay did at birth again if you start typing there's your date of birth and it fills it out very nicely and it indicates the user if they start typing they say I was born in 2015 well no you have to give me all were characters not just the first two there all four numbers so proc key same thing if you got to start typing here is the layout that a product key would take okay so nice math test text input so this is sync fusion they've got a ton of stuff here they do have a PDF viewer it's kind of neat that you can add as well that allows you to view PDFs they even have form-filling PDFs so if you have a PDF it's got four minute you can start typing out a form and filling in the information okay so that's pretty neat alright and that is sync fusions Blaser tools again sync fusion doesn't just provide Blaser tools it provides tools for a lot of other things as well and while it's not free if you work for a larger company and you're using it for your company then it is free for you personally so let's just say you work for a large company but you're not doing development for them your or even if you are you're not doing development with saint's fusion for them but you want to do some personal stuff at home to build up your portfolio or maybe even to do some side work with with clients of your own well you can use this for free because it's not under your company it's under you personally so you just can't you can't do it for your company if it kind of makes more than million dollars that's the big key here don't try and rip them off they are doing some really really positive and encourage you to respond in kind okay so don't don't try them off so those are the my top five we have material design we have chart j/s then we have the three component libraries one from DevExpress one from rad Zen and then one from sink fusion so that's my top 5 but I had a couple more that didn't quite make the list and I think that they should be at least mentioned and the first one is this blazer extension this is the nougat page for it it doesn't have a great landing page with the showing off what all these different extensions can do but this is if it's total of seven packages here and most of you probably won't use for example web USB is really neat but it's not yet supported on most browsers it's just supported on Chrome for Android and Chrome for desktop mostly but that allows you to talk to USB devices on the computer that you're connecting to that's kind of neat but the one calling I really was as blazer died extensions dot storage this is really neat it works with local storage and session storage and you can interact and save data to a client from blazer okay so that's really neat we also have more information or more connection for signal art we have some more work with logging and even work with the HTML canvas to do things like drawing on the screen so really neat stuff they do have some things like notifications which are not quite ready for primetime it's the version of zero point one point three so it's not quite a 1.0 yet but there's some neat stuff going on here if you decide you want to use one just click on it and then under setup there is great documentation so here's how you set it up here's how to use it and here's how to inject it on a page I mean it's all laid out right there for you so great stuff here especially around the storage storage and logging so with that the other one is this blazer context menu this is a one that was interesting to me because I never really thought about having a context menu with blazer I always think of blazer as a web framework and so I always think only left click but what about right-click normally you right-click on something to get the typical browser menu but what if instead you right clicked on it and you got your own list that's kind of cool for example you have a grid right click on someone say hey when I reload that grid but you know what I want to delete this row wait actually I want to set this is vacation or this is dangerous all right so neat stuff there's a bunch of things you can do with this like this is a double click right menu item we have different animations like fade in so you can have see different animations and different animations at different levels so it's zoom for this level and slide for this level you can create templates like a dark menu you can have dynamic items in the list so example it says check if I click it it checks the box now it says uncheck I can also delete that item ok and there's a whole bunch of stuff you can do that many om stays open even when I'm clicking somewhere else or I can say Auto closed when I click somewhere else and it goes away so really cool stuff here for context menus specifically so that's my top 5 plus my two kind of honorable mentions I would love to hear what your thoughts are which ones you like or use and which ones maybe that I missed or or didn't include in this list that is quick note I loved how do you leave in the comments which ones I should include but try not to put a link and the reason why is because YouTube filters out links and so you probably won't be able to get your link on the screen I might be able to catch it in a spam filter and bring it over but I get a lot of spam and so I might miss it so just note that any better to tell me what it is rather than have an actual URL link to that I am okay but I'd love to hear what your thoughts are which ones you like which ones you want to use and which ones you want to see me add to a future list ok thanks for watching as always I am Tim quarry

Channel: IAmTimCorey

Views: 43,911

Rating: 4.9896307 out of 5

Keywords: free blazor components, free blazor ui components, blazor c#, blazor components, blazor webassembly, blazor server side, blazor client side, iamtimcorey, tim corey, asp.net core, c#, blazor components library, devexpress blazor components, radzen blazor, radzen datagrid, chartjs blazor, blazor chart js, devexpress, syncfusion, syncfusion blazor, blazor extensions, blazor extensions canvas, blazor context menu, blazor course

Id: i1Kric5tqYk

Length: 17min 32sec (1052 seconds)

Published: Mon Apr 20 2020