WHAT IS BLAZOR & WEB ASSEMBLY?

WHAT IS BLAZOR & WEB ASSEMBLY?

In this blog, I will be mainly talking about Blazor and WebAssembly. These two opensource are really getting more attention from many developers and I will explain why.

Topics:

  • What is Blazor & Blazor WebAssembly?
  • What is the two Blazor Hosting Model?
  • The Pros and Cons of each Hosting Model
  • Web Assembly VS Server-Side

So WHAT is Blazor ?

Blazor is a framework that allows developers to create an interactive user interface / and or applications using C#, mainly through a web browser. C# with Blazor, we can use a Razor syntax within a Razor page component to render dynamic data. Blazor acts like the other Javascript frameworks like Angular, Vue, and React for building an interactive Single Page Applications (SPA).

In the past years, To build a Single Page Application (SPA) and make reusable components then you need something like latter. Now, you can build a SPA with Blazor using C# for your the client-side and Asp.net core with C# as your API, or any computer languages you want to use.

Now, WHAT is WebAssembly?

WIKIPEDIA description, WebAssembly (often shortened to Wasm) is an open standard that defines a portable binary-code format for executable programs, and a corresponding textual assembly language, as well as interfaces for facilitating interactions between such programs and their host environment.

In the past decades, if we want to create an application that runs in the browser, the developers are forced to use Javascript parser. With WebAssembly, C# and other programming languages can now run in the browser. The main goal here is WebAssembly (WASM) won’t replace Javascripts but will expedite the execution because your code doesn’t need the Javascript engine parser.

Image result for how webassembly works
Credit: William Martin


Using Blazor we can:

  • Take advantage of .NET Ecosystem, Many developers support it.
  • Use LINQ and Asynchronous programming
  • Able to share code in the front-end and the backend
  • Can Invoke JavaScript; JavaScript can Invoke C# (Vice-Versa)
  • Components rich

The Two Blazor Hosting Models

Client-Side App Model + Blazor WebAssembly

Image Credit: Microsoft

Pros: Blazor + WebAssembly (Client-Side Model)

  • Can run .Net application on top of WebAssembly in the browser
  • You can use any desired programming language for your API. Yes, you can use PHP and other programming languages.
  • You will have the option to start Blazor hosted with Asp.net core. This I deal to use if you want to use C# + asp.net core as your API in the same location and make more reusable code.
  • Highly scalable because loads are not really happening in the server but in the client-side (Serverless).

Cons: Blazor + WebAssembly (Client-Side Model):

  • Need to download the .Net runtime + DLL required in the browser once.
  • Only supported to latest browsers that support WebAssembly. The good thing is any modern browser support WebAssembly these days.

Server-Side App Model + Signal R

Blazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection
Image Credit: Microsoft

Pros: Blazor + Signal-R (Server-Side)

  • The Blazor app runs in the server and users interact with it through Signal-R connections for real-time communications.
  • The client doesn’t have to download anything besides the browser.
  • Devices with limited resources can also run the app without problems.
  • Have more advantages with the capabilities of .net core.

Cons: Blazor + Signal-R (Server-Side)

  • Blazor app limitations relate to the server.
  • Server-side needs to handle all concurrent requests.
  • End users(Clients) need the server up and running all the time.
  • A huge amount of HTTP requests will result in latency.

Some promising numbers for Server-Side Model:

  • 1VCPU and 3.5GB of memory handles 5, 000 users concurrently
  • 4VCPU and 14GB of memory handles 20, 000 users concurrently

Hosting Model Summary

Leave a Reply

Your email address will not be published. Required fields are marked *

AVAILABILITY

Available Hours
Mon - Sun 09:00 - 21:00
ContactUs@Cengdev.com