What's NEW in Blazor in .NET 8?!

it's unbelievable how simply we can change from a static server rendered page to an interactive page with bler server it means that we get single page app like responsiveness and all the advantages of a static rendered website net 8 is finally here and I'm excited to share what's new in blazer with net 8 and it's definitely not an exaggeration to say that bler has fundamentally changed with this. net release there is a new project template with a completely overhauled file structure and we have new render modes stream rendering enhanced navigation and completely new authentication user interface components let's start by looking at the new project templates that come with blazer in net 8 with net 8 we now have five Blazer project templates the new and most exciting project template is the new Placer web app it combines the bler server and player web assembly interaction modes and uses the new static server rendering which we will discuss later in more detail I already have a video on this channel where I cover the ins and outs of the new blazer web app project template next we have a Blazer web assembly Standalone app and a blazer web assembly app empty project template these project templates replace the bler web ass simply project template we know from earlier. net versions we can decide for both project templates whether we want to have the web assembly project hosted by an asp.net core project when recording the empty project template allowed me to select only Net 7 so I recommend choosing the Standalone project template and manually removing the components you don't need we also have a standalone and an empty project template for Blazer server interactivity now let's create a new blazer web app project and see the new file structure and everything that has changed with net 8 first of all when creating the project we have new options besides the framework version and the authentication type we can also choose an interactive render mode and an interactivity location we always had to decide whether we wanted to use place a server meaning establishing the signal R websocket connection or web assembly with net 8 we can still do the same but we also have more nuanced options when we choose per page or per component for the interactivity location we can set the interactivity type per component we can still select Global which means it's the same as previously choosing Blazer server or web assembly for a whole application for the interactivity modes we can select none which makes the application static server rendering only we will explore what that means shortly we can also select bler server web assembly or AO we get the most advanced bler web application by selecting Auto and per page component let's create a project we get two projects the first project is the asp.net core startup project and second is the web assembly or client project every component that we want to render using web assemly needs to live in the client project because only this project will be executed within the browser one of the best new things in net 8 is that we do not have a host. CSH HTML anymore all the app code is now within the app Riser file we see the HTML head section including all linked stylesheets and JavaScript library Imports also notice that we now reference a blazer. web.js file whereas we previously referenced the blazer. server.js or blazer. web sample. JS file the router has also moved there is now a dedicated routes component however the content remained the same as with Net 7 another difference is the folder structure with Net 7 we had a pages and a shared folder for our components with net 8 we get a components folder with a layout and a page subfolder in the program. Cs file we also have some differences notice how and what services are registered when setting up the Razer components we have an add interactivity server components and an ADD interactivity web assembly components method which add their Respec active interactivity modes to the application here we could manually add and remove interactivity modes besides registering the required services for the interactivity types we also enable the interactivity types on the application a few lines below the web assembly project is almost unchanged now let's explore static server rendering one of the most important and best new features in net 8 when we start the application no web ass simply is downloaded to the client also we don't have a signal R websocket connection well unfortunately when running with the visual studio debuger we get two signal R connections one for the browser link feature and one for refreshing the browser Let's ignore them for now what this means is that the homepage of our application has loaded using simple h GTP requests and the server sent rendered HTML CSS and JavaScript to the client it's only about half a megabyte of data over the wire and the website is loaded in less than 200 milliseconds even with the cach disabled when running locally also some of those resources will be optimized in the release mode or can be removed from the application depending on your use case now let's see how we achiev that in code as you can see we see nothing we have plain HTML the page title component and the ad page directive to make this page routable the new default is static server rendering when we do not specify an interactivity type the page will be rendered on the server and sent to the browser as static content on the flip side it means that with static server rendering we cannot have interactivity let's for example add a simple interactive functionality I add a button with a click Handler which increases the value of a counter I also show the counter on the page when I launch the application and press the button nothing happens and that's by Design if we choose the static side rendering render mode we do not have any Interac activity but what can we do to make this interaction work if you want to use one of the interaction types we need to apply the add render mode attribute we want to use bler server to make the homepage interactive we add the render mode directive to the homepage and set the interactive server option that's all we need to do now let's start the application again every time we click the button the value increases by one it's unbelievable how simply we can change from a static server rendered page to an interactive page with blazer server now let's open the developer tools as you can see the website now establishes a websocket connection once the homepage is loaded we now have a persistent websocket connection that is slower than static rendered content but we now now have interactivity on this page turning a page from non-interactive to interactive with bler server was simple but how do we use bler web assembly instead first let's take a look at a page that is already using web assembly in the client project we open the counter component here we see the add render mode attribute with the interactive AO option it means that the app will use place a server until the web ass simply bundle is available when the bundle is available it will use web samply as the interaction type this Behavior has the advantage that we don't have to wait until the web assembly bundle is downloaded instead the download happens in the background if we don't want to have it that complicated we can also use interactive web assembly as the render mode which makes the component always execute using web ass samply we learned that we need two things to turn a place a server component into a Blazer web assembl a component we need to move it into the client project and we need to set the interactive web assembly render mode on the component but what if we want to have a shared component to reuse within a Blazer server and another Blazer web simply project that's exactly where the fun begins not only can we set the render mode per component we can also set the render mode where we use the component instead of where we Define it let's build on the previous example on the counter page in the client project we have a property with the current count that is shown on the page we also have an increment count method let's extract that functionality so that we can use it on different pages and let's see how we can use it using Blazer server and Blazer web assembly first we create a new project of type Razer class Library we name it share components and make sure that we add a project reference to that new project from both existing projects next we create a new blazer component in the shared components project and name it simple counter Now we move the code from the counter page within the client project into the simple counter component within the shared components project notice that we don't set an explicit render mode within the extracted component now let's go back to the client project and the counter page here we use the simple counter component make sure to add the required using statement we can keep the current render mode definition or change it to interactive web assembly to make it easier to test whenever we set a render mode and a child component doesn't have an explicit render mode set it will use its parent render mode in the example the simple counter component we'll use the web ass simply render mode let's start the application and test the behavior as you can see there is no web simply downloaded as long as we are on the homepage when we navigate to The Counter page we can see that the web assembly bundle is downloaded and when we click on the button the code of the simple counter component is executed on the client side let's head back into visual studio and reuse the same simple counter component on the homepage the homepage is part of the main project and currently uses player server let's remove the render mode definition in instead we add it as an argument to the simple counter instance as you can see we can set a render mode for a whole page a component or when referencing a child component now let's start the application again a websocket connection is established and when I click on the button we see the counter value is increased by one and we also see the message is exchanged via the web socket con connection this example demonstrated that with bler in net 8 we can set a render mode per component and we can even reuse bler components for different rendering modes in my opinion this makes Blazer viable in many more scenarios and use cases with net8 previously we had to choose place a server or place a web assembly for the whole application there is a another very interesting new feature for Blazer in net a stream rendering allows us to render a component while its data is still being loaded on the server stream rendering allows us to render an initial version of the component and as soon as the asynchronous task such as loading data from an API is completed the initial version will be replaced with the full page rendering take a look at the weather page we can see some template code that renders an HTML table when the data is loaded and while the data is loading it renders a loading message in the code section we generate data within the on initialized async method and have a 500 milliseconds delay to simulate an API call I created a new blazer web app and selected NN as the re activity type to make it as simple as possible to test the application it's the same weather component as we had in the previous project let's start the application as you can see we do not have an established websocket connection again those two connections are used by visual studio and not our Blazer application also in the web assembly tab we don't see anything there is no web samply for this web app when we navigate between the pages we see that for a short period the loading message is visible before rendering the HTML page with the generated weather information the best part is that stream rendering is part of static page rendering and we don't need place a server or web simply to load data from an API in player applications for net a enhanced navigation is another new blazer feature in net 8 instead of performing a full page load when the user navigates from one page to another it uses a fetch request to only replace the parts of the HTML page that have changed let's look at this application based on the stter template of a Blazer web app without any interactivity when I open the dev tools and reload the page we can see all the resources it needs to render the page we have the index document bootstrap CSS and JavaScript files watch what happens when I navigate to the betterer page instead of loading the full page we see a fetch request in the console in the elements tab when I navigate between the pages we see that only the highlighted Parts change it means that we get single page app like responsiveness and all the advantages of a static rendered website there are several advantages to this concept the page loads faster because it loads less data and renders only part of the screen another benefit is that with enhanced navigation the app keeps track of the scrolling position there are edge cases where Blazer cannnot perform an enhanced navigation and uses a full pair page load instead there is also a way to prevent blazer from using enhanced navigation on specific links or navigations if you want to do that we can also completely disable enhanced navigation for a whole Blazer application read more about how to do that in the official Blazer documentation I could go on and on talking about new features for blazer with net 8 such as the new UI components for individual account authentication however I will keep that for an individual video if you don't want to miss it and learn more about net development consider subscribing to the channel and if you learned anything from this video today please consider hitting the like button it helps and means a lot and I will see you in the next video

Channel: Claudio Bernasconi

Views: 3,382

Keywords: Blazor, Blazor .NET 8, Blazor Full Stack UI, Blazor Full Stack UI Web Development, ASP.NET Core Blazor, dotnet8, .NET 8, new Blazor Project Templates, Blazor Web App Project Template, Static Server Rendering (SSR), Blazor Server Interactivity, Blazor WebAssembly Interactivity, Blazor Render modes, Blazor Rendering Modes, Stream Rendering, Stream Rendering in Blazor, Enhanced Navigation, .NET, dotnet, Claudio Bernasconi

Id: 53t4MnYmU6k

Length: 17min 54sec (1074 seconds)

Published: Wed Nov 29 2023