Building web apps using Blazor featuring Steve Sanderson (Microsoft)

we should be cooking the gas i think we are going to be able to go now all right so you can see me and hear me okay yeah stop to share all right so do you see my screen yep blazer all right okay well thank you for bearing with me through my very professional intro just there um so what is this about so i am steve as you know and i work with david fowler at microsoft um weber from the.net team and my particular focus is on uh web stuff and especially on front end when stuff so the actual building of uis that can run in people's browsers that's something i've been focused on for a little bit uh particularly this technology blazer i've been at microsoft for 10 years now and uh generally all going well um so to provide a bit of an intro here i'm going to give you a little bit of history um to do with uh how we've got to where we are okay how did blazer come into being why did it come into being and then i'll actually show you some of the code and we'll do a little bit of application building and some demos so the history lesson is this so imagine that you as a web developer need to build some web ui and maybe it runs inside a desktop web browser or maybe it runs in a mobile device and in either of these cases you need to put loads and loads of complicated stuff in it so you need to have this rich ui that's got you know charts and grids and sidebars and dialogues and tabs and wizards and and then you've got all kinds of other concerns like localization security you know all kinds of other stuff going on it's a complicated business this modern front-end development until a couple of years ago the only way you could build something like this was to use one of these kinds of things a javascript framework so i'm sure many of you have used angular or react or view or other things like that and they're all good they all do their job well and you can be successful with them but it's a bit limiting for us as an industry if the only language you can actually use is javascript or something that compiles to javascript like typescript or other things like that it's all basically javascript at runtime it kind of felt like the web was limited and was never going to be able to move on from that until a few years ago when this thing came along which is web assembly and that is a standard that is you know it's been around for three years now it's pretty uh pretty stable and it's available in every single even remotely up-to-date web browser and this allows you to run other code that's not javascript so you can take code written in any language and if you've got a compiler that can compile that to webassembly then it will run in the browser and that opens up the options for front-end development enormously so we at microsoft on the dot-net team not surprisingly got interested in the question of could we get net running inside a web browser on webassembly then and we did a bit of experimentation and found that we could and that was all very well as long as the only thing you want to do is just sort of print stuff to the console and that's not the only thing we wanted to do we wanted to build actual uis and so we needed a ui framework and that is where blazer comes in to the story so blazer is a ui framework for net applications which originally was designed around running on webassembly now it's gone further than that since then i'll talk about some of the other ways you can use it but first let's just think about why developers might be interested in using.net to build dotnet applications well it means they get to use the c-sharp language which is a very well proven powerful and productive way of building software that many large teams and many small teams have all been very successful with that's been around for 20 something years now so that's it's very well established and stable um it also means that you get access to the tooling and ide that comes with the dot net framework so this is well regarded as being among the best in the industry visual studio and also rvs code support so you get access to all that um it means that you also have access to the rest of the dotnet eco system which is a very consistent and stable ecosystem that generally tries to keep things working for very long periods of time that's not always the case in the javascript world but in net world you don't have to change how you do stuff every few months generally we keep stuff going for very long periods of time so those are the main kind of reasons why we think it might be relevant um now in terms of what you can actually do with blazer and where you can run your blazer code well there are two ways that you can do it today we're looking at expanding this in the near future but where we started is where i mentioned earlier on which is with blazer running on webassembly inside your web browser but since then we've also uh moved on to support a different way of running your blazer ui applications which is on a server with all of the ui still rendered inside a browser but the your application logic is running on a server and these two things are kept in sync over a websocket connection which is powered by signalr so i'm going to show you some examples of both of those and hopefully after you've seen a little bit of code you will be able to understand what the purpose of that sort of thing is and we can talk about that and you can ask me any questions that you want about how that sort of thing works does that make sense so far yeah all good yeah all right yeah absolutely let's go cool all right so let's have a go at creating an application so i've got a command prompt here and i want to create a new application so i'm going to run a command called.net new and i'm running this on windows at the moment but it'd be absolutely identical if i was on a mac and i'm going to create a blazer server application and i'm going to call it my super app now i can tell from looking at my external monitor that there's some pretty amazing lag going on between what i'm typing and what you can see so if what i'm saying seems slightly out of sync with what's on the screen bear with me or speak up if you need some clarification but anyway we can see it's created this project for us now and i'm going to go into there and i'm going to open that in visual studio code which is something i expect many of you use if you are front-end web developers and we'll have a look at what this application does and a little bit of the code that's inside there so let's try that first i'm going to run a command called net run on the command line and again this is the same if you run it on windows as it is on mac um but because i want to be able to change my code and have it automatically update as i change i'm going to change it to net watch run and that is a way of telling it to just keep updating okay so that shows up in my browser there and we've now got this little dashboard like application and we can explore that a little bit so we've got a page that's called counter and that just counts the number of times that you click on a button as you can see and we've also got this page called fetch data which gives you an example of fetching some uh json data from a server and rendering it in a little html table okay so it's simple stuff the same sort of thing that you do quite easily with something like um react or angular but in this case it's not a javascript application it's a net application written with c sharp so i'm going to show you a little bit of the code in there and i know that not very many of the people on this call are net developers so i'll try not to make too many assumptions uh that that this is recognizable but let's have a look at some of the code that we've got in here well we've got some c-sharp files we've got these weather forecast files that you can see inside this data directory there we've also got various different pages everything that you see that's got a dot razer extension that you'll see in pages there that's a blazer component that's written with blazer programming model i'll show you some of that in a minute we've also got other blazer things that define how our application work which are inside the shared folder down there and then finally we've got a little bit of stuff at the bottom that helps the application start up but let's have a look at some of these pages first so this index page well what's the code inside there um the simplest blazer component is basically just html or it can be so in this case you can see we've got this block of html markup at the top that says hello world and it's got some other stuff around it well that's what corresponds to the home page that we can see in the browser when the screen share eventually catches up with me there we go so you can see where it says hello world in there and it's got this little how is blazer working for you thing at the bottom and that is coming from this survey prompt component which is at the bottom of my razer source code right there okay so simple kind of stuff now let's have a look at another example of the blazer component and we'll see how you can use netcode mixed in with your markup so here we've got a counter component and just to remind you it's got this button so that says click me on it and whenever you click it it increases a number that's in the ui so this down here inside the code block this is netcode which is written in c-sharp it's probably familiar to anyone who's seen any java or i suppose most other kind of object-oriented strongly typed languages so we've got a field called current count which starts at zero and whenever this method increment count is called increments the count and we're displaying that on the ui just by using a c-sharp expression in the middle of our html code okay so does this make sense so far anyone got any comments or questions they want to bring in yeah i actually had a question um i was actually curious thanks steve um but the app page and at code are those are those specific they are those uh specific separators like house has to be app page or is app page referring to something else like i wonder is it configurable or that that that is the separation between the presentation and then the logic yeah so this um this source code we see here in the dot razor file is is razer syntax razer is a syntax that's been around in net for a long time since about 2009 i think it was it first came out and the the big idea of razer is to give you a way of mixing c-sharp expressions into html in a way that is as simple and natural as possible so each time in razer we see this at symbol which i've got at the beginning of current count there that switches in between html and c-sharp so when the compiler sees that symbol it says okay the next thing is going to be some c-sharp and it figures out where the end of that block is just based on the syntax so it knows enough about html to know that my current count expression ends where the closing p tag happens there now at the top when you see the app page again because it's an at symbol the compiler knows that there's some c sharp thing that's going to happen here and the app page tells us um this is telling blazer which url this particular component um corresponds to so when you're on the counter url this component is going to show up and then again at the bottom in the at code directive uh block there when we see an app it switches into c sharp and this code thing says i'm just going to have a big block of arbitrary c-sharp source code that can be used within the application when it executes does that answer your question at all so so so yes so so it does say it's intelligent enough to recognize the difference between the like in terms of picking up current count and then also picking up the actual function because with the app on the click is then picking up based on the the name matching then yeah okay it should be a function okay yeah that's right yeah so we've got the app so we know that this is a special c-sharp thing onclick is telling blazer rather than the browser what event we want to subscribe to and then inside there we can reference one of our functions here and we get full intellisense on that so you can see that the only uh match to that is this function called increment count and i can select that and then my squiggly lines go away i also have a question if you're still taking go for it yeah yeah um my question really is are we bound to use a razor with when we're using blazer or are they of alternative study razor templating system that we could use um good question so razer is certainly the first class way to build your ui razer is kind of our idea about as far as we can imagine according to the limits of our imagination the best possible syntax for mixing html and c-sharp you know there's been a lot of work and user research that's been done to try and come up with the most natural way of pairing these two languages together um so it's certainly absolutely what we expect people to normally use and what we recommend if you really want to you can also write your com laser components in pure c sharp code without any html markup in them but it's way harder to do that and you're basically being your own compiler at that point so i'm not sure i'd really recommend it but it is technically possible i have a good question as well so just looking at this you said that this is another c-sharp developer at all this is brand new to me um although the the format looks um familiar kinda like view uh from the button down to the code um but you see that this is reserve syntax um so this instead of working whether or not what i'm looking at here is blizz or yet or if this is just regular resource syntax that you could have done before blizzard was uh created yes that's a good question too so i i'm naming is famously confusing so razer is the syntax that's been around since 2008 or so and blazer is a way of using it to create a highly interactive ui so originally razer was used for server-side rendering of static html which means every time your server receives an http request the browser renders some html to the response and that's the end so it's just a request response cycle and that was the original way that razer was used blazer is a way of creating stateful interactive ui so it's not just a one-time thing but it stays there and it knows how to respond to events and update the state dynamically so that's the that's the blazer part is the way that it it can keep running like a like a react application or angular or something it's not just static html but it's interactive sorry but there's just a quick follow-up question so you see that when they click the on click and the fact that it knows to run the increment count that's the blazer part yeah that's right yeah yeah that's right the fact that it's still able to run interactive code as opposed to just having been static html that doesn't contain any you know interactivity all right so someone else has another question yeah go ahead someone had a question yeah go for it yeah my question is and i will compile yes when app is compiled does it go back to html where it can be hosted on any web server it's in a special format and has to be on a i a server posting yeah good one okay so the question uh the the mic the sound got a little garbled but i think i i understand the question is um when you compile this can it just run on any web server or um or does it require a net specific web server like iis well the answer is it depends how you are hosting it so um in this slide which is eventually going to show up when the lag catches up yeah that's what goes down okay here we go just just a quick thing just to reduce the like anybody who's not um if i'm not for everybody who's not asking a question let's just all turn off our video um that may help the like situation all right cool okay go for it steve all right so um the way that i have this demo app working just there is on blazer server which means that all of the interactivity in the net code is actually on the web server and the browser doesn't see any of that stuff all the browser sees is a series of instructions coming over a websocket connection telling it to update the ui so for blazer server you do need to have a net based web server and is is one of those possibilities but we also um it's not the only possibility so um we also have a server called kestrel which is a more low-level server that's used by um blind.net uh more recently so you don't necessarily need to have iis itself but the other hosting model for blazer which is laser web assembly uh i'll show you that in a second as well when you use that model the web server can be anything it doesn't matter whether it's node or a python server php or anything because at that point the web server is just returning webassembly files to the browser which any web server can do and then the browser is the thing that's running your.net code so it just depends which of these hosting models you choose to use does that make sense okay let me just show you um on what's going on on the wire in terms of the actual traffic to the web browser so that we can clarify this point a little bit more so if i have a look inside my browser's network tab um which is going to come up soon there it is okay so i am going to reload this page and we're going to see what stuff gets sent down to the browser and what we should see is um we're not sending any of the net stuff down to the browser if we have a look through all these files that have been sent they don't include any net stuff the the thing that produces all the interactivity here is this blazer.server.js file which you can see about two-thirds of the way down the list there and that's something that we provide as part of the blazer framework and then the thing that enables the interactivity is a websocket connection and we can see this websocket connection here and every time i do anything interactive in the page some messages are going to get sent between the server and the client and we see all of these binary messages showing up at the bottom of the screen there now it's kind of hard to actually see what these messages mean because they're not designed for humans to read them and if i try and bring it up you'll see it's all this base64 encoded binary stuff but what this actually is is a very compact representation of some instructions describing how to update the ui in reaction to the user's edits so this is a very lightweight system as far as the the end user's browser is concerned because you don't have to download any application code at all you just download this blazer.server.js open a websocket connection and then the ui updates are just streamed to you as you go through working on the ui but that's very different to the website the webassembly hosting model so to clarify that let me show you an example of a blazer webassembly application and i'm going to do that using visual studio because although this works great in vs code on mac and linux and windows a lot of people who do not net development also like to use visual studio and so that's what i'm going to do here now in this project i have got in this solution i've got two projects i've got a server and a client and these are working together so my server is a net based server in this case although it doesn't have to be it could be anything it could be node it could be python whatever it doesn't matter but it does happen to be a net server and it contains some grpc services that i can make requests to from the client in order to access data or you know make state changes so i'm just going to start up this web server here hosting that grpc service which clashes with my other one so let's close down my other application first and then i can restart my server application okay and i've also got a client project which i'm going to show you some files in in a second all right so what is this application then well it's a very simple kind of shopping cart kind of application and the idea is that people would use this when they're walking around a supermarket to um to scan the groceries that they're going to buy and it shows up on a little screen on the device that they're using on their shopping cart and they can see everything that they've bought and what it's going to cost them as they're going around okay so let's have a look at the client application then i'll show you a little bit of the code inside it and we'll look at how it works on webassembly okay so here's my application coming up now as you can see blazer mart and it doesn't have much functionality just yet i can just go to this little drop down in the top right and i can start typing stuff that i'm going to buy of course in a real application you'd probably scan it with a barcode scanner or something like that but anyway i've got this autocomplete system and it finds the products that are available okay now how is this actually working well let's have a look at the network tab i'm going to clear my browser's storage and then show you what files get loaded when the user actually comes to this application and it's quite a lot more stuff than when we were running on blazer server and the important bit is a file that's got this um file name extension of wasm webassembly and when that comes up you will see that we've got this file.net.wasm and that is a dotnet runtime that can run arbitrary.net code that we've compiled to webassembly which allows us to run your application without needing any server at all just anything that can send this file is good enough and then your application code actually runs in the server without needing to be connected to anything else so it can even be offline if you want to so we send all of the dlls that we've compiled for your application down into the browser and they can execute right there okay now i'm sure you'll have some more questions about that but let's just add a bit of functionality to this application to make it a bit more interesting because at the moment if i um pick an item from my list then what you'll see when i click on it is that well nothing seems to happen that the menu just disappears which is pretty rubbish let's see what's actually going on if we have a look in the browser's console um i'm just going to zoom that a little bit okay now i'm going to pick something again let's i'm going to pick a pizza from my drop down menu there and you'll see that it says the user wants to add a certain product if i pick another product then you'll see it again that they want to add another product and these messages are just showing up in the console okay so why are they showing up in the console and how is this application actually built in the first place well i've got a few components in this application um when you can see it you'll see that i've got this component called app.razer and that is the main component in my application um and this is how my ui is structured so at the top of the ui i've got this header area which contains the search box that i've just been using and underneath that i'm using a bit of c sharp code to say that for each of the items that are in your cart i want to display that thing okay but we're not displaying anything yet because nothing gets added to your car let's have a look at this search box and see if we can make sense of any of the code that's inside there well when i switch over to that you'll see there's quite a bit of code in there but don't be overwhelmed it's not too bad um the main thing to notice is just this form at the top which i'm highlighting there that's where you actually get to type stuff or if you had a barcode scanner it would integrate and you can scan barcodes and and add that there and when you input something it's going to call a c-sharp method called update autocomplete and that's going to check whether you've typed in enough stuff yet or whether we just need to fetch some autocomplete data from the server and if you have typed enough stuff it it runs this method called add item which i've just about to highlight there and you can see inside there it's got a bit of c sharp code that is going to log to the console this string user wants to add product all right so that is the logic that runs when i pick stuff from my search box now let's have a go at making it actually add stuff to the list so it shows up in the ui well what i want to do is i want to have my search box component capable of raising an event when the user picks something from the drop-down list now to do that i'm going to add a parameter onto my component that fires an event when i do something so just bear with me while i grab the stuff that i'm going to need to do that so here we go all right so you can hopefully see in a moment that i have added this extra thing onto my component which is a parameter which is going to make event callbacks when an item is chosen and it's going to give a string which is the id of the product that the user has entered and because i've added that if i was to go back to my app component you will see in the autocomplete that one of the options now is this on item chosen thing okay so i want to fill something in there and actually do something when the user chooses an item but i haven't done anything yet i haven't got anything to wire it up to just yet and before i do let's say i want to actually trigger this event when the user chooses something from the um from the drop down okay so let's get rid of that message that we had before and i'm going to say i want to invoke this particular on item chosen event and i'm going to pass the product id now i know if you're unfamiliar with c sharp you won't necessarily recognize what this await thing is this is the way that c sharp deals with asynchrony so it's saying that this action could take an arbitrary amount of time and we need to wait for that to happen okay now that's all the functionality that i actually need to add here so now i can go back to my app component and fill in some logic to say what i want to do when i receive this notification okay and what i'm going to do is i'm going to say i want to call a c-sharp method called handle item chosen which is going to run in my browser on webassembly and the logic for that is going to be pretty straightforward i'm just going to receive the product id from the auto completion list and i'm going to call a method on this c sharp object i've got called cart which is going to add it and then when the ui loops over everything that's in my cart that product should hopefully show up on the screen okay so i'm going to compile that now and we'll go back into the browser and i'm going to reload okay so let's get rid of that and then i'm going to do the same thing as before okay so when i type something into my box and i select it from the drop down then instead of doing nothing it's now actually going to add it to the list and we've successfully managed to flow an event from one component into another and trigger a ui update there in a nice interactive kind of way so i can go further with that and we can add some more features to the application if we want to but i don't know how much time we're going to have for that and i want to make sure that there's plenty of time and space for questions or other comments before we really do any more of that so anyone got any anything they want to ask anything that didn't quite make sense or other kinds i have a couple of questions if you don't mind i mean they might be a bit too much of implementation detail but um two questions one how exactly does that rose property on the cart object trigger the update on the ui and two um i can see like some access modifiers on the fields and functions inside those razer files and i assume those razor files are actually compiled to classes under the hood so do we have like um inheritance support or partial razer file support or anything like that yeah great questions okay so um let's see where were we with the question so the question was firstly how does the ui know to update or how does it how does the how does how i'm sorry how does the rose property of the card object like trigger an update on the ui yeah great question okay so the answer is it doesn't um so the the rose property on the car is just a normal c sharp um like list or enumerable or something i can't remember and it doesn't have any magic powers at all so blazer has a ui updating model that most of the time means you don't have to do anything to tell it what to update and the the simple rule that it uses is when any component receives an event it re-renders that component so because there was an event coming into this component on app it re-renders it and so it's going to re-check all the data that that component references and it will work out the the diff between the old version of the ui and the new one and then it sends that into the browser so in most cases you don't have to tell it what to update because it matches up with the events that are happening but there are ways to override it if you want to tell it not to update something then you can or if you want to tell it to update something extra then you can but because of the way the conventions work most of the time you don't have to does that make sense okay i assume it does i can't hear any more talking yeah sorry yeah it does make sense okay um and then there was a question about access again um sorry steve i think um ricardo is trying to answer the question okay go for it ricardo you may have to speak up ricardo if that was you just no yes so you know like for most like for most other apps like we have uh augury and redux that can show you the data that is being changed um does blazer have a similar um browser app that we can use the inspect to see the different changes of the data um i i missed slightly what you said were you asking if there's something like a browser plugin that shows you how the state is changing the data that is being changed like a browser plugin that shows it that is being changed and all of that yeah yeah yeah so um if you want to use a pattern like the flux pattern which redux is based on with blazer you absolutely can um somebody created uh well oh my screen seems to have disappeared that's interesting oh cool because it crashed um i'll bring that back in a second uh yeah so if you want to use the um the flux pattern with blazer so that you can track your state changes in that way you absolutely can uh there is someone who created a an open source uh implementation of that for blazer um but that's not the the default um by default there isn't anything that specifically does that other than the debugger that is built into visual studio or the debug that you can use inside the browser um so maybe we should have something like that um but you you have to you have to choose to use a pattern like you do with with redux if you want to um control and see the the data changes in that kind of format okay any other questions uh i mean um question um i'm quite interested to see what code is generated under the hood uh is it javascript called or issue multiple at all in the actual browser or what does it look like when you go view the source yeah sure okay well i'll i will view source um you might be disappointed because it doesn't show you very much interesting stuff but i'm going back in my browser now and actually i'm going to just do view source first and you'll see that the initial html that we're sending down to the browser is extremely minimal that's literally all of it and in fact this script block at the bottom you could ignore that's only there because of some other demo which i did before but i'm not doing today because we won't have time so imagine that that's not there there's very little code in there as you can see everything is just going to get added into the app element when the net part of the application actually starts up and the way the dot net application starts up is that we load this javascript file called blazer.webassembly.js and that downloads the.net runtime which is compiled to webassembly and it also downloads your application code which has been compiled to net dlls so net dlls are dll files and they contain bytecode which for people who do java is very similar to java bytecode and that's what gets executed inside the browser so it's kind of hard to see the source code inside the browser but it is technically possible because you can take those dlls and you can decompile them if you want to unless they've been obfuscated so um yeah the end user will usually not see your code but they they could if they were really determined to yeah i think um i guess what i really meant was if you go to inspect the browser window after all the stuff is being loaded what do you see after that uh if you go into the elements tab after it's all been loaded then you will see that that app element which was empty when we downloaded the initial html has been dynamically populated by blazer and has been populated with all these different elements that correspond to the markup that was inside those razor files i hope that's what you're asking is it yeah so if you go to the actual scan for search box um it's there so is there any like javascript at all is there anything on the actual html itself that indicates that this thing is responding to this particular input or is responding to any uh information um not really no because it's not a goal to make the html sort of human friendly particularly all we're trying to do is make the html um an exact match for what you've typed into your razer source code so um so if if you see this like div class equals quantity that's on the screen right there we should be able to find the exact uh thing that corresponds to that inside the razor source code which i'm just highlighting now that will eventually show up but in terms of things like event handlers you won't see those in the html because those are registered by blazer.webassembly.js and they are added using javascript apis by the framework and but you won't see it in any other way besides that all right okay that's how he was asking so basically it just spits out just the raw html upload the finished product and it uses the other chord to determine what the interactivity is yeah that's right yeah cool um great any uh the questions no um just about the access modifiers i mean actually i was just curious about the context of those access modifiers i mean i assume these eraser files are compiled into classes under the hood so how exactly do they i mean do we have support for things like inheritance or partial razor classes etc yeah you absolutely do so um these each razor file does become a net class when it's been compiled which means that you can refer to them from each other in a strongly typed way for one thing and that's what's happening when i reference one component from another so if i hover my mouse over the search box there and zoom in you can see the ide is telling me that that this is actually a net class called laser mark clients component search box which is a real.net type and that's being referenced in a strongly typed way and so i can only access the things on it that are marked as public if i make something private then i won't be able to access it to prove that i could go to this on item chosen thing that we added earlier and i'm going to change the access modifier on it from public to private and then i'm going to go back and well actually immediately the the browser the ide visual studio is going to tell me off and say it doesn't make any sense to have a parameter that's private because if there's a parameter it has to be accessed from outside and therefore it needs to be public so i can't even do that but that just goes to show that the access modifiers are respected uh because they are you know real net classes thank you and in terms of partials yeah we compile razer markup into partial classes by default so if you want to have multiple um bits of implementation then you can do so sweet perfect thank you come i have a question um yeah so you said the the blazer web summary js file that actually basically bootstraps they've done it the net core framework right you run time that's right so um without that implied it's possible to have a dll that was actually compiled from something like f sharp and have it still function yeah absolutely so what we're invoking in fact let me just show you make sure that everyone gets a chance to see this fully so i'm going to go back into my browser and i'm going to clear the storage um just to make sure that we are fetching everything um from scratch and then i'm going to show you how some of the dlls get downloaded as well and um you'll see if we zoom in a little bit that we are downloading all of these kinds of dlls that come out of the c-sharp compiler normally such as the one for my application lasersmart.client.dll but also the all these other net based class library dlls and we don't care how they got generated they could be it might be that they were in fsharp and they got compiled it could be they were vb and they got compiled it doesn't matter as long as it's a dot-net dll then we can load it and we can run it cool i see a question in chat which is asking about offline mode the answer is yes absolutely um i i might be able to demonstrate that to you i don't know because i didn't prepare to demonstrate that but let's see if we can quickly make this application work offline so i'm going to enable the service worker which i had commented out before and to do that i have to go into the index.html file and change that to be enabled and then i'm going to go back into my browser and i'm going to reload it now okay now what i've done there is i've turned it into a progressive web application so you may notice that we've got this little thing up in the top right hand side in the address bar which would let me install it as an application if we want to so if i click on the install button there it will pop out and become an application which is installed on my machine now and is available on the start menu or the dock or whatever your operating system does um also let's see if it's going to work offline as well so i'm going to go into the browser tools and reorganize it slightly and i'm going to go to the network tab now how do i do this how do i tell it to pretend that we're offline okay here we go right so if i resize that window a little bit then i can change it from online to offline okay and then i'm going to hit the reload button and what happens is even though we're offline the application still shows up when i hit reload which is going to happen about now and it's still fully interactive because you know all our net code is running inside the browser and um you know it's still trying to make these requests to the server even though the server's not there and to try and show you that a little bit more i could um let's see what i'm going to do actually is i'm going to kill my web server completely so we can simulate um loss of network connection to the server and then i'm going to make try and make a request for that and you'll see that even though there is no web server my application is still able to run inside the browser and it's able to run even if you know the browser's fully offline and then if i bring the web server back up a little bit later so let's just bring that server back up then as soon as the server comes back up my browser will hopefully complete that request that it started earlier and um actually i don't know if it's going to now i must have not done something quite right on this occasion but ah there we go anyway it's reconnected but partially but i haven't i've obviously not set that up quite right um anyway as you can see when i was in offline mode and i reloaded the page i did have the application come up is server side rendering supported is a question uh yep absolutely it is so um when we were doing the i can show you that actually if you want so let's um switch back to the other application that we had earlier because that will have got server side rendering by default let's see okay so what i'm doing now is i'm going back in visual studio and i'm going to the application that we had before and i'm going to go and do net run in my console there to start that up and then when that starts up i'm going to open it in a browser and we will have a look at the initial html that's going to the browser this time you'll remember that when we were running on web assembly the initial html didn't really contain anything other than the bootstrapping instruction well it's a little bit different when you run a server project because by default we do enable server side rendering and we can see when we open the initial html that all of this content has been emitted and that was all evaluated on the server so even if the browser doesn't support javascript at all or if it's a web crawler or something it still gets to see all the content and uh then it only becomes interactive a moment later when we make that websocket connection back to the server so that's how server side rendering works for blazer server it can also be done for blazer webassembly we added support for that in.net 5. you have to do a few more steps in order to enable it but it's um it's also supported in the same way there's a question from thomas clark about where can i get documentation on kestrel um i'm afraid i don't really know i can only suggest just having a look on the general asp.net core docs site yeah i can point to it in the um chat i'll put a link to it all right excellent thanks yeah yeah i'm sure there's some stuff in here but i don't know orchestral server okay all right yeah so there's some documentation just there got anything else anything more general perhaps i know um one person wanted to ask about using.net for server programming in general if um if anyone's got anything about that we can especially put that question to david fowler but um but i could also have a go or anything else i wanted an idea of the ecosystem the for the blazer ui components how mature is it so far are there a lot of options for a pre-built ui components and stuff like that that you would see with rearview or is it kind of no getting off the ground um yeah great question so um if you'd asked that about a year ago i would have had to say something like well you know it's very early and there's not that much stuff yet but i think that since since dot net three one three two kind of really became well established um a pretty huge number of uh component vendors have come along and started filling up the space with all kinds of laser stuff so i'd say it's there's a fairly broad range of things now to be clear it's nothing like the same scale as react so um in react if you go looking for like i don't know let's say a grid or something like that you'll probably find there's 150 different grids available for react um of which about 130 are just you know awful or have been abandoned or something and then maybe 20 of them have got merit to them in blazer it's probably more like there's 10 or something um of which most will certainly still be maintained because they're relatively recent but if we have a look there's a particularly good list that we can look at if you want to see some of the resources that exist which i'm just getting to in my browser now and you're going to see eventually and it's called awesome blazer and if you have a look on there you'll see that there's loads and loads and loads of stuff that people have uh created to give you all kinds of different samples and you know look at this we've got apparently about 10 different cms's available with players lots of games um i'm trying to find components specifically which are probably in this list somewhere who knows okay so we've got all right yeah so we've got these component bundles these are not just individual components but whole libraries of components uh rep representing different kinds of design systems so um ant design is quite a big one map laser that's all the google material design stuff and we've got various component vendors like radzen and devexpress component one there's there's many others as well sync fusion uh yeah it just kind of goes on and on there's there's a lot and then of course massive lists of individual components so yeah there's a fair amount of stuff but i would still say that the react ecosystem is at least 10 times bigger yeah i think you pretty much knocked off my next question which would have been around ua kits and design systems so that's this is great cool all right good stuff anything else and we've got a recommendation from kenrick about telerik and syncfusion cool i think this is awesome uh steve i just launched a poll here um if people will be willing to switch to blazer and so far um there's only one no right is that a yes no i'm not sure we actually have more yeses so we have yeah 11 yeses so so who said no that's the real question who said no it was david because he's like i'm already using it so i don't need to switch yeah it might be david it might be david um you know so it seems like if you know um you know the propaganda is working [Laughter] cool i i i don't know i think it's a bit disingenuous to restate the the um the pull as if he would switch if if we call correctly asked if it would use on my next project i mean a pet project i have no problem at all that's quite powerful and actually it has been very interested in knowledge um all together i mean you kind of get accustomed to doing something the way you do it all the time that's the easiest because that's what you know uh but then my wife was always trying to get over the hurdle of being introduced to shower properly and i think this has done a decent job and it showed me it has a lot of power in it so i suspect maybe blizzard is a really good place to come in because it's front end so it's a bit lighter and you can pick and choose snippets and create kind of smaller components just to get a feel for the language without necessarily having to go full blown blackened back end i also say i haven't used it for that reason sorry yeah the story versus xamarin i'm sorry could you repeat blazer versus xamarin this is the first summary they do solve different problems so it's a little bit difficult to to like compare them xamarin is is used for creating native application uis and blazer is for creating web ui so so i'd say it mainly comes down to do you want to build a native ui or or a web-based one if you've got a lot of background and scaling web development and css and so on and you want your applications to look exactly the same across all the different platforms that you need to support then of course web-based rendering is going to be the most productive option for you whereas if you've got a background in xaml and you want to create applications that match the native styling of you know several different operating systems that look different from each other then xamarin would be a better fit for that um so yeah i guess that's the the political answer but the less political is obviously just blazer how long do we have to wait to blazer native blazer native well that's so i'm sure some people on this call have heard of it and some people have not but um something that we are looking at is uh creating a more streamlined way of using the blazer programming model with those razor components that i showed you to create uh web rendered native ui so if you want to create a windows or a mac or an ios application which renders using web ui then at the moment you have to do quite a lot of the wiring uh yourself uh but we want to ship a feature in.net six which gives you the ability to create this web ui with blazer and run it as a native app very very easily so you could think of it as being a kind of net version of electron if you want to electron is a way of doing web rendered ui with node and javascript and that's cool if you want to do node and javascript but if you want to do not net and get some of the massive performance advantages that you would get with that then then that's what we're hoping to ship and that's targeting all the platforms like because i don't remember you mentioning android but yeah yeah so um our biggest focus in net six is on the desktop platforms and the reason for that is because if you look at where web rendered ui is most popular in the industry it's it's electron and that only works on desktop operating systems you can't get an electron application running on android or ios the equivalent to that on mobile is cordova or other things like cordova and they are nowhere near as successful as electron people are much less enthusiastic about doing web rendering for mobile and we recognize that's because the the ui requirements are quite different on mobile and it's it's hard to meet that level of polish with when branded ui on a mobile so we're focusing on where we expect the product to be successful which is on desktop but we're not going to stop people deploying to mobile if they want to it's just not something that we're focused on as much as desktops okay got you um the trend i'm seeing at least in the react community is there's something called react native web and what react native web is actually doing is it's creating an abstraction layer that is compatible with the reactive site but that renders back down to web so it's kind of like going in the other direction yeah so um i'm not sure if there's scope for blazer to to go in that way because you're restarting web first um or if there are any plans that are similar to that type of approach well react started as web first as well so in in if we wanted to we could follow exactly the same path um but we but it's not clear i would say at this stage that react native web is going to get anything like the level of adoption of regular web based frameworks i know it's a cool thing at the moment but like in terms of numbers it's i i doubt it's cracked even you know beyond one or two percent or something of the the market size of um of the traditional web-based spa frameworks so i guess we're going to keep an eye on that and and see and if that ends up being a direction that the industry really goes in at scale then i'm sure we would would be interested in that as well but if it feels a bit like an open question to me at the moment um but you know i'm very interested in what opinions people have about that thank you i'm steve i was just wondering so i know you you you tackled the ssr service rendering um and i know you touched on it earlier but in terms of deployment uh like if we're doing like a typical deployment how would you suggest we go about that for blazer app um well the way that you deploy um depends a little bit on on what hosting model you're using and where you're trying to deploy it to so if you're doing a blazer server application then it's a fairly simple story which is you deploy it exactly the same as any other.net server application basically you run a net publish command on the command line and you get some a directory of stuff that you can then put on your web server and that will run and the fact that there's blazer in there makes no difference to where it's just.net code so it doesn't change anything about the deployment mechanism if you want to deploy it to a cloud-based host like azure then uh check some docs but it's it's not too difficult there are many different ways to do it and they're all gonna work just the same with blazer server as anything else for blazer web assembly if you want to deploy to a.net based server then you can use all the same things that i just mentioned so you can just do a standard.net publish and blazer webassembly will run on a.net server in the standard way if you want to deploy to something that's not a net server then you've got a little bit more to do but it's not necessarily that hard so you can run.net you can run blazer webassembly on any server at all including static content servers and to give you an example of that i'm just going to go to um what do we call let's do [Music] i'm not sure github.com i've got an example on github whose um name i can't remember and i'm going to try and find it which shows an example of how we can run on get her pages blazer on get her pages here we go all right so when the thing actually catches up with us you will see that i've got that blazer application that we saw before with the same interactivity that we saw before but this is not running on a net based web server this is running on github pages so of course there's there's nothing other than the ability to just serve static files there but it makes no difference because webassembly files are just static files and hence we can host it on any web server without necessarily paying any money and that's very convenient and if you want to see more about exactly the steps to deploy to github pages you can go and have a look at this repository that that i've got on the screen there and you'll see that i've given an example of a github publishing workflow and that deals with everything that's needed to actually do the deployment to github there and it's not very difficult it's 32 lines of yaml long and you can find that and see how that works if you want all right steve i think this is an amazing session i just want to say thank you i would like everyone who also wants to join me in thanking steve for this session i know you only promised like an hour so i don't want to take any more your time but that you've kind of taken us like from the very beginning right through you've answered all of our questions i must admit david steve did what you promised um i'm convinced i should give i should give blazer a tray you know i gotta admit i gotta take the l i gotta take the l in this case yeah but no honestly no react i'm not gonna promise that but i'm gonna give it a try gonna i'm gonna give it a try um so so yeah if anybody else would like to join me in thanking steve and thanking david as well david also helped now bringing steve and convince him to spend some time with us thank you so much steve anybody else wants to join me you know they unmute your mic just say thanks steve thanks david you know if you don't want to say anything else this is recorded but we're not going to have like any any of the introduction session we're going to focus on the actual session itself we are going to see youtube so yeah if anybody else wants to see it yeah this was definitely tremendously helpful so thank you both actually cool you're very welcome thank you thanks for choosing to attend and spend some of your afternoon on this i appreciate that it's been really cool to see you all and get to hear from a bunch of you so thank you yeah thank you steve i i've been looking at blizzard for about a year um and i'm i'm i'm almost at the point of using it for something real so i'm pretty close because it's come a long way in the last year but thank you very much you're very welcome i think i think it's going to be a very powerful platform because of the all the whole uh ecosystem that's available in.net huh yeah awesome thanks a lot steve um the chat was real nice um i've also been playing with blazer for a while and i am pretty much about to press the trigger on a on a project um was close to using it last month but the project was a bit too big and i didn't want to take the eraser but now i think again i can go ahead and give it a go oh yes i would definitely say thanks for sure um i mean i work in dot net and stuff this is uh this is really really neat um i think i'll just dabble in it a bit on some personal projects actually and and then also see um how best i could also maybe integrated into more major major projects as well but this is i think um i think blizzard is you are definitely onto something pretty strong here i i believe yeah so i'm looking forward to more i mean sessions like this and i guess just this network because i've never seen so so many um i guess developers in one place any caribbean so this is this is really nice guys awesome yeah just to echo that as well steve thanks for the um the session is really great i again never really had a proper introduction to c sharp so this definitely did about my appetite um just uh the other guys in the chat as well who do see sharp stuff or looking to get into blizzard if you do anything any pet projects you just want to demonstrate i'm willing to listen and look and learn so don't keep it all to yourself if you do anything that you want to show off or just to go through your process um i'm happy to join you on a call as well just to see it so i would also like to um say thank you as well steve it was very informative um this was the first time i was hearing about blazer and i do some work with web assembly sensei um work with russ but it was very it was very interesting um so yeah thank you for it super thank you joel big thanks to david for making this possible as well i know be like to give him a lot a hard time often some of us more than others but really um he he really did well by by introducing us to you steve and letting us hear from you directly you did a very very very good job of presenting this um i would i would say controversial among our group of react developers topic of blazer and actually making us take a serious look at it so awesome good job to you both all right well thanks everyone um really cool to hang out with you and spend a bit of time um so thank you um i think i'll probably drop off now and all right steve is on twitter and everything else i think oh yeah twitter snapchat instagram i don't know what else you're on steve they could probably drop some of your handles and i think the code is already up on your github right uh the code for yeah perhaps i can email you afterwards with link to the um the that blazer mart application in case anybody wants to check it out yeah that works yeah that works definitely um all right so thank you everyone um once again we're going to have a recording up on youtube um because microsoft doesn't have their own video channel um but burn right but but we're not going to have any of the introductions so no worries about that i know it was just on chit chat before but we do plan to have more of these sessions um david i volunteer you for the next one so yeah you could get ready all right everyone thank you so much have a great day thanks especially so steve and david take care thank you goodbye

Channel: Shannon Clarke

Views: 2,428

Keywords:

Id: rWHaMfzLlhw

Length: 66min 43sec (4003 seconds)

Published: Sun Mar 21 2021