Blazor is Getting Revolutionized In .NET 8.0

hey everyone Ahmad is here and today we're going to talk about what's new in Blazer and donut day there's going to be a major upgrade coming in this November I think it's November 14 and we're doing it is going to be released officially for production and the Blazer will have a very big chunk of those upgrades so if you check the microsoft.net blog you can see all the details about what has been added in this video we're going to cover the most three or the biggest three or like four features because actually Placer has a lot if you also check out the preview 5 there is also even more but we will cover the biggest thing so let's get started to be able to get started you're working with the latest Blazer features make sure you have the latest version of Visual Studio 2022 preview I think the version 17.98 and you need the dotnet 8 the previous seven installed so the the first one if you click a new project and this is I think the biggest one we have a new Full Blazer template it's called the blizzard web app usually you have a web assembly or you have a blizzard server app two templates but right now I have the third one that's called Blazer web app so let's Discover It by clicking creating a new project I'll keep the default name let's set next and in here dotnet8 preview we have a new check called use interactive server components okay that's something new let's give it check because we'll discover this in a bit great so this is the template it looks like kind of familiar this model's folder is new we have these Pages shared as always but right now we have the app Dot uh Razer it contains a full HTML page as you can see it's no longer from here it has even more so the full HTML page simply this template you can think of it you know when you develop stuff for like traditional web using MVC or user pages with traditionally with this template or like originally this is a app that runs on the server renders everything for you on the server just like when you use Blazer webassembly server rendering and send it to the client it's a pure HTML and then you can just work with that you can interact with assembly and browser server we will talk about that in a pet but originally this is as I've said traditional asp.net core web app you can see here we have nothing strange except this one add several components here we can of course add endpoints if you want or you can use controllers and whatever unlike the player of assembly template so cool let's run this project and see how it looks like when we run it so so the first thing you will notice is that there was no loading unlike better of assembly which I have a project that's running here on the side of this visual studio so you can see I have this webassembly asp.net core hosted running and if I hit refresh in here so you see this loading and the blizzard assembly runtime gets downloaded alongside all the other packages to the client then the app will launch and you you can start use it well this one everything is being rendered on the server so whenever you hit refresh or you open the app it's being rendered and directly sent to you here we have this counter we'll come back to this in a bit and we have this weather so this one as you can see it's being loaded directly and then it shows loading and it's opening so you'll ask here if this is traditional web how this is happening if there's some Ajax or jQuery happening in here of course not this is the first uh or the other feature that we'll talk about because the first one is the template I'm not sure if we can call this a feature but I think it's it is so let's consider it the feature and say the second feature so what is it if we go to pages and open the weather as you have seen usually in the old web here I have my website running in here so like this website has been built using MVC so if you hit refresh everything is being loaded like as you can accept the images so they are being loaded right now but the page comes in like rendered fully with all the content and all the calls of the database happen and stuff like that and I can see it just directly so that's that's how it works but how then if I want to load part of this page and keep call the server to fetch the rest of the data and show it like partially some JavaScript is needed in here but with this upgrade Blazer contains what's called stream rendering so for this page you can because think of this page as like any Razer MVC app as I've said but you're using the Blazer components model to build it right now with this stream rendering what means is that this page whenever you request it it will be sent to the client whatever it's available at that time and then it will continue the initialization of the long running task on the server and whenever it finishes it will stream that content back to the client and then that's why you see the first the loading because initially this one is null and whenever this call is finished as you can see they have added this task dot delay just for the simulation that there are calling and weather API so usually it's a long running process that's how you think of it and whenever it finishes this one is not none anymore so this demo is rendered and being streamed to the client I'm not going to use the word send so let's understand this even a bit better by running this project and manipulate this a bit so if I go here to weather and if we're running this in the normal way by removing this one I now have this so what should happen this component should be fully running and fully initialized then sent to the clients if I had to refresh I will wait for one two and then I can see everything there is no loading and stuff like that that's not good and I can notice this better if I open it in another tab you see app is taking time until everything is initialized and opens okay that's not good but if we use stream rendering of course hatch reload is getting better and better with every.net version which is so great right now if I refresh you can see the page has been loaded directly to the client and then it continues running that long running process and whenever it finished it's a dream back that to the client which is so great this feature is very very powerful especially when you are building like apps like e-commerce application where where you bring first of all the layout of the product then you fill the product then you fill like the comments or the reviews and stuff like that this is so great previously Blazer wasn't so good for those cases because you have only two options either use Blazer server or webassembly so they give you that Richie client experience but they have an issue the first of all blizzard web assembly takes some time to load which is not ideal for cases like e-commerce when you are navigating loading like someone send you a link to check this product and you wait for that loading to finish then the Page open second there is no SEO laser server has its issues like if the internet connection is not fast and stable that would keep disconnected and the other issues that uh yeah if the if the internet connection is not fast the app will be lagging so that's those are two different issues right now this is normal web but with those amazing features and you're building using Laser Web components so let's get into the second big feature or the third which is bringing webassembly and Laser server to your project so let's think of this I'm building this application which is actually I'm going to do that I've built this app using MVC my website right now I'm turning it into Blazer web app but I need some app I need some sections of the app to be actually interactive like I need the comments section here to be running on the client so I don't have to like this is another cool article and then I had submit because this is normal web it will go to the server then the server respond back sending this page but no I want to use here like some client side capability client-side capabilities like laser server webassembly it would be cool if I can combine them together and the blazer with the 208 you can actually do that before we close the app let's just take a common look right now let me go to the counter page so this is interesting if I click here so I can see that there is an actual update that's happening so if this is traditional web then supposingly there is some JavaScript that's updating the Dom but that's not the case here to get those updates on the client without like as you can see the project is not like reloading every time by sending a request to the server what's happening is that it's using one of the models is the blizzard server or webassembly by default it's using laser server only to run this page so you can see the magic like you kind of bring those sophisticated Parts all together inside the same app this is just something big let's see how this works I will go to the counter component and as you can see we have this another cool attribute that's called render mode so render mode it says render mode server so that means it will be using Blazer server to render this part other than that otherwise we cannot able we are not able to to get this logic to work because if we remove it and it's running in them just the space being rendered and sent to the client then we are not able to increment the counter because you are clicking the space right now just an HTML and the browser nothing happens this logic is on the server so it's not going to work unless we add some JavaScript but if we bring this hit the Hatchery load okay it's loaded let's go to this one and I will open the inspect element go to the network tab network network here we go here we go and I will go to websocket so this is the websocket section because visual server initialize like a websocket between the client and the server so whenever you click or you never do some actions okay so you click here and you can see there is a message message that's being communicated between the client and the server because whenever oh sorry okay let me rebuild this project rerun it okay it looks like capture load didn't work for this case ah come on okay cool so let's click and right now it's working so let's check the inspect element again and see the messages so if we go to the network tab refresh so we have this connection whenever we click let's open this one and here are the messages so I click and more messages being communicated so the server is just rendering this part sending back to the client whenever this click happens and that's how we are having this uh enrichment client enrichments using the player server because in such cases it is needed okay what if I want to run this part using wizard of assembly and not blizzard server that's also a possible let's see how we can do that there is only two steps that we need to do first we need to create a bezel of assembly project because the Blazer of assembly project contains web assembly runtime and stuff like this and that JS so I'll just call it sample components keep the name okay great so I'm not interested in many stuff here all of them let me remove the www root because it it contains some CSS that will conflict in here and maybe they will resolve this issue later or stuff like that I'm not sure but we are still in preview so and in the program.cs we need to remove those that refers to the index.html let's just remove them cool okay now what we are interested in is we'll create just a component call it counter uh awesome for example the Tracer okay let me go and bring this counter component as it is and I'll paste it here great no changes nothing at all let's save it and let's go to this project back to our Blazer web app let's pick this one hit okay and right now we need to install or a package called Microsoft .asp netcore.components.playzer.server it's a long name but if you are already a blizzard developer or familiar with those names from Microsoft because they follow their conventions so you can memorize them on on the go after we install that if you go to program.cs add server components add the ability that that you have seen Blazer server render mode right now we need to add the ad of assembly components so we can render some components using the webassembly capabilities okay that's all what you need to do right now let's go let's go counter does we can either say that the full page the whole page we needed to run on the render webassembly mode which is something right now I saw an issue that it's not uh if we run it like that we will see an error but Microsoft's working on solving that we can get up issues so we can just remove it and we can render the counter awesome component let me just remove this long name I don't like it and the web space so check out this magical properties so render mode equals at render mode dot here you have webassembly server and auto we'll talk about this in a second so this is the very new like laser directive or property or whatever you want to call it attribute is available here and it does magical stuff so you can render only this component only that part of the UI using one of your uh laser models that you actually you prefer based on your use case so let's run this and see what we got okay let's go to the counter and let's increase so we get an error what is it okay I think I think I missed something here so we should say dot add laser render mode dot add a Blazer webassembly render mode okay let's try to run that one more time we need to make sure that we remove the one okay okay here we go so sorry we missed those that allows this rendering process to happen inside the same page so if I click here so right now this is one is working let me open the inspect element and go to the network tab again and if we check the webassembly here okay I need to refresh you can see that stuff that's being installed which is the webassembly runtime and this stuff and how we can confirm that if we refresh again and we quickly click nothing happens then it started to count so why that because initially Blazer rendered this page using the laser server render mode what assembly server rendering so we have this page that's being sent to the client directly that's why we don't see like a blank page and then it starts to download the blizzard assembly runtime and all the other packages needed to get this to work on the client and that's why we have that loading period but it's just like this when you when you see that so this stuff at the app is being ready to run and it runs the component but see how powerful is this you can just run only specifically this part in the blizzard of assembly mode from the app and the rest of the app is running like normal web and this component can be running on Pleasure server or this one is running normally and you don't have another component that's trying using plays the server webassembly this is extremely powerful like if I go to my um my application here right now I can make this actually more powerful I kind of add more capabilities here inside this blog like um uh other features the comments here and one more thing I want to see is uh show you here is actually the admin panel that I actually built from scratch so I need also to migrate that because actual right now is very bad if I click here it's it's just it's just not working as it should be like you see yeah I need to wait so I do have you on my blog so for example or the certificates that you see on the website so if I click in here I need to edit so every time it goes to the server this is just a normal webassembly project this form is not very powerful because of I want to it's just a normal again but if I use your assembly I can make it much better take advantage of the oop model and stuff like that so but at the same time I can keep it one a project I can keep the plugin here using the components model and use the Blazer server whenever needed use a blizzard of assembly for the rich editors use the comments section using blizzard server so think of that you can build a really powerful stuff using this model I think most of the developers going through this at the default uh default one from now on so before we move on from this topic if we we have seen that there is another option other than blizzard server and webassembly we have Auto and this one is actually another magical thing in Blazer so if I run the app so what does auto mean it's server or webassembly or maybe both and they are actually both but let's see how we have seen in the counter that you need to click you need to wait a little bit until everything is initialized to be able to use the capabilities of adobe assembly because the runtime to be downloaded and there is like a little bit of waiting time maybe it's big if the internet connection is not fast enough and the blade when you set it to Blizzard of assembly O2 what's going to happen is uh this smart component what it will do it will first check is there a blizzard of assembly runtime installed no initially so it will do the blizzard server so this component is available for you directly and while you are using it in the Blazer server it's actually installing the webassembly um runtime and stuff like that at the packages in the background so whenever you go and you come back to that page it will check is there like a the web assembly stuff cache yes so just do the web assembly so this is something very smart from the team of Microsoft special thanks for this great work and I can really imagine how how great right now this framework becomes because you can take advantage of every little thing to make your app as fast as possible and of course building it with a Blazer is just enjoyable itself so the next feature that we want to see just like this is one of the miners but I actually like it a lot which is the sections this one if you are if you have developed apps with asp.net core NPC before you are familiar with this one that you can declare a section when you want to render it for example if I open the main layout and here let's let's create a footer or something so uh Oregon Avenue I think the admin is good let's go to the nav menu here we open this component so here where everything is being rendered inside the snap so I will add another Dev class okay let's just add this as a Dev Style I'll give it a Paddington and I'm going to design stuff like here so whenever I open a component as a specific component I need to learn there's something here in the nav menu so basically right now the Blazer server webassembly if you want to do that you need a way to send this data between from a component back to like a component on a different level you can use either messaging or you can use some like a local container that you create and inject and then you use some notification mechanism within those component but right now I can go to pages and counter for example and in this counter I have two new components one called section content and one called section Outlet section content where you define the content that you want to render and the outlet is where you want to render so let's define a Content here you need to give it a name of course so it knows which section because your project you can have a lot of sections I'll call it menu section and here I'll add a content current counter something like that then I will copy the same and I will add that also in the index page I will Define it here welcome so one biggest example the word to you this is if you are developing a Blog and you want the SEO so the SEO will be different from page to page so you can define a section here like you can call it SEO until you define your head tags like the card the title the stuff like that that will be understandable by the search engine and the social media sites and then you can render this section based on the page in the app.tracer but right now we are rendering this in the nav menu we are not yet rendering that so let's define the section Outlet here and with section one render section name and menu what do we call it mini section okay that's it so here it will be rendered and here what is the content that will be rendered and if it's not defined basically it will not be rendered so let's run and see what we have Okay cool so right now we don't have anything being rendered cool why ah okay it is here but the color is just weird a little bit uh let's add the style color white also here okay for refresh here we go it's right now white and if you go to this page you can see welcome but if you go to weather page it will be disappeared so right now you can like render some content from a component in any component you want or any place in the Project based on the component that's being rendered right now so this is very powerful as I've said the biggest example is when you use it for SEO that's just a little example you can find many more usages for it exhibition in e-commerce when you have like a card you want to render something at the header of the pure project and many more so for now there is much more like right now Blazer has a native data grid there is uh overall improvements to the web assembly um runtime itself being more efficient and tons of other upgrades but those are the main one that I want to cover because I get very excited about it so that I would like to share that with you so I hope you liked it and before we leave I just want to mention that right now if you want to master player of assembly you have released the book mastering Place Rob assembly this book takes you in a journey from a what is Blizzard of assembly until actually being able to publish a project on the store and it covers basic topics like components forums JavaScript interpolation and it covers very Advanced topics like how to handle errors efficiently communicate with API authentication step by step and even though the performance of your how to gain performance a huge performance upgrade in your application by taking advantage of the tiny stuff and how the components being rendered and even how pleaser Works behind the scenes so I also have the link in the comment section below so you can make sure to book your copy so thank you so much again for watching don't forget to hit the like subscribe button to support and see you in the next video

Channel: AK Academy

Views: 12,024

Keywords: Software Development, Visual Studio, Xamarin.Forms, Programming, AK Academy, Ahmad Mozaffar, Blazor, Blazor WebAssembly, Web Development, Visual Studio Code, ASP.NET Core, Desktop, Window, Windows 10, Mac OSX, Linux, blazor, blazor webassembly, blazor web app, what's new in .net 8.0, single page applications, blazor vs js, blazor with AI, dotnet conf, blazor server vs webassembly, blazor and signalr, Blazor Web App template, new web development, modern web apps, ecommerce apps

Id: B9zHW2vG7qI

Length: 24min 7sec (1447 seconds)

Published: Sat Aug 12 2023