A talk for trailblazers: Blazor in .NET 5

coming up next let me get ready to introduce our next talk with steve sanderson and safiya abdallah this is a talk for trailblazers they're going to be talking to us about blazer in.net 5. how's it going steve and sofia very good thank you how are you oh my gosh dot net 5 is so exciting and i'm thrilled to hear that we've got updates for blazer take it away all right i will okay so um hi everybody thank you very much for tuning in or sticking on i'm really glad that you're here i hope this is going to be fun for you this is going to be a lot of interesting stuff for you so yeah i'm steve and i work here at microsoft on the asp.net team particularly focusing on blazer and i'm joined today by one of my superb colleagues safiya do you want to introduce yourself yeah hi everyone i am sophia i am also on the asp.net team uh with steve and a couple of other fantastic people working on blazer awesome all right then so in this talk for about the first 10 to 15 minutes i'm going to be your guide showing you a bunch of cool new things in blazer and then after that safiya will be taking over to show you yet more cool stuff um so to give you the big picture about blazer at the moment as we get to not net five well blazer is going very well as a project it's the fastest growing area of asp.net we've got a lot of people using it we've got lots of high profile usage of blazer within microsoft and we keep hearing about it on the outside of microsoft too so as we came to net 5 we thought of what should we do and we asked the community and we were told about three main areas that people wanted us to uh focus on so the three main areas that we are focusing are improving the developer experience and that's things like improving the debugger improving the code editor improving the responsiveness as you change your code and i want to see updates showing up in the browser the second feature area that we focused on is improving performance on webassembly we've got quite a bit of feedback of people saying that they found cases where they really needed their blazer webassembly apps to run faster so we did a lot of work on that we've got some great results that i'll share with you later on and then the final area is feature gaps because in dot net 3 that was the first real release of blazer so of course there were some gaps in the feature set and in dot net 5 we've worked hard to fill in as many of those gaps as we can so those will be some of the main subjects of this talk so really what we're going to be doing is showing you through demos some of these new features and to do that we are going to need an application a scenario where we can write some code and see out some of these new features so let's have a switch over now to a code editor and i'm going to do these demos in vs code but of course it will work just as well in visual studio for windows or for mac but i'm going to do it in vs code and i'm going to start my application using.net watch run and the first thing you'll notice uh first new feature in net5 is that net run will auto start the browser for you now so that's a very minor feature but it's a gets you started fractionally quicker in the morning so hope hope you'll enjoy that um so now the application's running let's talk about what it is and i'll give credit to safiya for coming up with the idea and basically implementing all of this i'm just going to show it to you which is nice for me and what this is is a notebook application which is an interactive programming environment and let's explain that by creating a new notebook and you'll see that a notebook is a collection of cells in which we can write some code and we can run them so here i've just executed this fibonacci algorithm and we found the fifth fibonacci number is five or we could change it to 15 and we'll see that's a bigger number and below that we are doing some net stuff to get all the numbers between one and ten for each one of those we'll compute the fibonacci number and we'll convert that to a.net array and if i run that you'll see that is nicely formatted as an html table because in this application for different.net types we can have different formatters all right now the code for this application over here has two main parts to it we've got this client project here which is a blazer webassembly application so that is running our application on.net inside the browser we've also got this api project which is an azure functions backend so that's also running.net code but this is running serverlessly in the cloud and the point of this is to show that we can wire these two things together and run our.not code wherever we want whether it's in the browser in the cloud or you know all kinds of different places all right so that's the basic shape of this application and what we're going to do is see some features and the first feature we're going to look at is css isolation which was a very heavily demanded feature by the community people said they wanted it to be easier to manage their css and people said wouldn't it be nice if each razor component could have its own separate css file and the framework could take care of bundling all these together and maybe it could even somehow make sure they are isolated so they don't interfere with one another so let me demonstrate that to you right now okay so back in this application we've got this home screen and it looks a bit boring and plain and we've got this rubbish looking grey button so let's make it a little bit more stylish shall we and to do that i'm just going to reorganize my screen a little bit and we'll get the editor over here and we'll zoom in on this pages collection all right so index.razer is my home screen and you'll notice that alongside it we've got index.razer.css so this is the css isolation feature each component can optionally have its own separate css file and if we look in there you'll see it's just normal css syntax you can do whatever you normally would do with css but it's isolated to that one component and to prove that i'm going to do a slightly weird thing where i'm going to say let's match all of the elements and for every single element we'll set its color to be red and i'll hit save and you'll also notice that in the browser it auto refreshes for me now that's another improvement in net five uh you can set whichever set of file types you want to be automatically pushed and refreshed in the browser as you change your code so now this welcome screen has gone red but not the rest of the application everything else has just stayed as it was because the styles are isolated to that component and that's nice because it means you don't have to worry about having globally unique class names you don't have to worry about names or style rules actually clashing with each other which simplifies your life a little bit and sometimes you don't even need to define css class names for things at all for example if i want to improve the appearance of this gray button a little bit let's say i just want to change the appearance of all the buttons in this component well i don't even need a class name i'll just match all the buttons in this component and i don't have to worry about it interfering with other components all right so now all the buttons here are going to have this blue background color and this four pixel border radius and that's a nice improvement and within the scoped css we can also make use of static content for example i'm going to add a background image using this.net.png file which is in my www directory and when that refreshes you'll see we now get the background image okay so what have we learned well we've learned that we've now got the css isolation feature so each component can deal with its own styles if you want to and we've also got improvements in the tooling so that when we make changes they auto refresh in the browser in a few seconds which greatly makes things feel a lot more smooth okay now this next thing packages auto add their own css and javascript well in.net 3 when you used a nuget package that gave you blazer components if that package brought any scripts or styles of its own you had to manually add references to them which was a bit tedious but in net 5 this can happen automatically and i'll show you that by adding a nuget package so what's the scenario well let's go back to this code editor shall we and you'll notice that there's no syntax highlighting in there it's all just black and there's certainly no fancy features like intellisense code completion so if i want to know what the current weekday is i might type datetime.now and run that and that works okay but what's the weekday is that the right property name i'm not sure oh no it's not date time does not contain a weekday what does it contain i don't know because i'm a c-sharp programmer i just want to use intellisense now i can't do that yet because what is this this is just a plain html text area it knows nothing about the code so what i'm going to do is add a nuget package to give a better text editor better code editor i'm going to add this package called monaco razer now monaco is a code editor that can run inside the browser and it's actually the same technology that's powering the code editor in vs code so you know it's good and now that's added to my project i can use it so i'm not using it yet i haven't changed the code let's go and have a look at the code for that um powering that code editor so inside this file cell codecell.razer we've got a lot of code way too much code for you to read so don't worry about reading at all the only part you need to notice is this text area which is just a plain html text area so of course it's got no syntax highlighting but now i've added that monaco editor i can make use of it there it is okay now i'm going to just drop in this tag that i've already prepared and i'm going to need to add a using statement for that all right and you'll notice that it wants a handler for this get completions async method there so let's fill in some logic to provide the completions and i'm just going to drop in some ready-made code don't worry about understanding this yet i'll show it to you more in a minute i'm just going to press save and that will automatically reload inside the browser and we should see when it does reload that we've now got syntax highlighting which is quite a big improvement and we've also got intellisense so if i start typing now you'll see we've got this and if i want the weekday oh it's actually called day of week i didn't realize that so i'll run that and we'll see it's tuesday great okay now how does that uh intellisense code completions thing work well it's calling this method and if we want to see what this method is doing in more detail how about we use the debugger because that's something we've improved in dot net 5 too in dot net 3 people had a bit of trouble using the debugger for dot-net code on webassembly it was kind of hard to make it connect and even when it did connect it didn't always give you the most useful information but we've improved it a lot so let me show you how easily we can attach the debugger now i'm going to click this attach to blazer button and it doesn't take a long time it just pretty much instantly starts up the browser and attaches to the application in it and that's it okay so let's have a go at setting a breakpoint here inside this getcompletions method right there okay and i'm going to press the dot character here and we should see that we've hit the breakpoint and we can of course evaluate things not just simple objects but even complex typed objects all work now and we can also step over a weights which we couldn't do before so if i hit the step over button it's going to call the azure functions back end and continue asynchronously and now we can see the response in great detail we can see the individual bytes of the response if we want to or all kinds of other information we get as much data as we could possibly want now okay so that was a package bringing its own css and javascript and improvements to debugging now that's all i've got time for it's the end of my working day here in the uk i'm i'm finished i want to go home so i'm going to submit a pull request with these changes in it right now and then hopefully my colleague safiya who's on the west coast of the united states can carry on with the work and add some more great features to our project so over to you safiya [Music] awesome steve that was such a fantastic demo you never fail to blow my mind i'm actually really excited to tinker with some of the things that you've added i love the new monaco editor and i love the work that you've done to improve the homepage for our application so what i've done here is i've cloned the web app that we've created and i've actually picked up your upgrades i'm going to go ahead and run this application and show people some of the new things we've shipped and got it five in case you haven't figured out we've got a lot more to show you i'll be picking up with this awesome so i'm going to go ahead and run the same client application that you were showing just now i'll wait for it to build i'm going to go ahead and pop it open in my web browser here awesome new home page fantastic button all with css isolation loving what i see here now i've got a demo notebook that i want to show folks that showcases some of the new features that we were able to ship this time around cool so you showed us the input cell the code saw earlier with the new monoco editor right here but there's this first cell in my notebook that i want to show folks it looks like there's a file picker in this cell i can choose a file supposedly so let me go ahead and click that see what's going on here looks like i'm prompted with my operating systems file picker i've got the sales data.csv file that i'm going to be using for my demos let me go ahead and click that and upload it oh that's pretty cool look like it's been uploaded somewhere let's take a look at what's going on behind the scenes here because it actually touches on one of the first parts of my demo here which is input file support so let's take a look at the file cell component which i'm using now we'll see here that we're using this input file component the input file component is a new component in blazer with dot net 5. it renders an input html element with a file type so you can use it to upload files in your web application it supports handling multiple files and images and all you need to do is provide a single on change event handler that says what should be done when a user uploads a file in this case we're going to take the file that's uploaded send it to our azure functions backend store the contents in a variable in this case the variable is called file1 here and then the user is going to be able to use this in their notebook for the remainder of the time that's pretty neat look at this so far so now i've got the sales data csv file that's been loaded into my notebook and i can play around with it and that's just what i'm doing in this next cell here i'm going to be using the csv parser package to read the contents of my file this file one variable i'm going to be parsing it and then i'm going to be displaying the raw data so let me go ahead and click run cell here it's going to take a little bit for the computer to do its magic but in just a few moments what we're going to see this point oh perfect timing we've got this lovely html table that shows the contents of my csv file i've got a couple of columns for things like regions countries item types some dates some floats all this fun data now i happen to know that there's about 5 000 or so rows of data in this table and if i scroll through it you'll see that the scrolling experience is buttery smooth what's going on here typically when you try and render 5000 rows of anything in a web browser it's going to knock down over because there's so many different elements to render things will get sluggish and performance will be degraded that's not the case in blazer with our new feature which is virtualization virtualization is the ability to render only the elements that are visible to the user currently in the viewport onto the dom so in this case i've got my gray output area here you can see that i'm highlighting it with my mouse and as i scroll i'm only going to render the table rows that are going to be displayed in this table element and if you don't believe me i'm going to go ahead and inspect element here and you can see that as i scroll through the table rows are going to be updated you can see i'm updating in the purple there now how did i implement this virtualization feature did i labor for days and nights getting it just right no because i happen to be a blazer developer and i can leverage some of the awesome features that shipped in blazer so let me go ahead and show you what's going on under the hood here that's right you better believe it it's one line of code i'm taking advantage of the new virtualized component all i have to do is render this virtualized component provide an items property with the data that i want to display and then provide a child component that i want to render in this case my table rows and that's it my work is done i've got a performant data display in blazer so quick and easy i love it now earlier steve was telling me about this awesome code change that he made and he had mentioned that he had opened a pull request to our company's github repo with the changes let me go ahead and check out the changes that he made i've got his pull request right here add better code editor now what i'm going to notice is that there's this github actions comment from a bot it says azure static web apps your stage site is ready visit it here all right i'm kind of intrigued so i'm going to go ahead and click this and what i'm going to discover is that the changes that steve has made have been shipped into a staging environment on azure and it's fully functional so i can click create new notebook i'll get our new default notebook i can run cells do all of the magic fun there um and what's going on under the hood here is supported by azure static web apps and azure functions and a little bit of github magic so if i go over to my repo i'll see that i've defined a github workflow it's a simple ammo syntax that outlines when builds and deployments should happen when a user opens a pull request or merges a change onto master what's really awesome is that i didn't have to spend years and nights again laboring over this yaml file all i have to do is go on azure portal click a few buttons this yaml file was automatically generated and added into my repo and voila we've got this robust ci cd pipeline for our application with not a lot of effort to boot and so that's support for azure static web apps with laser web assembly so if you're excited about some of the things that we've demoed in this application you can check out the demo code for the app at this github url um you'll see all the features that steve and i demoed in a little bit more speaking of a little bit more we're not quite done yet there's tons of other features and improvements and bug fixes that we've shipped in blazerwith.net5. i want to get started by handing it over to steve to talk about performance improvements yeah all right so like i mentioned earlier uh performance was one of the big requests after we shipped blazer web assembly on 3-2 in very very heavy scenarios where people had got thousands and thousands of ui elements or grids with you know tens of thousands of rows people found that it was quite problematic so we did a lot of work on that we made changes inside the blazer as a rendering framework inside the dot net based class libraries inside the dot net runtime itself and all together we managed to get improvements of between two and four times in typical scenarios um can we have the slides back up awesome yeah so we got some really big improvements there additionally uh some of the smart people on the mono team worked with the people on the chromium project to make some changes in how webassembly is executed and we got almost another two times gain on that just in terms of browser improvements so cumulatively the the difference between blazer web assembly a year ago and now is pretty enormous uh protected browser storage so that's a feature that we added specifically for blazer server and that gives your blazer application which is running on the server a way of storing data safely inside the browser so if you want to store stuff in local storage or session storage in such a way that the end user cannot see what you've stored or interfere with that then the protector browser storage feature does that by storing things with encryption in the end user's browser cool uh well steve mentioned some of the improvements we've made for blazer web assembly and blazer server and with those two hosting models you can run blazer on a variety of targets if you're running it on a living fix or windows server or maybe you're running it inside a modern web browser on wasm now in dot net 5 we ship support for compatibility analyzers and they allow you to decorate a projects library's project file or your function api with information about what platforms a function is supported to run on so if you've ever been in the unfortunate circumstance where you've deployed an application to blazer web assembly in the browser and discovered that certain apis weren't available like environment docket folder path or maybe console.readline gone are those days of having to run into those issues once your application has already been deployed with these analyzers you get this info ahead of time when you're developing your application so you can address them before you have to deal with the annoying stack traces and exceptions in production now oh no jump back into talking about blazer server and a little bit about some of the pre-rendering improvements that we've made in dot net 5. um if you're unfamiliar pre-rendering is the process by which you render static content of a web page first and then you make it interactive later um using either blazer server or blazer web assembly now blazer currently supports two render modes um you can render your pages statically and then make them interactive with blazer server in dot net 5 we ship support for two more render modes the first is webassembly pre-rendered which is going to allow you to pre-render a web page of static html and then make it interactive later using blazer web assembly then we also ship support for a webassembly render mode and what this is going to allow you to do is you can actually leverage it to render blazer web assembly in your existing mvc applications and if this idea sounds interesting to you of being able to use blazer web assembly and existing apps i would encourage you to check out dan and javier's talk later today it's titled modern web development with blazer and dot f5 and they're gonna go a lot more into this topic cool so pre-rendering is really just one of the ways that you can improve startup performance for your application another is lazy loading which allows you to delay when an assembly is loaded until it's requested by the user or it's needed to render a particular page so in dominant five we ship support for lazy loading and blazer um it's really done in two ways the first is this build time attribute that you add to your application's project file blazer webassembly lazy load that allows you to define which assemblies should be lazily loaded then we've also added new apis to the router that allow you to define what will happen when a user navigates to a particular page and we've added a lazy assembly loader service which is going to take care of loading those assemblies lazily loading them into the debugger computing integrity checks loading them from the cache if they've already been loaded all of that good stuff is taken care of by the lazy assembly loader this is just one of the features that you can use um in don f5 now you would think that we are done but we are not because we've got more things to show uh steve do you want to share some of the interesting stuff we've shipped yeah so we clearly do not have anywhere near enough time to talk about all of these in detail but yeah in terms of plugging some of those feature gaps that we mentioned before uh so we've got things like the input radio component the ability to programmatically control focus we had a community contribution for intercepting how components get instantiated so you can do that in a custom way and javascript isolation that's one of the ways in which nuget packages can bring in javascript without requiring the end user the end developer to add references so that's a way of loading es6 modules dynamically inside your blazer components um safely you want to talk about the other ones yeah we've also added again via community contribution support for catch all rep parameters and we've also updated um support for authentication and blazer web assembly so now we support the new off code flow pattern with the latest version of microsoft's identity platform if that's something that's interesting to you again check out don and dan and javier session where they'll be going into a lot more detail about authentication now believe it or not all of these great features don't just happen because steve and i work all night it's actually supported by other members of the blazer team in a variety of teams across microsoft um and with independent within the net team and of course with the community through the blazer sprints we've gotten tons of community contributions for new features and bug fixes that we've shipped as part of dot net 5. and vs improvements are going to be shipping today i think it's past 10 o'clock so vs 16.8 should be out you can try it out now and with that we are ready for questions awesome awesome oh my goodness i know thank you so much for bringing us up to date on on some of those cool new features and you're right it there is just a a a whole treasure trove of new features there and in our folks in in twitter um asking questions with the hashtag.netconf have a handful of questions for us i want to go over here to the tag board and let me see if i can bring up one or two that uh that i think you can help out with here um is this yanez asks can we use less or sass or those types of uh css compilers for laser components css isolation okay well i was talking about css isolation so i'll take this um yes is the answer there's nothing built into the framework but if you do whatever you want to make your less or sas files get transformed to css before the net compiler runs then it's just gonna work we don't really need to know that you've done that you just set up a system whether it's webpack or some other mechanism for transforming those files and it and yeah it will work fine i think we've got examples actually posted online yeah and we've got docs on this as well yeah it feels like that could be a build step you drop into your into your cs proj file cool um moving on there are one or two other questions i wanted to make sure that we got into to include isolated javascript do you add it the same way as css index razer.js sofia do you want to answer yeah we don't currently support an index.razer.js pattern for doing isolated javascript although the way that it's supported is you can actually load any javascript module into your web application i'm just using an import reference so it supports all es modules and then you could invoke methods on or exported functions on those modules directly um so yeah you can check out the documentation on that as well we've got one of the great things that we've worked on as well as documentation for all these features so it doesn't work quite the same way as css but you can kind of achieve the same effect okay i want to go to one more question thank you clayton hunt for that question i'm gonna go to one more here from cliff um is there a path to move from mvc to blazer ah well that ties into um something that sophie has been advertising subtly throughout her talk which is uh that we've got another talk uh coming later on by um javier and dan uh where the uh integration between mvc and blazer is one of the key subjects that they'll be talking about so let's not spoil their talk but you'll get way way more information about them about that from them coming soon fantastic now i've actually got a question here i'm going to use this as a little bit of a segue but i have a final question i just want to highlight how easy is it to upgrade to.net 5 for blazer and this is actually a really good segue into our next talk if you if you want to touch briefly on this because coming up i have immo and philip joining us to talk about migratingto.net 5. are there any gotchas that specifically to blazer folks should keep in mind and i'll save the second half of this question for our friends immo and phillip coming in next i don't know that there are any special gotchas can you think of any sofia yeah i can't think of any i think there's some things that are subtly different to support some of the new features we've shipped like css isolation um but nothing that's a gotcha i think we've done a pretty good job of documenting everything i know in a lot of the previews we went through and kind of caught all those issues and made sure they were documented and stuff so shouldn't be any gotchas fantastic you two and the team do a great job of ensuring backwards compatibility with with our user interface frameworks like blazer thank you so much for that and that was a great talk really appreciate you joining us here for dotnetconf

Channel: dotNET

Views: 10,977

Keywords: .NET

Id: Nag6u5TxjIA

Length: 29min 52sec (1792 seconds)

Published: Thu Nov 12 2020