Blazor, a new framework for browser-based .NET apps - Steve Sanderson

okay cool I think that we can officially get started so hello all you lovely people is so nice to see you all here I'm really pleased that you've chosen to come over to this session and so to introduce myself I am Steve and I work at Microsoft I work on the asp net team and i spend all my time working on this thing blazer and fun fact for you all blazer started here at NDC Oslo it was originally just a little demo in a conference presentation here two years ago and the people said we like that so much you've got to do it you've got to make that a real thing and turn that into an actual product so we had no choice at all we had to just go and do this thing but you're all responsible so in a way I think we can say we are all the mummies and daddies of Blaser we are you know is in all how of our hearts I think that I think you'd agree right or possibly you've never even heard of this thing at all and if that's the case I'd I need to get a sense of that so can you give me a show of hands if you've got any sense of what blazar is you've heard anything about like every single person cool good all right so um when I do this talk I'm gonna give you some I'll do a little bit of introductory stuff because there may be some people who either haven't really seen it or they can't really remember it but I know a lot of you will know the basics so I'll go through the basics pretty quick and then we'll start getting onto some slightly more advanced and newer stuff so what is this thing anyway well good chance you know but just in case you don't and the basic situation with web development these days is that you've got some code that runs on a web server maybe it's in the cloud somewhere which is your application logic but it's not all of your application logic because you also need to make a user interface appear to your users and they are in a web browser so how do you make a UI appear in a web browser well the traditional answer has been you use one of these things a JavaScript framework and you go about your day-to-day development life and you're happy and you make your UI so that's all very well but it's a bit limiting really isn't it if the only way you can do a UI is using a JavaScript technology or something that compiles to JavaScript and that got us thinking on the.net team wouldn't it be cool if we could use some of the new emerging technologies like webassembly or well it was emerging two years ago it's pretty well-established now to enable you to write your front-end web application with net inside the browser and that is the the original idea of blazer it was to build on the ability to run dotnet on web assembly and enable you to build a rich user interface that runs in a purely standards-compliant way no plugins inside your browser and hopefully make you very productive okay so let's just have a look at the basics of a blazer web application which I know a lot of you may have seen before so we'll go through it pretty quick so when you create a new project whether you use Visual Studio in Windows or whether you use the command line tool on Linux or Mac or on Windows then when you first create it it looks like this so it's a pretty typical dashboard a kind of website which has got a couple of different pages in it that we can do client-side navigation and we can click a button to increment a counter and behind all that is dotnet code so if we look over here in Visual Studio and we zoom in a bit we can have a look and we'll see that we've got no Java Script in our application we've got c-sharp files and razor files so what's a raise a file well it's the new name for CS HTML when you're using get inside blazer and each one of those razor files is a component players who is a component based UI framework so you build your application out of lots of components for example the counter component this is what we had just here when I was clicking this button and if we look we can see it uses a page directive to say that this is the component we should display when the user is on this URL we have got some HTML markup and we've got some c-sharp code because we're able to run your c-sharp in the browser now so we've defined this current count we're displaying the current count and we've got a button that says when you click it we're gonna call a c-sharp method and it will increment the count and similarly if we switch over onto this fetch data page you'll see again we've got a page directive to say that it's what we display when we're on this URL we are able to inject services from the dependency injection system and here we're injecting and to be client so we can make a request to the server and if we scroll way way way down here we can see that when this component is first initialized it's going to make an HTTP request for some JSON data which comes back asynchronously and we're going to deserialize it as an array of weather forecast objects and then once we've got that we can do this simple c-sharp loop over those forecasts and produce the HTML necessary for that bit of UI okay so pretty straightforward stuff are we going to get on to building bigger and more interesting application in a few minutes but before we get there let's do a little bit of a warm-up and remind ourselves what the basic programming model in Blaser is so let's make this page here this fetch date page a little bit more interactive let's say we look at the weather and we think I don't really like that weather I want to change it something else so let's make the way there editable shall we let's say I want to be able to edit the temperature well how can I do that well I can do so basically using normal HTML so I can say instead of displaying the template you see I'm going to have an input type equals number because it is a number and then I'm going to tell Blazer to bind the value of that to the temperature in C so we can now edit it and we can do a couple more things too so let's say instead of the temperature in Fahrenheit being fixed to whatever the server said we are going to compute it dynamically so we're going to say it's the temperature C times 2 plus 30 because I hear that is approximately the formula for doing that and then finally let's display something else let's display some overall statistics about the weather for the entire week so if you had to describe the weather throughout an entire week what sort of statistic would you use well like everybody any normal person in the street they say what's the total temperature going to be this week how many degrees will be happening altogether so we'll say total temperature this this I have to type it week is going to be will get the forecasts and we are going to sum over all of the forecasts temperature C values okay and then we can say it's that many degrees in total this week but one more thing we have to do before the forecast data has been loaded it's going to be null so I'm going to use the question mark operator to say when we don't have that data we're just going to have null there instead okay so let's see if now we've got an editable weather page it looks like we have so I can click on these up and down buttons and you'll see the temperature in F will go up as I do that so does the total temperature and if we make it really warm tomorrow you'll see like the total temperature properly reacts to that okay so there is some basic Blazer programming concepts we've got page directives we can inject services we can display HTML we can include c-sharp expressions in our HTML we can do c-sharp control flow with loops we can use bind to birth display and read data from the user we can put arbitrary c-sharp code in we can make requests to the server and we can work with custom types all that sort of typical blazer programming experience alright so there's your basics of blazer I hope you're ready now to move on to something a little bit more interesting and advanced and first I want to get into how this stuff is actually working behind the scenes so I've been telling you that we can run your dotnet code in the browser but how exactly does that work I've been saying the word web assembly quite a lot but what what even is that and what does it look like on the inside so to make your code running the browser there we're using a stack of three technologies and the bottom layer in our cake here is web assembly so web assembly is a bytecode format for the web which has been supported in all the browsers for two years now so that's all the desktop browsers and all the mobile browsers they all support it it's not a new or experimental thing this is it's just been there for a long time by now and the idea with web assembly is that you can take your code from whatever language you want to work in and compile it to web assembly and it's the bytecode format that is designed for performance and simplicity really so it's going to run the same in all the browsers and it should be able to get to within about a factor of two of running at natives that's webassembly itself okay now in terms of how we run your dotnet code a reasonable person might guess at this stage that we've found some way of compiling dotnet to webassembly that's be a completely reasonable guess but it's actually not true that's not what we're doing at this stage although it is something that we are working on doing at some point well some point fairly soon but currently what we're doing to run your code is we've taken a dotnet runtime and we've compiled that to webassembly instead so we can load this dotnet runtime into the browser and then that can load and execute normal net assemblies and the particular runtime that we're using here is mono and if you're wondering why mono well the answer is that Microsoft currently produces ships and supports three net runtimes we've got dotnet corked on a framework and mono and of those three mono is the one that's designed most around portability so it was the one that was by far the most practical for us to compile and get running on web assembly but in the long run this doesn't even matter because as you'll have seen with the.net 5 announcements this is all converging anyway but for a long time for now you're going to see the word mono showing up maybe you'll always see the word mono I don't know what the final branding is going to be but it's not really going to matter very much in the long run anyway the final layer in our technology cake is blazer itself and that is the UI programming model so that's the thing that knows about what components are the the fact that components have parameters they need to get re-rendered they can be nested all that kind of stuff that you've been seeing already so let me actually prove to you that some of the claims I've just been making are actually true by showing you this actually happening inside the browser so we've got our blazer basics thing here and if I pop open the browser network tab and then I do a reload then I'll zoom in a little bit and what we'll see is this is all the stuff that we sent down to the browser them so we've sent the initial HTML page here which contains a reference to this library this tiny bit of Java it's not tiny actually this bit of JavaScript called blizzard web assembly Jas and that's the thing that knows how to load and start up the mono web assembly runtime so it loads a few more things and then you'll see it's loading mono wasum and that is mono itself which has been compiled to webassembly and then into that we can load regular dotnet dll's so we've loaded the normal assembly for your application which has been built by the normal c-sharp compiler no weird magic involved and then we also learned the various other dependencies that we've got to make your application actually load now if you're wondering how big this thing actually is let's try and measure that so I'm going to disable my cache so I'm pretending to be a completely fresh new user who's never seen this before and will see that the total amount of network traffic involved in loading this thing is 2.3 megabytes by default so that is on one hand that's great because that's really small for dotnet runtime normally darknet runtimes are like hundreds of megabytes so we've done a lot of work to bring it down to two point three Meg's but at the same time it's also a pretty large for a web page so whether or not this is suitable for your use cases depends on what they are for some sort of internal business application that's probably completely fine for public facing applications you've got more of a decision to make we are working on bringing that down further as time goes on but that's what we've got to now and the other thing to bear in mind is that this is only a first-time thing of course it's cached so if I enable caching and do this again you'll see that the total amount of network traffic transferred now 15.5 kilobytes so you know it really is just a first-time think okay so what else can we say about this what is this mono dot Wasson thing what is on the inside of that file it's webassembly by code but what does that actually look like can we see it can we debug it the answer is yes we can see it and we can debug it but it is not a very useful thing to do but I'm just gonna do it anyway so let's just close these things because that's distracting and we'll see that if we want to see the inside of mono we can look in our sources tab in this wasum folder here webassembly and you'll see that it contains hundreds and hundreds and hundreds of these tiny little snippets of webassembly bytecode now these aren't all separately fetched in different HTTP requests that would be insane this is just the browser giving you a sort of human readable view of the inside of manoda awesome and so it converts all the binary bytecode into this text-based format and we can see all the different functions that have been compiled there and if you look at closely at it you'll see that this bytecode format for web assembly is a it's a stack based virtual machine it's all about putting stuff on to a stack making performing operations to mutate the stuff that's on the stack and you know getting it back off and it only operates on basic numeric types and it's designed all around performance but it's not very interesting or useful to be looking at your application at a bytecode level if you really wanted to debug your app you would want to see your c-sharp source code right so how can we do that because there is no awareness of c-sharp in the web browser well what we've done is we've created a little debug server that runs in the background when you're in development mode and your browser can connect to that and it tells the browser what's going on inside monos runtime and if you want to access it you'll see we've got this debugging hotkey shift alt D or shift command D if you're on a Mac so if I press shift alt D right now you'll see it pops up another set of the browser dev tools and these are the real browser dev tools they are connected to our application so to prove that if I go to the elements tab here and move this out here then when I start hovering over stuff you'll see that stuff gets highlighted because it really is the browser's actual dev tools there and if we go on to the sources tab I can now expand file and you'll start to see our actual application source code so if you've seen this before I can tell you have got a few improvements that we've added to that recently but one of them is that we now show your application in its original hierarchical folder structure and not just one giant list of files as we did until a few weeks ago so that's cool another thing I'll show you in a second but first observe that yes we can see our c-sharp source code here not just c-sharp we can also see our RAZR code and if i want to set a breakpoint then that's absolutely gonna work so if I come back over here and then I navigate to the fetch data page you'll see we've hit that break point so we're able to actually have a debugger for sooo shop code running inside the browser tools and another thing that we can do now that we couldn't do until a few weeks ago is we can put some put a breakpoint right in the middle of the rendering logic as well if we want to so if I go away from there and come back you'll see we hit this breakpoint during the rendering logic and better still if you look down here you'll see we can now start to inspect the shape of some of the dotnet objects that are alive inside that runtime so we've got this F variable here which is of type weather forecast and if we expand that you'll see we can even see the properties on it now this is not a complete production ready debugging system there's a lot of work left for us to do to make this really ready as evidenced by the fact that although we can display strings and numbers we don't even have a way to display date times just yet but we are working on it we're going to add you know all the low-level primitives of dotnet will become available so that you'll be able to properly debug your application inside the browser there okay right so that's some that's enough about what's going on behind the scenes there we've looked to how mono dot wasum gets loaded and what's inside that and we've seen a little bit about debugging but now I want to build something bigger or more interesting and using this other application I'm going to be able to show you some of the newer things that we've just shipped in the last month or two so I'm gonna switch projects now I'm gonna switch over to this other thing which I call Mission Control so what's Mission Control well as I've told you my day job is being a developer on the SP nut core team and working on blazer but I have this little side project that I do in the evenings and weekends which is running a network of spies and secret agents who mostly operates around New York City and so I've created this application here that lets me track where all my agents are and on what their current missions are ok so let's run it and then we'll talk about how it works so when it comes up you'll see it looks kind of familiar because it's the same basic structure as the thing I showed you before it's got a side bar which is sort of slidy in this case and I can switch from home on to agents and it's going to get a list of my agents from my back-end data source there and display and I've deliberately made it look quite similar to the default project template so that it's easier for you to understand the structure but we are going to add some more interesting things to it okay so let's just see how does this agents page just to remind ourselves what that sort of code looks like well firstly let's have a look at the overall solution structure you'll see this time instead of having just one project I've now got three and this is what you get when you use the Blazer hosted on asp net core project template it gives you three projects a client project which is your client side blazer application that runs under web assembly inside the browser it also gives you a server project which is a regular server-side asp net core application and that's got two jobs really the first job is to actually serve the client application to the browser and the second job is to be a place where you can put your server-side API endpoints so that you can deal with things like interacting with a database enforcing security rules or that kind of thing and then finally we've got the last and best project which is the shared project and it's best because it can be used in both places it's simply a regular net standard class library that's referenced by both client and server which means if you ever need to exchange data between the two server and client worlds as you always do then you can guarantee that they've both got the same representation of the data you're never gonna have a situation where they're out of sync and one thinks that the data has different properties than the other and we'll look at that a little bit more in a minute but next let's see how that agents page was implemented so it will be very familiar to you just like the weather data page it's got a page directive it injects the HTTP client and then down at the bottom we do an HTTP request to get the list of agents we don't have to define the agents class here because that's in the shared project so that the server knows how to send that data as well okay now what about the styling of this thing you may notice if you're a keen observer of UX that this is following the Google material design sort of styling and the way I've done that is I've used a component library one of the key design goals of Blazer is that should be really easy for you to take a library of components to do common things like grids and tabs and all that kind of thing and just use it in your application and those libraries should be able to bring styling to you as well and we also need to make it easy to create those libraries and we'll get onto that in a minute but right now we're using one of those libraries and let me show you how we can use it a little bit more so I want to use my material design component library to improve this loading experience currently it just says the word loading but if I wanted to make it a little bit cooler I could delete that loading thing there and I'm going to use a material design linear progress bar and since I won't say what the progress proportion is it's just going to display a sort of indefinite spinner so when I reload now you'll see we get this cool little spinny effect going on as we appear there so that's just to show you that we can use a component from a library and we'll look more about how to create those libraries in a bit now that's how the application is hosted on a SP nut core on the server what about something a bit different authentication and authorization well that's quite important for my application because obviously my list of agents is highly secret and I don't want it falling into enemy hands but really doing this allows me to demonstrate to you some features that we just shipped about three weeks ago in our preview 6 release of blazer we've now got built in infrastructure for dealing with authorization and authentication first principle of security when you're doing client-side development is your security is not on the client okay all real access control has to happen on the server because anything you do on the client can be bypassed by anybody with just a basic awareness of browser dev tools so the first thing we want to do is secure the access to our agents list in server-side code and you can do that really easily you've probably done this before if you've done any asp net core so i'm going to go to my agents controller this is the server-side endpoint that returns the data you can see it's just hard coded but it could actually go to a database and I'm going to use a feature that's been in there for years and years probably longer than some of you've even been alive called authorize and that's just an attribute that tells the server you can only get to this data if you are authorized and what does it mean to be authorized well it depends how you've configured it and in this case I've configured it here to say when it comes to authentication I want to use JSON web tokens who's used JSON web tokens in a application for like more than half you for the rest of you a JSON web token is just a string it's a string that says who you are and what roles you're in and what anything else the server wants to say about you and that string is then signed by the server so the server knows that no one can tamper with it or make up their own claims about who they are the server gives that string to the client and then when the client wants to make a request later it includes the string in the request so the server can look it in say oh yeah that's a valid signed string I can pause that and see who you are and then I can trust you okay so now I've enforced that in the server I'll recompile my application and hopefully now since I'm not logged in I should not be able to get that list of agents anymore so if I go to this list of agents you'll see that it just stays stuck in this loading state forever and in fact if we look in the browser dev tools you'll see the server replied 401 unauthorized which makes sense because we didn't send any JSON web token with that request okay so we'll deal with logging in a second but first let's think about the user experience for logged out users currently the experience is this it just gets stuck in loading now that's not a very cool experience it would be better if it tells you that you can't see it cuz you're not authorized and you have to log in wouldn't it be nice if we could do that in a really simple way for example if we could take the authorize attribute that we know and love from server-side programming and also use it in the client as well well that's a feature that we've just added a few weeks ago I can now say I want to add an attribute to agents component authorize so now you'll only be able to see that if you're authorized as far as the client is concerned and I'll talk about what that means in a minute ok so now when I go over onto this page instead of getting the loading screen I'll just get access denied only logged in mission commanders may access this area now believe it or not that's not the default message that's that's something I've customized so it's really easy to customize how that looks and you can put custom content in there okay so we've got a better logged out experience now but I want to deal with actual logging again in fact I want to show whether you're logged in or not up here in the top right of my page and so where does that text come from today well it's coming from login displayed razor which is a little component it's a very simple component as you can see it's just a bit of static text so what I want to do is display different content depending on whether the user is logged in or not and I can do that using another one of our newly shipped features which is the built-in authorized view component an authorized view gives you a context variable from which you can get information like the user's login name so you can say hello however you are and if the users not logged in at all they won't see anything but I want to do slightly more than that I want to display a whole different set of UI depending on whether you're logged in or not so I'm going to dump in this big chunk of code and you can see what it does is if you are authorized will display this icon and will say hello your name and then we'll have them one of my material design buttons and it will say when you click it we're going to log you out because it you know if you're logged in you probably want to be able to log out and if you're not authorized will display a button that just says login and what does it mean to login well we're going to call a method on login dialog login dialog is a thing that I've added in my project here and I'm using the ref' keyword to get a reference to it so I can call public methods on it so you click that button it's going to tell the login dialog to login okay what's login dialog well when you first see it it might seem a little overwhelming but don't be scared it's not insane it's what is it it's 50 lines of code which vs currently believes is invalid but I don't believe it's invalid so I don't know what VSS is talking about we'll ignore it for a minute I'm sure it will wake up in a second there we go it's happy now right so what have we got in login dialog well firstly I'm using a material design dialog and I've got a couple of text fields that you can enter a username and a password and as for where that data goes well I've defined a class called login credentials and I've got of these so if we look at that login credentials you'll see it's pretty simple it's just got a username and password and kind of bizarrely and except terms but you'll see why I've added that in a few minutes okay so we've got an editor for credentials you can edit user name and password and there's a checkbox that lets you accept the terms and then we've got a couple of buttons one of them is the login button and when you click it will call submit credentials and what does that do well it takes the credentials that the user has entered and it posts them to this endpoint on the server and the server is going to reply with a login result which may include a JSON web token if it likes your password and so if the token is null will say your login failed but if it's not null then we'll store that token in our authentication state provider which is another one of the things we've recently shipped and that keeps track of whether the user is logged in or not and who they're logged in as then finally we can just make the dialog go away all right so if this all works now then when I come back here I've got my login button I can click on login and my pretty dialog appears and I can type in some credentials if I enter bad credentials the server will say no and we'll get the message but if we enter good credentials and I'm not actually going to accept the terms we'll deal with that in a minute when I click login the serve will say yep here's a JSON web token for you the client can pause that and get your username out and then the UI changes to show me the agents screen but it's still not displaying the list of agents why is that well the server still says 401 or alpha unauthorized why does the server not like me even after I've logged in well the answer is because even though I've got this token on the client I'm still not sending it back to the server with the request so that's the last thing I need to do I'm going to get this token by injecting my token authentication state provider and then from that I can construct an authentication header we'll get the token and then we'll build an HTTP header that's got the name bearer and the value well it's got the a value that comes from combining bearer and token and I'm going to send that on my request to the server so now hopefully it should be happy to return their agents data to me so if I reload now then because I'm logged in it actually give me the data and the other cool think about these built-in components is they're all designed for you know interactive client-side use so they update immediately if I click on the logout button it will instantly switch the rest of my application into the log type merge and if I click in login again and I enter my password again then it will immediately switch me back to the log in state and of course you can go further and have users in different roles and policies and all that kind of stuff but that's the core set of authentication features all right let's move on and we'll see some other new stuff that we recently shipped and I'm going to show you now validation that's obviously a very important feature for many kinds of realistic applications and we don't have any of it in this one right now so right now if I click on if I bring up this login form I can submit the form even if it's completely blank and even if I haven't accepted the terms now the server won't accept my login so obviously it's not a good password but I don't think this is very good I think we shouldn't even be allowed to submit the form to the server unless it's valid so let's add some validation rules and validation is a little bit like authorization in the sense that you often need to do it on this well in most cases you will want to enforce your validation rules on the server and not just on the client if those validation rules really matter to you in terms of what data gets stored you can't trust the client to honor any client-side validation rules so you do need to do server-side validation and that is very straightforward if you're using a spinet core on the server and has been for many years so one simple way you can do it is you can use these kinds of data annotations attributes so now on my login credentials I'm saying that things are required I've got some length constraints and I'm defining some error messages okay now that is technically all I have to do to make my server start enforcing those rules because I'm using an API controller on the server by default it will honor data for annotations rules so let's see if that works now if I try to submit a blank form that's not what I expected to happen did I not do that I try building this all again I'm gonna submit a blank form and okay that is what I expected happen so now I appear to get no response at all from the server so why did the server not respond well actually it did respond it responded 400 bad request and actually gave a list of the reasons why it was a bad request and what the validation errors were but I'm not really interested in that what I am interested in is now also enforcing the same validation rules with client-side validation and hopefully I don't have to define my rules in more than one place because they're all shared on a single class that share between the server and the client so how do we do client-side validation with Blaser well we can use some relatively new things that came out I think in preview 5 and the first thing I'm going to use is something called an edit form okay an edit form is something you can wrap around part of your UI and what it does is it keeps track of an edit operation that is in progress so it knows what fields are being edited whether they've been modified and what validation message is applied to them at any given time and if you wanted to do validation then you need to tell it what object it is that we're going to be validating when the form is submitted and you also have to tell it how to validate that object and in this case because I'm using data annotations rules I'm going to add a data annotations validator into my form there and that's more or less all you have to do but I want to do a little bit more firstly if there are errors I think it would be polite to actually display them on the screen in some way so I'm going to add a validation summary down here at the bottom of my form and finally if the form is invalid I don't want you to be able to submit it the server anymore so I'm going to change this button so it doesn't invoke the server directly but instead what I'm going to do is I'm going to say for the form itself if there's a valid submission as far as client-side validation is concerned then we're willing to submit it to the server right let's see if this actually does the validation now so I'm going to click login and I'll try to submit a blank form and what happens is it does in fact run the validation on the client there so we know which fields are required we know that the terms must be accepted that's a good start but I think it's a little ugly right now I don't like having this list down here I'd like to have different messages in different places so what I'm going to do is get rid of the validation summary and instead I'm going to use another built-in thing called validation message and so we say what it is that we want to validate I want the user names message to appear up there and then below that I'll display any message for password and below that I'll display any message that we've got for accept terms let's see if that looks a little bit better now so now if I submit a blank form you'll see I get different messages in different places you'll see that the fields can get highlighted that's just control through CSS and as I start typing stuff in you'll see that they get marked as valid and the messages disappear and as I toggle this box obviously the message for that will appear or disappear and if finally it's valid I'll be allowed to login okay so it's called it's quite so validation and it's designed to interoperate very easily with what you're doing on the server okay now last set of things that I'm going to show you inside the mission controller application is component libraries and static content the ability to have static content in external projects and packages is a new feature that we just shipped in preview six and it makes it easier to build libraries of components so why am I talking about this well so far I've been using that material design component library which is all very well but someone's got to create these libraries in the first place so how could we create our own component library and make it reusable well what I want to do is I kind of like my site at the moment but I'm not really a big fan of lists I think it would be way cooler if instead of a list we were to display an interactive 3d map showing where all the agents were around the city but you know interactive 3d maps will probably take quite a while to implement so what I want to do is use an existing JavaScript one that I can find and turn that into a blazer component library so that that 3d map can be used in any blazer application very easily right now you'll see in my solution here I've got a project already that I've created Corp in map library and it doesn't really have anything in it yet apart from a dub-dub-dub root folder and inside there I've got a javascript file called pin map j/s so that's the library that I want to use it's actually a wrapper again around yet another library but I want to make this available to anyone who consumes this project or package so how can I do that do I need to create some custom build steps to copy this javascript file into your project or something no I don't actually have to do anything anymore because of this new feature if you have a class library that uses the razor SDK then by default anything from the dub-dub-dub root folder will become available to the thing that consumes it so to consume one of these bits of static content you just need to know about the URL conventions so here to consume that pin map library you can see that I've got a script tag that uses this special format underscore content and then the name of the project or package that contains the content and then the path within that content to the thing that I want to use so that's all it takes for the person who uses your library to use the static content from inside it okay so that's a good start but I want to make an actual blazer component here for this map so I'm gonna make a new item and I'll choose Razor component and I will call it pin map razor and what should we put inside pin map tracer well it would be nice if yeah we go great so I would like to put a little bit of HTML inside there to get started with so here it's pretty simple I've just got a div and the first thing I want to do is check that when I use this map it actually shows up in the UI so I'm gonna go back to my agents page and I'm gonna say I don't want to have this HTML table anymore I'm gonna delete that completely and instead I want to use this pin map so I'm gonna type pin map and you'll see I get immediately prompted to use this library this component for my library and the first thing to notice is that Blazer components are for actual dotnet classes so they've got as well as a class name they've got a namespace you can reference them through their fully qualified name if you want to but if you don't want to then what you can do is add a using statement so I can say using pin map library and then when I try to add the tag down here you'll see and now get prompted not just with the fully qualified name but also with the shortened name because of my using statement there alright so let's see if this does actually show up in the UI when I reload it now says to do render map good and we've still got that agents text which I want to get rid of so let's lose that and then I'll go back to my pin map and I want to actually interact with the JavaScript library now so we're going to do a little bit of JavaScript Interop to turn this div into an actual map so what I'm going to do is I'm going to start by injecting a service that lets me make JavaScript Interop calls the JavaScript runtime and then using that I can make a call I'm going to say when this component gets rendered I want to make a call to JavaScript to a function in JavaScript called pin map create or update and that function needs me to pass an actual element instance to it so that it knows where to put the map so I need to pass this div into the JavaScript how can I get a reference to this div in some way well I can do sir using the ref directive attribute I can say ref for this equals map LM that's just giving a name to it and then I'll define a field where that stuff can go there we go and now this is all valid code so we can refer to our map LM here and that will be the element that gets passed to JavaScript okay so let's see if this actually makes the pin map display in my UI I'll come back and I'll hit reload and we'll see do we get the actual map and the answer is yes we do we do get this map box map and we can see this hold downtown Manhattan area and we can scroll around and that's all very cool but I want to not just show an empty map but rather I want to show where my agents are on the map and the way it works with this particular library is that it wants you to put these map pin Elements Insider and that defines where the pin goes with its longitudinal attitude and whatever markup you want to show up when you click on that pin but I don't want to just display a single map pin I want to display lots of map pins one for each of my agents so I'm going to say this component takes a parameter which is an enumerable of agents and using that enumerable I can do a for each loop to display a map pin for each of them so I'm going to loop over all the data and for each one I'll use their longitude and latitude and I'll display their name and their mission inside the caption okay last thing to do is I need to actually pass this data property here into my pin map so I need to make Visual Studio wake up let's try that again data and then I can pass the agents into it and hopefully that will render all of the elements for the pins let's try it I'll reload again and now hopefully we'll see lots of little red spots corresponding to each of my agents so I can see for example here on Broadway I've got Tim who's I can't remember why I asked him to get a part in a Broadway show but I'm sure there's an important reason for that and then we can have a look down here maybe at this pier and we can see we've got someone intercepting enemy shipments and yeah so I'm pretty happy as a spymaster that all my agents are doing useful stuff across the city now but the more important point is that we can make these components put them into libraries and make them easy to consume and reuse okay right then let's move on to look at the broader world now because I've only shown you one of many possible ways of using Blaser there's much much more to this so far all I've shown you is that we can take Blaser and run it on web assembly inside your browser and have it interact with the Dom directly inside the browser that's what we call client-side Blaser but this architecture is really flexible and the fact that we've got this separation between how your components render and how they tell the Dom to update means that we can run it in different ways for example we can you're the Blazer part of your application for.net part and if you wanted you can run that in the cloud and a server that's running somewhere remotely and then when it wants to update someone's UI it can do that by pushing updates over a WebSocket signal our connection so that the browser knows how to update and that's what we call server-side blazer and that is going to be shipping with asp net core later asp net core 3 later this year so let me give you a little demo of that and then we'll talk about how the pros and cons line up so I'm not going to do it with the agents thing anymore I'm going to show you a slightly different application now this one's called car buyer and I'll show you how it looks and then we'll talk about some of the implementation details and what it's doing behind the scenes so what this is it's the sort of thing that you could use to buy a car believe it or not you could maybe use it at home on your own but more likely you go into a car showroom and some person comes out with an iPad and they tap all the buttons and they persuade you to spend a lot more money than you were going to spend before so it works like this you go okay I probably like to look at this eight system here what engine shall I put on I probably put the most powerful engine on I'll go next from there what color I like the look of red I'll put the massive I'll eyes on it and yeah everyone loves Sun roofs and self-parking that sounds really fancy definitely wants some of that and then you think ok we'll go on from there next how am I going to pay for this oh well that's very expensive so I think I'm probably gonna need a loan so hmm $4,000 a month and we better change that repayment period maybe a bit more maybe a bit more still ok it's still pretty expensive but maybe we can tolerate this now and then finally we're going to move on and we get their delivery details and stuff so what's the point of showing that well the point really is to look at how this is working behind the scenes and what's going on so the code for our application here is this project here car bio dot server-side and this is a regular server-side asp net core application which is hosting my server-side blazer but I haven't actually got any components in here for some bizarre reason that you'll understand in a few minutes I've decided to factor out all my components into this other library called carbide core which is just a class library that contains a bunch of components for things like choosing delivery and choosing options and stuff like that so normally you wouldn't do that it would be strange to factor stuff out into a project but it just goes to show that you can if you want to and also I have a good reason that you'll see in a few minutes as for how this is working inside the browser this is a very lightweight way of running your blazer application we don't have to download mono web assembly anymore we don't have to fetch any of your net assemblies if we look at the network tab you'll see that what we do fetch is now just a small number of things and it's kind of difficult on this screen but we'll zoom in and you'll see that we're fetching just the HTML CSS some images and that's it apart from one more thing which is we're opening this signal our connection to this end point on the server called underscore blazer and that's where all the interactivity is happening so when the page starts up it opens this connection and says I'm ready and when the user performs any actions we send a message to the server to tell them what they've done and the server replies to describe how the UI should be updated if you want to see that you can look at the actual binary messages that are getting sent so if I clear that out and then I make some change like I click on next you'll see that various binary messages get sent these messages are for things like there was a click event on a particular element within the render tree and the server gets that and it says ok I'll re render the application I'll compute the death against its previous state and I'll send a minimal description of what UI updates are needed to bring the UI up to date and each of those messages is generally pretty small it's usually measured in the tens or hundreds of bytes because this is a very efficient compact transport format and that is how every time I do anything here the browser is giving being given instructions to update now another cool thing about rendering your application on the server about running your application on the server is that we can very easily enable server-side pre-rendering and what that means is when the user first goes to your page they don't have to wait for the WebSocket connection to be established before we can build the initial Europe UI what we can do is have the server do the initial render on the server and send the initial HTML just as you know traditional plain old HTML that the browser can render without even running any script so to prove that's happening if I display the page source you'll see it's not just a script tag it's actually all the HTML for the initial UI there and that means your application is easy to be crawled by search engines which is great for search engine optimization now pre-rendering can be done with client-side laser applications as well but it's much easier if your server if your application is already running on the server anyway okay so that is server-side Blaser and mainly I've just given you a list of pros for that I've told you it's more lightweight which is great but what are the real full set of pros and cons to this thing well on the plus side yes it's like a thin client situation this is going to run really fast even on very low-end devices because they don't really have to download anything significant at all they just basically put displaying a remote view of your application so it's very lightweight also because your code runs on the server now it's not running on webassembly it's running on full net core on the server and you have access to literally anything that dotnet core can do when it's running on a server which is a lot of stuff and then finally you may be able to make your architecture simpler this way so what do I mean by that I mean normally when you're doing data access for a client-side application you have to do it by making HTTP requests to some endpoint on the server which then queries the database on your behalf see realises it all is JSON and sends that back but with server-side laser you don't even need to do most of that your code is already running on the server there's no need to have special API endpoints if you want to talk to a database you can just talk to a database like directly you can go through a repository pattern if you want to but there's no need just be serializing stuff and making API endpoints so it just simplifies your architecture significantly however there's the cons as well there are some real drawbacks to this model so you have to balance this and decide what's best for you the first con is because this is running truly on the there's no way you're making this thing run offline every interaction is happening on the server another thing is latency and this is a basic problem with physics the basic problem is that unfortunately the speed of light is really really slow and it's sold so distressing that light is so slow and that we can't do anything about it the basic reality of it is that if your server is a hundred milliseconds away in speed of light time then you've got at least a 200 millisecond round-trip so there will be latency basic physics finally in terms of the fact that this code is running on the server means you're now paying for that CPU time whereas with the client-side model each user brings their own CPU to execute your code so it's up to you to decide which of those is the right fit for you but that's not the full range of options there are in fact more options still for it for a blazer application so let's think about the ways that applications can be deployed today you can imagine there's a spectrum with it a one extreme end there's the web with HTML and CSS and JavaScript and it runs in your browsers and at the other end there's native applications that run on people's desktops for all the different operating systems which parts of that spectrum can we target with Blaser well I've just shown you server-side laser there and that's at the extreme end of server side of web there because every single thing is happening on the server and we are even sending the initial HTML as being pre-rendered so that's a very web-centric way of doing development but with Blaser you've got more options so you've already seen that we can run Blaser client-side and in fact we can make our application on the client even work offline so let me show you i've got car buyer here that runs on the server but i've also got another one car by our client side which i'll set as my start up project and again I don't have any components in there because I'm actually using the exact same set of components from car buyer core just to show you that we can run the same code in two different environments without having to change the code so if you know now run that you'll see we're now running the same application to the same interactivity no code changes but it's now running client-side and because this is a client-side application we can even make it work offline so I've already added the relevant Service Worker which means that I can go over here and tell my browser that I want it to be in offline mode and normally webpages don't work when you're offline but because this one has got my Service Worker when I hit reload what happens is it just shows up and it works and it's still fully interactive so we've now got a dotnet application running inside a browser with full support for being offline okay very good but can we get any further towards a desktop application well we can what if instead of running it inside people's browsers we want it to have its own application window and be installable in into the operating system well that brings us to the idea of a progressive web application or a PWA and any web application that can run offline can be a PWA so I can make my car by application there installable into the user's operating system and in fact that's what I've already done so if I what am i doing right so if I go to my Start menu here and I look you'll see I've got car buyer on my Start menu right there so if I click it what comes up the same application but now it's not apparently inside a browser it's now inside its own window and it's installable it's a got its own Start menu entry etc so that's the whole idea of PWA and we can target that too very good but what else could we do is there some way that we could go even further with that well what if we didn't want to run on web assembly the people told me wait does run on webassembly because pwace are purely web technologies what if we wanted to do the same desktop installable application but now we want it to run on dotnet core just regular native code not under web assembly at all well that brings us to electron-electron is a way of running HTML based application that's installable and we've set up a way of connecting it to a regular dotnet core process now this is not product we're shipping right now but it is a sample that we've published that you can try out yourself so let's have a go at doing that and if we look in the third folder here you'll see I got Kabaya electron and again it has the same reference to carbide core because again it's the same components running without any code changes and if I run that then what we'll see is an electron window pops up and again the same application works same interactivity but now we've got all the features of electron for example all the ways that integrates into the operating system all the ways that it deals with managing updates over time and of course now we're not running on webassembly at all so that takes is really really far down this spectrum to being a desktop application so you probably think that's pretty cool that's so that's really flexible that's one programming model that can operate in a whole range of different scenarios but do you think that we could push it any further like that is there any way that we could push this like right into the infrared part of the spectrum here and get even more desktop like than we already have well what would that even mean well so far all of our rendering has been based on HTML and CSS what if we wanted to blaze our application that renders using something not HTML and CSS is that even possible well it is and I'm going to show you but first I'm going to caution you this is not something that we have any plans around productizing okay this is purely a tech demo that I'm showing you that the architectural blazer is flexible enough for you to create your own renderer for blazer that can target different kinds of rendering technologies so let's give an example of how we can have a blazer application that renders to something that's not even HTML so I'm going to go to another project that I've got right here and I wonder if from the name you can guess how this is going to work it's called blutter and when I run this what's going to come up is a flutter application so what's flutter well flutter is a cross-platform UI technology flutter applications can run on Windows or Mac on Linux on Android and on iOS and by default they have this kind of Android styling but you can make them look like iOS or anything else that you create the renderer for and so what I've got here is I've got this counter that counts your clicks on a button I've got this to-do list and I can type stuff and it adds stuff into a list and then you know I can do all the other stuff you'd expect for example scrolling I can mark things as done I can show this little slide a side bar thing and so on now a flutter application is usually built with the dart programming language but I did not build it with Dart can you guess why I built it with yes of course you can guess I built it with blazer and dotnet core so how does the code for my application look well here is the main layout for my application and you will notice that it's not HTML there's no HTML in here I cannot use HTML even if I wanted to because there's no browser what I can use instead are all these different flutter widgets so I've got a scaffold that's the overall layout for the application I've got an app bar with a title I've got a draw that appears on the side I've got a tab bar and some tab bar views and I've also got some custom components of my own for example counter and if we go over there you'll see it looks pretty familiar although we're not using HTML now we've still got a button and when you press it it's going to call dotnet code and so just like we did with the counter in the web we're able to update this count and display that in the middle of our UI and similarly we could go and have a look at this to-do list here and it might seem a little bit like what on earth is all this stuff well this is how flutter deals with styling we've got things like column and row and flexible and things like that and inside there to display that list you'll see I'm able to just use normal C sharp for each loop because it's the normal blazer programming model here and I can display my to-do list my to-do entry and inside the to-do entry well that's just got a check box and text and of course I can update the code for my application if I wanted for example let's say whenever you check on these boxes I want to draw a line through the text to show that it's done so I can use the line through feature of text in flutter to say I want to display a line through if the item is done if it's done ok good and then I'll quit click restart for my application and now when I add stuff then when I click on this button you'll see the line through appears and when I unclick it it goes away and this is a proper net core application I can even use things like the debugger in Visual Studio so if I set a breakpoint right there and pop up my application one more time then when I click on this count button you'll see we of course hit the breakpoint and we can inspect the stay of the application and so on so the point of me showing you all this stuff is just to say that this is a really flexible architecture and following the same programming model we can enable you to target an enormous range of different kinds of applications and you can pick whatever you think is the best point on the spectrum for whatever kind of application you're building and in a lot of cases you can reuse your code in your components across different UI technologies so that is all I'm going to have time to show you there is a lot more that you can go and learn about Blaser if you want to tons and tons of features which I don't have time to show you if you want to learn more about them then I would recommend that you go to Blizzard net where you'll find the instructions for getting started and the links to their documentation and if you want the code and the slides from this talk it's already published you can go to that short URL there which will take you to a repo on github and you can get access to that stuff so that's all we've got time for I hope that's been useful to you I hope you remember to evaluate the session on your way out and I hope that you really enjoy the rest of the conference [Applause]

Channel: NDC Conferences

Views: 88,061

Keywords: Steve Sanderson, .NET, Web, JavaScript, WebAssembly, ASP.NET, Blazor, SPA framework, DI systems, UI, interop, NDC, Oslo, 2019

Id: uW-Kk7Qpv5U

Length: 59min 25sec (3565 seconds)

Published: Wed Jul 10 2019

Reddit Comments

[u/thefulla]

At around 54 minute mark he demos the Flutter integration with Blazor.

He begins by stating that it is not something they plan on productizing, it is purely a tech demo to show that it is possible to create your own renderer for Blazor.

I personally would really like access to the source of the demo as it is not available on his GitHub.

For me the biggest thing which has put me off Flutter is having to deal with dart, if its possible to avoid that I consider that HUGE.

[u/CarolsLove]

Blazor is really make great progress and now adding Flutter support. Awesomeness indeed.

[u/[deleted]]

That's pretty cool. I'm starting to come around to the idea. I want access to the code though, does anyone know the guy and can get it put up on Github?

EDIT: Here's the code. Found it in the other post.