Today we will explore what Blazor is

Blazor is an experimental project. It changes frequently and evolves rapidly. Therefore, it is possible that some content on this website is already outdated.

This is the first blog post of the Blazor series, to install dependencies and run your first Blazor application visit the next post Blazor: Getting Started

Blazor

A web framework that lets developers use C#, Razor, and HTML to create Web apps, with the help of WebAssembly, a low-level assembly-like language that serves as a compilation target for higher-order languages.

Blazor description from repository wiki

“Blazor is a .NET web framework that runs in any browser. You author Blazor apps using C#/Razor and HTML.

Blazor uses only the latest web standards. No plugins or transpilation needed. It runs in the browser on a real .NET runtime (Mono) implemented in WebAssembly that executes normal .NET assemblies. It works in older browsers too by falling back to an asm.js based .NET runtime.”

How it works

Blazor takes advantage of a 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.

Blazor applications don’t contain the actual runtime, that’s what Mono brings Mono aims to run in 2 modes via WebAssembly, interpreted and AOT.

Interpreted

Mono runtime is compiled to WebAssembly, wich can then be loaded and executed by the browser. Blazor applications dlls, wich are just standard .NET dlls, can then be loaded and executed by the mono runtime. This mode seems likely to be the quickest in terms of development speed as reloading application dlls is very quick.

AOT

AOT(Ahead-of-Time) mode the Blazor application is compiled directly to WebAssembly at build time. Parts of the mono runtime are still loaded by the browser to handle low-level operations such as garbage collection. But essentially the application is executed as regular WebAssembly. AOT mode could have the potential to be the better option for production as it would allow the chance to perform IL stripping, a .NET equivalent to tree shaking. However, this is all still being assessed.

What it actually does Blazor

We know how Blazor works but what can we actually do with it? well, here a brief list of what you can do with Blazor. According to its GitHub site, Blazor will have all the features of a modern Web framework, including:

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

What problems does it solve

Today’s .NET developers have a hard time porting their software to the web, needing to depend on different frameworks(mostly JS Frameworks) in order to provide the user with a web experience. Blazor makes porting C# project to a web application in one single deployment while still writing C#, better yet you get a .NET runtime and you don’t even have to install .NET on the server.

Benefits over JavaScript Frameworks

C# and ASP.NET can be used both on the client and server-side, this removes the need for javascript libraries. You can also use shared models, even functional code, that will reduce duplicate code and will save time while preventing mistakes caused by the client-server model mismatch. Thanks to WebAssembly Blazor application can run at a low-level providing a faster execution and loading time.

Blazor VS AngularJS and ReactJS

AngularJS: is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write.

ReactJS: React allows developers to create large web applications which can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application.

Blazor: is an implementation of .NET in the browser using WebAssembly, you can create SPA(Single Page Application) using C#/Razor, this opens the door for .NET developers to the web developing world without the need to use JavaScript, better yet you still have the option to use JS if needed.

AngularJS and ReactJS are based on JavaScript this means that they inherit all of JS ‘hacks'(click here to check out the bad side of JavaScript), and don’t get me started on the pain of writing code, easily not the ideal language but is still the standard of the web. That is where Blazor comes in using C# best practices, eliminating JS problems and better yet you don’t need to type a single JS code, wanna know whats better than that? you can still use JS if you want to. The idea behind Blazor is that you can develop a front and back-end on C# and .NET, taking advantage of all things the runtime has to offer. Blazor gives .NET developers a tool to make there way into front-end development.

Take away

Now that you know how the core Blazor works we can start to dive deeper into the framework. Keep in mind that is still in development and a lot of things can change throughout time, click here to check out  Blazor GitHub repository and get up-to-date on the changes and updates. The next post we will run our first application and see Blazor in action. See you next time!.