🔥 The New Blazor Web App Template in .NET 8 Rules Them All 💍

hey friends Patrick here and it is getting exciting release candidate1 off.net 8 is here and if you don't want to feel like this guy here regarding the new blazer web app template then I recommend just continue watching because this is what we're gonna have a look at today the new blazer web app template and now everything is available server render Mode web assembly render mode and server side rendering and stream rendering so we will just compare the whole modes from the templates so just continue watching and then you will know by the end of this video what you have to do for your dream project maybe and one more thing I'm currently creating a new.net8 web jumpstart course which will be available for free and if you want to be the first to know when this thing is available then just check out the link in the video description and I will send you the link when this thing is there you will be the first to know promise one more thing thank you so much for watching already and if you like this tutorial and learned something I'd really appreciate it guys if you hit the like button subscribe to my channel it does make a difference thank you so so much and thank you so much to all my patrons for supporting me and if you want to support me too I will love you forever the link again in the video description and now let's start with the tutorial all right now before we start with.net8 let's go one step back and have a quick look at the.net 7 templates or the template projects Solutions you name it now here you see the Blazer server solution with Net 7 and I also opened or created the the webassembly and the webassembly asp.net course the co-hosted version and this one will be really interesting but more about that in a minute so you see Server here I think do you know that right you have the shared folder you have your pages folder data folder for your forecast service the example service here uh we're not really getting data from a database or anything or any uh web service even this is then done in webassembly but this is how it looks you've got your host CS HTML this is different than in.net 8 now and in general you will see that the folder structure is different the naming is different and also the files have changed but before we have a look at dot net 8 now let's have a quick look at dot Net 7 webassembly as well there it is so here now you see we've got also our Pages folder now here's the fetch data to for the example of fetching data and here we are really making well it looks like a web service call but in the end it's just a Json file we're getting right so here is the sample data but this is how it would work right an HTTP call to a web API for instance we've got our indexed eraser so this is already different to the Blazer server project there you've got your host and here's the index eraser again name is different now in.net 8 and the for me most interesting well solution with.net7 was this one here right when you create a new project and you check asp.net core hosted because with that you'll get one solution and when you deploy this thing you only need one Azure web app for instance if you're deploying this to azure in the cloud and you've got your client which are then all the pages the components all that stuff you've got your server which is in essence a web API right you see also the example controller and here now we're really making a web service call see it here HTTP get from Json async then weather forecast this is the controller name base URL is the same for client and server and this is why it works you have no course issue nothing like that beautiful stuff and then also the shared folder where client and server can share the entities here like this model here the weather forecast so again I think beautiful stuff I think this is something that many many many developers use to web developers use and this is something we are currently somehow missing you can build it yourself for now with release candidate One in.net 8 using the Blazer web app template but Dan Roth said I will link with the info card to the community stand up he said that this is coming back with release candidate 2 all right so let's stay a bit patient here and then we'll see all right so you've seen the files you see the the folder structure the projects you get right here with server Blazer server you only have the server project webassembly on user webassembly project and with asp.core hosted you've got the the client which is completely webassembly no Blazer server stuff here server here is actually a web API and then also shared folder can be already a bit confusing but it is getting even more confusing with net 8. for that we need Visual Studio see here the preview Edition version 17.8.0 preview two it is and now drumroll we say I want to create a new project and you see the new blazer web app template but it's not that new when you played around with the preview editions of.net but again you can as always enter blazer for instance and we still have the older let's say Blazer webassembly app and the Blazer server app in essence the same stuff we've just seen with.net 7 but now and this is where Microsoft is heading and I think wants us developers to go is using this Blazer web app template so let's have a look now it's gone so Blazer again and let's just use it alright let's call this Blazer server.net8 because this is what I want to show you first we hit next and now it's getting interesting because we have these check boxes here configure for https I think this is standard not that interesting but now this stuff here use interactive web assembly components use interactive server components and include sample pages I think this makes the most most sense most sense yeah this is easiest to understand I guess because here now we just get sample data example components Pages it's similar to the weather forecast or the counter page right this is what we get when we check this if you don't check this then it is similar to The Empty templates that we know from.net7 but now come these two use interactive server components and use interactive webassembly components now what does this mean with net 8 we get real server side rendering now what do I mean with real server-side rendering we do not have by default a websocket connection but with Net 7 we had a websocket connection by default when you created a Blazer server application now here when you check use interactive server components you also get this websocket connection let's just create this thing already real quick I'm currently creating a.net web devjumps.course which will be available for free we're going to have a look at web apis and Entity framework there for instance and if you want to be the first to know when this thing is available then I recommend just check out the link in the video description and I will send you an email when you can get it so scroll a bit further down and then you know what to do and now let's continue with the tutorial sorry that you have to be that patient today but I am really trying to to explain that so that everyone gets it because also for me it is still somehow uh and not 100 clear what's going on there but here now what you get first of all you see that the photo structure is different you've got your www.root folder nice but where are all the other files well here in the components folder so they moved everything into the components folder I think this is more streamlined really I like it you've got your app eraser file Imports Razer you've got the pages now instead of index we've got the home Razer and here under layout we've got instead of the shared folder now there's this layout folder for the main layouts and also the nav menu I think this is clear so shared folder is gone if you've got components that you want to use in several Pages then you can you can still create a shared folder of course but you can also just put them here under components and then regarding the pages folder these are the well components that have a route in here right and you can already see here we've got these new render modes so render mode server this is happening when you create a Blazer server app or using the web app template and say I want to have interactive server components this now means that this whole component here this page is rendered on the server you get static data to the client will be returned to your client when you want to access this page but with that you also activate interactivity this means when you click the button of this counter here then something is happening you see a result but this is only possible thanks to a websocket connection if you would comment this out and I will do this in a minute then this thing would not be interactive all right then you've got the home page nothing interesting well it's a bit is it a bit smaller or less content I'm not sure about that but still nothing really changed there instead of the the file name maybe and then whether this is not the name instead of the fetch data component and here you see this beautiful new streaming rendering or stream rendering attribute this just means and this again is the real server-side rendering server-side rendering in essence just means they also called it in the community stand up the static server rendering so you get static files from the server and when you for instance here want to get some data and they just simulate the delay here when you want to get some data then you have to wait for the server to finish calculating or getting the data and then it Returns the static data again the static file again to the client but here now with stream rendering the big Advantage is that you see let's say the shell of this page and when loading the data is done then it will just fit the data where it belongs all right and this is the great thing then of server side rendering combined with stream rendering but interactive server side rendering then is this stuff here all right you have a button you click a button and you see that something is happening there let's just run this finally and we hopefully see how it works all right there we are by the way I opened this blog post here you should definitely read this because then Roth here explains everything uh really really nice really good and also please watch the community stand up by the way I find it funny that with preview 7 we've got HTTP 3 by default this is now disabled so you have no dialogue where you have to to click yes I accept this anyways here you can see what changed right the web app template updates uh some stuff for the quick grid the dotted webassembly runtime additional assemblies we can have a look at that later and yeah lots and lots of interesting stuff let's just check it out by yourself so here we've got hello world and now let's open the console real quick and here now in the network tab we see web socket connection so now when I go to counter we see this websocket connection is here I can click there and I also see that something is happening now let's try this out without the render mode so I just comment this out and restart the application and then I'll click here nothing is happening right and we also see I know these are websocket connections but this is not the websocket connection you're looking for this is some tooling stuff I think from visual studio for instance but not the uh the websocket connection we need for the interactivity so this is what you really need if you want uh interactivity like this button and something is happening here you see that this is the websocket connection and when you go to messages you see that something is happening here when I click on this all right so this now already this is the difference between server-side rendering um and interactive server-side rendering maybe static server-side rendering or static server rendering I know it is confusing still all right next would be streaming rendering and this is now the weather forecast page here when we again go maybe here to the network Tab and go to all all right and go to the weather page you've seen it right loading and then the data is here and when we have a look at the result nothing here yet let me just do this one more time well let's just refresh this thing okay this is what I was looking for we see the I call it shell right so the the side the static side without any data but it is making so somehow on the server a web service call or grabs the data from anywhere we don't see it here of course because our client is not making a web service call it is done by the server in the server world and when the data is there then we see that it is just added to this page right the Dom is manipulated so it feels like a real single page application as far one more time loading right so half a second and then we see the data but now when I disable the stream rendering let's just save this and restart the application so that it takes some time I don't see the loading and then when the data is there and we also see it here we can access the page or the page is loaded right so it doesn't react directly when I click right I'm clicking now and takes half a second and then it is loading and this is different now with the stream rendering and again these are already well lots of changes actually with the new the new blazer actually in.net8 right I can again I click one two three and now and it is changing the page but the data is coming a bit later all right that's everything in essence regarding server side stuff if you have questions please drop them in the comment section now let's have a look at webassembly so I just let me just stop the application first terminal stopping it and now let's just create a new project not add really a new project really sorry if you hear the cars outside I had to open the window because it's really really really really hot in here and now Blazer web app templates and here let's say Blazer webassembly.net [Music] eight we hit next and now instead of interactive server components I choose interactive webassembly components and this is not really interesting because with preview 7 we did not have this we had to add this manually and as you can see now we've got two projects maybe with.net nine Microsoft will combine these and we only have one project but for now we've got two server project still all right so we still have the components here layout pages and so on and a client project now where we also have components and here in the example we've got a page which is again the counter page which is also a component of course and here now we see a render mode webassembly so what does that mean well this means that the webassembly files will be downloaded as you're used to it when you're using a creating developing Blazer webassembly applications all right and what's also new here and you will see that as well when you watch the community standard but it's almost two hours so maybe it's for you it's enough to just see this summary here somehow it says that in rc1 they haven't implemented this add additional assemblies some methods but that's not true as Dan Roth said in the community standup they actually support them or support this method but they haven't updated the template so there was this idea that for each component or every component that you see here on the client with webassembly or using webassembly that you would also have to have a component or a page on the server that is just calling this component here but this is not true what we can actually do is we can copy that put this here and by the way uh additionally to the cars outside maybe you hear my baby girl sorry about that anyways uh we see the page directive and we can actually delete this whole file so remove that and now here in the program CS not that one that one from the server project we see the services the new services and razor components and ADD web assembly components and also here map Razer components ADD web assembly or render mode and here now we can also call or add the method at additional assemblies with the assembly of yep from the Clone page client pages counter SM the only TSM we don't again get confused here you don't have to do this for each component or each page we just need the assembly and this is just an easy way to get the assembly and this should now hopefully work so again still the component folder on the server side you've got the layouts we've got the pages here Imports appraiser and so on new also have talked about that but uh let's just wait a little until we combine these two and then I will talk a little bit about the the appraiser and the routes component here and then on the client we only have actually the counter razor also the Imports yep programs yes not a lot going on here and also taped up root but here we only have the app settings all right so that's pretty much it let's run this thing and let's see how this looks in the end all right so again let's open the console here and now interesting part would be the wasm tab because weather is still the same right let's have a quick look again we see stream rendering this is the same server side rendering with stream rendering example but not regarding the counter you see it's downloading a whole lot of stuff and here this is the main important or the main thing I guess dotnet native renamed from.net wasn't to.net native wasn't and all the other stuff that seems to be relevant but if you want to have more explanation explanations about that then please again watch the community stand up so anyways here you see that now we're actually downloading something and here you see it as well in the console loaded seven megabytes resources of course if you publish this this will be significantly smaller and let me know click this thing it is interactive isn't that nice so this is now the big difference already between the server the Blazer server web app and the Blazer web assembly web app or let's say the Blazer web app template using server-side interactivity and webassembly interactivity so for me it just means that whenever you want to use webassembly you still have your server project there right and you just add the webassembly components which is actually pretty nice when I think about there there's so many use cases for that but let's think about a typical blog for instance right you want to build your own portfolio page your blog or something with blazer now with.net8 so you you use the Blazer server magic here to for instance display your blog posts your articles this can be static stuff that you give the client to read alright and this is actually then also really good for SEO search engine optimization right but then again if you want to have an Administration site an admin backend let's say where you then create your articles then you could still use the interactivity of laser server or you say no I want to have a smoother experience if you see the milliseconds because you're probably the only user that is using this application but anyways you can say okay for the edit form that you're then using and I don't know uploading images whatever it is setting tags then you could say okay I'm using webassembly and create my admin Pages or admin components there for webassembly and then combine this all right so this is just one example and I can think of many many many where this really makes a lot of sense and I think this is awesome this is really really awesome all right but now let's continue with the combination of both so we create another project laser web app it is and now let's just say blazer.net 8. and uh yeah let's just call it that because now what I want to do is I use webassembly and the interactive server components and the only thing then okay I already got something that is called that so let's just say server and what's um what a great name and here now we check both webassembly and server and here now the exciting part is that again we get two projects but the thing is that here now on this thing we get render mode Auto again and I guess this will change then in rc2 with the template we can grab the the page directive put it up here and then remove the counter page on the server side all right this took long and here now in the program says now here we see at server components and at webassembly components and also add server render mode and webassembly render mode and again we add additional assemblies type of almost type of counter and is this the client one yeah has to remove the other one right and then the assembly all right and with that then what is happening is that when we access this page for the very first time we will use a websocket connection to load this really really fast all right and then we've got the server side interactive interactivity but when we access this page a second time for instance it is not switching while we're still on that page right it is switching as soon as we reload this thing for instance then it is using webassembly because the webassembly files are being downloaded in the background so it's all optimized for performance and speed so that the user doesn't have to wait that damn long to get the counter button all right so one more time we are here in the console we go to uh the network as a the network tab first web socket all right so here go to the counter page and we see our websocket connection wasn't downloaded in the background all right I go here go to messages I click this thing and we see that something is happening here all right and we see uh actually can we see them well sometimes you see the coordinates of the mouse click well not in this case yeah here you see it right so this is then transferred to the server server knows okay the user click this button I have to update this thing everything happening in in milliseconds of course but now drum roll again and I hope it works let's just refresh and it's already done it's really really fast right so okay it's locally as well but anyways you haven't seen a loading screen right meaning in the beginning maybe you remember with.net 7 when you created a Blazer webassembly uh project and you first see this loading Circle right not happening here never so you see the the page has been loaded these website connections again are some tooling stuff from Visual Studio and here now wasn't already downloaded right we already have it so now it is actually using uh the the clients the webassembly interactivity isn't that nice so this is what it's all about in release candidate one the next big step for me really is again asp.net core hosted because in you can build it yourself but you know maybe you're as lazy as I am and that it would be really nice if you just have an ESPN co-hosted model again with webassembly the web API is already there of course since this is already running on the server we could just create our services here or repositories that access Entity framework but then it's coupled and I don't want that I want to have a separate web API but the Base address maybe should be the same I want to deploy everything to one Azure web app so I'm well saving the costs right otherwise I would have to use one deployment for the web API and another one for the client here I've got course issues stuff like that and I don't want that so this is something I'm really excited about please tell me what are you excited about what are your covest chance would be really interesting to get to know yeah what you're interested in one more thing still I wanted to show you is this new routes component so they changed the the main Pages here let's say the appraiser here now there is a route component and the reason for that is in essence that could be the case that you want that also to be rendered as a or you want to use the render mode webassembly here and to be able to do that now they had to extract that in a single component and here now you can use the new render mode attribute and say this is now at render mode and then a webassembly for instance and in this case then this will also use the web assembly render mode so this is one reason there are more for instance the not found is not there anymore again for more details please check out the community stand up but this is one of the reasons and one more thing I want to show you what McKinnon talked about in the community stand up really like that one example when you for instance won't change the page title here all right and in the page title you also wanna have a look at the current count let's just test that and remove that maybe because we do not really need that and we just restart the application restarting here we see counter zero I click this thing doesn't really work well why is that now the head layout you can also make this interactive because by default it isn't it's just static server side rendering and here now because the page title is part of the head layer a head Outlet which is now also using the new sections feature of Blazer internet made a video about that so here now we can also say render mode it's now render mode uh server for instance Let's test that What's Happening Here click this not working right but when I now say webassembly we see the counter here you can click this thing and now it is changing all right so now whenever I click this button current count changes and I can also say Okay I want to see that in the page title but I still have to make the uh where was it here the um there it was the Head outlet interactive as well and as you've seen I have to it seems that way I have to use the same render mode as the one that I'm using here all right okay so I think this is enough for this more or less short summary of the new blazer web template in rc10.net8 took now half an hour let's see how long it is after I edit this thing again if you have questions if you want to see certain stuff I make a tutorial about maybe then please time that in the comments otherwise guys thank you so much for watching if you like this tutorial here please hit the like button smash it if you want to subscribe to my channel it does make a difference thank you so much and again thank you so much to all my patrons for your support I love every single one of you and apart from that again thank you so much for watching and I hope to see you next time take care

Channel: Patrick God

Views: 8,346

Keywords:

Id: e-qZUC2B714

Length: 31min 21sec (1881 seconds)

Published: Tue Sep 19 2023