For most people who are beginning to learn .NET Blazor, it is probably easier to build it than to understand what it really is. At least, that’s how I felt when I first started learning it.
Let’s begin with my own definition of Blazor.
Blazor, a portmanteau or “Browser” and “Razor”, is a single-page application UI framework for building interactive, cross-platform applications without the need for JavaScript, but instead leverages knowledge of Razor, C# and other technologies under the .NET platform.
It’s a great definition I think. It has enough information to get an overview of Blazor, but I think it doesn’t tell you why there’s so much hype about Blazor. So, today I will give you at least 5 reasons why Blazor is awesome.
My goal is to try to explain these 5 points in simple terms. Secondly, I will attempt to explain why they are significant. Thirdly, I will attempt to explain why I think, it can be a replacement or, even, a better alternative to other web frameworks for building applications.
And finally, I hope that at the end of this article, I will be able to convince you why Blazor is awesome and why it deserves the hype!
Content
1. Blazor is Cross-Deployment
By cross-deployment, I mean that Blazor can be deployed either on the client-side or the server-side.
Blazor is a UI framework used for building web applications using .NET, that can run all modern browsers through WebAssembly(WASM), or on the server-side using SignalR.
There are two hosting models in .NET for Blazor – 1) Blazor Server and, 2) Blazor WASM. In fact, Visual Studio gives you two options when creating what type of Blazor project – a template for Blazor Server or or a template for Blazor WASM application. One runs in the web server and one is intended to run in the web browser. Let’s talk briefly about those two models.
In the host model, Blazor runs in the web server which processes client events using SignalR. The Host model provides several benefits: smaller download size and most importantly having all the server-side APIs at your disposal.
In the WASM model, the Blazor application, including the .NET runtime and all its dependencies are all downloaded into the browser, and deployed like a static website! To add a final point, as the definition stated earlier in my introduction, Blazor WASM is a Single-Page Application (SPA) framework that is loaded by the browser only once – just one web page that dynamically updates content of the page via AJAX or JavaScript.
And if you are not familiar with SPA, you can checkout Netflix website because it uses SPA framework(AngularJS) to build a rich, engaging but very simple UI that enrich user functionalities, which means that the user can navigate within Netflix without ever refreshing the page. This is significant for .NET programmers, as they can now replace AngularJS, ReactJS, or VueJS with Blazor!
And WASM is the reason why I made the second point.
2. C# Runs in Web Browser
Blazor makes it possible for C# to run in web browser!
Being able to build an application written in any programming language and running it inside a web browser has always been a passing fancy in web development for decades… until 2017 when WebAssembly or WASM was released and integrated into web browsers. According to Mozilla‘s own definition, WASM is a new type of code that can be run in modern web browsers. It is assembly-like language with a compact binary format that can run with near-native performance. Most importantly, it is a compilation target for languages like C++, C# and Rust that enable them to run on the web!
This is one of the biggest selling point of Blazor framework because it allows .NET developers to leverage their knowledge of C# and Razor to create interactive web applications that are executed inside the browser. Write a single C# code base and libraries, and reuse them in either client-side or server-side applications. WASM has made it all possible, and practically removed the necessity for JavaScript which for years has always been the go to language for building interactive client-side web applications.
3. Blazor is Cross-Operating System
By cross-operating system, I mean Blazor can run in multiple platforms such as Windows, macOS, Linux, Android and iOS!
The Blazor Hybrid application combines desktop and mobile native client frameworks with .NET Blazor. And this is all made possible by the new .NET Multiplatform App UI(.NET MAUI). You see, Blazor support is integrated into .NET MAUI framework, and when you use MAUI and Blazor together, you can reuse your Blazor components across web, desktop, and mobile.
To give you a little more background on .NET MAUI, it is the successor to Xamarin.Forms, which is open-source, cross-platform framework for building apps that run natively on Windows, macOS, Linux, Android and iOS all sharing a single code base. Similar to Google’s Flutter and Facebook’s React Native, the .NET MAUI framework, allows us to build hybrid mobile applications that run natively on Android and iOS devices while using the same code base for both OS.
If you’re learning how to develop mobile applications on .NET platform, definitely go for .NET MAU, instead of Xamarin, as MAUI has been implemented from the ground up to support .NET 6 and up while Xamarin is a .NET Framework.
.NET MAUI Blazor also brings us to my fourth point.
4. Blazor is Cross-Application
Not only is Blazor cross-client-server, and not only is it cross-operating system, it is also cross-application. By cross-application, I mean Blazor can be a web application, a desktop application or a mobile application!
I already discussed that we can run Blazor inside the web browser as an SPA, but Blazor can also be a desktop application and a mobile application with native capabilities, meaning you can access a device’s camera, for example.
Within the .NET MAUI framework, a Blazor application can run natively in your Android or iOS, and it can run natively in your PC or Mac as a desktop application.
With.NET MAUI, you can create an application for any device from a single code base and project system, using one language, set of libraries, and one user interface stack across them all. The.NET MAUI framework targets Windows, iOS, Android, and MacOS, enabling developers to create user interfaces in C# and XAML for all platforms from single codebases. In addition, the.NET MAUI, Multi-Platform UI is a multi-platform framework, which allows native mobile and desktop apps using C#.
Which brings me to the last point.
5. Code Reuse
Blazor applications are composed of reusable and lightweight Web UI components that are implemented using C#, HTML, and CSS, and most importantly, can be shared across projects.
What is a Blazor component, you asked? A Blazor component represents part of the UI, such as a page, a a data entry form, or a dialog. A page that displays an employee record, for example, is a complete component on its own(called a Razor page or Razor component), and it can be reused throughout an application, and also across multiple applications.
And what does it mean to be reused, you asked? This means that developers can keep the Web components in a single place and reuse them across the Blazor apps, whether this app is web-based or mobile-based or desktop-based.
With .NET MAUI, you can build multi-platform Blazor apps, sharing a codebase, which can be natively launched on Android, iOS, macOS, and Windows. .NET MAUI allows you to reuse your Blazor UI elements to create platform-agnostic apps, running like native software according to operating system and device specifications.
This UI pattern makes it easy to build highly maintainable, reusable UI components that can be used as small as a widget, or as big as a page functionality.
Conclusion
To summarize, UI components are at the core of Blazor Framework applications, since they allow us to reuse code, cut down development time, and improve our productivity. Blazor’s robust component pattern for the UI, is a result of “trial and error” learned from earlier UI frameworks like MVC, Web Forms, Windows Forms, WPF, and Xamarin MVC. In the same vein, .NET MAUI is a culmination of things learned from the Xamarin platform.
Blazor by itself allows you to build Single-Page Applications(SPA) and Progressive Web Applications(PWA) just like React, Angular and Vue do. With the newly released .NET MAU and the built-from-the-ground-up .NET 6, Blazor has transcended into a general purpose framework for building all types of applications. We haven’t tapped the full potential of Blazor, and I am fortunate enough to learn it from the very beginning, and I hope you do too, because it will be the next BIG thing in web development, and it will be AWESOME!
