In this article, we’ll address some common Blazor problems. Specifically, “What Blazor”, but more importantly,” why Blazor”. Why care about Blazor and why choose Blazor when you already have Angular, React, Vue, or some other JavaScript framework? What is WebAssembly all about? We’ll cover the history of Microsoft’s Web application development framework and how we see its bright future.

What is a Blazor

There are several common definitions of Blazor, the first of which is very simple:

Blazor is a use of. NET to build an interactive client Web UI framework. – Microsoft documentation :Blazor

As the official documentation states, it is first and foremost a “framework” — it is used to build client-side Web UIs. But how is it different from other client-side frameworks for building Web UIs? What makes it so special? I want you to ask yourself, “What’s different about.NET?”

Here’s another definition:

Blazor is a free and open source web framework that allows developers to create web applications using c# and HTML. — Wikipedia :Blazor

Oh, it’s free — that’s good. But to be fair, there are many other free frameworks available for building client-side Web UIs. Why should I care about Blazor?

Why Blazor?

Historically, all of Microsoft’s previous Web UI frameworks were based on completely different architectures and presented on the server side. Blazor set out to bring c# development to the web client in a way that was only possible when WebAssembly came along.

WebAssembly(abbreviated Wasm) is a binary instruction format for stack-based virtual machines. Wasm is designed as a portable compilation target for programming languages, enabling client and server applications to be deployed on the Web. – webassembly.org

Wow, that sounds like a mouthful! Let’s break it down:

In this case, “binary instruction format” means that it is byte code that extracts an abstract syntax tree (AST) from a non-javascript programming language and converts it to binary.

Wasm sits on top of a “stack-based virtual machine” — which identifies core features based on “push” 缟 and “ejection” tracks. The instruction is pushed and the evaluation is ejected. While this is an oversimplification, the concept is still there and the implementation details are not that important. Single-threading, application-memory constraints, and so on all have some limitations, but these limitations are not emphasized when Blazor manages interoperations with Wasm.

It is important to note that Wasm is a “portable build target”. This means that C, C++, Rust, C#, and other non-traditional Web programming languages can be compiled with Wasm in mind. This results in the Wasm binary, which is based on open standards but comes from a programming language other than JavaScript.

In short, Blazor is interoperable with JavaScript and even has a different hosting model — server-side and Wasm client. More on that later…

What is a JavaScript?

Is Wasm the end of JavaScript, and what does that mean? The answer is no. JavaScript isn’t going away — Wasm should be considered a complement to JavaScript.

Expect JavaScript and WebAssembly to be used together in many configurations. Webassembly.org: FAQ

analogy

Thanks to Wasm, some of the limitations of web browsers have been improved, which is why I believe:

“With WebAssembly, the Web browser is more like an app store — the end user experience is closer to native performance.”

— David Song

There seem to be an infinite number of new Cases specific to Wasm that cannot be implemented using JavaScript alone. It’s easy to imagine applications delivered to your browser via the Web, with Wasm providing a more complex and resource-intensive case. That’s why I think this is a possible paradigm shift for web application platforms.

using

Wasm is supported in all major browsers and reaches almost 93% of all users – can I use “WebAssembly”? This is different from the plug-in based approach that Silverlight relies on. This is the future of the Web, and you’ll continue to see developers build applications using this technology.

Safe and reliable

Wasm is as secure as JavaScript.

WebAssembly describes a memory-safe, sandboxed execution environment that can be implemented even within existing JavaScript virtual machines. When embedded into the Web, WebAssembly enforces same-origin and permission security policies for the browser. – webassembly.org

In other words, Wasm is confined to the same security sandbox as JavaScript.

Web application platform

With modern Web application development, you want your application to be responsive on both desktop and mobile browsers. Modern Web applications are more complex and rich than their predecessors, with some expected features, including real-time Web capabilities, progressive Web application (PWA) capabilities, and choreographed user interactions. For the first time,.net developers can use their existing C# skills to build various applications on the Web. In my opinion, this helps blur the line between back-end and front-end developers — but more broadly extends application development through the Web. I believe that the idea of using the same programming language on both the client and server will lead to faster adoption, especially of Node.js.

Be familiar with

It may be easy to accept that you can develop using your existing C# skills, but it’s easy to overlook the fact that HTML, CSS, and JavaScript are still there and available. With this, you can continue to use your HTML and CSS skills, your favorite CSS libraries, and easily work with existing JavaScript packages. After all, you’re still building web applications!

A brief history of

Back in 1996, Active Server Pages (ASP) provided the first server-side scripting language and engine for Microsoft’s dynamic web Pages. With the development of the.NET Framework, ASP.NET was born, and with it, Web Forms. Web Forms was (and still is) used by many people who like.net functionality, which allows HTML to be rendered on the server side.

After a while, ASP.NET model View Controller (MVC) was introduced, which made Web forms look dull. MVC makes it imperative for ASP.NET developers to understand the three pillars of the Web: HTML, CSS, and JavaScript. In MVC, there is an easy approximation of consistency to Web standards. MVC also adds a different programming model, based on controllers and views. This helps to address some of the resistance from the developer community, who have noticed that their development interactions with Web Forms are not stateless — from the illusion of a framework that contradicts the nature of HTTP.

ASP.NET Web API is growing in popularity as developers embrace the power of.NET. Web API is beginning to be accepted as the standard for building.NET-based HTTP services.

Finally, Razor Pages, the Razor view engine using MVC, came to the stage. The innovations of ASP.NET Core make this possible.

ASP.NET Core is a cross-platform, high-performance, open source framework for building cloud-enabled modern Internet-connected applications. – Microsoft documentation: introduction to ASP.NET Core

ASP.NET Core provides “first-class citizenship” for all the basics you would expect in modern development, such as (but not limited to) dependency injection, strongly typed configuration, logging, globalization and localization, authentication, and hosting.

Razor Pages brings controllers and views together to make it more logically cohesive, more true component oriented, and built on top of the Web API infrastructure.

After Razor Pages comes Blazor.” The name “Blazor” is a play on words, combining B rowser and R azor, because developers are good at naming things — right? This is where we are today, in a world with Blazor and all its features. A first for.NET, this is a single page application framework.

Single-page application (SPA)

Blazor is Microsoft’s only.NET based SPA framework. There are many popular SPA frameworks, including:

  • Angular
  • React
  • Vue
  • Svelte

The main difference is that these are all based on JavaScript, not Wasm.

Sometimes, developers who build applications using Blazor confuse the differences between the two managed models. There is a misconception that Blazor server (server-side) is not A SPA. The server-side nature feels more like previous non-SPA.NET Web application frameworks. But let’s look at the definition of SPA:

“A single page application (SPA) is a Web application or website that interacts with the user by dynamically rewriting the current Web page using new data from the Web server, rather than the default way the Web browser loads an entire new page.” – Wikipedia: A Single page application

Blazor satisfies this definition regardless of the managed model. Using a Blazor server, the server exposes a SignalR hub with a specific Blazor protocol that is responsible for communicating updates to the document Object model (DOM) in the client application in real time. When there are differences (or deltas) in the DOM, the changes are immediately reflected.

In Blazor WebAssembly, when a client requests an application, it is served as some HTML, CSS, and JavaScript — just like any other Web application. The blazor.webassembly.js file boots the application and starts loading the.NET binaries, which can be viewed over the network in the “Network” TAB of your browser.

Open source

It is open source as part of the ASP.NET Core GitHub repository.

Github dotnet/AspnetCore:

ASP.NET Core is a cross-platform.NET framework for building modern cloud-based Web applications on Windows, Mac, or Linux.

I’m a big supporter of open source software development. For me, being able to openly see how a feature is built, designed, and implemented is a game changer. The ability to publish issues, propose features, collaborate with development teams and others, and create pull requests centers the software community. No doubt this will result in a better product in the end!

Code reuse

SPA developers have been fighting a losing battle for years, where Web API endpoints define a payload of a particular shape — the developer must know the shape of each endpoint, preferably mapped to a model on the client side. This is a very tedious process and prone to errors. Blazor can alleviate this concern by sharing models from.NET Web API with Blazor client applications.

The entire.NET library can be shared and used in both server-side and client-side scenarios. Leveraging existing logic, functionality, and capabilities allows developers to focus on more innovation because they don’t need to redefine the underlying tools.

tool

The productivity of the development team is always a major concern for all types of application development. Existing developer tools are key to success, and if your team fumbles or strives to complete common programming tasks — the entire project may fail. With Blazor, you can use proven developer tools such as:

  • Visual Studio
  • Visual Studio for Mac
  • The Visual Studio code

In addition, the.NET CLI has become a powerful productivity tool with new (template), build, restore, publish, run, test, package, and migrate commands (just to name a few) — using it greatly increases your project’s chances of success.

All of this is built in the most powerful and modern programming language in the world today — in my opinion C#.

.NET APIs

As a developer with more than a decade of experience developing real Web applications, I can safely say that I’ve used them reliably many times. NET for enterprise production application development. The.NET API surface Area itself is huge, and as an ecosystem of third-party packages provided by NuGet, isn’t it worth loving?

Why is this important?

I witnessed one recently. The DEVELOPMENT process of the NET API, from its inception to its results – I have observed a very mature and stable process.

Remember, this is completely open for the public to see. At first, during early discussions, an idea was born and then presented as an official proposal on GitHub. This question contains everything you can expect from the proposal, the problem statement, the use case, the sample syntax, the proposed API Surface area, the sample usage, and even links to comments from the original discussion and ideas.

The proposal is subject to lengthy discussions, suggestions, reasoning and negotiations. The people who attend the open API design review meeting finalize a draft. The official.NET API design review meetings follow a weekly schedule. During the review process, comments will be captured, GitHub tags will be applied, and approval will eventually be obtained — thus, problematic. NET API is encoded as a code snippet.

From here on, the issue becomes a reference point for meeting the pull request for a proposal. Developers handle problems, implement apis, write unit tests, and create pull requests (PR). PR is reviewed, and when it is consolidated, the API must be documented, communicated, captured/reported, promoted, shared, analyzed, and so on.

All of these, like this one. NET API, there are thousands of them. NET API exists. With the support of all.net contributors, you will be well assisted. For more information, see the Official API Review Process.

I asked a friend who cares a lot about the.NET API for some appropriate words on the subject:

“The.NET platform prides itself on having a very useful set of apis that make your use very efficient no matter what kind of application you’re building. With Wasm, you can also use this capability when building browser-based applications using Blazor WebAssembly.” – Immo Landwerth

support

For all.NET products, there are a variety of support strategies. Understanding the release lifecycle and its supporting strategies is often an important consideration for development teams. In most cases, it is recommended to build the orientation. NET Long Term Support (LTS) version of the production-ready application. However, some companies and development teams choose to track current (or even preview) releases — they tend to migrate more aggressively. For more information, see the official. NET site for support details:

  • .NET support policies
  • What is coverage

Developer community

I asked some of my friends in the Blazor developer community what they thought, and when asked “Why Blazor?” “They replied:

Blazor’s component model makes building applications a joy. It’s simple, but it offers a lot of customization when you need it. — Chris Santi @chrisainty

I agree with Chris. Developing simple and customizable applications is a lot of fun.

.NET productivity is high. I can use my existing skills, workflow, tools, and libraries I’ve written before. There is no NPM or Webpack, however, I do. NET stack and its ecosystem, which makes me super efficient. – Ed charbenau @ edcharbenau

I totally agree with Ed. Productivity is a key driver — and not having to write a lot of JavaScript can certainly ease the pain of Web development.

The Blazor developer community is booming:

Awesome Blazor: Collection of Blazor resources

Awesome Blazor Browser: Search for Awesome Blazor resources

Blazor Memorial Day :2021

Prospects for development

In addition to the amazing Blazor developer community, developer tools, open source ecosystem, and strong opinions from respected industry leaders, there are entire UI component developments from major component vendors who are actively building Blazor components (in alphabetical order):

  • DevExpress
  • GrapeCity
  • Infragistics
  • Radzen
  • Smart HTML Elements
  • Syncfusion
  • Telerik

The customer story

Whenever Microsoft customers are excited to share their stories, they are also speaking for themselves – here are two Blazor success stories:

  • General aviation
  • The postage

code

To quickly create a Blazor WebAssembly project, use the dotnet new Blazorwasm.NET CLI command.

In the previous command, we specified the name of the project (-n), and we did not want to restore. If you want to open Pages/Counter. In the Razor file, you’ll see some Razor code that looks like this:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @_currentCount</p>

<button class="btn btn-primary"
        @onclick="IncrementCount">
     Click me
</button>

@code {
    private int _currentCount = 0;

    private void IncrementCount() =>
        ++ _currentCount;
}
Copy the code

This is a simple counter page. It is considered a page rather than a component because its @page directive specifies the page path for “/counter”. Because it’s based on the Razor view engine, it acts like a template — a place where you can refer to c# code variables in HTML. This also demonstrates @code{… } directive, which allows you to embed c# functionality directly into template files. The _currentCount variable is private, scoped to the page, and increments from the IncrementCount method. This method is called when the button is clicked and bound via the @onclick event. As the _currentCount value increases, the change is immediately reflected to the binding location. In this case, they are shown in the element as “Current count”.

The counter page is just a small example of what’s possible, and as a web developer, there are many more surprises waiting for you. I hope.net will be the tool you consider for your next Web application development project.

conclusion

As a developer, there are many tools you can choose from. For all developers, when deciding whether to use a framework, it should be a team decision. Blazor is another option, but not for all use cases — knowing when to use it is just as important as knowing how to use it. In this article, we discussed the “what” and the “why”. The word “how” has been in the news a lot.

Please consider other resources:

  • Build a Web application with Blazor on Microsoft Learn
  • ASP.NET Core Blazor is introduced
  • Blazor manages the model
  • Blazor JavaScript interactive operations
  • Blazor WebAssembly performance

Any technical questions, please ask at Microsoft Q&A.