.NET 8 Blazor: Transforming the Future of Web Development! 🌐

hello everyone Patrick here I am back for those of you who know me I had a break a couple of weeks because we have a new baby here so we are now a family of four and thank you so much to everyone for the kind words in my community tab there I told you about this little break and now I definitely need a lot more coffee but now it's time to continue with new great tutorials for you guys about.net and Blazer and boy do we have a couple of topics to cover laserwith.net 8 is great awesome new features and I would say we Dive Right In into.net8 with Blazer and all these new modes server side rendering webassembly streamed rendering what is that let's have a look so as you can see I've got visual studio version 17.8 it's the preview this is important so if you download or want to download and checkout.net8 then you have to download the SDK of course currently by the time of recording this it's preview 7 and here now and you also see that it's virtual Studio Community Edition 2022 version 17.8.0 preview one so dotnet 8 preview 7 with that version of visual studio and now you go to file new project and you might see something is different here we've got a Blazer webassembly app we've got also a server app here but also then a Blazer web app so this is now the template to rule them all we can also have a look here of course and then we see there it is a project template for creating a Blazer web app that supports both server-side rendering and client interactivity this template can be used for web apps with Rich Dynamic user interfaces all right now this is important here please please note that it is really crucial because at first glance you may not really see the difference server side rendering is not the same as Blazer server let me just hit next here it I will explain the differences in a minute so first a beautiful name blazer.net 8 and now Dot and no server because well you will see throughout this tutorial that we will add another project for Blazer webassembly again something different now so blazer.8 dot server it is this is our server project and here now you see all right we're using a.net preview configure for https is well the usual right but here now use interactive server components this is something different and here's no tooltip what does this mean so you've got the server side rendering here meaning that when you make request then you will get a complete finished done you name it HTML for instance HTML file or the HTML contents that the client then downloads and you can display that this is great for instance for SEO right search engine optimization this is always a topic till today when you talk about Blazer web assembly and now interactive server components means this is actually then Blazer server stuff meaning that you have interactivity when you have a button for instance let me just create this now when you have buttons forms and so on then you want to have this interactivity on your page and for that Blazer server in the past and now also now without an AIDS we'll create a websocket connection right so this is what you need to have this interactivity when you're using Blazer only on the server but if you then use Blazer webassembly you also have the interactivity but this is then on the client but let's do this one step after another you see here Blazer server well this looks still kind of similar to.net7 you have no web API here for instance if you're used to creating a Blazer webassembly projects and use the asp.net core hosted you know the option there then this would also surprise you for instance if you create a new project and then say Blazer webassembly app call it whatever you want to call it you don't see the asp.net core hosted model here right again something very different but we will talk about that again a bit later here in this tutorial now first place a server I really don't want to explain everything here you just see you have your appraiser this thing here is important for the interactivity and now the the pages here are the most interesting stuff because we've got our index that's great and then we also got the counter page here right you won't get a counter page in the template when you would not activate the interactivity right when creating a new blazer web app project from the template so you won't see that you will only get the index and the weather Razer file and the interesting part or what Microsoft wants to Showcase here is the stream rendering all right so let's have a look at all that we just run this and I try my best to explain what is actually happening then there first thing that you might notice is with.8 now you get this Windows security alert because they're using HTTP 3 now so you have to allow the excess and then we get here home welcome to your new app this is different I think there was a hello world or something like that in the uh in the other template with.7 and let's just right away open the console here with F12 for instance and then maybe we can oh no we are already on the network tab we see WS for websockets and wasn't all right wasn't will be interesting later when we have a look at all we see we get the Local Host here for instance and uh do we already get the response here yes of course you see the preview here this is the response that we directly get the HTML great nothing that fancy so far but now let's have a look at the counter page maybe and voila there are websocket connections now the interesting one is really this thing here this and this is only visible in development really for reloading the browser for instance when you change something correct me if I'm wrong but this one this is the interesting one and here you also see the messages when you now click there you see something is happening here right maybe we see something interesting here that we can read well yeah we see the position where the the user clicked and then laser server is doing its magic so this is what is actually happening if you now use in the count of Razer attribute render mode server let's just uncomment that for a sec and restart the application and again I really try to uh to explain this so everyone gets it because I love the presentations of Daniel Roth Community sessions on the.net channel and so on Visual Studio live then really was a great presentation but it does take some time at least for me to really get what was happening there and what did also help of course is checking out the the GitHub repository of all that stuff anyways it is restarting now and I can click here and nothing is happening and why is that well we have no websocket connection but what we still have and this is you know the default right when you create a Blazer application what we still have is simply the counter page here with that preview right so you see you get the complete HTML we can also right click and say if you page source and here's everything that you would expect right again this is great for SEO when you're using Blazer webassembly you do not see that you see maybe a loading text or something like that and that's it right so the the content would then be dynamically added uh to to the Dom and this is then what now the stream rendering can do right so when we go here for instance you saw the loading and then the content is displayed so this is the stream rendering and still we see view page Source we see all the results here don't take my word for it but I think this then also works with SEO again please correct me if I'm wrong in the comments burn me if necessary again we can have a look at the attribute that is doing this magic stream rendering true you can add faults of course or simply again uncomment everything not only true but actually the whole line like that and then we will see the difference it is now reloading and maybe it is more clear when we switch to the page this takes some time right and now we see the data we can go back again back to weather again and you only see the result it is switching to this page now when the data is there you see the fetch here and what they are actually doing is it's not really a web service call they have a delay here to simulate retrieving as you can see here the data asynchronously so if you really make a call to the database or you want to access another API here because now well you're still on the server right so you could create just a service a repository access a database and this takes some time maybe still you can just activate stream rendering and I will definitely show this on my Channel with other examples and not just the template here at the latest window to date is really here in November I think and then we will check this out but now again I added stream rendering or activated it we can restart it now you see the loading screen isn't that nice and here is how this is actually done and important again if you're wondering what what the heck man with blazer server this was already possible looked exactly the same with blazer server yeah but now you have no websocket connection right so this is again the difference you don't need this websocket connection to display the data okay again counter let me just add this again so render mode server restart the application and that's for the server part right Blazer server this is how it now looks we can again click and you see the websocket connection again just to make this clear Blazer server is not the same as server-side rendering server-side rendering just means that the server is doing all the work and and it will give you then the HTML and this is then displayed by the browser and what plays a server actually does is opening this web service web sockets or in the web socket connection and then giving this application the single page application some interactivity so you can click a button something is happening here you see the result right and forms and so on of course you could also use typical forms and form handling with server-side rendering only then you will make a call something something is happening but maybe you then have to refresh or reload the complete page to see the result so there are lots of possibilities as you can see now and now let's talk about webassembly real quick the net Web Academy is now open for enrollment but only for a really short time spots are also limited so if you're interested then please check out the link in the video description in the academy we cover all things related.net Blazer Tailwind CSS git GitHub actions deploying to Azure many more stuff so if you're interested please go down to the video description check out the link and if you're thinking maybe my company could cover the cost of the academy then great news I've got an email prepared for you that you can just copy and paste and then send to your boss again Link in the video description and now let's continue with the tutorial so what do you have to do here and of course I did not just know what you had to do or what you have to do to create a web or ADD web assembly here to this project there is this beautiful there it is this GitHub repository here Blazer wasn't client interactivity as you can see and this is now the new model if you want to know more about that or want me to cover this in another video there's this um this great thread from Steve Sanderson the legend himself where he describes the thought Pros process behind let's call it Blazer United still or simply Blazer in.net 8 where he is telling us that well the Blazer server great we can do this in one project but regarding webassembly they are thinking about several approaches seed here single project exclude by default single project would be approach B include uh by default include by default excluded would include by default and then two projects and currently internet 8 and 1.8 is released we will have two projects still when we wanna use Blazer web assembly why do I say still well when you use the hosted model it's been a co-hosted right then you know that you would have a web API in essence then the client project which is Blazer webassembly then and of course also a shared project but uh it is uh well you don't need that really when you're now using.net and blazer because well you can just reference the other project and then use the models in both uh projects I guess so this is now the idea and you can read through this this is really interesting so that's just a side note so let's go back to visual studio here and uh yeah you have to add another project right so let's do this together right click the solution add a new project and now it's time for the Blazer webassembly app what's actually the description and and nope here this one a project template for creating a Blazer app that runs on webassembly this template can be used for web apps with Rich Dynamic user interfaces of course right we can add buttons forms whatever you like and the blazer.net8 laser dot net 8 and now this would be the client but again not the same as before you see it here nothing web API related okay we can add authentication if you want to but let's just leave it at configure for https create this thing and now we can actually remove lots of stuff and this is where this other repo comes in again when you have a look we actually only have the properties folder so we can remove the WW root there might also be some conflicts because there is a CSS file now I deleted it I could show you that but there are a cascading style sheets right and maybe there will be some conflicts with the server thing and we've got a count uh component here that's interesting and then also the program Cs and the import so we actually don't need the app up wait here the app Razer this is not necessary and uh oh Jesus I removed the wrong ww root maybe we can just move it here okay now we lost the icon but uh we don't need that stuff and also we don't need the index HTML but this should be still the same so and it's still here so it was copying it all right let's just try that we also don't need the well the pages but I still similar to this example here I want to use the counter raiser file so let me just move it down here to the shared folder because then it is a shared component we can remove the pages we can remove the nav menu and also the main layout so now we should only have the properties counter Imports program and here in the program CS we can remove these two lines so this is now our web assembly project and since this is no page anymore let me just remove this as well alright so that's now the client project if that was too quick just rewind watch it again and now regarding the server project we also have to add some stuff and again when you have a look here's the server project and let's have a look at the program Cs and as you can see here we've got add a webassembly components also add server components and let's just compare this add server components is here already one difference is also at the app map eraser components app add web assembly render mode and add server render mode I'm not really sure if this is still necessary because uh well it's not done here right we can just try it and if it's not working then let's just add it here as well one more thing that is really important we have to add a dependency a project reference to the client project so the server knows what's going on here in the client project and we also have to add a nuget package so right click this server project and you get packages include the pre-release since we're using.net preview 7 here and that'll be Microsoft yeah I typed it already Microsoft's ASP and this is not working asp.net core components webassembly server awesome name install the dotted 8 preview 7 I accept all right so we've got again our Blazer web assembly client and the only thing really that you have here is or are components right really just components that you want to be able to work or to be used on the clients with webassembly all right and I would say we try that now so on the pages on the counter page now we don't want to use the render mod server we want to use the render Mode web assembly but in preview 8 preview 7 this is not working so we remove the Z attributes and what we also do is we remove that stuff and now say give me the counter from blizzard.day client shared counter of course we could add it using maybe to make this uh look a bit better but still this is now our counter component instead of using the attribute for the complete page we now say to this or in this state Now of.net8 preview 7 we can say add render mode intellisense has no idea what I'm talking about but now we can say render mode render mode come on this should actually be here wait maybe yep now you're talking right and here now we should have well we should have web there it is all right so webassembly and also Auto this is interesting and also server so let's maybe just begin with server all right this should change nothing all right before we save that I forgot to add uh that was add server components and now also add a webassembly components all right we saved that we restart this thing and now hopefully when I find it there it is again let's open the console and again uh web sockets we go to counter and it's not working so maybe we still have to add in this program CS add server render mode and add web assembly render modes and let's just try this one more time and now we've got the but when I tested this before and it's really interesting it really wasn't necessary but it seems I tested something different not sure about that but anyways don't forget to add the server render mode and the webassembly render mode alright so now let's restart this thing and now we're talking still we see the websocket connection and when we go to messages we click here something is happening right okay and let's also have a look at uh wasm nothing there and we go to the console we also just see information websocket connected to and so on and now drum roll please because here now we are saying webassembly and I'll restart the application what's happening now we're downloading some stuff right take some time well not a lot and we're well developing locally here but we may now go to networking you already see it wasn't it is downloading the.net native wasn't now and regarding the web sockets when my machine wants to we do not see the uh Blazer ID and so on right so we do not see this but it is still working what about the page stores we still see current count and so on so this will be interesting me just refresh this again all right nice so we still have two or I at least have to learn how this is working so webassembly now is done server also done and now we've got that thing here the auto mode and this is this is really great and I'm I'm really excited and wondering what modes will be used Rich modes will be used by the community because this thing now when we go to application and clear our site data this thing now will at first use web sockets go to network wasn't all right so we reload that see Blazer right and it is really behaving differently this is really interesting because the idea is that it is using the websocket connections for actually Blazer server right and uh after that using wasn't because it is at the same time downloading the wasn't stuff in the background and when we come back and the browser recognizes that then it shouldn't shouldn't create this websocket connection or at least not use it but simply use wasn't you see it here it's not downloading it again we see it in the console that there is something happening or webassembly related Auto websockets stuff again so I'm not sure maybe I'm reading this simply wrong and again you burn me in the comments if so please do maybe be a bit gentle please but anyways be nice I really just want to try this one more time go to network and here now the websocket connection empty cache yeah this one this is the right Behavior or at least the behavior I was expecting it is also downloading that stuff right in the console we see both websocket and download of the awesome files and now when we reload that do you not see any awesome stuff still need the websocket but now when we click here we don't see any action okay maybe I don't know maybe uh while uh well talking about that and reloading that and so on I missed something here and did not really clear the cache I'm not sure about that but I think now you get the idea we can reload the page again websocket connection is here not used at least it seems so it is using the web assembly stuff right and you have no well no latency issues well here it's of course no problem at all but this is how this should work what do you think about that server side rendering Blazer server stream rendering webassembly what are you going to use what are you excited about what's wrong about all that please tell me that in the comments and again if you want me to cover more about that I'm thinking about creating a Blog with.net8 already because well please don't tell anyone but my blog is currently still made with angular a long time ago so I really should change that anything without the date I will and document that with uh or here on YouTube so I hope you like this tutorial if so please guys subscribe to my channel it does make a difference maybe at least hit the like button thank you so much for watching and I hope I see you next time take care

Channel: Patrick God

Views: 14,802

Keywords:

Id: eLGYwHiepM8

Length: 27min 34sec (1654 seconds)

Published: Mon Aug 28 2023