Deep Dive on Server-Side Blazor .NET - Carl Franklin

this is Carl Franklin here from the comfort of my kitchen I'm actually not in Tahiti even though that's what this scene would tell you it's a green screen but I figured you know let's just all imagine that we're on a beach hanging out together drinking some cocktails that have some fruit punch in them maybe some rum maybe a little more rum maybe a brought to us by beautiful people and we got a band playing and you know I've just told the band to take five so I can talk to you so let's this we're just imagining here this is what I'm hoping will happen so let me share my screen again and we'll get started so this screen right here is is it's a PowerPoint slideshow that I have that I'm you know all my blazer code is wrapped up in this thing I'm doing called the Blazer desk show so don't mind the subtle branding I just wanted to say welcome in this hour I'm going to share everything I know well almost everything I know if I talk really fast I'd be able to share everything I know but it is it is an hour but this is the thing that I want you to take away the hands-on lab and the slideshow both of those things are available at blazer desk show.com so if you just go up there you can actually download a pretty big project that you can you know steal snippets of code for you don't have to worry about you know snapping screenshots and URLs and all of that stuff even though I put them here in the slideshow so I'm gonna start by talking about what blazer is blazer started as a little web assembly project that Steve Smith did right here at NBC but in Oslo a couple of years ago and people just went nuts they just went absolutely crazy when they saw the possibility that we could have c-sharp running in the browser again and of course you know everybody asks the question is this silverlight v next and the answer is no it's not I actually wrote a little blog post about it which you can see I got a link here the difference between web assembly and Silverlight and I can understand why people conflate silver lights past with Blazer web assemblies future it's because that they both kind of have the same end result right they both allow developers to write c-sharp code that runs in the browser but the difference is so vast and it's so different okay so here's the difference Blazer ultimately failed because I'm sorry Silverlight ultimately failed because of the plug-in model of the browser which was really the only way that we could have code that wasn't JavaScript running inside the browser the plug-in model was causing all sorts of problems for iOS and most notably flash was draining the batteries of iPhones and iPads because it was so CPU intensive and it was also the plug-in model was also a vector for malware and so for the first time you know Apple customers we're experiencing malware and of course they dogged on Microsoft for years about being you know just insecure and all of that stuff and they prided themselves because of that App Store model on curation and you know strict standards and stuff you can just run an app that you download off the internet so anyway Steve Apple Steve Jobs he said and essentially a blog post that was called thoughts on flash that no more iOS no more plug-ins in iOS so iPhones iPads they would that the Safari Browser would not use and wouldn't load plugins any plugin so Silverlight was a casualty of that now webassembly which is just a couple years old is this binary virtual machine that's cross-platform that lives in every browser and I'm talking every browser okay not every browser because there's a lot of browsers that they were popular for a while and then for whatever reason development stopped on them right Internet Explorer being one of them so even the latest version of Internet Explorer which is 11 doesn't support web assembly because they just stopped developing for it right but every other browser and especially the ones that you use today even yes even Safari on iOS they all support web assembly so that is sort of the the backstory of web assembly and that became the backstory of blazer but along the way Steve Sanderson and Co essentially developed this component model and the component model is really what blazer is all about because when you write markup and code for blazer that same markup and code can run in two different hosting models one of them obviously web assembly runs in the browser but the other one is a server-side blazer which runs all the code on the server which is interesting right as it's sort of an answer to web forms I guess you could say but the difference is gonna be really obvious when we start looking at the traffic and looking at the magic behind how that same code is going to run that runs in web assembly is also going to run on the server so you really have to pick a horse but I'm gonna show you a technique by which you can belay that decision and actually develop both hosting models at the same time so you really don't want to nor can you nor would you want to combine models alright this is a spa framework so this is a single page application UI framework like angular like react and you wouldn't pick like a version of angular where all the JavaScript ran on the server versus on the client and mix them like that's what we're talking about here you wouldn't mix them it's really a UI framework it's not an architecture for building a spa application the only part of that architecture that's different is where that code is running everything else will be exactly the same alright so now that I've got the what is it out of the way let me talk about how to install it well if you just install the latest Visual Studio 2019 not preview not anything and regular dotnet core 3 oh you're gonna get blazer server support right in the box that has been baked since core 3 o was shipped but web assembly is still in preview and if you want to run web assembly you need to get the latest version of Visual Studio 2019 preview even the free Community Edition is just fine you don't need to spend any money but you guys are probably all professional developers you probably have MSDN and you probably have Enterprise that's just fine but the Community Edition does everything that you need to do you install the latest dotnet core SDK 3.1 alright and then you install the Blazer web assembly template and it's a command line thing that you just run and if you just Google blazer or web assembly blazer web assembly getting started or web assembly preview 3 now available that will also show you exactly what you need to do to install it all right so what I'm gonna do is talk about the server-side model and then the client-side model but we're not just going to talk we're gonna actually look at the network traffic and see what it is so the model is for server the magic that makes this happen is signal our I'm just going to go over to my code and create a blazer application I'm going to call this blazer server and let's get the right location here so because I've installed the template I have the option of also doing a web assembly version and hey if you've installed the template and you have and you don't see this there's a little trick that I just learned yesterday or the day before switch back to dotnet core 3 Oh with this drop down and then back to 3 1 and you should see it the latest version of Visual Studio 2019 preview is still a little wonky but there's workarounds so blaze of server app is what I'm going to create we're just going to run the the application because there's a little demo built into the template and you'll get to see what that looks like you've probably seen this and yet this is another issue just sometimes you'll have to run it twice you might have to build it it's nothing to worry about just Visual Studio and the other thing I wanted to say about webOS the webassembly version is that it is syntactically baked right now the syntax of the component model isn't going to change between now and when webassembly ships so you can be safe arrest assured that when you build your blazer web assembly code that that code is going to run the underlying plumbing code might change a little bit alright but that is going to be baked in may and then webassembly is going to be part of dotnet 5 shipping in November so I've got a counter button this is one of the three demos here here's some static information here's a counter but notice that it also reset to zero when I navigate it away from it that's going to be important later and then I've got an example of fetching data from either a service that's local or an API if we're using the the webassembly template so let's just look at this code while it's running I'm gonna go to my pages folder and you see counter dot raiser so that is a blazer component that is actually a page and you can tell it's a page because it has the at page at the top with the route so you can see here I've got very simply some HTML HTML here HTML here this @ sign this razor syntax you should be already if you've done any kind of razor you should be used to that we're displaying this variable but the variable is defined in this code block right here in the page yes you can move it out to another class but it's right here in the page and we've got this variable right here current count and a method increment count that just yep increments it we get there with this button and the @ sign tells you and Blaser that this is a blazer server side whatever Co a blazer component model directive it's not if I took away that @ sign that would be a JavaScript unclick right here right so that's a JavaScript directive this is a blazer directive so there's no run at equals server there's nothing it's very very concise and I love this about the component model is that it just works so so well but as you can see I could put a breakpoint here and when I click the button boom I got the breakpoint now this code is running on the server wait a minute this is the client this is the server right so I've defined the mark-up but this code is running here how did that happen well let's take a look by pressing our friendly f12 button and I'll go to network I'm gonna disable the cache you could probably see right there just make sure there's no caching happening and I'll start recording and then I'll press control f5 and we'll see what we get all right so that is all of the HTML CSS JavaScript whatever that was sent down but look at this guy right here and I know you can't see that but that's a WebSocket this is signal R this is essentially a signal our connection and where it came from is defined here in this blazer server JavaScript that runs in the browser all right that's sent to the browser and that hooks the Dom elements and then when I click the button that hook happens and it says oh this is a server directive that I need to call it sends a message via signal R to the server the server says oh on click increment count I'm going to run that server runs that and look this affects the Dom how do I know well the server has a graph of the clients Dom in memory every single client it keeps the graph of the Dom so there's no viewstate going back and forth like there was with web forms it already has a graph it knows what the state of the Dom is so it notices that there's a difference and it says uh well I'm gonna take the diff and whatever changes I'm gonna send a binary message back down to the browser to update the Dom and all of that stuff happens now how do we know that well let's let's click on this and we'll actually see the messages as I click right there you can see two hundred and ninety bytes went up to the server that's the green arrow 148 bytes came down and then 27 bytes I'm assuming this is a thank you very much I got it everything is updated you know maybe this is another the latest graph the Dom I don't know what that is actually but I do know how you can find out if you want to see I have a blog post here and you can just go to blog at Phoenix comm or look in this the PDF which is linked at the hurts the server for this link I'll show you how to log the signal our traffic and actually look at it and see what's going on not just the not just the amount of data but look at this look at look at how much data was transferred initially when i refresh that page 146 k that is pretty cool alright so just I want you to just see what's going on here this is the magic the magic is happening with signal R now that's signal our hub that is being used here isn't something that you can tap into it's not something that you can hook yourself to do your own kind of you know chat rooms or other typical signal are applications but this is just a and the asp net 3 1 cor core 3 1 web application excuse me so you can hang on second so you can add a signal our capability to it and it isn't going to interfere with this one so this signal our hub that's built into dotnet core 3/4 blazer server applications is just a one to one I mean there's a hub but it's only allowing one to one communication between you the client and the server so there isn't any one too many stuff going on here and it's very tightly controlled and you don't have access to it for good reason so let's talk about scaling because obviously if everything is on the server there's gonna be a certain amount of memory required for every client and it turns out it's about 85 K right now our last time I looked anyway so it's not a whole lot but you know if you're planning on supporting 20,000 users you might have to beef up the memory in the CPU of your of your server so you don't want to keep millions of rows of data in memory for every user just this is standard stuff when you're thinking about conserving memory so you do have overhead per client WebSockets is another precious resource that will run out eventually based on the amount of memory and CPU available but what you can do is you can scale out with this signal our service let me pull this over here so azure has a signal our service and you can use that and completely remove signal R from your server to to scale out and there's this this github has all the magic tools for doing that so this right here is a screenshot from a presentation Dan Roth did dotnet conf and they did a test Microsoft did a test for appropriate latency which they deemed was less than 200 milliseconds you know added for handling the UI under a load and this was a real application it wasn't just a counter they built an application and they wanted to automate clicking the buttons and seeing what the latency was as they turned up the number of users so it turns out with oops all right well with anyway with one virtual CPU and three-and-a-half gigs of RAM in their virtual in their you know set up here they were able to support about five thousand active users if they up that to a force virtual CPU server with 14 gigs of ram 20,000 now that was without using signal art service as your signal our service that was just in the box so memory is the primary bottleneck I'll talk in a minute about having multiple servers or a server farm or a cluster in what's required for that so let's talk about the ups and downs the drawbacks the benefits and the drawbacks of Blaser server hosting model download size is small the app takes full advantage of the server because it's all running on the server so anything that you can do in an asp net core application you can do on the backend thin clients are supported so web assembly is if web assembly isn't running in that particular browser time so I'm looking at you Internet Explorer 11 there is actually a required polyfill to get it to work with Internet Explorer 11 but that's easily solved some companies are still using that because it isn't modern and because their software isn't modern so this may matter to some people the apps c-sharp c-sharp code base is not sent to the clients so they can't see the code that's running my answer to that is that's actually not a benefit nor is it a drawback it just is the the rule for me is I don't put anything on the client that I don't want the client to see and that's true whether it's JavaScript or blazer or whatever so the downsides of blazer server there's a little latency added for the round trip to signal are for that signal art hub there's no offline support so if the client connection fails the app stops working right that's kind of a big deal so remember every UI interaction requires a trip to the server and then scalability we just talked about that memory state is what makes this possible and we'll talk about that in a minute and an answer peanut core servers required to serve the app so you can't just package it all up like you can with HTML and JavaScript and serve it on a CDN all right I'm gonna switch over to what do we call this slide oh and see if anybody's got any questions that's apt SLI dot dough or SLI dot dough there's a link in the channel room conference stream room one any questions on server-side Blazer or does anybody want to just unmute their microphone and ask a question that'll work too alright I'll take that as a no let's move on if you have any questions again you can just unmute your mic and talk or I'm watching slide Oh as well all right so let's talk about the client-side hosting model it's a little simpler because everything's just running in the server there isn't a client-server interaction there is no signal our hub for basic UI of course you know if you're gonna do your call into api's you're gonna do that no matter where you're calling from but so as I said before web assembly is the thing that makes this all possible it's there it's in the browsers it's not going away it's not insecure it has the same security boundaries for your code that JavaScript has and dotnet isn't the only language that runs on webassembly rust runs on web sembly golang runs on web assembly there's a growing list of languages that have compilers for web assembly you think of this like a little virtual machine it's its own operating system there's even an initiative to move web assembly out of the browser and on to the desktop which requires now an interface to the system that it's running on and that's called Wasi Wasi dot dev if you want to go there and keep your eyes on that I think that web assembly is so revolutionary and so solves the problem that we've always had with the browser which is JavaScript JavaScript is by nature a problem for enterprise developers and was written in a weekend and there's parts of it that really suck and you know there's a lot of people out there that use it just because it's the only game in town well web assembly sort of blows the doors off of that and says you know what there's a lot of other languages that you can run in the browser now with the same level of security and an efficiency I heard a rumor I don't know if this is true but somebody told me that the guys who built docker said if they had webassembly in 2008 they never would have built it interesting huh all right so there's the model we're gonna go back and watch the traffic with a webassembly application which I will just add to this solution I'm gonna have a blazer application I'm going to call it blazer wasm and here's here's the old trick again see webassembly isn't showing up I'm gonna do that also I'm going to check this off right here asp net core hosted what is the advantage of using blazer at all it is slower than Laz emit overloads the server's and it doesn't have cool features that JavaScript has like support and you know I get this a lot you know why not just use JavaScript man I'm not telling you not to use JavaScript I'm not talking to you so right on with your angular and your JavaScript and everything go for it just use it all right so this blazer is for four people for developers for corporations that have more c-sharp resources than JavaScript resources or maybe they've found that getting people up to speed on all the JavaScript frameworks and all the libraries and the tooling and all that stuff they have a lot of attrition they have a lot of people that can't do it and only a few that rise to the top and then those people get hired out so so there's definitely a shortage of programmers but there's a lot of enterprise developers that ever since Silverlight that went away have been looking for a way to leverage their skills on the web so I think that's the largest audience for for for blazer but good question anonymous all right so as peanut core hosted is not a option that I'm checking off here if I don't check that off I get one application that just you know Visual Studio runs and is expressed to the client but I want a server also in that same URL space so I can do controllers and things so that's what this gives you so look at this looky here I've got a blazer wasm server which again is a server it's got controllers for API controllers and it hosts this client right here this is going to run in the browser but they both have access to this shared project which is just a dotnet standard project and this is got the models so this is where you would put your models if you're using this kind of architecture so let's look at blazer wasm and I'm going to set blazer wasm server as the startup project I'm also going to rebuild this because I know better and we'll run it we're gonna see it it looks very similar in fact the the code is almost exactly the same but the difference is this fetch data right here in the blazer server version this is calling a local service forecast service which is injected into the page and it lives here on the server in a data folder and it's just returning some data but on the client fetch data uses an h2 client and it calls a URL now it's a local URL it's a relative URL but that is the server calls into blazer wasm server to the weather forecast controller and this is an API controller so the difference is architectural but the code is is exactly the same especially for the counter so speaking of the counter I'll go here and I'll do a breakpoint and there you go this is new just in the last few days now you can debug but there are some limitations there's there's a few debugging limitations if you go out to that blog post that's linked on the first page the getting started and what's required Dan Roth tells you exactly what those limitations are debugging isn't complete yet but at least you can you know you can get there you can get breakpoints things there are things that you can't inspect though and things that you can't do all right so I'm going to continue here let's do what we did before with the server go to the network tab disable the cache there we go control f5 and let's see everything that gets loaded up here whoa a lot of stuff six megabytes transferred yes that's a lot and that is because by default in debug mode the linker is turned off and if the linker is turned on you won't get the entire wasm framework and that framework by the way is right here the CLR is called dotnet laz 'm let me expand this a little bit so you can see the size and the framework the thing that's actually taking up the most space is ms not ms core lib but where is it went on five sort by size you'll see yeah ms core live dll that's right 1.3 megabytes so if I turn off and I can turn it off by going to release mode if I or I turn on the linker if you're in release mode the linker is on you and we'll do the same thing again control f5 all right now it's about a megabyte so big difference if you're if the linker is on but look these are all DLL so that dotnet wasm is the CLR that is the in it's based on mo no it's animo no based CLR that is the binary whereas all of the other code that runs our assemblies and their dotnet to standard assemblies which means a lot a lot of stuff obviously you can't do anything that calls out to Windows or to a system but all the good stuff that you need to do UI is in there and anything that's missing you can just add a new get package too and as long as it's dotnet to standard compliant it's going to run so benef it's and drawbacks of this model the code executes more quickly in the browser so there's lower latency because we don't have to go to signal are just for basic UI interactions you do have offline support and progressive web apps are are supported and you even saw that when I created a blades or web assembly application there's a checkbox to enable PWA support so that adds the manifest and it adds the serviceworker and you can just go ahead and modify that to your heart's content based on what PWA does also because it doesn't require that server to exist can be distributed via CDN and as I said before any dotnet standard to a c-sharp will run in the browser so downsides you can't directly access your database just like JavaScript you wouldn't send in down in JavaScript a connection string to a sequel database or a secret that's used a password that's used to access Asha resources you're not going to do that in that code you're going to have to write an API layer so use the API you call the API from the clients in the API you can do whatever you need to do to kick off whatever processes on the server so it's still in preview it'll actually be in preview until dotnet 5 but it will be baked plumbing wise in May right now as I said before the the component model is baked the component model isn't going to change the syntax isn't going to change so your code is shipped to the client just I have to mention this because somebody brought this stuff is a security concern it's no more security concern than with JavaScript so you wouldn't run secret code you wouldn't run your secret sauce but you have an option you can run that in an API on the on the backend all right other questions about blazer webassembly hosting model we got a whole bunch of questions in slide outs so let's see would you recommend blazer for production usage say deployment to Azure app service well the I have to ask you a question which which blazer right now I wouldn't put blazer webassembly in production but I would recommend blazer server but here's the thing you now know the difference between blazer server hosting model and blazer webassembly hosting model we've talked about the pros and cons so now let's talk about where it's appropriate to use blazer server I think that for enterprise developers who are doing business to business software business to customer software need to think about how many obviously how many clients they want to support at the same time and either make sure that they have one big server with jus gunda memory and CPU to handle that or that they think about building a cluster which now raises other questions about scale in in-state right so we're going to talk about state in a minute but that has to definitely be handled you have to manage your state and while the tools there are primitive they're easy to understand but you there it isn't like session in web forms where you have like this prescriptive system that you can either store it outside in a server or in a sequel server it's essentially up to you you have classes and those classes can be serialized to JSON and then stored wherever wherever you want to store them you want to store in the sequel server or in a cosmos DB and spend all that money go for it but you probably want to think about maybe some of it in local storage right in the browser and some of it outside on a document database or something that's a lot less expensive but get it outside of your application that's what you're going to need in order to do webform kind of stuff so if you can support that and you can count on the fact that your customers are using it in a in a scenario where you can count on the bandwidth right that would be good I don't know as if this would be good for a Starbucks app you know what I mean where you know what I'm saying like you would the PWA with Blaser server not a good idea because you don't have the offline support and all of that stuff you have to be connected so think about those restrictions and if you can check off all those boxes and Blaser server seems to fit then yes I would recommend it for production I have this question long so I'll split it for the web assembly solution there will be some delay when you run the app for the first time yes that's right server version does not have this drawback yes that's also right is this possible to make your applications start running on the server then all the assemblies are downloaded in the background and when they're ready the app switches to the web assembly does that make any sense I'm not so sure it's a big deal like I mean what what are you gonna where are we talking about up to five Meg's up to six megabytes of data Gmail is five megabytes in an initial download and it is an initial download it goes into cache and just like with Gmail you can clear the cache and when next time you go you're gonna wait for a few seconds for it to load up again so I don't think it's a I don't think it's a big deal I mean any of these spot frameworks angular react they all have the same issue which is there's a whole bunch of stuff that has to get loaded the first time but you know there are situations like for example if your preferable model is webassembly and but you need to rely on the server version for Internet Explorer 11 in things like that yes you could do that you could fall back to the server version but you know it would be a different URL and all of that stuff so you have some things to think about can Blaser be used in it as an isolated module in an existing asp net solution without framing it yes you can add blazer pages to any asp net 300 blazer server pages to any asp net 300 applications easy peasy all right let's move on questions guys so let's talk about binding binding is very very elegant in this component model they've done a good job of making events very easy to understand and I'm gonna show you what that looks like now rather than sort of reading the screen to you this is just a sort of a reference let's actually do this here so I'm going to go back to Blazers server as being my startup project here and let's go to index raiser making sure this is all happy and isn't gonna barf on me make sure we're back in Blazers server oh yeah I was in release mode let's go back to debug mode you you're gonna get this a lot squiggles that go away in Visual Studio all right cool so I've got I think I've got in my toolbox some snippets yes yes I do so let's use these well I guess I it's a complete snippet alright so let's talk about binding you've already seen one-way binding in the counter page right this is one way meaning you're just displaying something the two-way binding is where you have input so now I'm binding this input tags default property which happens to be value that's why I'm not I don't have to be explicit with that if it's the default property I'm binding it to message which is this property right here and then I'm displaying that message in the top this it's in the input and it's also in that h1 right there now if I change it I'll type changed there's an event that triggers the UI update by default it's on change which happens when we lose focus so I'm gonna hit tab boom and that unchanged event happens that's what tells a blazer to update the binding update the the values on the page but I can change that event I can say at bind yeah bind : event equals on input and that happens with every keystroke so now every keystroke is going to update the UI there it is so one simple change and this event is now forcing that UI update now let's do something interesting and let's add a component I'm gonna add a component into my shared folder this is where shared components go or non pages and you know this is just a convention right so I'm going to say I'm on a new razor component and I'm going to call it child component and you're gonna see one of the latest Visual Studio previews best features uh yeah not really that's gonna hang there forever so the workaround is just close it reopen it again and we'll replace this with this particular code right here so this is a component doesn't have an app page directive at the top and I've just got some inline styling here with a div I'm giving it some padding a like gray background color so that we know visually that it's a component and I've got a parent message string property here and that I'm displaying there and when I click the button we're going to call update message and update message is going to raise an event so let's talk about parameters all components when they interact with their host they interact via parameters so the parent message parameter think of it like a public property on a custom control but it's it can be bound to and it can be updated and all of that same with the event so this event callback I pass it you know whatever the type that I wanted to raise and I called it message changed and this is essentially an event an event definition now I'm going to raise it when I click the button I'm going to set the parent message to blaze on and then call a message changed invoke async and by the way any method can be async just put make it async task instead of void and then I can do things with a weight so I'm invoking this and passing the parent message now back in the host I'll change this code and here I've got the same binding with bind event on input but now I'm defining a child component and I'm binding the parent message property to my message property all right so when my message property changes the parent message is going to change when the parent message changes from below my message is going to change it's a two-way binding and by the way the event that is going to cause the change in the print in the component is message changed so when the message changed event gets raised my message will get changed and then it will be changed here and here so look how slick that is I didn't even need to have an event handler and to set values I just used binding right changes up here changes in the component and when I change it from the component boom it changes me in the parent elegant elegant elegant elegant beautiful love that so let's talk about handling state this is absolutely critical if you want to do a sort of a cluster application right which is an economic way to scale out rather than having one jageun de server but let's talk about first getting state out of the page and then we'll then we can actually move it out of the application but that's beyond the scope of what I'm talking about but you'll see just how easy it is so in Blazer server I'm just going to add a class and I could do this in place or client as well but we'll just pick server app state doesn't have to be all appstate I'm just calling a nap state it has one property called counter and now I want to add this as a service that I can access anywhere in my application and to do that this is in startup and configure services I'm gonna add it as a scope service what's the difference between singleton let's say in scope well singleton services of which the weather forecast services one there's one instance that's shared among all clients all right not good for state because it has to be a client by client access instance that's what scoped is so when you add scoped now you're saying I need an instance of app state for every single client so this actually manages the instantiation part of it and now you can just inject it where you want it and whatever that instance is that's what you get so I call at inject app state app state in the counter and here I can get completely get rid of this and I can use appstate dot counter not sure why this is a little bit brain-dead right here and not giving me intellisense but I got a feeling if I just rebuild this or build the solution everything's going to be fine yeah work just fine Visual Studio has a little catching up to do but again this is a preview version of Visual Studio 2019 so as I said before I remember when I incrementing the counter and I went back to home and or off the page and then back to the page it had initialized to zero that's because the page reinitialize is on on on navigation so just by moving this outside you know into a scoped service now I've moved it out of the page so what do I put in here anything whatever you want so this is all stuff that you want to persist you know this is your new session if you will or any scoped service you can consider it session based you know this is something that'll be available client by client now in the server what happens if that server goes down what happens if they press refresh well it's completely gone but you can use it's not here you can use stuff like local storage to store stuff locally in the browser per client and then of course you can use some database or anything like that there is a great shopping cart demo that I have in a blog post you can check out and this shows you how to use local storage to persist state and it's just a little shopping cart demo that I did where you pick an item you get to see the item you put in a quantity you add it and then it shows you what's in your cart and then if you close the app and go away and come back within 30 seconds because that's the default time it will still be there in the cart and you can obviously change that from 30 seconds to whatever you want it's just really to show you that you can put a little bit of stuff in local storage if you want to but Steve Sanderson says anything really more than a couple of K you probably should move that to a data store somewhere all right so this is the coolest thing it looks like the last thing that I'm going to show you which is a technique Steve Sanderson showed at NDC London earlier this year to develop both the client and server apps simultaneously so I've got both a client and a server app in my project right here and the first thing I'm going to do is add a project reference from Blaser server project reference to blazer wasm client in blazer wasm shared alright from the server to the client not to this server but this is where the code is it's in blazer wasm client that's why I want to do that now if I go into my servers underscore host CS HTML this is sort of the HTML shell that everything runs in you can see that there isn't much here in the body this right here is for handling errors here's the script this is everything right there that is this right there is your entire set your compiled blazer components all your pages your components your code all of it is right there so instead of using my local app I'm going to use blazer wasm client app and now what's going to happen is when I run the server it's going to run on the server and all the code will run on the server except the code is this code the code that's in Blazer wasm client so when it'd be cool if I could run them both at the same time well I can do that by going to the solution properties and I'm gonna set Blazers multiple startup projects Blazers server to b1 and blazer wasm server remember because that is hosting that guy and just to show you that this is working I'm going to make the crazy step of deleting the pages from my server-side blazer app and also I want to change the mode to server not pre-rendered pre-rendering means that it's a it's a server-side thing only and pre-rendering means that it renders twice once before it connects to your pages ari render once before they connect to the client and then once after and I want that so now I'm going to rebuild the solution and we're obviously going to move questions offline because I've only got four minutes here but after the solution is rebuilt I can run this and we're going to get two browsers you right one is running on server blazer server right there you can see and one is running on the client blazer wasm but it's both of these are the client code now is it going to work remember I told you the difference between fetch data this one calls an API with a relative URL this one calls a service but now it's running on the server it's got a problem it doesn't know where that service is not only that but it doesn't have an HTML and HTTP component so it's going to complain about that first there's no registered service of type HTTP client so in order to get this to work you have to do two things you have to inject are not inject but you have to add HTTP client to this to the server-side environment and when you go into the code for fetch data you can't use a relative path here so the actual path is here in launch settings JSON on blazer wasm server we get that ssl port right there and now we can go back to fetch data and change this to http local hosts : this guy weather forecast and now it should be able to call the API from both sides all right here's blazer client oh now blazer client has a problem and it's probably just because I got to rebuild everything this happens a lot you know when you're when you're developing just rebuild usually solves problems that don't you here we go so on the client on the server now I can fetch data also and folks that is going to be it for me because I've got one minute to spare but I'm gonna take questions outside I'll meet you in the hallway but I'll also be in slide oh okay thank you very much and thanks to NDC for helping make this happen in hi Mads torgeson you

Channel: NDC Conferences

Views: 6,244

Keywords: .NET, Carl Franklin, .NET Core 3, Entity Framework API, File Uploads, SignalR, NDC, Conferences, 2020

Id: WuPC5w9EgVw

Length: 60min 32sec (3632 seconds)

Published: Thu May 28 2020