C# Full Stack Development with Blazor (Part 1)

If you are a developer with a .Net background you have to do a big effort to acquire the same knowledge in javascript frameworks such as Angular or React. Hopefully, there is now Blazor.

Blazor is the new Microsoft framework that brings C# into any browser without a plug-in which makes it an important piece to transform .Net framework into a full-stack development tool.

How Blazor makes .Net a full stack dev tool

Running a .Net app in a browser is now possible thanks to WebAssembly, a new standardized web technology.

Blazor uses a WebAssembly-based .Net runtime to download and run your app into the browser.

Actually, a Blazor-based web application is compiled like any other traditional .Net application, and then a set of files are generated, downloaded and fully run into the browser. It is important to know that, since Blazor is still in experimental stage, the app loading time may take time because of the components being downloaded (the .Net runtime and the app). But, Blazor team is already working on size optimization (merging and trimming the runtime and the app binaries, caching, CDNs, etc.).

When a Blazor app is built and run into a browser :

• C# and Razor code are compiled into .Net assemblies
• The .Net runtime and the generated assemblies are downloaded
• Blazor bootstraps the runtime and configures it to load required assemblies using javascript
• Blazor also uses javascript interop to manipulate DOM (Document Object Model) and call browser APIs

Supported features

Blazor supports all of the features of a modern app framework including :

• Component based UI
• Routing
• Layouts and browser live reloading
• Forms and validation
• Dependency Injection
• …

Besides that, Blazor apps can reference and use .Net standard libraries starting from .Net Standard 2.0 and for apps that need third-party JavaScript libraries, Blazor is capable, through WebAssembly Interoperation with JavaScript, of using any library using either C# or JS.

Creating our first Blazor app

To be able to create a Blazor app, we need :

• the .Net core 2.1 SDK (2.1.300 or later)
• VS 2107 (15.7 or later) with the ASP.Net and web development feature selected
• Blazor Language Service Extension installed

Once these prerequisites are installed, we can create our app as usual.

• Select File > New Project > Web > ASP.NET Core Web Application.
• Make sure .NET Core and ASP.NET Core 2.1 (or later) are selected at the top.
• There are now three new templates added to Blazor
• Blazor
• Blazor (ASP.Net Core Hosted).
• Blazor (Server side in ASP.Net Core)
• Choose the first one

If you’re a CLI guy you can create your app by running the following commands

dotnet new -i Microsoft.AspNetCore.Blazor.Templates
dotnet new blazor -o BlazorApp1
cd BlazorApp1
dotnet run

And you’re done. Your first Blazor app is ready to run.

We will see in the next blog post how we can build a more complete Blazor app using layouts, components and routing.