Introduction
Hello everyone and welcome to the new section about Blazor, this great new Microsoft framework that allows us to make web applications only with C# and .NET.
First of all, my name is Emiliano Montesdeoca, I'm a Fullstack developer at Intelequia and a big fan of Microsoft technologies, especially Blazor.
With these tutorials, I would like to teach you every aspect of Blazor, from a simple Hello World, to make an advanced application with data access, multiple pages, components, etc.
History
Normally, when we want to make a web application, in which we want to perform asynchronous actions, interactive for the user, look nice, we have to resort to several well-known frameworks such as React, Angular or Vue for the frontend and then have some kind of backend to deal with logic and data such as ASP.NET Core, Java, etc..
This is fine and dandy and a totally valid practice, but it also has its cons:
- Using different languages
- Rewriting code, double validation
- Running more and more complex tests
- Higher costs, more programmers
Can you imagine being able to create a whole application that has the same features I just mentioned, but we save the cons?
Well, Microsoft has created Blazor for that!
What is Blazor?
Blazor is an open-source and cross-platform framework for creating web applications. It allows you to use only C# to create interfaces, without having to use Javascript, which is what is usually used in these cases, as I explained before.
Blazor has different features:
- Multiplatform, supported by Windows, Linux and macOS.
- It allows to perform all development using C# and Razor, with the option to use Javascript if desired.
- It can be developed in any IDE.
- Open source.
Types of accommodation
When it comes to hosting Blazor applications, you can either run everything on the server and communicate with the client, or run the entire application on the client.
Blazor Server
In this model, as I mentioned before, all the code runs on the server. The way it works to update the interface is through a SignalR connection.
This SignalR connection is like a tunnel that connects the device that is running the application with the server, every time the user navigates, presses a button or performs an action, it sends through this tunnel what he has done, and receives what he has to do. Thanks to this, the interface is never blocked.
Pros:
- Only the file that is responsible for opening this tunnel is downloaded.
- If you use .NET Core, you can use all the advantages and tools that we have always used.
- The code stays on the server.
- You can use APIs that are only available on the server.
Cons:
- Latency.
- No offline mode.
- It costs more if you were to scale, you have to put more resources on the server.
Blazor Webassembly
In this type of hosting, the application runs entirely in the browser using WebAssembly. Once the application is accessed, all the code is downloaded, along with the .NET dependencies. This allows the application to run without having to have a server connected through a tunnel.
Pros:
- No server needed.
- Client resources are used.
- Workload is on the client side.
Cons:
- Application has the limitations of running in the browser.
- Depends on the client having WebAssembly support.
- The download of the application is much larger.
Requirements
As I mentioned before, you can develop in Blazor on different platforms.
Windows
- Install .NET Core SDK
- Visual Studio 2022 with ASP.NET Development Pack
- Visual Studio Code
Linux
- Install the .NET Core SDK
- Visual Studio Code
- Use the CLI to create applications
macOS
- Visual Studio for Mac
- Visual Studio Code
- Using the CLI to create applications
Create a Blazor application
Finally, we will create and run an application in both its Server and WebAssembly models, using Visual Studio 2022.
Blazor Server
Here is step by step how to create a Server type application until it is executed.
Blazor WebAssembly
Here is step by step how to create a WebAssembly type application until it is executed.
Blazor Resources
You can find the source code for this post in our Github repository here.
If you have any questions about Blazor, feel free to contact us. We will be happy to help you😊