Everything About Blazor p1

So let’s first talk about what is Blazor ?
Blazor is .Net front-end framework , server-side rendering and client interactivity is supported in a single programming model .

Components
a component in Blazor is an element of UI , Like pages, tables, forms

Components are .NET C# classes built into .NET assemblies that :

• Define flexible UI rendering Logic
• Handle user events
• Can be nested and reused
• Can be sharted and distributed as Razor class libraries or NuGet packages

The component class is usually written in the form of Razor (.razor) file extension.

NOTE : razor is a syntax for combining HTML with C# code , Razor allows you to easily switch between HTML and C# in the same file , a bit confusing right? let’s make things easier.

<PageTitle>Counter</PageTitle> <h1>Counter</h1> <p role="status">Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; }
}

This example is used by ASP.NET documents.

So, look at @code in the previous example, this parameter allows you to simply use C# code inside the HTML markup page.

What is the supported Browsers?

1. Apple Safari
2. Google chrome
3. Mircosoft edge
4. Mozilla Firefox

Blazor WebAssembly Vs Blazor Hybrid

WebAssembly : Blazor WebAssembly executes C# code directly in the browser using WebAssembly (a low-level binary format supported by modern browsers). Also you can use the entire .Net ecosysten, including libraries and tools, Create a responsive web design using razor components, And it’s also Cross-Platform, and there is no Server Round-Trips (once loaded, the app runs independently without requiringserver round-trips for every interaction).

Hybrid : Blazor Hybrid combines the power of blazor with native client framwork, it allows you to build powerful Cross-Platform Desktop and mobile applications using C# and razor components. So to sum up , Blazor Hybrid is used for desktop and mobile application, we can discuss this later on!

Let’s talk a bit about servers

Blazor Server :
So using the Blazor server hosting model, all components are executed in the server from within an ASP.NET Core app. UI updates, event handling, and JS calls are handled over a SignalR connection using the WebSockets protocol (Don’t worry i’m going to explain it later ).
The state on the server associated with each connected client is called a circuit. Circuits aren’t tied to a specific network connection and can tolerate temporary network interruptions and attempts by the client to reconnect to the server when the connection is lost.

Here’s some benefits of using Blazor Server.

1. Download size is significantly smaller than when the Blazor WebAssembly hosting model is used, and the app loads much faster.
   2.The app takes full advantage of server capabilities, including the use of .NET Core APIs.
   3.The app’s .NET/C# code base, including the app’s component code, isn’t served to clients.

But also Blazor server has some limitations.

1. Higher latency usually exists. Every user interaction involves a network hop.
2. There’s no offline support. If the client connection fails, interactivity fails.
3. Scaling apps with many users requires server resources to handle multiple client connections and client state.

Blazor WebAssembly Server :

The Blazor WebAssembly hosting model runs components client-side in the browser on a WebAssembly-based .NET runtime. Razor components, their dependencies, and the .NET runtime are downloaded to the browser. Components are executed directly on the browser UI thread. UI updates and event handling occur within the same process. Assets are deployed as static files to a web server or service capable of serving static content to clients.

NOTE : i will write an article explaining the Blazor WebAssembly Server

So what is SignalR ?
is a powerful library developed by Microsoft that seamlessly incorporates real-time functionality into applications. Here’s what you need to know

and what is WebSocket protocol ? WebSocket is a computer communications protocol that provides simultaneous two-way communication channels over a single Transmission Control Protocol (TCP) connection, it can be used in real-time communication, and it can lower the overhead. Lemme know you want an article explaining the WebSocket protocol.

Thanks for Reading 📖, Hope you enjoyed readingmy article.

Hamza.