Introducing Razor Components in ASP.NET Core 3.0 - Daniel Roth

hello everyone.welcome I haven't even done anything yet you're already clapping that's great it sounds good come on in you're all in the right spot find a seat it's great to see you all here you're looking good my name is Dan Roth I'm a program manager on the asp.net team at Microsoft and I'm super excited to be here at MDC in this session we're going to be talking about Razer components in asp.net core 3 oh and so the big exciting announcement happened yesterday dotnet core 3 o preview 2 shipped with Razer components in the box and I am pumped about this this has been a long time coming for me this has been stuff that we've been working on for a year year and a half you really go back in history internally but even longer than that so there's some pretty cool stuff it's in this release it's not the only thing that's in this release I encourage you to go look at the the blog posts for for pv2 and all the cool stuff that's in asp.net core and dotnet core but in this session will focus on Razer components so what our Razer components or Racer components allow you to build rich interactive modern web UI without having to write any JavaScript that's what they do you can create reusable UI components using c-sharp using dotnet and razor syntax and they integrate with your existing asp.net core applications now that's that's a little high-level a little abstract it's probably easier if we just show you what we mean by by this razor components thing so I'll demo getting started with razor components you can of course can now do this too because all the bits are live and public the things that you would need in order to get started with razor components you'll need to get the dotnet core 300 preview 2 SDK also going down though that if you're on a Windows machine you should also get the latest preview release of Visual Studio 2019 preview 2 I believe is the the latest one the nice thing is that the Razr components tooling is built into Visual Studio at that point so you don't need to go install any additional v6s it's just there in the box so let's take our first look and what is a razor component okay so getting started how do you do that so you're going to want to go to dot dot net that's the magic URL for getting all things net when you land on the dotnet homepage click on download and at the top you'll see there's a banner here it says try out the latest dotnet core preview a link on the right that's where you're gonna get the three O preview two SDK so download the SDK for whatever OS are using Windows Mac Linux it all works on all those platforms after you've done that you're gonna want to go to visual studio dot-com slash preview and then go and download the latest Visual Studio preview for those of you who are still a little bit jittery about installing Visual Studio previews I know in years of past this was a dicey thing to do it kind of meant you would probably have to repave your machine if you installed a preview version of Visual Studio honestly the installation technology with Visual Studio has gotten really good the side by side installations work really well I currently like let me get my Visual Studio installer UI up I have three versions of Visual Studio installed side by side right now I have 2017 I have the preview release the public preview of 2019 I've got some crazy internal build of like the preview 3 version of 2019 and it works really really well like I've been able to uninstall and install them very cleanly works great so I encourage you to do so I typically install just the the web work load in the.net core workload because that's the stuff that I normally work with all right so once you've got that you'll have 2019 and you should be ready to go to create your first race or components app so I'm gonna select in the new project dialog this is the new UI in 2019 I want to create an asp.net core web application alright a razor components is under that umbrella what should we call this let's call it razor components demo I think I haven't used that name yet all right and so in the new a spec core dialog you can see we've got a bunch of templates here make sure that you've sold I did three Oh at the top that will show up after you've installed the 300 SDK and there is a Razer components template now I'm going to select that and go ahead and create it cool all right once this is created this is you notice it's a solution has a server-side project and in the actual app that contains my you I will let the packages make sure they shake out oh I didn't actually yeah I got you I've got Network cuz I was able to get to the dotnet website so that's good alright so come the store is completed let's go ahead and run it and see what this application can do build run run run this is where people usually tell me Danny you need a new laptop man and I say yeah yeah my boss is here you go tell alright so this is a simple sort of spa style application it's got tabs on the left you can click on and see various pages it also does routing on the client so you can click back and forth there's a page with just you know some static content there's a counter that you can click on a button in an updates account there's no page refresh happening there that's something that normally you'd have to write some JavaScript in order to accomplish but there was no JavaScript used to write this application I didn't have to write any there's also this third page which here it's actually getting a bunch of weather forecast data on the server and using that to then render this this table of weather forecast information alright so how did this all work how do you write this let's look at those pages if we go look at counter here's the implementation of the counter page or counter component there is a at page directive at the top that says that this particular RAZR component is routable you can browse the slash counter and you'll get this component there's some just normal HTML markup and then we use razor syntax in order to get values and render them to the page and these are all dotnet values so we have a current count field that's a type int and then there's our button which has an onclick handler which normally you could put some JavaScript there to call but we're not pointing at any JavaScript this is actually pointing at a normal see sharp dotnet method to then increment the count so that's how that's done and to this is actually what's what's running let's go ahead and set a breakpoint I'm gonna f5 run the app again and let that come up and then see if we can get that breakpoint to hit okay so go to counter let's click the count and voila so now we're hitting our c-sharp code even though there's no page refresh happening there okay so that's that's part of the beauty of razor components first of all know no JavaScript but you get that rich interactive feel what else can we do so these are components that means that they are reusable pieces of UI so let's see if we can reuse some of our components we've got at least three of them here we have a counter component a fetch data component and an index component all written as raiser files let's go into the index page I'm gonna stop the debugger let's go and then let's go ahead and try and reuse one of our components let's try and put a counter component right here on the home page rerun so now I would expect that would not only have a counter page but also see the counter component show up on the home page and I do and these are independent things and click the counter there I can click the counter here let's put another components put a fetch data component right here on the main page so you use raiser components using normal HTML element and attribute syntax alright so now we've got a whole weather forecast component on the same page as our counter so these are reusable composable pieces of UI and of course all the normal razors syntax stuff applies like if you wanted a whole bunch of counters like we could do before and I equals 0 well I is let's I put like 5 of them on here I I plus boss and then put this in a little loop and now we got more counters then then I got to put make sure I know my c-sharp there we go and I did that backwards but who cares I think it's over X right doesn't work on the other side take a listen does the opposite returns the value so I just cancel it and let's try to do that again with the right way and hopefully now we get a whole bunch of counters on the main page and there they are so we got all these counters notice that they each have their own state right like you can count them independently so that's pretty nice so that's reusing components components can also have parameters you can pass data to the components that they can then use as part of their rendering logic so let's go to let's simplify this back down to just counter and let's see if we can add a parameter to our counter component it's gonna go back to the counter component and add a property and the way you add parameters to components is by creating properties that are attributed with the parameter attribute and let's create one called increment amount and let's initialize it to say 1 and then down here we can use it for for incrementing at different amounts okay great and then on the home page let's increment by some interesting amount there you can see that the attributes not showing up in intellisense so you get great editor support lets akram it by 10 on the home page and then on the normal counter page that should still increment by 1 because we didn't pass any parameters there so the normal counter page yep still incrementing by 1 on the home page increments by 10 okay so that is parameters what else can you do with components well these are interactive pieces of UI so they have of course event handlers you can handle any user UI event that you want to in this case I'm handling the onclick event for the this button when you handle an event you can you just need to specify a delegate to the c-sharp code that you want to have called that delegate can take no parameters like this one is currently doing or it can't take additional parameters for example let's say we wanted to actually know stuff about like where it was clicked or was the shift key held down those types of things you can put in a parameter here was it UI mouse event args I think is the one for click events then let's say that we will increment by increment amount let's see if it's the e shift key is pressed then we're going to increment by like a hundred otherwise we're going to increment by the normal increment amount okay so let's see if that works all right so I click like click click it's going up by tens because that's the parameter that I specify for this component if I hold down the shift key while I'm clicking clicking clicking now it's going up by a hundred so you can get all the information about the what what happened actually with that event now if you don't this is the method group way of specifying an event handler if you prefer instead to use lambda syntax that's cool too like if you want to do something like this where you just say current count plus equals increment amount that's totally fine that should work exactly the same way just to prove that that this guy's not even getting called will comment that out and see if we go back to the other behavior and yeah and Shift key doesn't do anything at this point yeah so you can use Lander syntax or method groups event handlers can also be async so if you have a sync logic that you want to put in your events that's totally cool you can do that as well I actually prefer the methyl group syntax so I'm gonna go back to that so increment amount and we get nice and tell a sense for your method groups and select that and we're good okay so that's event handling what about now data binding like if you have data that the user is typing into like say an input and you want to capture that in the dotnet world how do you do that that supposed to be increment count that's why it was complaining all right great so what I'm gonna do now let's add another page to this application and we'll do the you know the simple to-do list demo just so we can see how data binding works and let's rename this file to to do so I'm just creating another component will erase all the stuff that was in there and so we want this to be a page so this is a component that's routable so we're gonna add that page directive again at the top and we'll say that request to slash to do should end about this page and then let's just add a header here and now some of this if you have been watching following along with some of the stuff that we've been doing with you know components in the a steam some of this may seem very familiar and that's okay like that's very deliberate so if you've seen this before just hold on we will get there about why we're doing this and that's alright don't worry about that everything is fine here this is our preview bit so there are some some issues but okay so currently there's no no tab showing up because we haven't added our two to do page to the layout but I should now be able to go to just slash to do and voila there's the to do page that I just started to set up now I want this component to have some state when we want to manage a list of to-do items I just get to write C sharp codes let's add a class here to-do item and let's do public class and add a couple properties let's add a string title and a boolean is done okay and then I list of to-do item I think that's because the editor had a little issue so we'll give it a second to to repent all right there we go to-do item and then a new list of to-do items great that'll be the state of our component to be managing a list of two dues what do we will have so we need to render those two dues to the screen so I'm going to create an unordered list and just use normal razor syntax so for each bar to do into dues we'll create a just a list item here and will render the current to do to do title okay so first the until isn't showing up there looks great alright now we don't have any to do as yet so this won't actually do anything we need a way to add some to dues and that's where data binding comes in so let's go ahead and add an input down here at the bottom and we'll give it a little placeholder do something okay and we want to bind the value of this input to something in c-sharp plan so I'm going to a little string new to do and I'm going to bind to new to do see that okay so what does that do well bind is going to do two things it'll listen to the on change event for the input and when the on change event happens it will set the the value of whatever you bound to to the current value of the input and also when the input is rendered bind will take care of rendering the value for that input as the thing that you bound to as the the new the new to do string so it's a two-way bind alright and then we just need something to say that we're done with adding something so let's add a button let's call it add and we need to add an event handler for that so that's at a add to do event and in here we'll check if the if the value is not an all or empty of the new to do then we'll add a new one to the Tuzla so to do add new to do item title equals the value of that new to do and then let's go ahead and clear out the new to do string because we're done with it with that particular value okay actually probably want this to be not is null or empty and then we need a wire up this event handler to our button so the wire up the event handler we saw that before we just take the on click attribute and we do at to say that we're calling in to c-sharp not javascript here and we want to say it's gonna go up there is two okay I think I think that should do it let's see if we want I think that will work it still won't show up in our layout yet let me rerun the app hopefully do we got any build errors and I missing these semicolons or anything that actually looks like it might work so let's browse to slash to do okay so now let's see can we bind some data so I'm gonna type something in the input and click Add and it's adding it to my list that's add something else one thing I really need to do is get some sleep that would be great and there you go okay so that's a simple to-do list app where your data binding we could do even a little bit more fancy data binding like instead of just rendering out the the title I mean this is to-do list right it's got to have checkboxes so let's add an input of type checkbox here we'll bind to the to do is done property mm-hmm it's typing at an Engel is kind of an interesting exercise and then we'll create a text box will also be able to bind to the to the title in case we want to edit it so to dude title and to show that these are working let's show the count of how many to-do items are not done yet up at the top so we'll use some razor syntax here to do is dot count and we'll filter the two dues by the ones that are not done and in parentheses okay and let's see if that worked all right cool so let's add some to dues and the count goes up right because we have now two undone to do is three M two dues and as I check them that should bind to the is own property on each to-do item and you can see that the count automatically goes down so those are raiser components data data binding in action now we're not we're not showing up in our layout yet that's kind of dissatisfying how can we fix that well RAZR components also support layouts layouts in racer components are also components so the way you define the layout is using a special kind of component to call the layout component and I there's one in this app that defines that like left bar and all this nice stuff if we look in the shared folder there's this main layout component it is itself also a component the thing that's special about it is it derives from this layout component base and what that gives us it gives it this body property which basically captures the inside of the component wherever that layout gets applied the content of the thing that I got applied to is then renderable using that body property so this is saying you know render a nav menu thing looks like that's another component and then also render the main page with some styling using bootstrap and then put the the main content here that's how layouts work in racer components how do you apply that layout to then to your components well you use a new directive that's this at layout directive here I'm saying I want to use the main layout in this particular case that's being specified in a view imports file so it gets applied to all of the components that are hierarchically down that that that particular path okay so we need to then modify our layout to add that to do page to our to our application now the looks like that sidebar is actually defined in this separate component this nav menu let's go look at that okay so there's a little bit of code here but it's pretty straightforward it's basically just an unordered list of list items that you have these nav link things in there those are essentially anchor tags that change their styling depending on whether the current address matches the link for that for that anchor tag so we just need to add one more of these to make our to-do page show up so let's add one that's called put the href as slash to do that was the address that we set up in the page directive and then over here let's make some friendly text it would be just to do alright and so now if we run this we should have it to do page yeah so there's a to do page over there on the left and that has all the same functionality that we had before all right so that's layouts that's sort of an introduction to razor components and what razor components can do it's kind of kind of interesting I hope I hope you think it's interesting but some of you I'm sure as you were watching that you were probably thinking like wait a minute isn't this just blazer like I'm sure some of you have heard about blazer before if you haven't blazer is this experimental project that we've been working on in the a speed on that team to try and get dotnet to run directly in the browser on top of web assembly you don't know what web assembly is web assembly is this new open standard that was defined by the w3c community group and it's basically a low-level byte code for the web browsers no longer just run JavaScript they can run anything that's compiled to this new format called web assembly and all the modern browsers support it including mobile browsers and desktop browsers and so we've been working for a while on trying to get dotnet to run on top of web assembly really well in the browser and that experimental project is called blazer as part of that we've also built a UI framework and it had components and about a year and a half ago at an NDC not not unlike this one Steve Sanderson was actually here today some in the front row did a demo sequence not unlike what you just saw and it was blazer running you know dotnet code its components running directly in the browser so is that what this is is this just blazer but with a new name and the answer is yes and no it's not quite that simple because there's a bit that's shared between both and that's really what Razer components are all about so in a blazer application if you haven't seen blazer before it looks kind of like this you have web assembly you know that core capability of the browser if you took a pile of some code to web assembly you can run it in any browser at near native speeds and then for blazer we wrote a little dotnet runs in webassembly that you can just download to the browser and use to execute dotnet assemblies directly in the browser it's pretty cool on top of that we then built this you wife simple UI framework based on components and those components are RAZR components now with the a spinet core 3 oh release we've done something a little differently those Razer components actually don't have to be executed in the same process where the UI is being rendered they manage an in-memory representation of the UI that they're updating and it does a fancy diff algorithm for like the UI that was updated previously with the new new set of UI and figures out what's different and then there's a process that the runtime takes care of for applying those UI changes to whatever UI system you're using in this case typically the Dom but what that means is because the rendering logic of the Razr components and how the UI actually gets updated are separate you can run those razor components pretty much wherever you want in fact you can run them on the server and that's what we've done in dotnet core 3 oh we've taken the component model that we started with Blaser and we've now shipped the component model in dotnet core and we are going to support initially running those components server-side on top of the dotnet core runtime with your application all the UI updates then get handled over a real-time connection of signal R of course that's the real time time framework that we use in asp.net core so the thing that's the same from what you just saw is that yeah everything I just showed you those were Razer components they can run client-side in the browser on web assembly or alternatively which is what I was showing they were actually running server-side in an asp.net core app and then all the UI updates were all happening over a signal art connection let me show you a little bit more about how that's working so that you can understand what's really going on there so raise your components client or a server so I'm going to switch to a different app it's really the same app that was what we just saw slightly different bits just because the the new razor components work that we doing in 3 Oh a lot of that was just trying to get bits moved over and working there's still like a feature or two that makes this particular demo a little bit harder with the current preview it will get better as we move forward but this app does almost exactly the same thing as what you saw before it has a to-do list page it has encountered has a parameter I just get it up and running so that we can see it working and I got so many tabs open now let's close all the other tabs okay so we have counter that's working fetch data that's working on the two lists we can add to dues and it does exactly what it did before now let's let's look at how this application is actually working on the wire and let's make this a little bigger so we can see and then I control f5 so first of all how big is this applicable today there he goes oh wait wait that was that was the second state of the app that we were supposed to see that yet you didn't see that go back you forgot to reset this demo okay okay all right let's refresh this again all right great that looks much better is like why is it taking so long to load so first thing yeah well it's actually interesting like as I hit f5 that this app actually loads pretty fast it's not downloading very much into the browser to get all that functionality if you look down in the left hand corner this app is about 100 kilobytes and that includes bootstrap and all the other stuff that it's using to make the UI I look pretty but what actually gets download in terms of artifacts well there's HTML there's bootstrap there's that server j/s script that kind of gets everything up and running and at the bottom you can see here there's this 101 switching protocols Network item what is that that's basically setting up a signal our connection with the server its setting up a WebSocket connection in fact if we double click on that and single clicked on that in chrome we can even see the the current frames that are being passed back and forth between the client and the server let me let me clear it and then as I click on things notice that frames start to show up you see that and there they're not very big like these numbers are in like bytes so the amount of data that's actually going back and forth over that connection is very small but every time I click this click Me button what that's actually doing is it's sending a notification to the server saying hey someone clicked this button and then the counter component executes on the server it runs it's rendering logic the runtime figures out what UI needs to be updated it figures out that diff it C realises the diff back down to the the browser and then that little bit of server Jas JavaScript applies it to the UI that's how this razor component app is working this is asp.net core razor components razor components hosted on the server but the same razor components can also be run client-side directly in the browser on web assembly using the blazer model and that's pretty easy to do we can just take this same app same code same you know DLL that you're compiling and change it to be back to a web assembly based application so I'm just going to change this bootstrapping script and then we'll refresh the browser again and that's now we're gonna really see that slightly longer load time because we're pulling down a lot more with this application if we look at the network trace it's actually um yeah let me do one thing to make it a little smaller because that one looks a little surprisingly big because we turned off linking for the server-side mode I'm gonna at this and let's turn this back on to true and I think that should be fine and we'll be in a build and rerun it again so that one property what that's gonna do is when the application gets built the built assemblies are going to be run through an IO linker to strip out all the unused il because in the client-side model your DLL actually goes down to the browser so let's see first let's make sure it's working still yep looks like it's still working we got a fetch data page and now if we look at the network after refreshing okay so now it's a little bigger it's two megabytes that's not that's not a lightweight application it's pretty cool considering that this application now is downloading a full dotnet runtime but yeah it's that's that's that's what you get now so but nice thing about this application is it's running fully client-side in the browser it doesn't actually require any dotnet on the server at all this app could run offline it could be a PWA and you can leverage the browser for compute and for resources and all the functionality that the browser can do so same raiser components running client-side in the browser on web assembly which is what we're seeing here like your DLL is in the browser or running server-side in asp.net core for those of you who may not believe that this is actually you know dotnet code running in the browser we can do one other thing and this this demo is always a little bit dicey because of the debugging support for client-side blazer apps is uh you know I work in progress shall we say but there is a way to do it so if you go into the console you can see there's this debugging hotkey shift alt D that's a special gesture in the blazer a client-side blazar app to say I would like to try and debug this app in the browser now the way that works it's works through the v8 debugging protocol we actually set up a little debugging server in between chrome and the chrome dev tools that augments the protocol with dotnet specific content okay so if I do a shift on that control shift alt D so in order to make that work chrome actually needs to be running in remote debugging mode the app will detect like oh hold on you're not actually running in that mode yet here's how you do it so I'm going to copy the command that it's telling me to do and the curl close down all of the chrome instances and then let's just run the command that it told me to run that will start chrome in remote debugging mode for the same application and then let's do that again shift alt D hopefully now we'll be able to connect to our little debugging proxy which is able to connect it to Chrome so let's pull this out into a separate window like so and you'll see over here in the the chrome tool it's kind of small but there there's a DLL showing up in the chrome debugging tools along with all my CS HTML for all my components if I go to the counter page and then let's open up counter CS HTML I can actually see the code and then I'm going to set a breakpoint right here on the increment count method you see that and then as I click Boop we just hit a breakpoint in c-sharp code running directly in the browser on webassembly so that's pretty cool so it is in fact running clients on the browser and it's the same razor component model server or client and let's just let this continue on through I think it's one of the FA yeah there it goes all right awesome so that was switching between client and server okay so when would you use razor components particularly on the server like when when would you do that when is this model compelling what are its benefits and its drawbacks so the things that are actually really nice about razor components on the server besides the fact that you just can write c-sharp code and get that rich interactive field well one of the benefits is that the client is very thin like you're only downloading that JavaScript code that's that's provided for you that sets up the signal our connection sends the UI events up to the server and applies any UI discs that gets sent back so it's a very thin client the app reloads really fast you don't need a lot of functionality in the browser in order to get that to run you know you don't need a browser for example that supports web assembly you could do this in older browsers you could do this in browsers where are our devices that maybe don't have a great internet connection and so doing that initial download to have the app start up when you're doing blazer is less desirable so it's a much thinner client it runs on dotnet core on the server so you have the full runtime you can use all of your your libraries and existing assemblies you get all the functionality of that runtime you saw that I was able to just set breakpoints in vs and hit those directly in my dotnet code that's because it's just normal dotnet also it's a bit of a simpler architecture because your components are actually running server-side then you don't have to do like a hop through a web api layer in order to get to some functionality on the back end you're already there so if you wanted to like go make a call to your database or do server-side specific stuff you can do that and we found that actually appeals to quite a few doves who have looked at this model particularly folks who are concerned about not wanting their code to leave the server I mean with a blazer app your D levels actually go down into the browser and anyone can grab them and you know just assemble them and see what's inside with the Razr components model on the server all your code stays on the server and no one and then see it the downsides of this model are of course well there's no offline support this the UI works by having that live connection so if you need an offline app then this probably isn't the the model for you you're not going to be implementing a PWA using razor components server-side also there is a latency concern because you're doing all the UI interactions over a real-time connection for apps where your data center is really close and you have a really good solid pipe that that probably isn't a concern at all we've done deployments where we've taken this major component app and like deployed it to the US while we're here in Europe and I initially thought that that would be like clue and then the UI updates but actually it's not bad like you click there's a little bit of lag but it's it's pretty good like remember when we saw in the the frames for the WebSocket connection not much data is actually being sent for each of those events so it is pretty quick you only really limited in some sense by the speed of light lastly a downside is that you're you're using your server resources now to run the app you've got to keep all these persistent connections you have to maintain the state of the UI on the server you're not able to farm out all of that compute on to other people's browsers so you're kind of paying for that but if that's what you want and then that can be a really compelling thing so a sort of a drive home the the benefit of keeping its server side of running the Razr components on the server let me let me show another app this was written by a by Steve which is pretty cool application this app actually uses Razer components with ml net people heard of ml net let me go back to the browser for a quick second if you go to net at the top we probably noticed that there was a second banner where we're advertising this ml net thing that's machine learning net it's a machine learning framework in written net code you can train models you can do predictions all sorts of cool fancy AI stuff with with that framework all in net and c-sharp code so the scenario here as least as Steve explained it to me was he figured out that when you have comments on like your your your company's website or on your product it's it's generally better for business those comments are positive or good so wouldn't it be great if you could do some sentiment analysis on the comments and keep although you know the nasty negative ones out and only keep the good ones so maybe we could use ml net to do that to do some sentiment analysis so that's what this happened does let me see if it's running okay so we have same map as before but now we've got this review page alright cool so I want to be able to type in some text here and have some sentiment analysis happen and then we're going to move that slider back and forth depending on how positive or negative it is and this is gonna be used during using a trained model but that model is that's that's proprietary that that's my IP like I don't want that like bleeding down to the the browser for anyone to grab and then reuse and I lose my my competitive advantage I like to keep it on the server so this would be great we can just use razor components on the server we can run the ML dotnet code there and it never get makes it down to the browser we can see that in the code if we look at this application let's look at its pages it has this review page like we just were looking at and let's see what it does it has this update score method and it calls this sentiment class and asks it to predict now that class is implemented over here and where's that predict method there it is down at the bottom and here we're actually loading up a real ml dotnet model that's this sentiment dot zip file and using it to calculate you know how good or how positive or negative was this text if it's zero you know that's like the the dredges of human despair like you're just just just horrible you know absolute negativity wherever it's one you know complete human ecstasy so let's see if this works this is horrible I hate it I will never use it again okay okay whereas this is great I love it alright we'll use it so you get the idea and all that all that code is running server-side only thing that's being sent down to the client are those UI diff to like you know move the slider around and to the server we're sending each of those keystrokes in that text box as I type that was I don't know if I showed that the event handling yeah on input was the event that were handling and it's just pointing to again a c-sharp code okay so that's you know the benefit of keeping it server-side how we doing for time how we do okay so another thing that's cool about Razer components is that they're reusable and you can build them into class libraries and it's a RZR component that's CS HTML file what happens when you do a build is it just gets turned into a normal dotnet class it's just a class that gets built into an assembly and then run either on the server or download it into the the browser in the case of blazer on run on the client so you can take those class libraries and just ship them as NuGet packages as reusable component libraries and then when you're building your application you can reuse component libraries that are being built and shared by the community I have another app here that has a component library let me pull it up think it's this one all right so this application again written by my my friend Steve Sanderson see the wonderful thing about PM is that you get to work with tabs and they they write all the cool stuff and then you just get to show it it's a great job it's awesome so Steve wrote this this component library for material design people people familiar with material design is a design paradigm for web applications or UI I believe it's from some some other company that shall not be named but it still it's a cool stuff you know styling and things so this is not the round where is it today razor components that's that's not it that was the app I just did the demos oh that's not confusing at all I had one project name demo or one brother named demos okay that was the one we were just messing around with all right so this product this solution will has has several projects it's got a razer component app and then it also has just a class library project with a bunch of component definitions that are basically material design components so here's the solution we can just take a look at that so again we have that server project that's the hosting a speed on that core project we have dot app that's where we're putting all the the Razr components for our application and then we have just a class library a reusable class library full of razer components for us to use and you could package this up as a new get package and share it with your friends and so we've got things in here like a material design button the check box dialog and so forth if we go ahead and run this app we can see these material design components in action all right there we go and so we got a slider on the Left we have the counter for like before but these that's a material design button here's layout and I I don't recognize any of these books but I hear that these are fairly popular kids books is that does anyone like no Hairy Maclary I'm told I'm supposed to read this to my kids so if I find it get that from the library at some point we have a validating form here implemented using material design so let's say I have a kitten named fluffy but that I decided let's and it's a British Shorthair but I do not accept the kitten terms oh all kittens must accept the terms no exceptions so let's meet that again and then we're good so what does that all look like well it's there these are just components so you use them using the normal component syntax if we go into that there I wanted to look at pages and let's look at Vincent Beinecke on display the cascading validation numbers yeah so kitten breed is an MVC select and we have a tendancy text field so we're just reusing those components and we didn't have to do any work that was great and so the community actually has been building out a lot of reusable components that you can download as NuGet packages off of the new georg if you go to this case you're going to go to blazar down that just because that's where a lot of the community effort has been happening recently but all ah this these it again with blazer the are still razer components so they still apply there's a list here that we maintain of libraries that have been built by the community that you can just use like for example there is somewhere on here I was like a bootstrap one yeah bootstrap blazer strap has a bunch of reusable bootstrap components I think there's like a charting component up here oh there's a grid grid component reasonable grid component with blazer so lots of good stuff that the community has been working on that you can just use if you guys build any feel free to let us know we'll add it to this page even recently uh I mean component vendors have been getting into the game I think was telluric telic blazer preview the guys at progress or telluric they recently announced that they've been working on their own blade blazer and razor components and you can get a I think it's a what they got a grid where is it down here let me have a grid in a tab view yeah so there's a kendo kendo grid all written in with sheesh our code and dotnet running running in the browser or our server-side and in Razer components they have a tab view here as well so that's the beauty of composability and usability you can then build components and then use them in your application now there's a couple things in this this particular app that are kind of interesting that I thought I would show there's some features of Razer components that I didn't show earlier let's look over here first at this jeaious Interop page so from your Razer components that are running on the server if you need to or want to you can actually call down into JavaScript that's executing in the browser so let's say as part of your UI you want to call some browser API or maybe you have a JavaScript library that you know for better or worse you you implemented awhile back and you've got to use it or there's one from the ecosystem that you you need to or want to reuse you can load that script in the browser and have your razor component call into it basically as if it was written in c-sharp okay so let me show you what that looks like so when I when I click this call prompt button notice that that's actually popping up a javascript native prompt in the browser tell us about your childhood it was great and if I click okay then there's like just popping up the local time in a dialogue again a JavaScript call how is that done if we go back to the demos app and let's look at the JavaScript Interop page so in raiser component applications and also plays wraps you can get this ijs runtime abstraction and that's a service that you can use to then call into javascript now notice it's being injected into this component components can have services injected into them through through di those services typically get configured in your startup class just like they would in an asp.net core application so here in start-up where this step is adding its own services the ijs runtime is one that we provide for you all right so once you have that service then you can use it to do invoke a sink the the generic parameter is the type of the return value that you want to get back from the JavaScript world and then the first thing you pass is which function do you want to call and this is basically like a dot separated path relative to the the global Windows object in JavaScript land and then you just pass whatever done at parameters you want to pass into into JavaScript in this case it's even taking a dotnet object so we're wrapping it in a reference handing it off to JavaScript so that JavaScript code can then call back into dotnet so we can go both ways you can call into JavaScript and even have JavaScript call you back that's useful for things like callbacks and events that are happening in the JavaScript world so let's look at this particular function I think it's I had to move it over here so in our group folder somewhere here demos it's like demos show prompt there's the JavaScript function that we're calling to show our prompt and this is another JavaScript for some some other parts of the application so you can write any JavaScript you want anything that you can do in JavaScript you can do from from razor components oh yeah the other thing I want to show here was template components so here's an interesting feature with with with components if you if you have a component but you need to pass it not just like a static parameter but you actually want to pass it some like a block of UI to say you know when you render yourself here's how I want you to render this particular part you know think about like grids or list views where you want to say for each item in this list or for each cell in this grid this is the UI I want to put there you can do that with with racer components - and those are called template components so this dialog is it's a little dialog that pops up and it has a bunch of UI elements like there's this block of UI at the bottom for what actions you want to happen and then there's the body of the dialogue let's look and see how that that component is implemented let's go to I think it's super dialogue shared yeah this one okay so here's super dialogue component and it takes some normal parameters like before like it's just taking the title for the the dialogue box but it takes these other interesting things - it takes these parameters that are of type render fragment and render fragment of T that's basically a type that captures that snippet of UI that the component can then use to render some wherever it wants on the page so in this case it's capturing a parameter for the body content and rendering that in a particular spot and because it's a render fragment of T you can even pass some data to the the template and have it haven't used to render and then we have just a normal render fragment without any parameters that we're rendering for the the buttons content at the bottom to see how that is then used when you call that super dialogue here's how we're specifying the body content and there's that block of UI that were that we're saying which should be rendered into the middle of the dialogue that was a this section here hurry up so you know item and then it's using that parameter to figure out what its name is and whether it's in stock and then at the bottom the the the set of actions the set of buttons that are at the bottom are again being passed in to the component to say this is these are the buttons that I want you to put at the the bottom of the UI so that's template component so you can build some pretty high-level advanced components with this model okay now let's talk a little bit about scale with the razor components model remember we have this signal our connection that we have to maintain in order for the UI to be updated in order for it to be functional now maintaining lots of concurrent connections to your application it's actually bit of a tricky problem it's not super easy to do there are patterns you could set it up yourself but there's a bunch of considerations when you have to scale out to a whole bunch of connections it's non-trivial fortunately azor actually provides a service called the azure signal our service that makes it pretty much trivial to handle thousands of concurrent connections I want to show you that really quick because that's a useful thing when you're building a razor components application so let me which one is this one this is too many vs is open now let's close a couple of them before I run out of memory we want to do the azure signal our razor component demo this way alright so this app done a little bit of tweaking to it it has a counter component my goal with this app is I wanted to SEP an app where there's a bit of a story behind this I I sometimes go and see what my kids are doing on the computer you know the Mike my kids love to play on the computer playing the games or whatever and I figure it's it's good every now then to peek at what they're actually up to and I noticed one day that they were playing this game where there was like this I don't know there's like a platform and there's this monster or creature on it and they're just tapping this screen as fast as they can like this I'm like what are you doing like Daddy we're playing a game I'm like I'm sorry I was like okay and I watched it for a while I was like so it looks like the whole point of this game is you just tap the screen as fast as you can and they're like yeah it's great super fun I'm like so I was like I have to put a stop to this so I got forbade this game for being played ever again but you know it was intriguing to me how compelling this was to them that you know button I can just mash this button as fast as I can and that's that's a game so in this in this app what I did is I took the the counter component okay this is the counter component and it's the has down here at the bottom it still has the account okay and we're checking doing some time checking to make sure we don't you know go outside of int max but it's gonna increment the count every time the button is pressed it was kind of fun writing this particular demo because it seemed like I was I was going out of my way to violate every architectural guidance that our architect on the asp.net team David Fowler recommend recommends like I have a you know some static state up here now for the for the current count you know static so I can just see David Fowler pulling out his hair and then we also start a little polling loop for to just loop over the UI and then check basically say that the state of their component has changed and that's so that the component will send UI updates periodically like five times a second so that's so that as you click the button every time you click the button normally the page will refresh but let's say something else changed that static state well then you need something to let the app know that it needs to update the UI we don't actually have a push model to like all the connected clients with razor components we do use signal R but it's basically your connection for your client so this is a poor man's way to have the UI sort of update automatically all right so that was the app if we run it you can just mash on the counter component and then it displays a little bit of you are now I wanted to publish this to Azure and have everyone in the room be able to mash on this and I haven't I have not stress tested this at all so this this this demo may fail horribly but I did know at least that I wanted to support a whole bunch of concurrent connections so I enabled the azure signal our service for this application that was pretty simple I just had to add a single package that's this Microsoft Azure signal our package so just go to new get and add that and then in my startup file I added signal R and the azure signal our services to the application and then down below I told Razor components hey like don't don't don't use Sigmar with don't take care of the hub by yourself and that really should say components hub we're gets a just one of those renames we haven't gotten to yet don't don't use the outer box a hug I'm going to set that up myself because I want to do something special to set up the agile signal our service and so over here we say use as your signal our and then we set up the the hub that's used by Razer components manual ok and then there's a connection string I had to put in config but it's basically you go to the portal you copy a string and put it in your app settings alright and then we just publish this to to Azure so I've already done that and let's see if this works I have no idea if this is gonna work this might feel horribly so that's good aka m/s counter mash I think is what I put it at it's gonna load ok so then you click the button so if everyone wants to try this might not work at all but uh oh my goodness it's counting ok what's working is it working I'm counting sorry sorry yeah so if people missed it it's a KA dot M s slash counter mash counter mash and see that ok let's see let's see if this is gonna like blow up the Apple II when we hit 100 we're 500 oh it's going fast keep going let's go for let's go for max int but you get the idea so I don't know how many people who are connected but we're having lots of connections now that are going to this application and updating that count and that's done what's that it's not loading Oh blame it on the network and that's through the beauty of the azure signal our service so I look at my asher bill later as that continues to go that's the counter mash app maybe I'll put some ads on there and show it to my kids and make there to my kids friends to make lots of map makes lots of money ok we're almost out of time I think what do we ask we uh yeah we got it's like four minutes so the last thing I want to show is you know the potential of Razer components even beyond what we've already seen so we've seen Razer components running on the server we've seen a little bit of Razer components running and on the client on web assembly there's gonna be a lot more of that later today that's these stocks that I highly encourage you to attend but Razer components like I said they can pretty much be run anywhere so one of the experiments that we did was running Razer components with an electron tap so what if you could write your UI using dotnet c-sharp and then have that drive the electron shell and now you basically have a cross-platform desktop app written with dotnet would that be cool so the way that looks is something like this in this case you can probably imagine this happening one of two ways you can imagine the Razr components actually running on dotnet on webassembly directly in the chromium shell that makes up electron but that's not actually how the the sample I'm going to show you works in R in this case of the Razr components are actually running in a dotnet core process which is then talking to electron over an IPC channel so you actually have full net the full performance and all the functionality of dotnet core that's then driving an electron application that's how this sample works and I'll just show you that one really quickly before we wrap up talk a little bit about roadmap so this sample is actually publicly available on github it's on Steve's github account so Steve Sanderson MS plays electron experiment sample you can find that on github and I'm just gonna dotnet run this application dotnet run if you're familiar with dotnet core that's how you start up a dotnet core process which is what it's doing and then that dominant core process is firing off on electron process which it sets up an IPC channel with and there we go alright so this now is not a browser this is a lecture on application but with the same UI that you saw previously so this application is now a cross-platform desktop app that you can run on Windows Mac or Linux using web technologies and dotnet so it just gives you an idea of some of the things that are you know potentially could come down the road with the Razr components model and you're welcome to go download that sample and try it out ok last little bit is roadmap like when is all this stuff coming when can you actually use it you know for a long time the story there was it's experimental don't put it in production I know you're doing it anyway but don't you're not supposed to put it in production you know we're not sure how the where this is gonna go but that this story not with Razer components is different Razer components is shipping in dotnet core 3 oh it's already in preview 2 that's the first preview it showed up with if you have preview 1 that's not good enough you got to go get preview 2 and we're gonna continue working on it and iterating on the model throughout the dotnet course Ryo release when Dominic Horace Rio ships you have now a stable release of Razer components that you can use and put in production and it'll be fully supported because the Razer component model is being shared with blazer we will ship updates to blazer with each dotnet core 3 all updates so we just shipped preview - I think we're shooting for probably early next week to have the next blazer update blazer 0.8 is when we hope to get that out and then have with when preview 3 if dotnet course Rio comes out will expect to have another blazer update now we don't expect actually blazer to ship with Dona course Rio we expect it to ship sometime later and that's the part that's still not known we do intend to ship it we just don't have a concrete timeframe and roadmap for that quite yet as soon as we do we will let you know and I will have a huge party that's gonna be super exciting so that's that's the timeframe that we're looking at when is dotnet core 3 o going to actually ship I think we're looking probably in the fall is when that will stabilize if you've been following that release the big work item there is that we're bringing desktop support to dotnet course REO support for WinForms and WPF they're working really hard to try to get all the designers working and that's they that's a lot of work so we just have to see how long that takes but it's looking like maybe in the fall is when that will go out so here's all the stuff that we saw with Razer components we saw parameters and event handling and data binding and dependency injection routing I think we almost got through everything here I think we didn't see cascading parameters so there's still more stuff that you can go to the docks and check out if you want to learn more make sure you download and install the the SDK so you can try it out you will need the new version of Visual Studio it doesn't work in 2017 the tooling is built in to 2019 here's a bunch of additional resources if you want to learn more all the code is in the main asp.net core repo that's for both blazer and Razer components the docks right now I'd recommend going to blazer dotnet we're right now in the process of moving all the components specific stuff into the main a spinet core docks we taught a workshop earlier this week on using razor components in blazer and I it's a it's a public github repo that you're welcome to go take a look at we built a cool Pizza Store app if you want to try out the workshop that's at AKMs slash believes our workshop the community page again for if you want to get component libraries or JavaScript Interop libraries and by all means please join the conversation on get er now don't miss Steve's talk and just like you know a little bit later today Get Set what 140 140 in room one in room one if it's what I think it is now now for those of you who don't remember like it was at an NBC just like this that blazer was born and you know it was it was a complete surprise like like Steve was with like pregnant with this blazer baby and he didn't tell anybody about it was it like I was talking to Richard Campbell of dotnet rocks and he said he was there and saw David Fowler who's you know architect on our team when Steve first show this and he said that David had to like hold in his brain because it was blowing up because he couldn't believe what he was seeing so who knows what we're going to see in Steve's talk later today I highly encourage you to go if he asks you why so many people are there you can just tell them well well Steve we heard that you are expecting to show us something great and that's all I got for you today thank you for being here there's some green card green cards just lots of green cards out there on the tables and thank you everyone for being I'm happy to stick around to answer any questions that you might have

Channel: NDC Conferences

Views: 72,750

Rating: 4.9057493 out of 5

Keywords: Daniel Roth, Microsoft, .NET, ASP.NET Core 3.0, UI, Razor Components, Blazor, C#, WebAssembly, NDC, London, 2019

Id: SnQ1Vb4fFsk

Length: 62min 29sec (3749 seconds)

Published: Thu Mar 21 2019

Reddit Comments

[u/oflahertaig]

I love this. Re-usable UI in asp.net is a bit of a holy grail for me. Shows how time flies though - seems like only a few weeks ago he was presenting the asp.net core 2.0 version at Build 2018.

Razor components and Blazor would realy be a great modern web dev paradigm.

[u/fuckin_ziggurats]

Razor Components are basically what Blazor is currently, right?

[u/TotesMessenger]

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

• [/r/latexandloaf] Introducing Razor Components in ASP.NET Core 3.0 - Daniel Roth

 ^{If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / Contact)}