Ten Amazing Blazor Features You Must Know

hi everyone and welcome I'm Gavin LW in this video we'll discuss 10 amazing features in Blazer there are so many more Amazing features in Blazer so please feel free to include the features that you think are amazing in the comments section if you have any other comments also please feel free to share them in the comment section your insights are always greatly appreciated number one signal R newg get package within your Blazer applications it is easy to leverage signal R in order to provide realtime functionality in your Blazer applications to do this you can include this new get package microsoft. aspnet core. signal r. client within your Blazer application so what is the significance of providing signal R functionality in your Blazer applications signal R can be leveraged to provide real-time push notifications to all of your client Blazer apps apps in response to a specific event occurring the simplest example would be with a chat app where multiple clients can participate in a chat when a message is sent from one client that message automatically is propagated to all the other Blazer clients in real time last year I created a course for free code camp for sync Fusion in this course I created a real world application a sales management application to provide a real world context for the sync Fusion frontend components sync Fusion provides a UI component suite for building powerful web desktop and mobile apps you can check out this course at this URL all links mentioned in this video are included Below in the description of this video in this course the focus was on the client side components the sync Fusion components and I did not include signal R functionality in this sync Fusion course however signal R would be a great addition to a subsequent version or signal R version of the sales management application I could add real-time functionality through appropriately leveraging signal r with the version of the application demonstrated in this course when a sales rep adds details for a new sale to the system the relevant information is inserted into the database so in this version of the app the non signal R version if you like the other members of the team will only see the aggregated information for example on a relevant chart denoted by a sync Fusion chart component being affected by the new sale being added to the system when the user refreshes the user's browser if signal R were to be included in a subsequent version of the sales management app functionality could be included so that when a new sale is added to the system the other members would see relevant changes in the charts that aggregate sales information made in real time I.E they would not need to refresh their browsers in order to see the effect of a new sale being added to the system the relevant charts would update appropriately in real time a signal R connection could be used to automatically push the relevant data pertaining to new sale to all relevant Blazer clients so the relevant charts would be updated automatically in real time without a browser refresh needing to take place so you can see how the power of signal R can be leveraged in your applications to create realtime functionality please navigate to this location on the Microsoft learn platform to learn more about how you are able to leverage signal R through leveraging this new get package in for example your Blaze applications you can see here example code pertaining to leveraging Signal R in a basic chat application so please read more details here about signal R and how you are able to leverage signal R in your asp.net applications very powerful indeed number two server side pre-rendering of Razor components first of all what does it mean to pre-render a razor component in Blazer here is a depiction of basically what happens with a normal HTTP request response regarding Blazer web assembly components and Blazer server components so what is the problem with this model so this is a model demonstrating what happens when pre-rendering is not used with client side web assembly components before the user can interact with the relevant components all the relevant files and content need to be downloaded to the client this can be a slow process and result in a poor ux user experience potentially resulting in your users taking a dim view of your application with the client side and service side scenario due to the fact that JavaScript and Signal r or web assembly is needed optimizing your web app for SEO search engine optimization is not easy often search engines won't execute JavaScript or will have an issue with web sockets and web assembly pre-rendering can be a solution to this SEO issue in this case where serice side pre-rendering is leveraged all the relevant HTML content pertaining to the relevant component is rendered as static HTML and then the static HTML is returned to the client and displayed in the user's browser this diagram depicts what this HTTP request response looks like the benefits of pre-rendering a Blazer component are as follows for clients side web assembly razor components the initial load is just static HTML so all the net libraries that would usually need to be downloaded don't need to be initially downloaded to display the content this means much faster initial load times for the relevant web page and a far better user experience ux in both client side web assembly components and Blazer server components better SEO search engine optimization is ensured to learn more about serice side pre-rendering razor components please navigate to this Microsoft learn web page number three virtualization to understand what virtualization in Blazer means and how it can be used in your Blazer applications to optimize a user's experience in certain scenarios let's navigate to this Microsoft learn web page page at this URL and look at an example of the use of virtualization first of all you can see here that a list of items containing flight information is displayed within a parent div tag note that the parent div tag is limited to a certain height within the relevant web page through the use of appropriate CSS code so this div tag limits the display within the div tag to 500 pixels and if the items in the list exceed the height limitation imposed on the containing div tag by the relevant CSS code a vertical scroll bar is automatically displayed which is indicative of the fact that there are more list items in the list currently hidden from view the user can then of course use the relevant vertical scrolling facility appropriately in order to see the items currently hidden from view with virtualization only the items in the list that can fit within the view of the parent div container are rendered even though in the case where there are more items in the list that are hidden from view due to the height restriction imposed by the parent div containers appropriate Associated CSS code only the items that can be displayed in the list are rendered so this virtualization functionality can enhance the perceived performance of your application using Blazers built-in virtualization support is very simple in a normal scenario where you are displaying a few items in a list you'd probably simply Implement a basic C for each Loop Traverse the items in the relevant list and display the items appropriately using HTML markup like is depicted in this code example here however to achieve the virtualization effect instead of using a for each Loop you implement the same functionality but using a built-in Blazer virtualize component like this please read the details of how to implement virtualization at this URL let's read an explanation of what is happening in this example on the Microsoft learn platform the virtualize in angle brackets T item component calculates the number of items to render based on the height of the container and the size of the rendered items recalculates and and reenders the items as the user Scrolls only fetches the slice of records from an external API that correspond to the current visible region instead of downloading all the data from The Collection receives a generic I collection in angle brackets t for virtualize in angle brackets T item items so with the built-in Blazer virtualization functionality the Blazer framework is doing some heavy lifting on your behalf and you can leverage virtualization where appropriate to create a better ux user experience so for example if you were just displaying 10 items in a list to the user the appropriate use of a 4 each Loop for the traversal of all the relevant items in the list would be a sufficient solution however what if there were hundreds of thousands of items in the list if you were to use a for each Loop in order to display all of these hundreds of thousands of items to the user on the page the initial load time would be severely slowed down and displaying all of these items in the web page would result in a poor user experience so where there is a sufficiently large number of items to be displayed to the user in a web page virtualization is a great solution and can vastly improve the ux user experience number four lazy loading of web assembly components lazy loading in Blazer web assembly components can be used to defer the downloading of assemblies until the root pertaining to the relevant assembly components are requested by the end user this helps to improve startup performance of large Blazer web assembly applications please read more details associated with lazy loading Blazer web assembly comp components at this URL on the Microsoft learn platform so using lazy loading is another way that you can improve the ux user experience with your Blazer applications using lazy loading in your Blazer application where Blazer assembly components are used can be leveraged appropriately to improve the user's experience code examples on how to implement lazy loading for Blazer web assembly components can be found at this URL number five hot reload let's navigate to this URL on the Microsoft learn platform and read about hot reload support for Blazer components net H reload applies code changes including changes to stylesheets to a running app without restarting the app and without losing App State heart reload is supported for all asp.net core 6.0 and later projects so let's navigate to this URL on the Microsoft learn platform and you can see here in this visual example hot reload support working in Visual Studio 2022 so let's read this exerpt available to us at this URL we accomplish this meaning through hot reload by making it possible for you to edit your application's code files and apply the code changes immediately to the running application also known as hot reload once your changes are applied reexecute your code again by taking an action in the app itself or through some sort of timer Etc and see the changes immediately no pausing of the app through break points is required so that's how you would do it with Visual Studio 2022 in Visual Studio code you can run the net watch command to leverage hot reload functionality for more details on using hot reload in your Blazer applications using vs code please navigate to this URL so hot reload provides an excellent convenience to developers when creating Blazer applications either using vs code or Visual Studio 20122 Number Six App State or application state in Blazer in Blazer you are able to easily maintain the state of the application outside of your your UI components you cannot maintain the state of your Blazer applications within the components of your applications simply because whenever for example you navigate to a page all the variables within that page or component are recreated and initialized which means any state that you had stored previously will be lost across page navigations if you want to preserve State across page navigations or page refreshes you are able to do this by making sure that this responsibility the responsibility of storing the state of the app is provided in one component you can then within the roots. Razer file that contains all the roots to the razor components of your app wrap the relevant Roots within the component that is dedicated to maintaining the state of your app the key to how this works is a concept in Blazer known as cascad in parameters through a cascading parameter that exists within all of the child components you can propagate the state of your application stored within the component that is dedicated to preserving State down to the relevant child components of the application for those of you who are familiar with react the way of preserving state that I have just described for Blazer apps is very similar to the way context is used for preserving state in react in react this is a way to avoid prop drilling for the purpose of propagating State down to child components number seven efficient communication using grpc web the grpc framework can be levered to create high performing communication between end points RPC stands for remote procedure call Blazer supports grpc in order to leverage grpc from a Blazer component you need to use grpc web to enable communication between the browser and the grpc server for details on how to implement grpc within a Blazer app please navigate to this URL remember all links referenced in this video have been included Below in the description of this video number eight razor syntax and CSS isolation this is certainly the least obscure feature on this list I felt I had to include razor syntax because I love being able to easily blend raw HTML with C logic in order to code my UI components I find working with for example jsx JavaScript and XML for creating the front-end UI functionality for react components less intuitive and less clean than when working with Razer for the same purpose in Blazer I find that there is a clear separation of concerns when working with razor there is a clear separation of the markup code from the C logic like in react in Blazer you are also able to isolate your CSS code from other components creating scoped CSS files is very simple in Blazer this is a powerful feature where each component can be styled individually as opposed to having a global style sheet that affects all components you can achieve this CSS isolation through the creation of a stylesheet with the same name as the relevant component and then appending do CSS to the end of the relevant file name so if you had a razor component named employee. Riser you could create a CSS stylesheet that only affects this component in your app by naming the relevant CSS stylesheet employee. razor. CSS number nine Progressive web apps with Progressive web apps you can easily make your Blazer web assembly apps behave like desktop apps this can be done through Visual Studio simply by checking a checkbox labeled Progressive web application during the project creation process if you are using visual studio code you can run a CLI command like this to turn your Blazer web assembly app into a progressive web app let's navigate to this URL on the Microsoft learn platform and read a bit about Progressive web apps Blazer web assembly is a standards based client side web app platform so it can use any browser API including pwa apis required for the following capabilities working offline and loading instantly independent of Networks speed running in its own app window not just a browser window being launched from the host's operating system start menu doc or home screen receiving push notifications from a backend server even while the user isn't using the app automatically updating in the background the word Progressive is used to describe these apps because a user might first discover the use of the app within their web browser like any other Spa later the user progresses to installing it in their OS and enabling push notifications so this is a very powerful and simple feature that you can leverage for your Blazer web assembly applications number 10 Auto interactive render mode this is a feature that has recently been shipped with the official release of net 8 with the release of net 8 you are able to leverage a new project template named Blazer web app before net8 you had a choice for the creation of Blazer applications between the Blazer server project template and the Blazer web assembly project template the name of these two templates very much suggests how the components in these two disparate types of Blazer apps are rendered with blazer server components a persistent signal R connection is maintained between client and server and the C code runs on the server with blazer web assembly all the necessary net runtime libraries and dependency dlls need to be downloaded to the user's browser and your C code runs inside the browser the reasons that the C code can run inside the browser is due to a technology named web assembly through the use of the Blazer web app project template you can mix your render modes so you can have Blazer server components mixed in with blazer web assembly components within the same project and even within the same razor page each of these types of components I.E Blazer server and Blazer web assembly have their pros and cons a pro of Blazer server components is that their initial load times are much faster when compared to Blazer web assembly components this is because the net runtime and all dependency dlls do not need to be downloaded to the browser and the C code logic runs on the server with blazer server components communication between client and server is done through a persistent signal R connection as discussed with blazer web assembly components is the overhead of all theet runtime libraries and dependency dlls needing to be downloaded to the browser before the components can function within the browser so the initial load times are much slower with blazer web assembly components when compared to the initial load times of of Blazer server components server side rendering was also introduced with net 8 which allows for components to be rendered on the server which results in much faster initial load times through the use of the Blazer web app project template you can easily leverage a new bonus feature called interactive Auto rendering let's read more about this on the Microsoft learn platform at this URL render modes every component in a blazer web app adopts a render mode to determine the hosting model that is used where it's rendered and whether or not it's interactive the following table shows the available render modes for rendering razor components in a Blazer web app to apply a render mode to a component use the at render mode directive on the component instance or on the component definition you can see here the table outlining the various render modes please read this entire article for more details at the bottom of the table you have the interactive Auto rendering mode interactive SSR using Blazer server initially and then CSR on subsequent visits after the Blazer bundle is downloaded so through the interactive Auto render mode you can leverage service side rendering which will make the initial loading of the relevant component much quicker the relevant runtime DLS and dependency dlls are then downloaded in the background which means client side rendering can subsequently be employed to handle the user interactive functionality which will result in fast responsive updates to the web page as a result of the user interacting with the web page this means through Auto interactive render mode You are leveraging the Best of Both Worlds SSR service side rendering and CSR clients side rendering so that initial load times of components are super fast and subsequent interactions with the component by the user result in appropriate changes being made in the browser super fast so through Auto interactive render mode your Blazer app can benefit from both fast initial load times and better SEO as well as fast smooth responsiveness when the user subsequently interacts with the relevant web page these 10 outstanding features make Blazer simply awesome I hope you have enjoyed this video please let me know in the comments section what features you love about Blazer and anything else you'd like to say in the comment section we of course be welcome I really do appreciate your insights 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 the 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've recently joined X formerly Twitter so it would be great if you followed me on X my username is @gavin lond digital I hope to see you soon thank you and take [Music] care

Channel: Gavin Lon

Views: 5,329

Keywords:

Id: Dzl044xDeSI

Length: 25min 34sec (1534 seconds)

Published: Thu Jan 18 2024