Q1. Is Microsoft Blazor Framework faster than other SPA frameworks for example Angular, React or Vue compiled in JavaScript?

Blazor uses web assembly, On paper web assembly should be faster than any JavaScript library, however not all browsers have a mature web assembly parser yet. So you might find that browsers will not run web assembly in an optimal speed as of now.

You can create a small blazor app and run it in Firefox, chrome or edge. In most cases Firefox runs blazor apps much faster than chrome or edge, which implies that browser makers still need to improve, even Firefox can improve.

If your app needs to access DOM frequently, then definitely web assembly / Blazor will be slower compared to any JS libraries since web assembly can’t directly access DOM.

By itself, WebAssembly cannot currently directly access the DOM; it can only call JavaScript, passing in integer and floating point primitive data types. Thus, to access any Web API, WebAssembly needs to call out to JavaScript, which then makes the Web API call.

Check out here for more detail.

Additionally, current implementation Blazor has its own MSIL engine on top of the browsers web assembly Engine, which means there are two interpreters working to run a Blazor project, Like two translators interpreting a conversation instead on one. Currently Microsoft is working on an AOT compiler, which is not yet release. Once its release Blazor will be much faster than the current implementation.

Check out this link for more updates on Blazor AOT compilation.

We can safely assume that the web assembly is the future of web development, but at the moment we can’t say anything about Blazor’s future. On paper Blazor can be faster than any framework out there, however we need commitment from web assembly maintainers, Browser developers, Microsoft and the communities to make the theories practical.

Reference link of this answer.

Q2. What is difference between Blazor WebAssembly App (with Asp.Net Core Hosted) and Blazor Server App?

There are two hosting models: Server-Hosted, and Client-Hosted. The difference is whether the app is hosted in server, or in client.

Server-Hosted Model

Server hosted model means your app logic runs in the server (you can think of it similar to what Web Forms is), you click on a button, an “Ajax” call sends the request, the server receives the request, and sends back the updated page. However, here it uses SignalR not Ajax, which is a low level socket communication (read efficient). And instead of updating a whole page, it updates only the relevant parts (thus it is a single page application).

Client-Hosted Model

Client hosted model means your logic runs within the browser. Think of it as if your C# logic is converted into JavaScript, and it is embedded in the page. So the logic runs in the browser. This could be possible after the introduction of WebAssembly.

WebAssembly App (with Asp.Net Core Hosted)

This options means having Blazor to include ASP.NET Core runtime. This is because you can write an offline app (e.g. calculator app) that does not need any kind of connection to external services, making ASP.NET Core irrelevant. However, you might want to write an online app that accesses online DB, external APIs, do verification, etc. For these kind of apps, you will need an ASP.NET Core stack to support your app.

Reference link of this answer.

Q3. How can I access the browser’s localStoarge in Blazor?

There are couple of options available to achieve this functionality. But I will explain two best approaches here.

Approach #1

You can use Blazored.LocalStorage awesome library by Chris for accessing localStorage in Blazor applications. It can be installed from NuGet via Visual Studio Package manager or using below command –

> Install-Package Blazored.LocalStorage

How to Setup

For using in Blazor Server project, You will need to register the local storage services with the _IServiceCollection _under _ConfigureServices _method in Startup.cs file.

public void ConfigureServices(IServiceCollection services){ services.AddBlazoredLocalStorage();}

For using in Blazor WebAssembly project, You will need to register in Program.cs file.

public static async Task Main(string[] args){ var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add<App>(“app”); builder.Services.AddBlazoredLocalStorage(); await builder.Build().RunAsync();}

How to Use

To use it wither in Blazor WebAssembly project or in Blazor Server project, you will need to inject the ILocalStorageService –

@inject Blazored.LocalStorage.ILocalStorageService localStorage@code { protected override async Task OnInitializedAsync() { //For Setting values await localStorage.SetItemAsync(“website_name”, “JustDebug.Net”); //For getting values var websiteName = await localStorage.GetItemAsync<string>(“website_name”); }}

There is another option of synchronous API to use local storage in Blazor WebAssembly project only. You can use _ISyncLocalStorageService _instead of _ILocalStorageService _that allows you to avoid use of async/await.

@inject Blazored.LocalStorage.ISyncLocalStorageService localStorage@code { protected override void OnInitialized() { //For Setting values localStorage.SetItem(“website_name”, “JustDebug.Net”); //For getting values var websiteName = localStorage.GetItem<string>(“website_name”); }}

You can check it on GitHub for more understanding about this package.

Approach #2

There is another NuGet package provided by Microsoft Blazor Team named Microsoft.AspNetCore.ProtectedBrowserStorage that provides Data Protection for localStoarge and sessionStorage.

Important – Microsoft.AspNetCore.ProtectedBrowserStorage is an unsupported experimental package unsuitable for production use at this time. It may be in future.

You can check here more in detail about this package.

Q4. How to store Session data in Blazor application?

You can use another NuGet library called Blazored.SessionStorage by Chris for providing access to session storage in Blazor applications. It can be installed from NuGet via Visual Studio Package manager or using below command –

> Install-Package Blazored.SessionStorage

How to Setup

For using in Blazor Server project, You will need to register the local storage services with the IServiceCollection under ConfigureServices method in Startup.cs file.

public void ConfigureServices(IServiceCollection services){ services.AddBlazoredSessionStorage();}

For using in Blazor WebAssembly project, You will need to register in Program.cs file.

public static async Task Main(string[] args){ var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add<App>(“app”); builder.Services.AddBlazoredSessionStorage(); await builder.Build().RunAsync();}

How to Use

To use it wither in Blazor WebAssembly project or in Blazor Server project, you will need to inject the ISessionStorageService –

@inject Blazored.SessionStorage.ISesisonStorageService sessionStorage@code {**protected override async Task OnInitializedAsync(){** //For Setting values await sessionStorage.SetItemAsync(“website_name”, “JustDebug.Net”); //For getting values var websiteName = await sessionStorage.GetItemAsync<string>(“website_name”); }}

There is another option of synchronous API to use local storage in Blazor WebAssembly project only. You can use ISyncSessionStorageService instead of ISessionStorageService that allows you to avoid use of async/await.

@inject Blazored.SessionStorage.ISyncSessionStorageService sessionStorage@code {**protected override void OnInitialized(){** //For Setting values sessionStorage.SetItem(“website_name”, “JustDebug.Net”); //For getting values var websiteName = sessionStorage.GetItem<string>(“website_name”); }}

You can check here more in detail about this package.

Q5. How to debug Blazor WebAssembly application?

To enable debugging for a Blazor WebAssembly app, follow the below steps –

Step 1. Update the launchSettings.json file with the following highlighted “inspectUri” field and value.

“inspectUri”: “{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}”

Once updated, the launchSettings.json file should look similar to the following code –

Step 2. Set the breakpoints in the any razor component C# code section (or in partial class). For example. In the following example, I have set on the Increment method.

Step 3. Press F5 to run the app and navigate to the Counter tab and click the “Click Me” button to hit the break point.

For more details on debugging and using Visual Studio Code, check out the official link.

Q6. How to get current URL in a Blazor application?

You can use Uri property of NavigationManager class to get the current URL.

How to use

Inject NavigationManager class using @inject directive into razor component or using [Inject] attribute, if using code-behind approach of creating components.

Check out my article here to know about 4 different methods of creating Blazor components.

To inject inside component, use @inject directive like below –

@inject NavigationManager navigationManager

To inject NavigationManager in code-behind file, use [Inject] attribute like below –

[Inject]Public NavigationManager AppNavigationManager {get; set;}

Now you have injected NavigationManager, so you need to Uri property to get current URL.

@inject NavigationManager navigationManager<p>Current URL: @(navigationManager.Uri) </p>

To know more about NavigationManager, check out this official link.

#blazor #aspnetcore #blazor #blazor interview questions #blazorserver #blazorwebassembly