July 11

Getting Started with Server-Side Blazor

0  comments

Blazor is a feature of ASP.NET Core. It allows developers to build full-stack web applications using C# instead of Javascript. 

Blazor is officially supported by Microsoft.

You can use the server-side hosting model in production when .NET Core 3 ship in September 2019. 

If you are an experience C# developer and you love C#, this is a fantastic news!

I am so excited about it. Finally, we can build complete websites only using C#.

Don't worry, this is not Silverlight. You don't need to install a plugin. 

Watch this video to learn how to get started with Blazor server-side. Learn the pro and cons of using the server-side hosting model and understand how it works.

Prerequisites

Install the following tools to start working with Blazor:

How to create a Blazor Server-Side project

The Blazor extension for Visual Studio automatically install Blazor templates for you. 

To create a Blazor Server-Side project click File -> New -> Project. Select "ASP.NET Core Web Application" and click Create. Then select the "Blazor (server-side)" template with ASP.NET Core 3 and click Create.

The default template contains a basic application to help you get started with Blazor.

Learn more about the structure of a Blazor application by reading the official Blazor documentation.

How does it work?

You can run the application by clicking F5.

By default your Blazor application run inside IIS Express.

At startup, the file blazor.server.js initialize a SignalR connection using websockets.

The SignalR connection is the glue between the client and the server.

All the UI events, DOM changes and Javascript interop go through this channel.

The server mantains a shadow DOM, calculate all the UI changes and handle all the events server-side. 

The client sends events to the server and get the DOM changes from the SignalR connection. Then, the client updates the real DOM to make the UI changes visible to the user.

All of the complexity is completely abstracted away. The Blazor framework handles everything for you.

What are the advantages of using Blazor Server-Side?

The main advantage is the ability to use C# to build web applications in a completely supported way by Microsoft. This is a big thing for skilled C# developer!

Compared to the client-side hosting model, the application loads fast. There is very little data that need to be downloaded on the client to initialize the application.

All the code runs on the servers. You can benefit from the full power of .NET Core and from all the tooling and libraries available in the .NET ecosystem.

Because everything runs on the server, a server-side Blazor application works well in any browsers.

What are the disadvantages of using Blazor Server-Side?

The biggest downside is that the application requires a constantly active connection with the server. You can't easily support offline scenarios.

Every UI change requires a roundtrip to the server. On high-latency networks the overall user experience might not be completely fluid. 

Scalability might become a problem because all the code runs server-side and each client must have a constantly active connection with the server. However, SignalR scale fairly well and you can even consider using Azure SignalR service with Blazor to improve scalability. 

Conclusion

Leaverage your C# skills and start building web applications with C# now!

Start working with Blazor server-side now!

The server-side Blazor hosting model is fully supported by Microsoft and ready to be used in production in a few months.

Additional Resources

You can learn more about Blazor using the following resources:



Tags

C#


You may also like

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Subscribe to our newsletter now!

Get instant access to the Master C# 9 webinar to learn all the new exciting C# 9 features quickly.
Get regular videos and news on C# and .NET and offers on products and services to master C#.

We will collect, use and protect your data in accordance with our Privacy Policy.

>