Today we will explore what Blazor is
- Blazor Concept
- How it works
- What it actually does Blazor
- What problem it solves
- Take away
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
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.
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(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
Forms and validation
Live reloading in the browser during development
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.
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.
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!.