Blazor: Full-stack web development with C# and WebAssembly

Introduction

Blazor (Browser + Razor) is an experimental .NET web framework using C# and HTML. It runs in the browser on a real .NET runtime (Mono) implemented in WebAssembly that executes normal .NET assemblies. It is based on existing web technologies like HTML and CSS, but you use C# and Razor syntax instead of JavaScript to build composable web UI. It gives you all the benefits of a rich, modern single-page application (SPA) platform while letting you use .NET end-to-end, including sharing code across server and client.

Features

Blazor will have most of the features of a modern web framework. Features are:

  • A component model for building composable UI
  • Routing
  • Layouts
  • Forms and validation
  • Dependency injection
  • JavaScript interop
  • Live reloading in the browser during development
  • Server-side rendering
  • Full .NET debugging both in browsers and in the IDE
  • Rich IntelliSense and tooling
  • Ability to run on older (non-WebAssembly) browsers via asm.js
  • Publishing and app size trimming

How it works

How Blazor works

Blazor takes advantage of few things:

WebAssembly: is used to compile C# to a low-level binary format that can run on modern browsers.

Mono: is an open source .NET runtime that can be compiled to WebAssembly bringing the .NET to the browsers.

Razor: markup syntax that lets you embed server-based code (Visual Basic and C#) into web pages. A server-based code can create dynamic web content on the fly, while a web page is written to the browser. When a web page is called, the server executes the server-based code inside the page before it returns the page to the browser. By running on the server, the code can perform complex tasks, like accessing databases.

This article is to give an overview of Blazor, what is it and how it works. My next article talks about how to start with practical example.