Header add

Today in this article we will learn how to start the blazor app in visual studio.

Introduction to Blazor:

Blazor is a free, open source Web framework to build Web apps using C# that run in a Web browser. Blazor is a new .NET web framework for creating client-side applications using C#/Razor and HTML that runs in the browser with Webassembly. It can simplify the process of creating single page application (SPA) and at the same time enables full stack web development using .NET.

What is WebAssembly:

WebAssembly is developed as a web standard and is supported by all the major browsers without plugins. WebAssembly is low-level assembly-like language with a compact binary format that can run in modern web browser. Since it is a low-level binary code, it cannot be read/written by humans but we can compile the code from other languages to WebAssembly to facilitate their execution on the browser. It is a subset of JavaScript and is designed to complement and run alongside JavaScript. It enables us to run code written in multiple language on the web at near native speed.

Why use Blazor ?

Blazor makes web development easier and more productive by touch with .NET. It runs in all browsers on the real .NET runtime and have full support for .NET Standard without the need of any extra plugin. Blazor is fast, have reusable components and is open-source with a great support from the community.
Blazor also supports features of a SPA framework such as:
  • Routing
  • Layouts
  • Forms and validation
  • JavaScript interop
  • Build on save during development
  • Server-side rendering
  • Dependency Injection
Blazor Hosting Models 

We can host the Blazor application in two ways.

Server Side 

This is also called the server hosting model and in this model, the application is executed on the server from within an ASP.NET Core application. Between the client and the server, a SignalR connection is established. When an event occurs on the client such as a button click, for example, the information about the event is sent to the server over the SignalR connection. The server handles the event and for the generated HTML a diff (difference) is calculated. The entire HTML is not sent back again to the client, it's only the diff that is sent to the client over the established SignalR connection. The browser then updates the UI. Blazor embraces the single page application architecture which rewrites the same page dynamically in response to the user action. Since only the diff is applied to update the UI, the application feels faster and more responsive to the user.

We use the Blazor Server App template, to create a Blazor application with the server hosting model.

Blazor WebAssembly

This is also called the client-side hosting model and in this model, the application runs directly in the browser on WebAssembly. So, everything the application needs i.e the compiled application code itself, it's dependencies and the .NET runtime are downloaded to the browser. We use the Blazor WebAssembly App template, to create a Blazor application with the client-side hosting model.

In this tutorial we discussed how you setup machine for Blazor development. If have any question related to this topic then give your feedback.

Post a Comment

Previous Post Next Post