Introduction:
According to Microsoft Docs, Blazor is a framework for building client-side web UI with .NET. It’s a feature of ASP.NET, the popular web development framework that extends the .NET developer platform with tools and libraries for building web apps.
Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML and CSS. Both client and server code is written in C#, allowing you to share code and libraries across projects.
If you’ve done any client-side development, I’m assuming you are familiar with Vue, Angular, React or Aurelia. Each one of these technologies is built on top of JavaScript. Blazor is different, in that it allows a developer to build compelling UIs by leveraging your existing C#, HTML and CSS skills without writing a single line of JavaScript code. This sounds pretty amazing, correct?
What Browsers can my Blazor code run on?
All modern browsers have Web Assembly baked in on which your code runs. The browsers range from Chrome, IE, Edge, Safari including browsers on mobile devices.
Flavour of Blazor:
Blazor comes with two architectures:
- Client-side Blazor (WebAssembly)
- Server-side Blazor
As of this writing, Server-side Blazor is the most stable release and can be used in production.
Client-side Blazor (WebAssembly) is still in preview and is likely to RTM mid-2020. The way it works is that when the application runs, it loads all assets such as static files, assemblies including the run-time which is later converted to WebAssembly bytecode without requiring a connection to the server. While it offers some advantages such as the non-dependence on the server for your hosting needs and also be able to work in offline scenarios. However, when it comes to jobs that require compute-intensive operation, then this architecture may not be suitable for your needs.
Server-side Blazor in my opinion does foot the bill easily as it conforms to the lowest common denominator. In another words, you are not restricted to just the latest modern browsers to run your server-side blazor code, but you can also have your code run on some of the older browsers that don’t have web assembly on them.
Furthermore, the server-side Blazor app runs inside ASP.NET runtime. Any changes to the app are copied using a WebSocket connection through SignalR. As a result, all updates are streamed from the server in real-time.
Does Blazor have Plugins?
Unlike Blazor’s predecessor technologies such as Flash and Silverlight that required plugins to be installed on the client’s machine, Blazor on the other hand does not require any plugins due to the fact that it runs in Web Assembly which is baked in every modern browser.
Advantages of Blazor:
Following are some of the advantages of Blazor:
- Leverage your C# skills to build full-stack Web app
- Reuse libraries that are .NET Standard compliant
- Runs on .NET runtime
- Runs on any browser
- Doesn’t require any plugins
- Download razor components from NuGet
- Highly performant
- Runs at near-native speed inside the browser on WebAssembly
- Allows interoperability between Blazor and JavaScript code
What Tools can I use to create Blazor Apps:
Blazor apps can be developed using Visual Studio 2019 (all versions) with .NET Core 3.1 SDK or alternatively you can use a free online tool called Visual Studio Code (with latest C# extension).
Blazor Code Snippet:
The above is a plain vanilla code that you get out of the box. It illustrates the use of C# and HTML. Although, when building an enterprise app, you would want to decouple your business logic in a separate class and restrict the razor component to HTML and CSS just to keep it clean and maintain a separation of concerns.
If you want to know more about Blazor, please use the following resources from Microsoft.
Resources:
