Up next in 10
5 Proven Blazor Architecture Tips: A Dash of .NET - Ep.1
24K views
Nov 26, 2023
In this, you'll discover five proven Blazor architecture tips to help you build scalable, maintainable, and performant Blazor applications. Whether you're a beginner or an experienced Blazor developer, these tips will help you take your Blazor development skills to the next level. 📺 CSharp TV - Dev Streaming Destination http://csharp.tv 🌎 C# Corner - Community of Software and Data Developers https://www.c-sharpcorner.com #csharptv #csharpcorner #dotnet #adashofdotnet #csharp #blazor
View Video Transcript
0:00
If you are a C-sharp or a .NET developer, I am 100% sure Blazor has been one of your very first joys with your front-end development
0:09
And joining us today is Jose, who is a Microsoft MVP and a DevExpress MVP
0:14
who's going to share five incredible architectural tips for Blazor that's going to help you in your development of Blazor projects
0:22
Let's bring him in. Hi, Jose. Welcome to the Adash of .NET
0:28
Thank you so much for joining us today. Hey, thanks Simon for the invitation
0:32
I'm really excited to be here and every opportunity we get to talk about Blazor is yours
0:37
I mean, yeah, I really love it. I know you also love it. So let's get started
0:41
Tell us about the five proven Blazor architecture tips. Yeah, absolutely. Yeah, I'm ready
0:47
I have my Blazor mug. So let's get started. So to start talking about Blazor, if you go and search the web
0:57
There is a lot of how to, like a lot of how to do this tutorial, a lot of how to create
1:03
And we all know all the basic new file projects with the counter, with the face data
1:08
So I thought that we should go a little more in depth about the architectural tip
1:13
I know that a lot of people already know how to work with places, how to do a small app
1:17
how to do, like, they are already working on them. But what happens when your app is already complete
1:22
when you're trying to do something more advanced, you're trying to do dynamic components, Here is where architecture is really important because you need to make sure that your app is scaled, your app is reliable, your app is fast
1:33
So let's do a quick, quick rundown of Blazor architecture. Basically, we have two hosting models, WebAssembly and server
1:40
Without going too in-depth, it's simple. WebAssembly downloads everything from the browser
1:45
Server has an open connection that through SignalR, you get some communication there
1:49
and basically the first thing that happens when you put the URL in your browser is the JavaScript client gets downloaded to your browser
1:57
and then from there, that JavaScript client is the Blazor server that says, hey, what is my first phase
2:01
And I start working from there. In Blazor WebAssembly, it's different because all the DLS and the runtime, everything gets to the browser, and then you can execute it there
2:10
So you have these two hosting models that are really useful. The most important part that you have to think here is Blazor server
2:16
you're the one who's paying for the processing. Everything is in your server
2:21
Blazor WebAssembly, everything is in your user's computer, in your user's laptop, your user's hardware
2:26
So just to quickly see this in action, in Blazor's server, you see here the binary messages
2:31
that are being sent through SignalR service all the time, back and forward. And you can even, this is not meant to be readable
2:37
This is a binary message, but you can even see font-way style here
2:41
And you can also, if you start going through that line, you will see things like on-render completed
2:47
and like some type of the lifecycle of the component. So first, architecture tip, and let's go straight to it
2:55
The Microsoft thing, and one of the benefits of being a Microsoft MVP is that you get
3:00
in those product group meetings where I know all of those are through NDA
3:06
but we're not sharing anything private here. Basically, like there is no other winner
3:12
than the app service. We have deployed Blazor apps in our IIS service, in our Linux service, in our own hardware, but basically there is no other winner than app service
3:23
And it's not even close. The most hosted app in the app service for Blazor is basically the app service
3:31
And it's really interesting because basically the app service is the web apps and API in the cloud that are fully managed service that you have built in CI CD
3:40
And for like enterprise, you have support for built in network and isolated and dedicated environment
3:46
Is that something that you need for security and compliance standard? So basically, the app service is the go to for Blazor applications
3:54
and when you have your blazer application hosting app service there are a couple things that you need
4:01
to take in account because most of everyone start with the free tire and they develop their
4:06
application there and then when they are trying to move they forgot to set some settings that are
4:11
really important the most important uh to start with is the uh 64 bits most uh everyone when they
4:19
do their free tire it goes directly to 32 bits so you need to make sure that you come here change
4:23
to 64 bit because you will need that for the memory. Remember, everything that you're seeing in the screen in Blazor is on memory
4:30
And if you're using Blazor server, that memory is on your server and that can add up
4:35
That's one of the main bottlenecks for scalability. The Donnet version, of course, you can choose the latest long-term support
4:43
With Donnet 6, Donnet 5, and so on, we have not seen a really big improvement in the Donnet
4:49
version, but definitely, I think with Donnet 8, that will change here
4:52
web sockets have to be on. Make sure web sockets are on
4:56
If you don't have web sockets on, this will default to long polling
5:01
Long polling will consume more resources and it will be asking, hey, do you have something for me to the server
5:06
Do you have something to me to the server? So it will not be the most efficient way
5:09
And of course, AR affinity, if you are like having more than one instance, so you make sure those sticky stations are in place
5:16
and we'll talk about that. Now, this is the configuration that you cannot miss
5:22
There are a few other things that we can discuss about app insights, about some monitoring and so on, but you cannot
5:29
64-bit web software runs. Don't forget about those configurations. Of course, if you are in the world of app services, you have everything that you need from your artifacts to your testing to your redeploying, continuous building, continuous CICD, continuous integration, continuous deployment, and everything there that you need
5:47
and you can have your your several slopes you can have your approval your source control flow everything you need right there because devops make it really easy to take your app service and do the whole development cycle Now second tip dependency injection and memory management
6:06
And right here, it's important to talk about the service lifetime. So we have three service lifetime that is trained
6:12
Every time that you call that service, you will get a new instance. Scope, this, every time that you call the scope service
6:20
you will get a new instance if it's another session, if it's basically a different user
6:29
And singleton, everyone will get the same instance. Now, we have to be really careful here
6:35
because, for example, in Blazor WebAssembly, it's not a Blazor server. You have everything running on your server
6:42
all the memories on your server, but as we discussed in Blazor WebAssembly
6:46
everything gets to your own computer, to the user computer, to the hardware of the user
6:51
So what does that mean? That if you have a singleton that is supposed to be the single instance for everyone
6:57
in a Glacier WebAssembly, that will work as a scope as well
7:04
And a scope will work as a singleton because everything is happening in just that instance
7:08
So let's say that you have 10 users using your application. There is 10 instance of your application
7:14
in each of your computers, in each of your users' laptop, in each of your user's computers
7:19
in each of your user hardware. And we don't talk about just computers here
7:23
You can run Blazor basically everywhere. Right now, you can run in a Raspberry Pi
7:29
And this is really important to understand because that difference of service lifetime
7:34
will make a huge impact in the memory management of your application
7:40
Transient will be the same across the board. Every time you call it, will be a new instance
7:45
Now, the second part is like we need to know that if you're in a place of server, the signal is a really big part of it
7:51
So we have a library, signal just a quick rundown is the library for that in real time
7:56
to the application. And why that is important is because you have some event
8:00
like the counter in your browser and that actually like the first data
8:05
because the counter is happening right there. And that basically sends that to the server
8:12
The server does some processing, have a copy of your DOM, compare the copy of your DOM
8:16
and send back just the markup that changed. So it's really, really efficient
8:22
And it only sends what it needs. Now, the important part here is that we need to do server code push
8:28
The server needs to push. It doesn't have to wait because if we know HTTP
8:33
basically after you call the server, it gets disconnected. So that's it
8:38
If you do AJAX, you have some processing in the background, but it's still not the most efficient
8:44
And you still have to be initiated. Now, the server code push, you have an open and you can send it
8:50
And there are several things for that, signalize the care of that. And you have WebSocket, even source, forever frame, long calling
8:56
and as we talk about the app service default to long calling
9:00
But WebSocket is the one who actually have it. Bidirectional, persistent connection, multi-user
9:08
full duplex and asynchronous. So we have everything we need. And if you see, we can be sending data and receiving data
9:14
at the same time. So that takes us to the part that when you have more than one instance of your server
9:21
you will need to have those sticky sessions. That basically what it does is make sure that your user is redirected to the server that it has been before
9:31
Meaning that if you have a user, client 1, that already connects to server 1
9:36
the next time that client 1 connects, we need to know where to send it
9:41
because if you send it to server two or to server two three, those one will have no idea of the state of that client
9:49
So basically, that's the idea of the sessions here. And we need to able to handle that
9:54
And with app services, you make it really easy. And I will discuss the next thing will be even better
10:01
So also keep in mind, this is the connection. We have a limit on this connection on the server
10:07
And that is not only for our app. is shared with every app that we have available in that service
10:13
So the third one will be Azure SignalR Service. Azure SignalR Service is a great, great service
10:18
that the first thing that I want to mention is it's not by the number of users that are connecting
10:25
to the Azure SignalR Service, it's by the number of messages being shared between those users
10:29
So you can have a lot of users that if your message
10:33
between your users and your server doesn't increase your Azure SignalR Service
10:38
it wasn't is not going to need to scale not only that actual signal service by default it already
10:44
knows where to send your users where to redirect your user so it handles all that for you and as
10:50
a really really big bonus the actual signal our service take loads out of your cpu so all that
10:57
signal processing that are happening in your server you can take it away so if you're using
11:02
blazer server and you're going to start using more than one instance definitely definitely recommend
11:07
that using the Azure SignalR Service. I mentioned here that even if you don't have more than one instance
11:14
the Azure SignalR Service take even some load from the CPU, so it's a win-win
11:20
Now, the other, I would say, really good thing to keep in account
11:26
and we'll see this little bit of code here, is that in Azure Server, we have the SQL handler
11:33
So basically we have every connection, every WebSocket is a circuit that basically handles the states and it keeps that connection open for us
11:42
But sometimes we need to customize it, which will be able to see
11:46
when a client a user is disconnected when it is connected and also change the option because by the file we have three minutes that we are holding the memory of the sessions And we also have hope options because the great thing is like
12:02
even if you don't see the signal in your project, you will definitely have access to modify the hope that is happening
12:10
And I even piggyback on that and do anything you need. So in this secret manager, let's see something
12:17
When we create a new Blazor server project, we basically only have this
12:24
add server Blazor, and that's it. There is nothing else that we see from there
12:29
But you can get inside, and you can get here, and you see circuit options
12:33
and start modifying those options. And basically, you can say, okay, what will be the retention period
12:38
that by default you see here is three minutes, or let me know what is the call timeout for the GS Interop
12:46
And you can even modify the hop options so we can say
12:50
OK, what is the client timeout interval? And please enable detail errors, hand shakes
12:57
And all of those options are at your disposal. And if we also connect this to all of those configurations
13:07
that we need for, for example, app inside, we will have a really good performance in web app
13:12
And for that one, we can say here that we have a SQL handler and that SQL handler has some methods
13:21
We have a on-circuit open-async, on-connection up, on-connection close, on-connection down. So all of those methods allow you to hook into them and do some type of metrics monitoring
13:33
And then that way we know how many concurrent users we have. We know how many have been disconnected
13:38
We can do things when those amount of circuits is getting to a big number and we know
13:44
and you can actually review all the implementation here because it's a really, really interesting place
13:51
where we can actually intersect and do our own things. So basically that would be the other one
14:00
about SQL management because I think that that one is really, really important in that regard
14:05
Now, this is one of my favorite, Brazor component. So Brazor has the concept of a render fragment
14:13
and render tree. So basically, what I like about this is, if you see, we have a way to dynamically open elements
14:26
open components, open attributes, and add all of this. And why this is important
14:31
Because a lot of times, we don't know what we're going to be using. So sometimes the child content is enough
14:38
but sometimes we can do really, really interesting things by using a render fragment
14:42
by using the builder tree. And if you see, for example, in this builder render tree method
14:48
we basically add an attribute and we can see how we open the element
14:53
and add the attribute plus menu. And this is what it translates to. So this is the markup that is coming
14:58
So this is one of the tips that I think that when you have to be doing dynamic things
15:06
it will bring you the most versatility because you can have a genetic method
15:13
that you can construct different UI and you can open any element
15:17
pass out a markup as a template and do some really, really, really nice things
15:22
Now, why is this also important? Because you can then put this Blazor component
15:29
in a new package through a Razor class library and re-user it everywhere
15:33
And if you know right now, Blazor, even in the Microsoft Team template
15:37
is the default, meaning that if you have a Nougat package with the Razor client library that has your components
15:44
you can reuse it across Razor server, Blazor WebAssembly, MAUI Blazor, or anywhere you are using a Blazor application
15:52
So think about the possibilities here. So we have Blazor WebAssembly, Blazor server
15:57
we can reuse our components, and with that, when we come back to the architecture
16:04
sometimes we're going to be using Blazor server that is really good when you're doing some type of Linux business application
16:10
that you can connect directly because you have the full runtime of the .NET in your server
16:16
In Blazor WebAssembly, you are more constrained. But if you think there are places where you will want
16:23
to take advantage of the Blazor server architecture and there are places that you will want to take advantage
16:29
of the Blazor WebAssembly architecture, If you're doing a lot of processing that you need to send to the user hardware 200, you can use WebLessware Assembly
16:41
So you're doing some more secure, confidential things. You can use a place of server that way
16:48
And as soon as you try to do a file new project in Blessware Assembly, you have this checkbox that ESP.NET Core hosted that it will create a middle tier API
16:59
That's basically what you do if you need to connect to the database, you do it through there
17:03
If you need to handle any type of secrets, connection with string and so on, you need a middle-tight API so we cannot connect directly to the browser for security reasons
17:14
But what if you want to switch in front time from Westworld Assembly to Blazor Server to have a page in Blazor WebAssembly, have another page in Blazor Server, take advantage of what they both offer because they both have their advantage
17:26
So, Octane has been doing this for a while. Octane is a really, really interesting project that you guys should take a look about how
17:34
you can create dynamic applications with Blazor. But the idea here is Donate now is coming with Blazor on I
17:41
So if you architecture your application right with everything that we have, and you have
17:46
a military API and you have your Blazor component in Nougat Razor Cloud library With Blazor on IREP you can basically mix that and use a part of your application in Blazor Server
17:58
the other part in Blazor WebAssembly. And it's really, really excited to see how you can
18:04
you have a page where you see, and you go to network
18:08
you see the WebSocket, and you say, OK, this is Blazor Server. And then there is no runtime to load it in your browser
18:16
If you change the page, you'll see how in this page we're using Blazor Web Assembly, and we can have that versatility and reduce everything that we need there
18:26
Now, I know that we only say five, but I think that it's important to have a bonus that is the Entity Framework
18:33
The recommended approach to create any ODB context with Blazor is to use a factory
18:42
If you have seen the issue with the Blazor and the framework
18:47
and you can take a look at the link where basically the DB context was passed
18:52
as a scope and they were having some issues there. So the recommended factor here is what we're seeing here as the DB context
18:59
factor to take care of that because yeah, we're using about entity framework and Blazor
19:04
We always think about Blazor server, but now with Blazor WebAssembly and SQ Lite
19:08
You can actually connect directly to the SQLite with Entity Framework in the browser
19:17
So, it's just amazing to see that. Let me see if I can show you something here quickly in the meantime
19:27
I'll show it at the end
19:37
And then a few things that we haven't mentioned that I think are really important
19:40
Testing, unit testing with the units is the go-to right now. And of course, I still, automatic UI testing with Selenio will be the best way to go
19:51
And definitely, that would be a whole talk by itself. I wanted to show this because I think that it will be okay
20:03
I have it here. Okay, so we also have a sync framework within the framework that is using the SQLite, right
20:21
Right. This is what I wanted. The SQLite with Blazor GovAssembly. And it will be a quick demonstration
20:27
but if you see right here, I can add a client node, and this is actually using Entity Framework Core with SQLite
20:35
And that client node here puts on data, and then I can actually add another client node
20:40
And you can see all of this is another table, and all of this is SQL with Entity Framework Core
20:46
And you can actually see what is happening there. you can see when we're going to synchronize the command
20:53
for the different database, SQL, Postgres, MySQL, SQL Server. This is the power that you have right now with Entity Framework SQLite
21:03
All of this is happening in your browser. If you refresh, everything is gone
21:07
And you can do a lot of awesome things in that regard
21:12
Now, coming in .NET 8, there is a lot of great thing coming
21:17
especially that Blazer United about we able to use both web hosting at the same time and
21:24
multi-trading and authentication stack compression and a lot of other great things. So please
21:31
don't miss that, especially the productivity quick grid, because that will allow you to do
21:38
a lot of great things that come out of the box without any third vendor package
21:42
because we started with the app service and I think that this is one of the most important concepts
21:51
because that's what everyone is using. I think that if, just to mention
21:56
if you're going to use a bad service, go to premium, any premium V3
22:00
because they have twice the power and half the cost and your app will be running smoothly
22:07
And I started using before with premium V2 and as soon as i switched to v3 my course like went down right away and my app started behaving
22:18
even better and that's basically uh thanks for joining and i'm really excited to be discussing
22:27
all of this right here you have my email my twitter any questions any comment please feel free to reach
22:32
out absolutely great jose azure app services dependency injection azure signal are
22:40
circuit management blazer components ef code testing and he also had a demo in just about 20
22:46
minutes ladies and gentlemen this is the best video if you want to learn about not five or six
22:51
or seven but a lot of about blazer architectural stuff and this was not level 100 as we're talking
22:56
about this was level 200 300 and some of the tips are also level 400 so as Jose said in the beginning
23:02
if you want to learn about this architectural stuff this video is recorded you can always go
23:06
back and rewatch it and follow the gentleman on Twitter, JHA column B, is that how I say it
23:12
Jose, before we wrap up this video, any final thing you want to plug in and
23:16
tell to the audience? Yeah, no, basically what I always say, there is a huge power in community
23:22
So please reach out. Like a lot of time we see someone
23:26
or we read an article over someone, we have a question and don't reach out
23:30
thinking they will not answer. You will be surprised. Most of the community, they will answer, they will
23:34
be happy to help you. So please go for it. yeah and you will find Jose's details in the video description and also you'll find the next
23:42
video coming up somewhere over there thank you so much everyone thank you Jose and we'll see the next video bye
#Computer Education
#Windows & .NET