Next-generation Blazor components with .NET 6

we're going to go and introduce a new friend coming in remotely yes javier calvaro nelson hopefully is on the call javier can you hear us hello all right there he is how you doing javier good how are you i'm doing great great to have you with us okay awesome yes thank you um so uh i'm in case you missed it i'm dan roth program manager on asp.net and javier is going to be joining me for this part of dot net conf javier do you want to introduce yourself real quick sure hello everyone i'm javier i'm a software engineer in the espionage team fantastic uh javier also i'm going to embarrass him for a moment javier is in spain and a few weeks ago i had the opportunity of watching javier make spanish paella teach it how to make spanish paella for charity and i have never felt so hungry in my life like the dish just looked absolutely amazing amazing he's an amazing chef great job javier thank you so in this time don't tell valencians that i made paella because they will not believe me fair enough so in this talk what we're going to talk about is all the improvements for doing blazer component authoring in net six so blazer is blazer apps are built out of reusable ui components these components are built using uh stan open standards html css and c-sharp instead of javascript you can take your blazer components and you can host them on the server you can host them in webassembly in the browser and you can host them in native client apps like mobile and desktop apps using a hybrid approach and the great thing is that regardless of where you want to host your components the way you author them the way you write them is exactly the same the ability to reuse blazer components across all of your applications makes building ui way more productive now there are blazer component libraries that are offered by all the major control vendors they have everything from grids to charts to tab views anything you need to get to build a beautiful modern web ui there's also a really active blazer open source ecosystem that has built all sorts of things blazer component libraries test frameworks tools you can find all sorts of blazer open source projects by consulting the awesome blazer repo at aka.ms awesomeblazer now i've also got to give a shout out to an announcement that hunter scott hunter made in the keynote there are now blazer fluent ui components this was an effort by the fluent ui team where they provide now 40 plus blazer components based on the official microsoft fluent ui web components these components are fully accessible they support light mode they support dark mode and they support the latest fluent ui visuals for windows 11. and you can integrate these blazer components right into your existing acemic core and blazer applications to learn more about them go check out the blazerfluent ui components at aka.ms blazerfluent ui now if you're a component author there's a bunch of new improvements for you in dot net six running component libraries components how can we do this better well in dot net six you now have support for required component parameters it makes it easier for your users to figure out what they need to pass to your components you can now have child components infer their generic type parameters from ancestor components this can be really useful when you have an elaborate component hierarchy that are generic and they need to orchestrate and collaborate on data you can now define your generic type constraints directly in your razer files and then we have a bunch of improvements around javascript libraries when you're doing javascript interop you can define javascript modules per component to sit alongside your component code and maybe its component specific css styles we have new support for javascript initializers which is a way to define initialization logic that will run before or right after your app your blazer app has loaded we also have experimental support for integrating javascript build processes into your existing.net or razer class libraries so we're gonna take a look at these new features right now all right so let's hop over to the demo application all right here it is so we have a blazer application here this is this.net demos and then we have a razer class library that contains all of our next-gen blazer components implemented with dot-net 6. let's go ahead and run this to see what this looks like all right so we've got a simple little blazer application and so the first component we want to look at is this chart component so this is a chart component it's based on svg it's doing all the drawing using svg and we can chart out multiple data plots we even have this little check box at the top so if we want to show the average of all these uh sales plots for different regions we can show them if we don't want them we can uncheck the checkbox and then they just disappear okay so let's go look at how this component is implemented or let's look at first actually how it's used so let's go into the blazer application and we're going to look at chartdemo.razer so this is the page where we're using our chart so there it is so this is our chart component and the way this component works it's a generic component so you pass it a list of items a list of domain objects that you want to use to plot out data for now the chart itself doesn't know how to extract like x and y coordinates from those items so you pass it a delegate you know a function to say for each item this is how you get its x value and then there's some other component parameters that you can pass to it to sort of configure what the chart looks like and then as child content the chart component has these chart line components they're also generic components and they provide the y values so they say well for any given item this is what the y plot for the x y coordinate should should be the really nice thing about blazer man is awesome is that in this child content it's we can just put normal razor syntax in here so we can have this if statement right in line to say you know what if we're not showing the averages don't bother rendering this chartline component otherwise go ahead and do that so it's pretty pretty sweet nice and nice and flexible okay let's go look at how chart is implemented i'm going to do that by right clicking and saying go to definition which is now supported by the new razer editor it's pretty cool okay so like i said this chart component is based on svg there's a bit of svg in here if you don't know svg don't freak out it's actually fairly straightforward this first section is just plotting the x and y axes this next section below is plotting out on those axes the little tick marks and then labels for the tick marks on the axes and then down here we have the child content for that chart component where it's rendering out all those chart lines so we can get the data plots and then at the very bottom we have our chart key okay that looks cool so now the first thing i want you to notice is down here at the bottom where all this components parameters are being defined we have this cool new thing which is editor required we can mark component parameters as being required that the user really needs to specify them in order to use this component so if we go back to chart demo.razer where we're using the component let's remove one of those required parameters we're going to remove this like items right here so let's go ahead and cut that and we give the editor a second to think about it and it's giving me now a nice warning saying hey you uh the chart expects uh an items collection and you didn't provide that so you now have support for you can now mark parameters for your components as being required super nice yeah so one of the nice things about this by the way is that this is an editor on the check we cannot really tell by how blazer works that you're actually like passing a parameter 100 of time because we have feature that makes that essentially impossible like splatting however with this editor require at least we give you the ability to see signal that you're expecting your component consumers to pass in that parameter yeah okay so this is actually that's a good point this is really just a design time only check it's not actually enforced at runtime so as a component author you still have to worry about whether some of your parameters might actually be you know be null or unspecified but for your users they get this improved experience of knowing hey you really need to provide a parameter for a value for this particular parameter great exactly all right so let's go ahead and undo that so we have we can get rid of that warning and be back to normal all right cool now the next thing i want to show is how it's actually well it's actually something that's a little bit clunky about this chart component which is right now i'm having to specify this t item for each of the chart lines why is that well on the chart component it's it's a generic component but i don't have to specify the type for t items because it's inferred um i'm passing directly the items collection so it knows that this item has a bunch of sales data it's of this sales record type down below so it can infer that uh t item for the chart however for the chart line components the story is a little different they don't actually get past the sales records directly so there's no way to infer what the t item should be the way that works i'll show you real quick in the chart component it's actually using a what's called a cascading value in blazer this is a way to pass an object or an instance down the component hierarchy so that other components can pick it up and use it and here in this case the chart is passing itself so it's giving itself to its uh its children and if we look at the child line components they have a cascading parameter which is that chart component so that's how the child components are actually getting access to all the data so it's not passed as a parameter so it can't be inferred that way in net 5 this was really the only way to do things you had to pass in a chart demo yeah we had to pass in explicitly specify the t items type parameter now what i really want to do is get rid of that like i don't want these things here i want to be able to delete all these oh i hit the function key instead of the the oh man let me just do that again let's do this yeah i want to delete all these so that that will work now if i do this right now the compiler is going to complain i think let me go with the error list yeah i've got all these these errors saying you know what we don't know how to infer the type for that thing please please fix but in.net 6 we can do better what we can do is we can have the chart component cascade its type parameter down to its children so let's go back to chart you may have seen it up at the top i've got this attribute that's commented out let me do home and let me uncomment this okay so now what we're doing is using cascading type parameter attribute to say to all my children if you have a generic type parameter called t item you can in you can infer it from me all right and sure enough chartline has a type parameter called t item let's check yep right there at the top so it can now infer that type from its parents so we go back to chart demo and we save this we have to rebuild that's no problem and we look at the error list hopefully now it is absolutely whoo i guess we'll be built to restart it it's absolutely clean so this is a really convenient way to make your if you have one of these component hierarchies that are generic to make your components much more use easy to use awesome that's actually much nicer and the really nice thing about this is that if you are a library author you can now make your component much simpler to consume for all your your developers uh using your components i think like a really common case for this is if you're like building a grid like grid components often have child components that are columns um for that for that grid and in earlier blazer component blazer grid components you have to specify these uh generic type parameters everywhere with dot net six we should be able to clean that all up so if you own a grid component take note this might be something that you can use all right i think that's all i wanted to show for the chart component xavier do you want to walk us through this other component the org charge awesome okay so if we can uh go to the our chart section of the app we can see the classic way of showing the management here keeper and employees you can see savvy rco you can see steve being his report and you can see dan and myself being reports for steve now the other thing that this component can do is if you this is this should be steve's title it's not actually steve's title but it should be the blazer father the father of blazer that's pretty cool exactly so the other thing that this component can actually do is if you click on the details it will show a pop-up and it contains a bunch of additional information like the theme on the company and so on so let me show you how we have built this component using some of the new features in indonesia all right go over to visual studio back to yes we can go to the org chart demo component there we are and within this page the first thing to notice is this orchard component where passing or done the organization uh as the element parameter yeah right and we're passing yeah there's all the data being set up it's just a bunch of mock data but that's being passed in as this element right here okay and we're also passing a couple of additional parameters the heading and the body and we are going to be using those parameters to build the individual sections of each one of those cards now if we go into the or chart component go to f12 to go to definition there it goes yeah here we can see one of the new features that we've added in doneness 6 which is the ability to specify type constraints directly within razer syntax right here right yeah is to implement i have children is something that you could have done before in previous versions of donate five by creating a code behind file and putting the constraint there and with indonesia you can do this directly within the eraser file right within the razer file before you couldn't you couldn't specify these generic type constraints but now you can this this i have children this must be the interface that uh this org chart is using to navigate the chart right to find out who your management is and all your reports okay so what this sort of a component is doing is essentially navigating the management chain and printing all the managers for a given employee and is using this order element component to do that i'm passing in the heading and the body that we're specified in the in the demo and then after it has rendered all the answer stores or all the managers it goes ahead and renders all the reports for that given employee so that's this this loop down here so this is all your reports and this is all your management chain that's being rendered and they're all these org chart elements exactly so now if we go to the orchard element component as i mentioned you can see how we're using the heading and the body parameters to render the individual sections of each one of those tags and we're also rendering the details button that allows us to show the details now uh to show the details we're using the fluent dialog web component fancy yeah and we could of course have used the blazer blue and library however for this demo we wanted to show you some of the more advanced javascript features that we've built into razer class libraries and we chose to use the web components directly so this is just like a standard custom element right like this is the fluent ui web component being used in a blazer app you know what i think is really cool about that is it's just open web standards right like any any web component you can just use from your blazer application it's pretty cool exactly so the other thing to note is if we go on uh in the solution explorer and we expand the or chart component let me uh org chart the org chart element component this guy here yeah your turn component yeah you can see one of the new features that we've added in dotnet six which is the ability to collocate your javascript file alongside with your razer files so tab or chart.racer.js file if we go to the code behind class or tournament racer.cs when we look at the uninitialized method you can see that we are loading that file via an import statement as if it was part of the www root folder of the race for class library so by having that name and being in that place it uh it's basically addressable like it's kind of like part of your set of static web assets okay now if you look a bit below on the on render async you can see how we are using the car module to invoke the open dialog function within that module and if you open the orchard element.razer file yeah there it is this is a regular javascript file that is exporting a function to trigger essentially the to change the visibility of the fluent dialog and make it visible cool so that's how we're showing the dialog in this case we're using a little bit of javascript in order to do that exactly okay so the other feature that i wanted to talk to you about and show you is if you open the www folder of the application you can see that there is this next-gen blazer components leave.module.js file this is what we call a javascript initializer and javascript initializers enable library authors to write code to set up the dom state that is necessary for the libraries to work so what makes this open the file what makes this file a javascript initializer is it just the extension is the pack that is library name dot lib.module.js oh yeah okay this is also the the library name here so let name then.lib.module.js okay so that makes it a javascriptionizer all right so there's there's this file in this file we can see a couple of things first this import dialog.js file a segment that we're going to talk about in a couple of minutes and then we can also see this before start and after started function of the argument down laser web assembly will automatically collect all the javascript initializers from your reference class libraries and packages and will automatically impose them import them when the application when the blazer application is starting now within these initializers if you want to define a before start function then blazer will call this before start function before it initializes the the place or runtime this allows you to customize things like the signalr options for blazer server or how the blazer webassembly bootstrap application is bootstrapped and also things like the logging in the browser and things like that in addition to that if you write a known app if you export an after started function then blazer will call that function right after it has initialized the the blazer runtime and that essentially allows you to do things like set up custom events uh within libraries or render javascript root components and things like that now the last thing i want to say about this is that while we focus here on blazer this is actually not a laser laser-specific feature you can also use modules and initializers within mvc or resort pages applications the only two things that are special to blazer are the fact that blazer will load the initializers automatically and this before and after started functions that it will also invoke automatically if you have this on an npc app or an or an eraser pages app you can load the modules directly using a script tag within your within your marker i see so the the handling of javascript initializers is really a htm asp.net core feature and on top of that blazer has some customizations where it will like call these specific functions and actually even automatically load the file for you exactly okay that makes sense similar thing within your application is is very easy cool okay awesome so now we can go back and talk about this.js file okay yeah this guy right here right yeah as you can see there is no dialog.js anywhere to be found within the www root folder yeah the reason for that is because over the past couple of years we've realized that integrating javascript pipelines within the rest of your net build is kind of hard to get right and we wanted to make that experience simpler we created a package and published a package a couple of weeks ago that makes this experience much simpler and while it didn't make him 260 we have an experimental package that you can use and it's something that it's something where we are actually looking for feedback to make into a feature in a future release so that's this guy right here right yeah in this year's profile you can see this microsoft espn network client assets called a package and this brings in a bunch of build assets that make sure of three things one that we're able to call your javascript tool to change at the right time second that we're able to identify the outputs of that of that field and third that we're able to make those outputs appear as if they were part of your wwe root folder and [Music] we by default optimize these packets to work with npm and webpack however it's completely possible for you to change and use a different package manager like yarn or use a different build tool like roll up or uh esp or whatever your tool of choice is so i know before before bla some some blazer folks get offended right i know some some people come to blazer because they're like but i didn't want to write javascript i thought the whole point of blazer was i get to write c sharp this is for people that actually do have some javascript code in their app that they they're using existing libraries or they're integrating with some some piece of code they already have this infrastructure lets them set up a normal javascript build pipeline in their blazer app so they can use both technologies together exactly cool okay that makes sense so we got the package yeah so let me show you again how this works within the solution explorer you can see this in such folder yeah there it is okay that's where by that's where by convention we will put these sets you can like change it and in here you can see three files you can see this dialog.js file which we're not going to look into we can see the rolex config which we're also going to avoid for now and you can see this package json which we're going to look at so if you open it i assume dialogue that jason that's just our code for like loading up the fluent ui dialogue component right like that exactly so if you let me explain this we have the blue and ui web components that we bring in the dependencies and we have the roll-up packages that that we bring as developer dependencies now what we're trying to do here is we're trying to create a minimal version of the blue end ui web components library that only has the code required to render that dialog element so dialog.js contains all the code to to do that and what is interesting here is the script section within the script section we have a couple of strips will debug and build release and our integration will take care of invoking the appropriate script based on the configuration of your donut build so if your debug it will call big debug and if you are released it will copy your release now each one of these scripts the only thing that is doing is invoking the roll up tool to produce the output and the only special thing that we require of any tool in that that you are using is that you allow us to specify the output folder and we do that because normally these tools produce the output as part of the sort tree and that can create issues with integration so instead of that what we do is we put the outputs inside the object folder and if you rebuild the app you'll be able to see let's take a look at folder okay how we are essentially running nvme install yeah then we're invoking roll up and you can see the full entire command line of the tool that we're invoking in case you have any issues you can grab that command line paste it on terminal and troubleshoot what's going wrong and finally you can see the detail the minimized version of this library that is only 20k and yeah i think this is all i wanted to show you so this is great so i just add this package if i understood this right i add this client assets package which is a is an experimental package currently like it's built on.net six it's not not part of.net six yet we're we're trying to see if this is a pattern that people like functionality that people want to use but i just add a reference to this package and then i put all my javascript stuff in in this assets folder by convention i can change that around to something else if i want to and then in my package.json file i just need these two special scripts and that allows me to then integrate this javascript build process into my.net application like in a razer class library that's pretty nice oh that looks great you know 20 kilobytes that's a nice small javascript file that looks really great all right thank you javier all right so let's go back here to slides so i i hope you enjoyed learning about all the improvements we've made to component authoring in blazer in.net 6 required parameters inferring generic types generic type constraints all the javascript improvements we've made for dealing with component specific modules initialization and integrating with a build process here's a couple of additional resources that you might want to check out we have a whole blog post about that package the microsoft acemic core cloud client assets package on the.net blog it will walk you through all the details about how it's built and then of course go check out those blazer fluid ui components at aka dot ms slash blazer fluent ui and with that i think we're happy to stick around for a couple questions hello scott and jamie you're back hello we're back hello hello yeah you're the hardest working fellow in show business right now i know you're running this route why did you did all the hard work on that one i was just here to be a pretty face during your salary that you're earning your salary definitely earned his stuff today you can take the rest of the day off all right we got some cool questions and some things that aren't a question this is actually a nice compliment here from jacob who said i had no idea that blazer could be used to render dynamic svg as well as html it makes sense but they never considered it so it's mark mark up his markup yeah and it's gone actually better in.net six we did have a few like um rough edges with svg in previous releases you could do it before but in dot net six we really made a concerted concerted effort to make that a first class scenario it would be interesting to see who in our audience of thousands right now would take blazer plus d3js visualizations a lot of the new york times you know interactive type things with dynamic svg and how far could you potentially take it the powerful anything the web can do blazer can do yeah what do you got jamie oh here's a good one um blazer can consume web components built in angular or another js framework is there any development that blazer components can be ported and are published as web component to be used in angular react view oh i love this question yeah so in my previous talk not this one but the the enterprise grade blazer app stock i showed how you can render blazer components from javascript that's now a new capability in dot net 6. i showed in that talk actually using cogen to generate angular and react components around your blazer components so you could throw them into an angular or react app we also have another package that we've been working on that can take a blazer component and turn it into a custom element into a web component i didn't show that today but steve sanderson i believe is going to show that in his talk tomorrow so if you want to learn more about that definitely check it out we also have it uh described and outlined in our blog post if you want to learn about creating custom elements with blazer now i have seen people tease us about stuff like that where you know your scientists ask themselves you know should i or you know do this or not but that seems just like it's using the open web technologies that the browser has available these are the kinds of things i mean it may feel unusual to uh to the folks online but it seems to me like just more opportunities to effectively migrate applications and use the technology that you already have in your systems absolutely like you might have a bunch of blazer components that you just want to reuse like you spent a bunch of time building those things why not reuse them in your angular app review app or whatever by using a custom element as a as a standards basis you can absolutely do that so you can go both ways totally fine and supported and even better with dotnet6 yes take it that's very cool well thank you both for your time and gosh is it like three in the morning where javier is did we make you stay up today sir it's dinner time it's dinner time well i apologize uh dinner is on us tonight sir thank you for staying up and for spending time with us and there's going to be lots of great things of course all over in all different time zones so donna conf is going to continue for a couple of days thank you dan and javier thank you all right thank you bye-bye

Channel: dotNET

Views: 14,088

Keywords: .NET

Id: p77UumvZCNM

Length: 31min 3sec (1863 seconds)

Published: Wed Nov 10 2021