A few years ago when Microsoft released Razor it was considered revolutionary. This server side markup language allowed developers to bring server side code to web pages. But it did not stop there, Razor syntax was designed to be easy to read and learn which was great for attracting new developers. Because of this and its power, it wasn’t long until it started gaining ground.
So even though this technology allowed developers to handle all server side logic using .NET and bring the data to the client side through Razor, Microsoft still had no solution to compete with JavaScript frameworks like Angular, React and Vue on the front end.
That gap got Microsoft engineers thinking of ways to bring the power of .NET to the client side. Their journey inevitably lead to Web Assembly. For those not familiar with this technology. WebAssembly or WASM for short is a…
new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.
In a nutshell WebAssembly makes running .NET code pretty much anywhere possible. This advancement solved many problems for .NET developers looking to run their code in modern browsers. But most importantly it paved the way for Microsoft to extend the reach of their existing Razor technology.
Enter Blazor!
The result is the perfect solution to create a competitive alternative to popular Single Page Application frameworks while leveraging all the power of .NET. The dream that started with Silverlight is finally becoming a reality. Blazor pairs familiar Razor markup with things like data-binding, dependency injection and even allows calls to and from JavaScript through JavaScript interop.
Now developers can leverage their knowledge of C# across server and client giving them access to .NET and its libraries. To make things better Blazor apps are component based. This allows them to be nested and re-used making them very flexible. The result is fast performing, rich UI rendered as HTML and CSS.
Whereas before Silverlight was hindered by adoption concerns because of its lack of platform support, WebAssembly is supported by all major browsers including Safari on iOS. Yes shocking I know. This puts it on equal footing with JavaScript and competing Single Page Application frameworks in the fight for web dominance.
There are some things to keep in mind if you plan to jump on Blazor at this moment. Blazor inherits years of maturity from .NET and Razor and is very capable, but it still does not deliver certain features which might be show stoppers for some of you. I am going to mention what most will spot right away.
The first limitation worth noting is Debugging. In the current release is still a very limited experience. In many cases you will have to add extensive logging to your code in order to track down bugs.
Another possible problem is application size, Blazor applications bring with them all of your dependencies. This means a very basic application could carry with it anywhere from 2 to 3 MB. This might not seem like much, but its actually quite substantial in the world of web applications. I would like to point out that caching drastically reduces this traffic, but there is a substantial initial load impact. Microsoft is actively working on reducing the footprint of Blazor applications so expect this to get much better over time.
First Load
Cached
If these current shortcomings don’t necessarily worry you too much, below is some information to get you started.
First you’ll need to install the latest .NET Core 3.0 SDK. You can find that here.
The next step is to install the Blazor templates by running the following command in a command shell.
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview6.19307.2
For instructions on how to get started with your preferred IDE head over to Microsoft’s documentation portal here and follow the instructions listed for the tool of your choice.
