Blazor - Next Generation UI with .NET 6

my apologies there was a little bit of confusion with getting a camera set up i'll have that set up for my next session good morning good afternoon good evening my name is jeff fritz i'm a principal program manager at microsoft i work on the.net and visual studio teams with a focus on community and particularly with the focus on blazer and live events so training and being involved in these types of things is right up my alley so i want to talk to you today about the next generation of user interface what we're really pushing what we're promoting what we're saying is going to be and what we believe is the next hotness where you want to be building applications and that's with this framework called blazer so let's talk a little bit about what blazer is why we think it's really the the next generation stuff for you to use and uh what you can do with it today now this is a very beginner session this is going to be very much talking about how the technology works how you can get in and get started with it show me a couple of examples but very much getting in at the beginner level i have a session a little bit later today where we're going to get in we'll be a little bit more advanced talk about building components and building some more complicated things to work with blazer so let's talk about let's get through some of the slides thank some of our sponsors and exhibitors blazers built on this thing it was initially built on this thing called web assembly well webassembly that sounds like a throwback that sounds like something right out of the 70s meets 2021 what is web assembly so according to webassembly.org abbreviated wasm webassembly is a binary instruction format for stack based virtual machine wasm is designed as a portable compilation target target for programming languages enabling deployment on the web for client and server applications that's that's a lot but let's boil that down what does that mean for us as developers it means you can program with your favorite programming language and if it can compile to a different runtime target we can deploy and run in the browser let me say that again you can build with your favorite programming language and compile it to run in the browser the browser typically right is where we have javascript running if you want to write code that runs in the browser back in the day you wrote java applets right you wrote an activex control back in 1998 right we you wrote flash components i see a couple folks smiling going yeah we did that you might have written adobe flash at one point shockwave right we had all these different formats but they were very proprietary they were things that one vendor would support and there were extensions onto html so you could embed and drop those components into your web pages webassembly is not an extension webassembly is part of the html5 standard so whatever phone you're using whatever device you're using if it's working with a modern browser it supports webassembly so what's that mean what can we do with this well webassembly since it's binary code running in the browser it's not interpreted so it makes it efficient and fast okay because we're loading binary data binary applications in the browser for it to execute and we've learned from the running of the javascript runtime in the browser and now webassembly wasm runs in the same memory safe sandboxed environment so anybody who goes and deploys an application that runs in the browser on the client they don't have access to things like the file system right they don't directly have access to things like different sensors on the device they only have the ability to edit what's inside the browser frame and that didn't resize properly so it integrates with the features you already know and it's part of the web open web platform these are things that we know how to build and work with as web developers so we can continue to push and develop web applications we can integrate with javascript and we can continue to innovate with webassembly so i mentioned everybody's browser has this do you remember spectre in meltdown it's been four years since this thing happened but back in 2017 there was this vulnerability that was discovered in basically every processor right i'm not going to get into the how that vulnerability worked but what it did do was it forced every operating system vendor and every browser vendor to release new versions and push updates to everybody's phone and everybody's machine every operating system was updated but what that delivered was updates to the browser to support javascript patching and it also came with web assembly so even even our relatives who don't keep up with patching their machines right here in the states whenever i go visit my family on thanksgiving thanksgiving weekend i end up being that family i.t guy and applying all the windows updates applying all the updates to their phones and making sure that everybody's secure i don't want my mother-in-law to inadvertently get her machine attacked right by somebody who's exploiting an unpatched version of the operating system so we do these things everybody's patched up well now folks like like my mother-in-law and my non-technical family members like like my mother-in-law they've all got the ability to run webassembly okay that's something that that means i don't need to go and install clients and patches and things to get this working but why not use javascript why use webassembly instead of javascript i've already got so much written with javascript well the folks from the webassembly group they say webassembly can be natively decoded much faster than javascript can be parsed with experiments showing a 20 times performance improvement okay now we're talking now we're getting somewhere alright webassembly can be targeted by many different programming languages and frameworks so many of us in this room were net developers we're c-sharp developers i can build with c-sharp and it works in the browser but there's all kinds of other languages that are enabled to work with webassembly also like all of these so now the browser is not just a javascript playground there's some crazy languages up here poetry prologue rust zig i've never heard of zig but it was on the list from the awesome webassembly language languages website and i dropped it in here kotlin um assembly script i don't even what's assembly script but that works you can do this okay so let's take a look at some demos from the awesome webassembly uh website of just how webassembly works in the browser and what this performance bump means and then we'll take that over and start looking at how we can use that with blazer um where did there was a notes page to go with this because my notes no matter um i'm going to go over here so this is the awesome blazer website that has all kinds of blazer demos but what i want to show you is over here nope where'd that browser go are you kidding um this is doom running in the browser i'm going to show that one in just a second but there's also diablo working in the browser and i actually had this running a few minutes ago but this is diablo running built with blazer okay recompiled and running in the browser so back in 1997 the folks at blizzard north built this game diablo and it's it's been recompiled runs on.net live in the browser and i can log in of course i'm going to log in as c sharp fritz because he's quite a mighty hero and i can get back to running around in tristrum and on this machine it renders and i can i can play i can interact with the game and it looks and feels like it did back when i was in college in 97. so we've got a little bit of power now in the browser we can work with i'll go over to that other demo that i brought up because whenever there's a sufficiently sophisticated new technology that folks want to brag about hey look what we can do on mobile device x on tiny screen y they run doom we can run doom and it will load up and run in the browser okay so this isn't just something simple that we're going to use to manipulate forms and data but the the power of these very high-end games running and animating live in our browsers really tells tells you something that we can do impressive things with this this is all running locally on this machine i'm not going back to a server and downloading video content and presenting it it's downloaded the dlls the binaries the map packs and it's running it in the browser so we've got this step that we've taken where and i'm not going to get into actually playing the game here the intro takes a little bit too long but we've stepped into a place where deploying and building applications that are going to run on our phones our tablets and and our workstations now the promise of yet do it with the web now we can do a whole lot more live in the browser so this is the awesome blazer list being maintained out on github from adrian taurus i'll have a link to this at at the end of the presentation so okay there's there's a lot we can do there as as we look to move forward with our applications so how does laser work what exactly does blazer do for us in the browser so our typical browser is there on the left side and our servers usually run in some on some sort of uh data center or they're hosted in a nice blue lovely shade of blue cloud and you get in fetch data back and forth from it and hopefully you're running asp.net core because it's the fastest commercial web framework available in your fluffy blue cloud and you're sending data back and forth to the browser and the way that most folks who want to build an interactive local application in the browser the way they do that is they'll use one of these angular reactor view on top of the javascript runtime in the browser and they're fetching data from services microservices that are running out in their data center so as a c-sharp developer i want to be able to move forward and use blazer i'm going to replace all those javascript frameworks that are running and replacing the contents inside my browser i'm going to replace it with blazer so that instead i'll deliver all my dlls instead of all javascript libraries i'll deliver dlls into the browser they'll load up and render content and i'll fetch data as needed from the server it's quite magical you might say so blazer we can build client-side web ui with net instead of javascript it compiles down and runs in the browser we can write reusable web ui components with c-sharp and razer we know how to do that we've been doing mvc for 13 years so razer razor's pretty cool i'm very familiar with that shared.net code then between client and the server this was that that key feature that so many of our friends that went to javascript went to node loved because they could take their logic they had in the browser move it to the server and it was the same language both on the front end and in their back-end services we can call into javascript libraries from blazer as needed we can reach in we can execute those we have to request and put a little bit of configuration in there and it will work now blazer works on either the client or the server so when it runs in the browser we have razer components that run on top of a.net framework that compiled down to webassembly and this is just like it runs on windows mac or linux you have your dotnet application that you built with with c sharp and what not right win forms wpf it compiles down runs on a net framework that runs on a runtime built for that operating system well in blazer it interacts with the dom with blazer server same type thing we have our razer components in.net will be run on an asp.net core server out in the cloud or on a hosted service in your data center and they send data back and forth to the browser using signal r signalr is our live communication technology that provides live updates using web sockets or a series of other technologies that it will step down through okay so we have some options we have two different choices of how we want to build our application now blazer webassembly was released with net core 3.1 and it's available going forward so it is also available in net 5 and it's being updated for net six blazer server was first released with net core 30. it's part of all the versions since so it is part of a long-term support instance with net core 3.1 all right now why would you choose one over the other i changed my font back um that's really hard to see for the folks here in the room blazer webassembly is great for offline support or progressive web apps zero latency in the user interface because all the code is local in the browser and working which also means you can host it as a static website and i have a session tomorrow morning talking about azure and static websites with blazer i hope you come back for that one blazer server though because we're rendering all of our components on the server makes it really good for thin clients right if you're interacting somewhere where they don't have very good network connection and you don't want to have to send a lot of content down into the browser you can use a very thin client run with the full asp.net runtime on the server and all of your code is on the server as well right haven't you ever wondered with javascript applications why people don't go through and just edit the javascript code live in their browser well you're pushing all of your dlls down into the browser with webassembly with blazer server all of your dlls all of your intellectual property stays in the data center it stays on the cloud somewhere that you have full control over and nobody gets access to those binaries okay so let's get started with blazer let's do some of the basic getting started things let's let's actually run an application and go through and take a look at this a little bit so you can download and run the.net 5 sdk for windows mac or linux once you have that installed and there's great instructions from blazer.net or from get.net that website get period dot period dot net and you can run dot net new blazer wasm and just dot net run it now i'm going to show you a little bit of this with net 6 today so we can see some of the new features that have come along as part of blazer here so the machine that i'm running on this is actually a linux machine running kubuntu linux it's running kde on top of ubuntu so let's head over and take a look at our first blazer application we're going to take a look at some other demos along the way here so i am going to uh let's go over here and let's open a terminal so i already have net installed here so let's go into my dev folder and we're going to create our first application dot net new laser wasm and let's call this devint first dash oh there we go so this is creating a new blazer web assembly application and writing it into that folder so i'll go into that folder right and let's just.net run just run the application and see what we get and let's peel this back a little bit and dig in so let me open browser for this there we go no you're not gonna there we go localhost 5000 and there we go hello world and i've got an about link in the top left i've got a counter nav item on the left of fetch data nav item and i've got this little survey thing in the middle how is blazer working for you please take our brief survey there's a couple things going on here but this is all running in the browser look at this i hit f12 to bring up my developer console and it says blazer loaded 8.6 meg resources 8.6 meg just to run hello world but what it's doing is it's downloading that dotnet runtime it's downloading my application and putting that into application um it's putting it into local storage here and we're able to see it right there these are all the things now when i'm running in development mode it's delivering all these dlls because it's it's running locally when we publish and we ship these out for anybody on the web to interact with it's actually going to link them in tree shake so it doesn't send all of the content so you don't see 8meg loaded out there however i tried taking the pepsi challenge and comparing to other websites well how does 8.6 meg compared to other locations and i went and looked at places like youtube and twitch that are doing they're doing a lot in the browser and it turns out that [Music] they load a little bit more than that in javascript libraries when you first go to their websites and they load it every time they don't cache it like blazer does this is sitting in local storage it won't ask for it again and i can actually see right it loaded 8meg from cache loaded .04 meg over the network so it didn't go and load all that content again just for opening the application this is a good thing this means that it's going to load and manage and behave properly for us how we doing over here teams folks we all right i'm looking for one of my texts i don't see anybody i'm going to assume we're doing okay um so there's a couple things going on here let's look at the counter first here this is a very simple click this and it increments big deal i so what what's it doing there it's incrementing this number but it's doing it with c sharp in the browser i've loaded these dlls right and if i open this back up and show you the list of dlls right look microsoft asp.net core microsoft extensions c sharp it even loaded some components to visual basic here but if i keep scrolling down it's going to stumble into right look at all these system system runtimes system security bits threading and dotnet webassembly come here you um did i miss it did i miss it i should see devint in here there it is devin first dll there's my application it's only 17k and that's running out of it let's go over and and take a look at the code that's actually driving this so let me run tmux so i can put this here and we'll just we'll just.net watch over there and over here we'll open visual studio code so there it is running on the left here's the application if i go look at that counter here it is okay let's close this so i have this little increment count method that is called and it fills in that current count right there and updates it and i have on my button i have this little on click method and that looks like a javascript on click it looks like a javascript on click but it's got the little at sign in front of it the at sign tells the blazer runtime this is c sharp code this is a dotnet method that you're going to execute when that button is clicked it's going to execute the method increment count an increment count is right here okay so there it is and when i click it it does current count plus one and it refreshes that number now one of the features that we've been touting that we say is so great that's coming as part of.net 6 for blazer developers is this feature called hot reload now think about it this running in the browser is um [Music] it's it's got a dll there for me to hot reload something means i need to shut down the application patch that dll and restart it well we can do it without patching the dll i will save and it'll refresh you see a little thing popped up there updated the page and now it counts by fives and if we go back in here and change this to let's make it really dramatic and go by 100 and now it increments by 100s so the simple updates in here right save and it refreshes so now as a net developer right as an asp.net developer you're used to i've got to rebuild the application i got to wait for it to load right and the whole edit and continue experience just it was lost for for how long now right i have.net watch running in the background on a linux machine running visual studio code i did this on purpose for the for these demos because i wanted to show you that this is not just a visual studio thing this is something that everybody can do windows mac and linux and build your blazer applications and be successful i'm running in firefox on a linux machine there's no microsoft tech here except for net okay so these are things that make us as blazer developers they empower us they enable us to do more to go to different places and this application doesn't have any moving pieces on the server these dot razer files are my blazer components they're my pages that specify here's what you're going to present when we navigate to the various locations so this at page counter you see on line one here that tells the blazer runtime you're going to display this content when we navigate to slash counter but pages in blazer are also components and a component in blazer is something that we can reference that's another dot razor file that we can reference with a tag so this kind of makes sense i've got a survey prompt tag here let me bump that up so i've got a survey prompt tag and there is a survey prompt dot razor over here so i have a tag that has the same name as the dot razor file and when we look at that here's that div that says please take our survey and tell us what you think this is garden variety html razer we're used to seeing this we know how to do the pivot back and forth between html and razer syntax we already know how to do that because we've been doing it for 10 plus years but now we're taking it a little bit further by making this dot razor file which has a little bit more features than what you're used to seeing in razer templating now we can do things like add this code block that we see down here on line 12. now we have the ability to instead of adding functions like we did in razer templates for asp.net core now we can add additional code that enhances the behavior of the component so here we've added a parameter with that parameter attribute above this it's a parameter for this component called title has get set and string we're used to seeing this it's a garden variety it's a typical c sharp property but what we can do with that then is over here on the index page i can now apply that parameter as a tag attribute i can fill in some content that gets passed in as a property and when it gets rendered over on the survey prompt it places that title right there on line three outputs it right and that's something you would kind of expect that's something you're familiar with in using razer so let's take this a little bit further right that's my survey prompt i mentioned that every one of these is a every one of these.razer files is a component so let's remove that i'm going to go back to my home page here save and it's gone okay do i have auto save turned on so i should be able to change this and it'll automatically refresh and update because i have auto save turned on i'm not even myself ctrl s working on this so now i can add that same counter component that i have counter over there and it appears on the page and i have this with the plus 100 sitting there i can go further and and wire up a parameter over here so that i can do change the increment up right so let's set this up as right parameter i'll use the uh public int i'll call this increment get set let's hide this there we go it re compiled properly i'll take that increment and i will default it to one and instead of plus minus 100 i will say plus equals increment and now if i go over here this isn't working why isn't it working increment equals one what did we do i so what we can do is we can also force the reload so it loads up brand new content let me make sure yeah there it goes now it's counting so let me go back to here and if i go to my index page i can extend that counter now to say increment equals now let's add the 100 refreshed and it updates so i have this very rich parameter feature that i can use to pass data back and forth between components now those that are using javascript in angular view and react they use fetch to go and get data from various microservices for interacting with cloud services right you may want to use azure search or azure storage to store content that you want to fetch and present on screen or you want to execute a search operation bring back the results and paint that on screen well the fetch data sample here shows this very basic interaction that will allow you to get data from somewhere else and paint it on screen and as dot net developers we already have a component that does this it's the http client so just like we can in asp.net core we can use the inject directive that we have there on line two to inject an http client into our blazer page into our blazer component and our code then can go out and get from some service right it's going to go get some json and return it as an array of weather forecast items now the weather forecast is this little class right here so we've written a class that lives inside of a razor file that runs in the browser we're gonna go fetch data from this dot json file put it into this forecasts array that we see on line 38 and there's a little for loop here that outputs the content on the right so we have we have a way to go fetch data fetch it in whatever format you want format it however you want because you have access to all of net json is a handy format real easy to work with and paint it on the screen make decisions what you want to do and make it appear appropriately that's not bad we can start to get really creative now so we have um some samples out there some other applications that we've been going through there's a a great to do example to-do list example available for you out there that you can take a look at and wander through and see how things fit together but i want to call back to the um the blazing pizza demo that's part of our part of our workshop and we gave the blazing the blazer workshop yesterday here at dev intersection let me head over to the console and i'm going to go start that application so this is available on um on our github there we go yes dot-net run this one there we go so it's not just a sample application like this but we can do pizza shop it looks and feels a little bit like a typical storefront you might go to online in order to order water pizza order something from doordash or wherever to be delivered to you so i can go through and i really like pepperoni pizza um if i'm gonna order this from my family let's make this a little bit bigger and i like to put some bell peppers on that also all right we can place that order it appears over on the side i can place that order it'll prompt me to log in we have security available for blazer it works all the way through from your asp.net core server uh into into blazer we can use oidc if you want to authenticate that way as well so let me log in as me see if i remember my password see if i remember my password i set up for this nope i didn't i'll give it one more chance one more try nope i forget my password that's fine uh register as a new user sure i'll log in as this there we go it's not wired up to email so uh map component live in the browser so this is not just simple demos there it is getting closer right we can do a bit of tech with this we can actually get outside the box here and build full web applications with this okay there we go delivered and there's the delivery location why am i getting i'm not sure why i'm getting that video blip so all right those are the the typical examples that we'd like to show about this we also have the ability to do static websites i mentioned right we can do because this is all dlls being shipped down and running the browser we can run this on top of just static html we don't have to have things running on a server you may want things running on a server so we can do that with azure functions right those are very small little blocks of code that sit on the server execute maybe query a database return some data paint it on the screen and then we're not managing servers at all we're now just managing the application that runs in the browser so i wrote a little application that shows this off because um i thought it would be something fun to do so you might not know this but i like hats i really like hats i really really like hats i've got more than 120 130 and i wear a different one on every video stream that i do and i've loaded about 60 of them onto this website with a little bit of css but this is it's just a website that shows some of the hats um [Music] but this is all taken presented and running native in your browser so i can go up here and i can i can search for um right i have a handful of penn state hats so that search is all running in the browser formatting and relaying out the screen it's doing a query back to an azure function to go get the data out of the database and present that information so i'm not actually running a server here once that data is delivered to you it's done it doesn't go fetch anything from the server i i load up those images from azure storage but i'm not going through all of this um challenge of loading up where all my data is every time right i load it once it's sitting here in json right here there's a spacex hat and i can search for and bring that up devon or section 2019 in orlando i went out to kennedy space center and i got this hat so that's easy the source code for this is available if you want to check it out and i want to step through and show you just one or two things about this real quick uh this is fritz dot hat collection so there are three parts to that application there's the api that runs on the server there's the client app which is the blazer application and then there's the shared content that travels from server to client my hats so if we take a look inside that shared folder i have a hat object and the hat has a name a description when it was acquired and the image url but on my api i have just an azure function that sits out here has a database repository and all it does is go into that repository get the hats and return them i have one function that runs on azure this costs me nothing to run the static website itself costs me nothing to run on a basic service it's free to run this when you start to hit a significant number like millions of requests for the function then then you have to pay a little bit but just to host this and and run out there and support fritz's hat collection cost me nothing and it's a simple website and i built it with blazer it all runs in the browser and i don't have to think about managing servers and and how things are going to run in the browser because it uses the exact same programming language the exact same framework front to back in the browser out of the browser on those azure functions and i'm referencing that same hat object in both locations so now my business logic my skills as a net developer become much more powerful much more portable to take to other platforms and we're going to see more about this as we get into dotnet maui coming up in the fall with net 6 we're going to be able to take our blazer applications or blazer pages and copy them into a.net maui application and it will compile and run those natively on windows mac ios and android so it's very important that if you are a web developer check out blazer get involved here get a little bit into it this was a simple website that when you look at the client it it's it's silly how simple this is because i have an index page here and all it's doing with its collection of hat objects is saying for each hat format the hat on screen i wrote a little hat ui component just so i could show how easy it is to build a little component that knows how to format a hat object with the bootstrap card ui so i put the name of the hat i put when it was acquired and i put a little bit of a description and i can even put a footer on there if i wanted to and i think i did put a footer on this so that you could see i started putting yeah there we go some acquired dates on these i have a super c sharp hat there there's my blazer hat is down here somewhere there it is blazer april 2019 i made that hat so this is easy for us to do we know how to do this you know how to build html you know how to work with razer this is where you want to be not in my hat application this is a simple application but these are the things that you you're going to benefit from learning looking forward at the next 12 to 18 months of um of net and where you want to take your career so i have a couple resources for you as we wrap up here the webassembly specification if you want to dig in and learn more about how webassembly runs why it's so good in the browser check it out at webassembly.org the awesome web assembly list where you'll find the demo for doom that i ran in the browser because i know you want to run this on your phone because doom runs on your phone in the browser okay i did this with safari i did this with the diablo demo the diablo demo is that awesome blazer but you can check those out on github get blazer at blazer.net and you can install net5sdk and get that running at dot net sure the the question for everybody to be able to hear is when i was showing the counter sample i had a little bit of a caching issue there that it didn't it didn't reload and present properly so to be clear i'm running.net 6 preview 4 i'm literally showing you bits that were released three weeks ago so some of the things that around the hot reload aren't perfect yet so it wasn't it wasn't um it wasn't refreshing the screen completely when i ran that so if i go back up here um [Music] where was it uh devint first uh and if i dotnet run this so i'm not watching right dotnet watch will run and execute your code and re-execute your code every time it changes so the counter example here was caching for me because the way that.net watch runs it it keeps a lot of that code running in the background and it is just swapping out bits so having to restart the server because i'm in development mode is what happened there so thank you for the question exactly it's it we're getting there it's growing so there was a question over here on the right side yes sir yes so the the question asked is when i was showing the property that we were passing in here for the counter i was passing in um over here in my counter example i just passed in an integer here for a parameter and in the survey the survey prompt um we're just passing in a string can we pass more complex objects into our components into our blazer pages yes we can is the answer um if i head back over here and i'm gonna i'm gonna go back to my hat example um see i i like hats for a reason um check this out so this is that hat ui component inside my hat collection website each one of these cards is a hat ui in blazer so this is the source code to that component and inside here the property that i'm passing in is a hat object so i've got my domain domain model it sounds weird domain model and it's a hat okay um but i'm passing that more complex object in and it's using that and presenting it properly on screen for me

Channel: Microsoft Developer

Views: 52,738

Keywords:

Id: 1qOXCpCwmJ4

Length: 46min 58sec (2818 seconds)

Published: Tue Jun 08 2021