Blazor on .NET 8 - Ten Reasons why Blazor on .NET 8 is a Game Changer

hi everyone and welcome I'm Gavin law before we look at 10 reasons why Blazer onet 8 is a game changer let's understand Blazer before net 8 in previous versions of net 8 for example Net 7 which is currently the latest stable release of net there were two available technologies that can be chosen for how the HTML for razor components is created and rendered and updated in the users browser these options are Blazer web assembly and Blazer server very basically with blazer web assembly all of the code Logic for the relevant Blazer application as well as the runtime are downloaded to the browser so the code logic runs on the users's browser so the C code is run within the users's browser which is made possible through the web assembly technology when changes to a web page Pages content are made through user interactions with the web page only the changes are updated within the Dom so the entire page is not refreshed every time a page needs to change this makes web page responsiveness extremely fast and gives the user a great user experience ux when the Blazer server technology is used the same Spa effect if you like is achieved where the same kind of spa responsiveness is experienced by the user so only the necessary change is updated in a web page as a result of the user interacting with the web page and the entire web page does not need to be refreshed which could result in the user staring at a blank page for a relatively long period of time before the desired rendered content appears within the user's browser so with both the Blazer web assembly technology and the Blazer server technology The Spar responsiveness effect if you like is experienced by the user where only the changes through user interactions with the relevant web page are updated within the users's browser resulting in a smooth responsive ux however with blazer server applications the code runs on the server and not on the client as is the case with blazer web assembly applications so for example when a change to a web Page's content is made through a user interacting with the relevant page page code logic is run on the server the relevant change that needs to occur within the browser is calculated on the server and subsequently sent to the browser via a signal R connection so a websocket connection between the client and server is maintained for Blazer server applications this persistent connection between the client and server can be described as a circuit this circuit is not required in Blazer web assembly applications because the C code runs on the web assembly technology within the browser note that in Blazer web assembly applications the applications data is typically stored on the server but is passed to the client when needed via a typical HTTP request response model and does not use a signal R connection as is the case with blazer server applications so this is how Blazer worked in previous versions of net the spa application's responsiveness was made possible through the web assembly technology or through a persistent websocket connection a signal R connection note that the functionality we have just discussed Blazer web assembly and Blazer server still works in much the same way on net 8 but new features and enhancements have been made to support the Channel please hit the like button and please consider subscribing please also ring the bell so that you'll be notified of future content please feel feel free to share this content with anyone you feel May benefit from its content if you'd like to thank me by buying me a coffee you can do this through my buy me a coffee web page at this URL it will of course be greatly appreciated I love reading your comments so please feel free to engage with me in the comments section so here are my top 10 reasons why I think Blazer on net 8 is a game changer and they are in no particular order number one service side rendering SSR with net 8 service side rendering has been introduced to Blazer applications so how does this technology differ from Blazer server and Blazer web assembly with SSR the code does not need to run inside the user's browser like in a web assembly Blazer application so the relevant files containing the relevant code logic and the necessary runtime does not need to be downloaded into the user's browser a signal R connection or a circuit does not need to be maintained like is the case with blazer server application ations with SSR a typical HTTP request response model is used where HTTP request is made by the browser to the server the relevant web page is rendered in its entirety on the server and then streamed to the users browser via a HTTP response service side rendering is currently used for both MVC and razor Pages apps but is new to Blazer apps with the release of net 8 so what are the advantages of service side rendering fast Lo times which includes the initial loading of your website or web application as well as faster page transitions within your website or web application SSR is great for boosting your SEO search engine optimization because it indexes your pages before they are loaded in the browser with service side rendering content is theoretically easier to crawl and be indexed indexing SSR sites is much easier for search engines than clients site rendered sites the content is rendered before the page is loaded so JavaScript does not need to be run to read and index the relevant Pages more accurate user metrics unlike CSR client side rendering SSR will inform the server as users move between your web pages evaluating how your users navigate your site and interact with your content will help you continually improve the user interface you are and user experience ux SSR is ideal for static web pages as it is faster to pre-render a static page on the server before sending it to the client SSR is excellent for social media optimization this means previews of your website can be easily presented with the relevant page title description and image wherever your web Page's content is shared on social media platforms so with SSR the relevant web page is stateless and a typical HTTP request response model is used to handle the requests between the client and the server with web assembly and Blazer server state is maintained in the case of web assembly the state is maintained on the client and with blazer server the state is maintained between client and server through a circuit made possible through a signal R connection maintained between the client and the server number two streaming rendering so you might be thinking okay great we've got all these advantages with service side rendering but what happens if the page that is requested involves a long running operation for example a data retrieval operation that causes the page to be relatively slow to render this could result in the user staring at a blank screen for a frustratingly long period of time in this case doesn't this defeat the purpose of creating a spa application in the first place where you would typically use a spa technology to create a fast and smooth user experience well this is where streaming rendering can be so effective in maintaining the spa effect if you like where the static part of the page is loaded for example the header the hero section and the footer almost immediately after the relevant page is accessed and then the done dnamic part of the page hindered by the long running data retrieval operation can be streamed later to the user browser once it has been appropriately rendered on the server note that a web socket connection does not need to be created for streaming rendering to occur so signal R connection does not need to be maintained between client and server the dynamic part of the web page can be sent in the same HTTP response stream but at a later time so for example from a user's perspective they header hero section and footer would appear in the user's browser almost immediately after the relevant web page is accessed and perhaps a loading indicator is displayed to the user while the relevant Dynamic content is being rendered once the relevant Dynamic content is rendered it is sent via the HTTP response to the browser and subsequently replaces the loading indicator in the user's browser so with serice side rendering and streaming rendering part of the page can be loaded asynchronously in the users browser via a HTTP response this means the advantages of service side rendering can be leveraged in Blazer applications and the responsive nature inherent in Spa applications is still maintained number three enhanced navigation and form handling Blazer on.net 8 comes with an enhanced navigation feature this magic if you like is switched on through a reference to an enhanced version of the blazer. web. JS Javascript file which is referenced from within your Blazer projects app. Riser file as discussed there are many advantages to leveraging service side rendering but we don't want to at the same time cancel out the responsiveness features inherent in this Spa technology enhanced navigation means that content is still service ID rended but the result is when a navigation is performed only what is needed is downloaded from the server to the browser with enhanced navigation a fetch request is made and only updates the Dom with the necessary changes so any files and content that is already present in the browser does not need to be refreshed in the browser window when a navigation is performed from one web page to another Blazer intercepts the request when a navigation is performed from one web page to another Blazer intercepts the request and updates the Dom with only the parts of the web page that need to be changed this results in a smooth fast navigation effect so benefits we have discussed regarding service side rendering are leveraged while at the same time the ux responsiveness you would expect when leveraging a spar technology is maintained form handling is another benefit delivered in net 8 for Blazer applications where for example if a user fills in a form whereby the user needed to scroll down the page to reach the relevant form when the user submits the form with service ID rendering this would typically result in a complete page refresh where the page would reload and the user would lose the user's scroll position within the page so with enhanced form handling only the parts of the web page that need to change as a result of the user submitting the form to the server are changed and the scroll position on the web page experienced before the user pressed the submit button is maintained even after the form is submitted this ultimately results in a smooth experience for the user you can test the effect of enhanced navigation and form handling by commenting out the reference to the blazer. web.js file within the app. Riser file testing your application and then commenting back in the blazer. web.js file and retesting the relevant functionality number four choose component rendering mode at runtime so we've discussed server side rendering and streaming rendering this is great for initial page loads we have also discussed enhanced navigation and form handling which gives our application the advantages of service side rendering while maintaining the responsiveness effect expected when using a spar technology like blazer with net 8 we are also able to leverage the Blazer web assembly technology and the Blazer server technology within our Blazer applications running onnet we can in fact include service side rendering streaming rendering Blazer web assembly components and Blazer server components within one project within our net 8 Blazer applications by applying an appropriate attribute at the top of a razor page we can for example explicitly choose that the relevant web page leverage the Blazer server technology which means a signal R connection is created automatically to handle relevant client server interactions we could explicitly change the relevant attribute appropriately so that streaming rendering is used for a particular page which means a signal R connection will not be used and a typical HTTP request response model is instead used note that it is not recommended that you always bind a particular page to a render mode this should be done sparingly it is recommended that such choices should be done through applying the render mode attribute to elements that denote the inclusion of the relevant razor component as a child component with an apparent razor component this will give you more flexibility regarding the context in which the relevant component is rendered so a component can be rendered for example as a web assembly component or a Blazer server component and this Choice can be implemented through the use of the random mode attribute included appropriately within the Rel element that denotes a razor component you can also choose the auto render mode for a component which for example would mean that a component is initially loaded via signal R connection which means it behaves initially like a Blazer server component while the page is loading via a signal R connection the runtime and relevant files containing the code logic could be downloaded in the background so that subsequently this component can can behave like a web assembly component the advantage of this is you can leverage the faster initial load times inherent in the Blazer server technology as well as the inherent faster responsiveness to user interactions inherent in the Blazer web assembly technology so you can get the best of both worlds if you like through an appropriate implementation of the auto mode random mode number five quick grid also shipped with net 8 is the quick grid component so a use case for the quick grid component is that you want a fast lightweight component that can display your data in a grid perhaps you want to display your data across a number of pages quick grid supports pagination for information about what functionality is provided in the quick grid component you can navigate to the quick grid demo site at this URL you can see here we have pagination functionality you can include and exclude the fields you want to display within your grid not only can you include text based data you are also able to include images within your grid you can sort the rows by clicking on the relevant column headers you can filter the data within the rows using textbase search criteria you can customize the look and feel of the grid using CSS stylesheets so it's a basic grid that you can Leverage for quickly displaying your data within a grid you can also easily customize your grid for example by adding functionality for sorting the data filtering the data styling the grid using CSS and include pagination you can even Leverage The virtualization functionality virtualization provides the appearance of continuous scrolling through an arbitrarily large data set while only needing to fetch and render the rows that are currently in the scroll viewport this can provide excellent performance even when the data is vast quick grids virtualization feature is built on Blazers built-in virtualized component so it shares the same capabilities requirements and limitations so quick grid provides you with basic grid functionality for more complex functionality quick grid might not be the component to use and perhaps you could use a more sophisticated grid component for example the sync Fusion data grid component component for more information on how to use the sync Fusion data grid component please navigate to this URL where I demonstrate how to use the sync Fusion data Grid in the context of developing a sales management application using Blazer server number six improved authentication prior to net 8 a thirdparty component dend identity server was used for setting up authentication for spa applications for many Spa applications a full open ID connect server solution is way more than is required to satisfy authentication concerns dend identity server is a great component but may not be appropriate for all Solutions in net 8 dend identity server has now been removed from the authentication related templates dend provides templates for your applications if you do need a full oidc solution and in these scenario Microsoft recommends that you use their templates for this purpose in net 8 Microsoft has introduced client-friendly endpoints for identity management for example where your applications can get Bearer tokens or setup cookies and query the identity data stores for information about the users the other authentication related Improvement that comes with net 8 is that prior to net 8 you were restricted to razor Pages templates for implementing uis for the integration of authentication functionality into your web applications so for example if you want to include login and registration forms in your web applications you would include the appropriate login and registration razor pages in your application at the end of this video where I demonstrate creating a sales management application using Blazer server I demonstrate integrating identity into the application where the relevant login and registration razor pages are included in the relevant project for authentication purposes as discussed in net 8 you can use the new client-friendly web API endpoints to get Bearer tokens or setup cookies and query the identity data stores for information about the users with net 8 you are therefore not reliant on these razor Pages templates for the integration of authentication into your web applications so you won't be tied to the razor Pages technology for this purpose and can custom ciz for example in your Blazer applications your login and registration forms using Blazer not only is this great for Blazer spy applications you can also use these authentication related web API endpoints and customize your own authentication related uis using angular or react in your angular or react applications number seven razor component result integrate razor components into other types of applications like MVC razor Pages angular or react new and.net 8 is the ability to return a razor component result which you can return from for example a minimal API or an MVC controller action so this means you can easily integrate Blazer components into for example existing MVC applications so for example instead of rendering an MVC view you could choose to render a Blazer component instead dead you can turn a Blazer component into a custom element and for example integrate your razor components into angular or react applications number eight generate static HTML content with components you can now render razor components completely outside of the context of HTTP requests so completely outside the asp.net environment so your razor component can be rendered Direct as a string or stream and therefore your razor component can be used for templating HTML so this is useful for scenarios where you just want to generate static HTML fragments that could be used for example for email generation so this is just added flexibility that is included with the release of net 8 this functionality also lays the groundwork for static site generation in Blazer so this will mean that if the site can be generated into to HTML on the server for example for a web page the web page is already rendered so of course this increases the speed of retrieval of the web page and therefore results in a better ux static site generation will not be included in net 8 but will be available in future releases ofet number nine the introduction of sections into Blazer in net 8 sections can be used within Blazer applications for those of you familiar with MVC you'll probably know how sections work you can use a section in your web application so that for example the content in a certain part of a header component changes depending on the current web page displayed to the user so if the user is currently navigated to for example a web page displaying a weather forecast for the week a section in the header of the web page could display for example the high and low temperature for the current day so the content in a defined section of the header changes according to the user's navigation context if you like so if for example the user is looking at a web page showing the latest news stories perhaps the latest breaking news headline is displayed in the relevant section in the header of the web page where the web content was displayed when the user was looking at the web page containing weather forecast data so you can see how this could be a useful feature to use within your web applications number 10 jit interpreter much faster web assembly components currently your Blazer web assembly apps run on an interpreter based runtime Limited jet support will be included for Blazer web assembly components in net 8 what this means is significant runtime speed improvements including 20% faster UI rendering and 2x faster Json serialization so these were just 10 reasons why Blazer on net 8 is a GameChanger so massive improvements and enhancements are shipped with net 8 that will have a massive impact on your future Blazer applications this is very exciting indeed I hope you have enjoyed this video If you like this video please hit the like button and please consider subscribing please also ring the bell so that you'll be notified of future content please feel free to share this video with anyone you feel May benefit from its content if you'd like to thank me by buying me a coffee you can do this through my buy me a coffee web page at this URL it will of course be greatly appreciated I love reading your comments so please feel free to engage with me in the comments section I hope to see you soon thank you and take [Music] care

Channel: Gavin Lon

Views: 40,149

Keywords:

Id: VWwZrDA8om0

Length: 25min 2sec (1502 seconds)

Published: Tue Oct 10 2023