Getting Started with Blazor

JavaScript frameworks are widely used in the development of web applications. Instead of using JavaScript frameworks, Microsoft released Blazor (Vue, Angular, React etc.). In this article, we’ll learn more about Blazor.

What is Blazor?

• Blazor is a new open-source and cross-platform framework developed by Microsoft’s ASP.NET team for building interactive client-side UI. It was first released in 2018.
• It is compatible with Windows, Linux, and macOS.
• It enables the creation of web UI using C# and Razor syntax rather than JavaScript. As a result, the same language can be used for both backend and frontend development.
• Its name is derived from the words Browser and Razor.
• It is used to create web UI in client-side applications, and it makes use of WebAssembly support.
• Blazor allows us to use both advanced IDEs like Visual Studio and lightweight IDEs like Visual Studio Code.
• Blazer sources were kept in a separate repository until the Blazor was merged with ASP.NET 5.
• You can now find Blazor’s sources and issues in the ASP.NET Core Repo.
• Instead of installing a plugin or performing a transpile process, the C# code you write for client-side will work in all modern browsers with .NET Runtime Environment with the help of web assembly.

How it works?

Blazor components can be created by combining Razor syntax with .NET code. Instead of .cshtml files, Razor files are used for implementation. UI event handling, data binding, and rendering UI updates are simple to implement and work in tandem with Blazor components.

To create a Blazor web app, there are two hosting options:

Blazor Server

Blazor components are executed on the ASP.NET Core app server in this hosting mode. The SignalR connection is used for all UI interactions and updates. Blazor Server apps are quick to load and simple to set up.

Blazor WebAssembly

Blazor components are executed on the browser in this hosting mode, which uses a WebAssembly-based.NET runtime on the client side. This .NET runtime is downloaded along with your Blazor WebAssembly app and allows you to run standard .NET code directly in the browser. There is no need for plugins or code translation. Blazor WebAssembly is compatible with all current web browsers, both desktop and mobile. Blazor WebAssembly apps, like JavaScript, run securely on the user’s device from within the browser’s security sandbox. These apps can be deployed as completely standalone static sites, with no .NET server component at all, or they can be paired with ASP.NET Core to enable full stack web development with .NET, with code easily shared between client and server.

Relation With WebAssembly

WebAssembly, also known as WASM, is a new standard that can be used in modern web browsers to add language diversity to the web platform. WASM is the fourth language to run natively in modern browsers, joining CSS, HTML, and JavaScript.

It is a low-level assembly-like language with a compact binary format that allows code written in multiple languages, including C/C++, Java, and Rust, to run on the web with near-native performance.

WebAssembly’s goal is to simplify high-performance applications on web pages. However, its format is intended for use in other environments and can run alongside JavaScript.

Getting Started with Blazor Components

.razor files are used to create Blazor components.

Razor syntax is used in .razor files.

Instead of using JavaScript, jQuery, or other scripting languages to make API calls, overriding component life cycle methods and component methods can be implemented in the @code section.

Things that can be done with using Blazor

Blazor provides developers with an alternative option for cross-platform desktop, web, and mobile application development. In this manner, The net usage area is expanding, as is the capacity for hybrid application development. To give a few examples, consider the following:

ElectronJs

To summaries ElectronJs, as stated on the Electron official website, developers can create cross-platform desktop apps using JavaScript and HTML. JavaScript means that developers can use frameworks such as React, Angular, and Vue in addition to pure JavaScript.

Instead of JavaScript, Blazor can be used, allowing developers to create cross-platform desktop apps with Electron and Blazor.

Xamarin

Creating a native C# application with Xamarin became possible, but in these applications, JavaScript was used for state management, which developers require.

It is now possible to use Blazor instead of JavaScript in the Xamarin project for mobile development.

Single Page Application (SPA)

SPA is one of the web app development techniques (Single Page Application). Because of the need for state management in SPA, JavaScript frameworks such as Vue, React, and others must be used.

Blazor has made it possible for any C# developer to create an SPA application.

Conclusion

Although JavaScript is the most popular, .Net developers can be able to develop cross-platform applications with Blazor without leaving .NET world to become a full stack developer. Blazor will develop and spread further with the .NET 5 framework. Of course, since Blazor is still in development phase, it has shortcomings compared to its equivalent JavaScript frameworks.

We will follow Microsoft’s developments in this field together.