On .NET Live: Radzen.Blazor - A free and open source component library

[Music] e [Music] e d [Music] [Music] [Music] d [Music] [Music] he hello everyone welcome to another 60 Minutes of unscripted donet entertainment our mission is to empower the donet community to achieve more I'm your host Mya wiel with my co-host David Pine and maybe Scott will show up later we're having technical difficults this morning I let me tell it's been chaotic but I'm happy we made it and we have today uh and I didn't ask how to pronounce so hopefully I won't screw it up as an Ask cour Chev um please introduce yourself yeah that's about right that's how I pronounce my name so I'm at and I have been playing with net Technologies for the last 20 years and I have most of the time working with the UI stack and making components us stuff so that's that's mostly what I'm going to present here now today yeah so I understand you're going to be talking about rats and Blazer so I think like when we talk Blazer everybody gets excited um so do you want to give a quick intro about what the project is and yes sure uh I think it was in 2018 when we first heard of Blazer and it was just a work in progress back then and we decided what something was missing at the moment there wasn't a big open source UI component library and we needed it for our own commercial product so we decided why not we just make one we've been doing it for almost 15 to 20 years now so why not do it once again we created the component library and one year later we made it open source and I think we are very by now it's very well used and quite popular I would say and we have uh users from all around the world all kind of Industries we have also a lot of uh Community contributions which is what open source is all about and maybe that's uh that's the gist of it all right we have uh yeah no go ahead well I can show maybe I can share my screen right now to yeah why don't you share your screen and uh I know everyone that watches is usually really excited about Blazer so uh as I understand it and allow me to summarize you have an O an open source project um that is essentially a component library for Blazer so and you You' said you've been receiving uh Community contributions and how how long again has this been uh available uh we made it open source I think in uh 20 uh 2020 if if not I'm not mistaken sure but we started publishing uh a versions on nuget from the very beginning I think it was in 2018 or it was Blazer was not official even official yet perfect and is there a team working on this on this Library yeah we are yeah we are three of us uh at the moment it's only two people third one we have a UI designer on board which is why everything looks so fresh and beautiful awesome I'm looking forward to see what kind of components you have and what they look like yeah I just I want like to see if sharing Works can you see my screen yeah there it is there it is okay so uh oh this is gorgeous so what you see here is the material 3 uh theme we also have fluent UI and uh a few others this is the our Flagship component with this is the data grid probably most of the data driven applications have one and this is for sure the most commonly used component from our library and recently we released a very important feature which is uh accessibility features for example we have a high contrast variant of the theme which is can be seen here it's a subtle change which improves the contrast for uh users that needed we also introduced uh keyboard navigation lots of other stuff look like it's packed with features like there's I mean whenever you look at a data grid for example just understanding like the mechanics of all the different pieces behind to actually make this you know fully functional it seemed as though you've got filtering you've got column uh width you know on the client side so you can adjust that you got P yes we have all the stuff yeah you you have pretty much most of the stuff data needs to have nowadays yeah it's a very complex component and as I said probably the most commonly used one there's a lot of other stuff as well there's uh form stuff there's uh some commonly used features like uh things you you commonly need in your web app for styling text for example forms let me find the forms and this screen that you're sharing is this this is actually the website for your uh your your your R yes this is awesome yes this is uh the demonstration website which features every component it is also sort of documentation people can uh even uh edit the source code of the demo and play with it live so it's uh let me try change something oh that's awesome it's that's a pretty much a standard it's a given these days you can play with with the code live so you can see what features what the features are try and experiment uh that's the form we also have uh chart components the mostly the the stuff that you're commonly using in your uh data driven applications for creating dashboards and stuff all kinds of components you said it's it's quite packed up we have more than 75 now I think components wow and a very nice thing to be to be in open source is that a lot of the new features and a lot of the stuff you see have been contributed by outside people that are not from our organization from the community and that's that that was great that's awesome and someone was asking if Blazer is official and so just to clarify Blazer is official uh but what this project does is complement blazer because one thing that it doesn't have is the component library right so it's like if you have data applications and things like that that you have to connect and and show your data or things like that it just as like makes it easy for you to uh make Blazer com uh apps by adding these visual components and forms and everything that makes it easier to author um your Blazer apps right abolutely we also provide a as you see uh a complete styling of the application so you can quickly get it up to speed you you you wouldn't need uh finding your uh the visual look and feel of your app if uh if if some of the existing theme is is matching your requirements just pick it up and get into development without the need of uh trying to find a theme or right fiddling with CSS and other stuff which is let's be honest this is not the most inspiring thing to do with CSS and all the other stuff browser issues and whatnot we do have a question here from get your second home on YouTube they're asking uh where can one get the Benchmark for these components so I'm assuming they're asking about some of like the rendering speed or loading speed and did this website um benchmarks specifically what kind of benchmarks performance benchmarks or or imag yeah I'd imagine I'd imagine um performance benchmarks yeah I don't think we have any at the moment maybe we have a I think there was a there is the of showing performance of the data grid with data bound with to a lot of items okay yeah they they specifi I'm not sure yeah that that's that's that's probably it the performance them of the data grid because that's that's the most data intensive component that's uh that's going to be most commonly used with a lot of data it also supports virtualization which means that you can also use a r of items and just everything is done automatically it seems very responsive presented at the time especially it's pretty responsive yeah yeah absolutely well that's awesome um yeah I I know by the way this go ahead this whole website is available so people can just download it and play with it locally it's here in the in the GitHub repo where the the rest of the source code is and it's here can be downloaded by everyone and test it yeah one of our viewers is specifically asking for a data grid that supports 300 columns who would read such a grid well you would be surprised but we we we've seen such requirements and they're not not that uncommon yeah people usually use those grid like as some sort of front end of some database database table and they just present all the components and usually there is some Yi for just picking the picking just the components that you need like this you you can hide and show components that you need all option that's perfect that's literally feels not I'm not quite sure how well a data grid with 300 columns would perform but it depends maybe it would not won't be that bad yeah yeah interesting and this is like free to use all the all the components are like yes all the components are free and open source the thing that is not free are a few themes that we have the soal premium themes okay they are just the users can check them out as a preview here here and we have a those teams are part of a premium option that we have a part of our paid product which is also Blazer related that think over there Zen Blazer Studio but there are plenty of uh three themes that for serial UI theme which is free that can be used free of charge customized and without any limitations so yes to answer the question simply those components are free to use for commercial applications without any obligations and come with the complete source code which is in GitHub and they're licensed with the MIT open source license awesome this is great we do have some more questions coming in uh one of our viewers on X is asking for the GitHub repo link I just shared that there yes that's the that's the link perfect perfect and then um we've got someone asking so like could they combine um these Blazer components with uh JavaScript framework components like data tables jQuery or bootstrap yes you can uh by the way this website that you see is using bootstrap at the moment for uh some of the layout stuff so even this is the the the the Blazer website that we you see is using uh bootstrap but yes we've seen a lot of people use mix existing JavaScript solution with Blazer and Blazer is designed in such a way that it doesn't interfere with those libraries so you can just pick up everything you want absolutely um and then there's also another question here any chance of a candle chart in the future yeah why not why not um we don't have yeah I was going to say you mentioned it's open source so I would assume one of the common models is you know post an issue proposing that type of functionality and work with the current maintainers and uh you know perhaps work yes yes to be honest a few of the newer chart types have been contributed by the open source community so why not we definitely accept PO requests and that's how quite a lot of the new stuff comes comes into life and someone is asking about keyboard navigation and what is data GF I don't know what data GF maybe I don't know data grd keyboard keyboard navigation was a recent addition maybe one month ago added to all of the components there is a accessibility page here which is discusses most of the stuff and there is a keyboard navigation section at the bottom of uh of of the components pages that show what the supported here is for the DAT I love that that's awesome that's great it shows yeah it shows what the supported keyboard shortcuts are how to navigate in the component this is very well done very well thought out beautiful beautiful design I really like it um we do have another question here actually lots of questions so keep them coming we love it when our viewers are engaged uh this much so they're asking how long would bug resolution take like if they find a bug and they put it out there you know well it it depends on the book actually but we try to make it to to to to act very quickly we also make releases sometimes daily so usually we respond very quickly depending on the the severity of the book on the reducibility of the book for example if uh if there is a clearer with a sample some sample code or something that we can start immediately looking at we usually respond very quickly provided that we can fix the bug as well sometimes uh books are very there are some very hard to fix for example if they're uh hard in require a lot of changes sometimes we we can just refuse fixing a book but that happen very rarely usually we respond within one day at most awesome that's great um and then someone's asking very specifically for something that we haven't talked about yet and I'm assuming you were going to at some point so can you show us how to make a new project in the reden studio I wasn't you weren honestly I'm not prepared for presenting I'm not even sure if I can share it outside of of the browser considering that we use sure but sure I think we there is a lot of videos that I think probably there is a video here everyone can just click here see the action and see how how this thing works okay so you have so you have a specific ID to help you build this uh yes we have this this is this is uh this thing right here at the bottom is our commercial offering this is the thing that is uh what my company is making the business of it is an IDE that data driven Blazer applications and which is the applications are powered by this that I have been presenting so far and it a key feature of this product is that it shows visually what what the the the application looks like even before building it it supports the what you has a what you see is what you get visual designer or Blazer apps which is probably its unique feature and maybe uh to avoid just launching a video everyone can just see in action button and check the video it shows how to create an application in BR Studio I I did share the link to the studio itself and as mentioned here on um our YouTube one of our viewers mentioned that the Community Edition is free um into Echo yes it is a paid product yes it it has a trial version has after the trial ends it downgrades to a community version which has a few of the features disabled okay and the what you see is what you get just so everyone knows that's like a a basically a designer that lets you you know drag drop yes yes awesome I can probably show I'm not sure if I can uh share anything outside of the browser right now yeah you can I think you have to if you just share that app you might have to stop sharing share again um a different window or a different app depending on how let me try yeah let me try while you you were setting up um de was asking does Ry have LTS versions like what is the support period per version uh support period we don't have LTS versions uh we try to be Evergreen which means that we we believe people should use the latest version of always and supporting an LTS is a bit time consuming and we try to we try to do what's the the least amount of effort for us support so uh we don't care yes at the moment but we try to fix stuff as soon as possible and make releases very often to n get so uh is never stale box or stuff like that I I don't think I would be able to easily share screen outside of the browser because I'm not sure I I can manage at the moment unfortunately um I think if you open up a separate tab is it it's you said it's browser based oh I think I can now uh no it's not browser based and I think I no I don't think I would manage to do that yeah because it usually lets you either share a tab from your it's not a browser based solution so that's I think that's why I can share it it's a desktop app so it's an external program it's not in my browser it's not in Chrome so I I don't think I can share a screen at the no worries no worries um well like we've mentioned before we dropped the link to the studio in there and there's uh already some YouTube assets that share demos of it so that's that's fantastic uh so let's keep the questions coming thank you um you want to share your your browser again and maybe like uh I I saw that on your GitHub you have some demos so maybe you can share like how it looks in the code there uh you mean the this thing here we go the no like just just um I don't know I saw that your rson Blazer repo has some demo so I don't know if that's something that is uh worth yes yeah here is the the GitHub repo and the demos that are here is the thing I that I've shown on the other browser which is the Blazer ron.com okay so the website so this is the source code behind what we were just looking at rendered on the browser yes yes yes awesome cool so and the actual source code of the component is here as well for example here is here and data grid and if someone wants they can just CL the repo and play with the source code fix a book or Implement a feature so yeah I guess what's the future of this project and um knowing that like things just recently changed with net 8 and Blazer has these rendering model or different rendering modes um yeah I'm assuming that would impact a repository like quite a bit no maybe yes yes it impacts uh the UF stuff quite a bit and we have to do some stuff on the technical side to support modes which we did there are some uh some extra configuration that has to be made to to make things work as expected we also plan to add deeper support for the new blazer static rendering mod modes at some point which is uh making some components work without the need for interactivity enabled mainly the form components and we also plan always release new stuff in new in the forms of new features new components uh user um somebody earlier requested new chart type new chart type are also on the road map also stuff that we regularly do and of course we also a a big new thing that we plan this year is to support most of the feature of our premium product in Visual Studio itself in the form of a visual studio so the whole design Time stuff uh the drag and drop toolbox visual development to be available in Visual Studio Professional without the need for a third party solution as our existing product that would be gamechanging it's like bringing back the designer that existed for like web forms so many yes yes that's crazy the good old times yeah the good old times it seems that people like those times and don't mind him a designer for UI development and we plan to fill this Gap with our new product which is in the works at the moment so that's that's please go ahead can you your question no they were asking if component if component Lo effect yes they do I don't think you see it yeah uh so it's just like a simple progress indicator and okay yeah that's that's the built-in one but you can sure you can Implement a custom one maybe like the one here this is an example which fetches GitHub issues from the aspet get her repository and makes a small dashboard out of it oh that's awesome nice Ste St Sanderson is quite active yeah yeah as one can imagine yeah so yeah there is there are ways to implement loading indicators there's progress controls and do you have a road map of what's to come like what's in the in the project pipeline yes we do and it's mostly about our commercial products but we have a a public road map and we're very open to user feedback is that in the repo as well yes it's in the repo and people can we people to loog issues uh in the in the repo and they can request stuff and it gets prioritized awesome do you want to show like like because the demos was showing how you build the pages so is it is it interesting for us to look at some of those and how like the implementation is on for like a page like this for demo yeah yeah yeah that's a really good point yeah I'm I'd be curious like you know like what's all required like say I do well one the two-part question to expand upon what Myra was saying so if you have like file new project do you guys PR provide any templates the template is commercial product okay this is it creates a it creates a ready to use applications and for people that just use Visual Studio we have H some nice getting started instructions okay there is also a video Perfect which shows how to download the the library nug yes okay and how to include It theme a CSS file the JavaScript and how to use a component it's a few proces is there is there not any wiring up of services so if you install and then you reference the CSS and JavaScript I'd assume you'd have to be touching program CS at some point to say add services or no yes there's there a few of the comp there are few a few of the components have some Services okay required for example the dialogue and a few notification there is a single method that can be used to register all the services okay perfect it's it's this one y y awesome and then once and I see there after donet 6 uh and I saw in the code there was some um some some conditionals about donet 5 or later is that some like do do you just follow what the donet team follows in terms of supporting versions or like how what is your yes we we at the moment we support a few versions a few older versions that are probably out of support by m Microsoft MH and we plan to drop support with the next major update of our library for example net3 and Net 5 we're going to drop support for those in maybe yeah a a few months time we we generally try to support only the versions that Microsoft provides special support for so that's that's why for example with support. Net score one or two and we'll drop support for three and five very soon okay in in general we try to support uh every new version that appears for uh maybe not as early as at release candidate level we we we usually wait for Microsoft to ship on official version and then we release support for it if it is I mean if if we can do it in a in a quick way we we just ship it as soon as possible it depends usually for example with net a there were a few changes related to the new rendering modes as you as you mentioned and we needed to make some research and see what how to support those new modes but at the end of the day we managed to do that very quickly and we we were ready basically with the release of net 8 we had a version already with the of our library supporting it and was that like the day of8 or is that like a little bit after or this time I think we managed to release the same day at the same day with net date with the release date we we knew ahead of time when it was going to be and we manag to ship it very quickly this time Kudos that's awesome that's a big yeah yeah yeah that's the that's the first time I'm back in the day was it's not so easier yeah that's this time we were prepared yeah awesome yeah and I think that's the beauty of having the previews and and and the release candidates is that like you know you're getting close to a stable launch and um like like open source projects like yours can benefit from that and test their um their projects um like I I own the donet website and we also like test the the releases every month so that is like we're making sure that we like basic functionality is not breaking as well um so yeah thank you thank you for for working on this project and testing out as well all right there's more question I think Blazer being open source yeah no no no finish please please finish I I just wanted to say that Blazer being open source is a tremendous help for us maintainers because uh we can just look at the source and see how things are supposed to work and being a developer I appreciate very much that I'm working for a framework that is also open source and I can see the ins and outs of it how it works how how it one is supposed to use the apis and not just try to guess I love that that's awesome top of it um so riddle time from YouTube is asking in addition to the demo that we saw and like the documentation website are there any apps that you could share that are using raden like in production anything that we could like look at on our own time or now in production maybe um I don't think I can we don't have a list a ready to go list and I don't think I can I can't think of anything public at from the top of my head I the reason for this is uh I have a an answer ready because we have been asked before I think at the moment Blazer is mostly used for internal web apps interet stuff uh apps that are not public most of the time and I think uh this would change a lot with the new rendering mes that Blazer has introduced maybe for Blazer hasn't been considered for public website development that much until now and I think this is this is one of the reasons there are not so many public web apps using Blazer uh we ourselves have been using a Blazer application in production for our internal use since its uh first public release and most of our business relies on that application it's uh it it's an internal app that basically drives everything it's does payments processing invoices and all kinds of stuff it's made with our components our implementation so that's uh we're confident things will change and we'll start seeing a lot new public web applications made with blazer there was a new but I think I missed it no it was just uh R time was saying that consider hybrid yeah and this component would be a big help so it's like Yes actually I I think hybrid Blazer has has legs and a lot of our users have implemented our components in hybrid Blazer Maui applications with success we have also adaptability in uh the maui.net Maui stuff there's our ID product has support for opening hybrid Blazer apps and also building and running them in emulators simulators depending on the target platform so I definitely think creating the Microsoft is doing a great job creating stack application where you can create apps in bler that Target desktop mobile devices and the web that's that's amazing awesome [Music] um let me see if there any other like there's someone that says that is going to get your second home said thaning you and it's going to do some research and to to implement um is there any anything else that You' like to share or ask the community like what is your ask for the people that are watching here I think I I kind of did miss that one I'm sorry no worries um I was just asking uh like if you have any requests to the viewers in terms of do you want them to try it out to give feedback to contribute like if you could ask yeah sure just go go try it out let us know what you think go try it out L some issues awesome yeah we do have one other question here this is really a general one um they're asking how secure is Blazer how secured is Blazer well I I think it's it covers all the basic all the the requirements I think it's secure it it depends a lot on the hosting model that you pick for example if if you pick server side Blazer it's everything runs on the server so that's level of security on its own uh I think some people are maybe a bit uh scared that web assembly Blazer is downloading assemblies uh and executing them on the customers's browser but I don't think that's a security issue at all right I can speak to that so web assembly executes in the same sandbox as JavaScript so it's as secure as what JavaScript would be it's just it can't format your hard drive and it won't steal your emails no access to that and our product is built with security in mind right so if you find issues there is an email that you can report uh like don't report on the public repost because if you find security issues like there is a special uh process that you have to follow uh because we also don't want to expose things early if you find something so um so yeah like it it should be pretty secure we've got more questions coming in better late than never thank you friends uh Jose is asking is raden ready for aot compilation ahead of time I'm not quite sure if what the expected behavior is for ahead of time is the user asking about supp say asking about uh stripping perhaps of cod or what yeah there's Al so answer is yeah well I was going to say there's there's recent articles about it and a lot of Open Source libraries haven't been historically because it is a newer uh effort um and there's a lot of work to be done so it really depends um it depends on how much your in that case I don't think I can answer at the moment we have to make a research and see what's possible and what not I'm going to keep it as a task for myself to yeah this the big questions that Library authors should be asking themselves if are they doing reflection and if they're doing system text Json serialization for example are they using the appropriate apis that have like the Json type informations um th those types of things are are some of like the lwh hanging fruit but then also the the furthest reaching um but there are certain ways that you can able um like the the flags for for evaluating whether or not your library is um aot compatible I'll drop a link here in the chat read more about that yeah uh let's see there's more more questions coming in what else we got here uh is any big Commerce product currently using these components in real life well it depends on what big Commerce product really is but again as I said most of the customers and the apps are internet I don't think any public big public application is using our stuff at the moment okay that's the honest response yeah that's perfect yeah and uh Goan is asking what is the advantage of Reds and Blazer over nextjs or other framework I I have a hunch on what the answer would be is that like the same advantage of Blazer that you don't have to use JavaScript yes it's yes it's uh the the the virtue of having C in your hands is to me a big advantage over nextjs and any other JavaScript based framework I think C has a lots of provides a lot of benefit for productivity and those are I I've done a lot of JavaScript development myself and have some have an opinion on it but I I I definitely think C is a lot better for making business applications as quickly as possible provides a lot of uh features out of the box the net Frameworks has tons of existing functionality that you don't have to search as an npm package and include in your app so that's probably that's my take on this awesome I as a Blazer developer concur I agree with you 100% yeah all right if we like let let us know if you still have more questions uh or let like is there anything else that you'd like to share with us well I I I I think I covered most of the stuff the component Library the I shown you the GitHub prle yeah we canish few minutes early GL answer we do have a good question that just came in yeah this is a fun one yes sure do you have lazy loading lazy loading of dependency libraries like it was in silver light I for for whatever reason I've missed completely the silverite development I was I did too I was so I don't really know if uh if this Compares uh but lazy loading the component Library itself does not Implement L lazy loading of dependencies but it does doesn't have that many dependencies itself it's it depends only on a I think the the stuff that's already provided the web uh it it has Maybe One external dependency the the dynamic link open source Library I think that's that's probably the only third party dependency it has everything else is Blazer itself awesome and then yeah F I think the dependences yeah there uh a viewer on Twitch is saying that if you run Blazer server all the dependencies are loaded on the server so it depends really on the modality right yes but the dependencies of uh R and Blazer are the dependencies that your application has to begin with is the Blazer component themselves the the built and stuff awesome I I personally learn a lot like I haven't used components so I really like it thank you thank you for coming on the show and showing us um thank you for having me yeah absolutely and I want to thank all our viewers for being here today with us uh we will have I think another Blazer show coming up we have Andrew um Andrew uh talking about how the Blazer ecosystem is more mature than ever and house owner helps to create like clean razor code so that's next week so join us again check thank you for watching you can check out other live streams that we already had um on.net lifee and um we'll see you next week thanks for joining us awesome thank you friends bye thank you bye [Music] bye

Channel: dotnet

Views: 6,004

Keywords: dotnet, blazor, livedemo

Id: 0PaPPf7wFOo

Length: 53min 16sec (3196 seconds)

Published: Tue Mar 05 2024