Ever thought of .Net running in the browser without plugins, and add-ons? This is not an idea, but a reality that could revolutionize the Asp.net development community. The latest Blazor framework designed for web app development that runs .net in the browser via WebAssembly.
Introduction to WebAssembly (WASM)
WebAssembly is a binary instruction format made for a stack-based virtual machine. Its design resembles a portable target for compilation of professional languages like C, C++, Rust; which allows web deployment for server and client apps.
Understanding the concept of WebAssembly is as important as knowing project Blazor as it would not have been possible to initiate a Blazor project without WebAssembly. The framework is built on the WebAssembly platform. Blazor is optimized for single page web applications and it also implements a .net run-time in the browser.
WASM is a low-level-assembly like a language that can be run smoothly on the web. It is an alternative to JavaScript; it can be taken as a complimentary. In simple terms, WASM based web applications can run along with those that are developed with JavaScript.
Concept of Blazor
Blazor is an open-source, free web framework that is made for building web apps using an assortment of Razor, HTML, and C#. Blazor uses the latest web standards and needs no extra plugins or add-ons for operation. You may think Angular/React, but it is C# in reality. The framework allows developers to reuse their existing skills to code for the web while letting them create a React-like architecture of state/components. All they need to use is just C#. This simplifies things if developers are already managing a full stack and working with JavaScript and with C# simultaneously.
Blazor is an experiment that uses WASM to do JS like things using C# in the browser. Developers don’t need a server to use the Blazor framework for building static sites. They can host their websites on servers like Netlify.
It is the WebAssembly that made it possible to run .net code anywhere on different modern browsers. The code expelled several issues faced by .net developers regularly. With the right deployment of Razor and WebAssembly, developers don’t need to find custom solutions to ensure the working of a website without errors on most browsers.
Blazor came from Razor
Microsoft initially experimented with ‘Silverlight’, but that user interface framework was full of technical issues. However, officials believe that Silverlight is still a critical evolutionary step that helped in creating Blazor. The updated UI framework relies on .net is an ideal option for Single Page Application frameworks. Developers who already have experience of working on .net can easily understand how Blazor works.
Blazor apps are component-based – this means these apps have great flexibility and versatility that let blazor apps to nested and re-used with small changes. The apps made with Blazor and Razor has the potential to perform with super speed, reliability, and efficiency. The framework lets developers build rich UI that is rendered as CSS and HTML.
Before the release of Blazor, Silverlight was used as a framework. WebAssembly, on the other hand, is made to ensure optimum compatibility with different yet important browsers, including Safari. While some developers will continue using JavaScript and its framework, experienced .net developers won’t shy while adopting WebAssembly.
.Net is free and includes Blazor. Developers can use it without paying any fees or license costs even if they want it for commercial use.
Interesting features of Blazor
The GitHub site of Blazor reveals that the framework will include every feature that a modern web development framework should have. Some of the features are as under:
- Routing
- Forms and validation
- Layouts
- Dependency injection
- JavaScript Interop
- Server-side rendering
Routing
A route is a URL pattern and routing is a process in which pattern matching is done to monitor the requests and find out how to handle each request. Blazor offers a client-side router that includes limited features.
Routing is an important aspect of web applications. It ensures that the client request addresses the right piece of code which is written to handle a certain request. In simple terms, it is the process that helps in routing the requests to the relevant code as defined in the route.
Forms and Validation
DataAnnotations form validation is supported by client-side Blazor. It is simple and intuitive and shares great flexibility. The form validation is implemented mainly on the namespace “Microsoft.AspNetCore.Components.Forms”. The main class includes:
- AspNetCore.Components.Forms.EditContext
- AspNetCore.Components.Forms.EditForm
- AspNetCore.Components.Forms.ValidationMessageStore
Layouts
The Layout is another component that can be defined in a Razor template or C# code and can apply data binding, dependency injection, and more. It also includes two extra aspects:
- Inherit from BlazorLayoutComponent
- The layout component inherits from BlazorLayoutComponent
- It adds a property body to the component containing the content which is to be rendered within the layout.
- Body keyword
- The Razor Keyword @body is included in the layout component
- During rendering, layout content replaces the keyword
Dependency Injections
DI or Dependency Injection is a way to achieve Inversion of Control (IoC) between classes and their dependencies. In simple words, it is a technique used by experts to access services configured in a central location.
JavaScript Interop
It is a fact that Blazor is bringing a revolutionary change in web technology; however, it still needs JavaScript to apply web features that cannot be achieved by Blazor alone. For this, Blazor experts have introduced JavaScript Interop support that allows developers to use JavaScript functions from C# and vice versa.
Server-side Rendering
Blazor framework is a client-side web framework and its latest version 0.5.0 offers flexibility to run Blazor in a separate process from the rendering process. Inside Blazor, the component logic and DOM interaction are happening in the same process. With the Server-side rendering update, developers can run Blazor apps on the server.
Microsoft introduced Blazor to provide the .net developers a robust frontend and backend solution. This web UI framework helps bring the power of .net to the client-side.
