Blazor WebAssembly

Frequently asked questions by clients on Blazor Consultation

ChandradevLeave a comment

Since a long time, I am working directly with end clients as independent consultant. My maximum clients will be startup product based companies owners.

Thier main intension will be deliver high quality product with in very less time and with in budget. I will suggest to use Blazor for web application development.

But they will ask so many questions before selecting the Blazor. These are the frequently asked questions on Blazor

what are the advantages of Blazor as compared to other Clients side frameworks?

1.Improved Performance:

 Blazor Web Assembly uses ahead-of-time (AOT) compilation, which allows it to load and run faster than traditional JavaScript-based web applications. It also has smaller file sizes than many JavaScript frameworks, resulting in faster load times.

2. Seamless Integration with .NET:

Since Blazor is built on top of .NET, It offers seamless integration with other .NET technologies, such as ASP.NET Core and Entity Framework Core. Developers can use the same language and tools across the entire stack, making it easier to develop and maintain complex applications.

3. Increased Security:

Blazor Web Assembly offers improved security over traditional JavaScript-based web applications. Because the code runs in a sandboxed environment, it is much harder for malicious code to access sensitive data or perform unauthorized actions.

4. Familiar Development Experience: 

Blazor Web Assembly offers a familiar development experience for .NET developers, making it easier for them to transition to building web applications. The syntax is similar to other .NET languages, and the development environment is similar to other Visual Studio tools.

5. Code Reusability: 

 Since Blazor Web Assembly is built on top of .NET, developers can reuse existing .NET libraries and components in their web applications. This can significantly reduce development time and improve code quality.

6. It is supported by all stream browsers like Chrome, Edge, Firefox, Opera, Safari along with the ability to run on old (non-Web Assembly) ones using asm.js

7. It will compile to static files, which can be deployed anywhere (AWS, Azure or GitHub) like an html page. which will save lots of deployment cost.

8. Blazor web assembly does also support PWA (Progressive web app)

9. It also supports offline behavior which means You can run the application without the internet.

10. It will save lots of development time and cost as compared to other JavaScript frameworks like angular, react and vueJs etc.

Blazor Server VS Blazor Web Assembly

There are the following differences

FeatureBlazor ServerBlazor WebAssembly
Offline Mode SupportDoes Not supportSupport
PWA applicationDoes Not supportSupport
Initial Page Load FastSlow
Static web DeploymentDoes Not supportSupport
Development time and costLessLittle bit more, since we need to create separate api layer
For Intranet application. It is more suitableNot suitable
For public facing large web portalNot suitableMore Suitable

Is Asp.net Core web Api 7.0 faster than NodeJS?

>> Yes, It is 11 time faster than NodeJS. As per as TechEmpower website benchmark result, .Net 7.0 is super-fast as compared to other competitor.

Is Blazor WebAssembly open source ?

>> Yes

Is Blazor Web Assembly production ready now?

>> Yes, it is very much stable and mature now. It is there in market, since from 2020.

Is Web Assembly faster than JavaScript ?

>> Yes, It is faster than JavaScript in certain scenarios. In general, web assembly (WASM) is faster than JavaScript when it comes to performance-critical tasks, such as mathematical calculations or complex algorithms. 

WebAssembly (Wasm) is designed to provide a low-level, efficient way to run code on the web. JavaScript, on the other hand, is a high-level language that needs to be interpreted by the browser’s JavaScript engine.

Wasm is designed to be executed by a virtual machine that runs directly on the computer’s processor, which makes it faster and more efficient than JavaScript in some cases. 

Wasm code is also compiled ahead of time, which means that it can be optimized before it is executed, leading to faster performance.

However, it’s important to note that the performance benefits of WebAssembly over JavaScript depend on the specific use case and the type of application you are building. 

For some types of applications, JavaScript may be just as fast or even faster than Wasm like DOM manipulation and event handling task.

Additionally, Wasm and JavaScript can work together to create high-performance applications. For example, you can use Wasm to implement performance-critical parts of an application, while using JavaScript for other parts that do not require the same level of performance.

Can I use my same razor component source code to Blazor Server, Blazor WebAssembly,Desktop App,Android and IOS Mobile Application?

Yes, Using Razor Class Library approach using Blazor MAUI hybrid App.

How to run Blazor project everywhere using Razor Class Library ?
https://chandradev819.com/2022/10/29/how-to-run-blazor-project-everywhere-using-razor-class-library/

will the future of Blazor application like Silverlight ?

No, Blazor is not dependent on any plugin based on technologies. By default, all modern browsers are supporting wasm. So, Web development future will be on WASM based technologies.

are there any open-source free controls for Blazor application development ?

Yes, there are so many open-source controls.

  1. MudBlazor – a set of more than 30 components that includes buttons, grids, forms, inputs, and more.
  2. Syncfusion Blazor – a set of more than 65 components that includes data grids, charts, navigations, and more.
  3. Blazorise – a component library that provides a set of components for building responsive and mobile-friendly web applications.
  4. Ant Design Blazor – a set of more than 50 components that includes layouts, inputs, buttons, modals, and more.
  5. MatBlazor – a set of more than 60 Material Design components for Blazor.
  6. Radzen Blazor Components

Paid Controls

1.Telerik UI for Blazor – a collection of more than 65 UI components that includes charts, grids, inputs, and more.

https://demos.telerik.com/blazor-ui

2. DevExpress Blazor Component:

https://www.devexpress.com/blazor/

Summary:

After going through all above points, Blazor is very cool, modern and latest web development framework from Microsoft. It will save lots of time and development cost for any companies.

Advertisement

How to create cascading grid in Blazor Telerik Grid ?

ChandradevLeave a comment

In Blazor Telerik Grid, we can easily achieve using DetailTemplate. We donot have to keep grid inside another grid.

Here is the code snippet.

@page "/grid"
<h3>GridDemo</h3>

<TelerikGrid Data="salesTeamMembers"
             OnRowCollapse="@OnRowCollapseHandler">
    <DetailTemplate>
        @{
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5">
                <GridColumns>
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

<br />


@code {
    void OnRowCollapseHandler(GridRowCollapseEventArgs args)
    {
        MainModel item = args.Item as MainModel;
    }
 
    List<MainModel> salesTeamMembers { get; set; }

    protected override void OnInitialized()
    {
        salesTeamMembers = GenerateData();
    }

    private List<MainModel> GenerateData()
    {
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
            data.Add(mdl);
        }
        return data;
    }

    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; }
    }

    public class DetailsModel
    {
        public int OrderId { get; set; }
        public double DealSize { get; set; }
    }
}

How to deploy Blazor Webassembly App as Static website on Azure ?

ChandradevLeave a comment

As you know that doing deployment as static web site on GitHub, Azure, AWS and Google Cloud is totally free. We don’t have to pay any money for it.

If we have created some demo or portfolio project using Blazor wasm and need to share with someone. we can take benefit of this service. It is totally free.

In this demo, I am going to show, one of the easiest approaches using Azure Static Web App.

Step 1: Created the Blazor web assembly app using dotnet cli command like this

dotnet new blazorwasm -n WasmTest -o app

>> In the above command, I am creating Blazor Web assembly application in app folder

Step 2: Push the code on GitHub Repo.

Step 3: Go to Azure portal and create the Static Web App like this

Step 4: Fill the mandatory field like this

Step 5: Click on Review and created button.

Step 6: Go to your resource and click on the generated URL

Now you will see your website like this

It will also create CI/CD pipeline for us on Github.

Summary: In this above demo, we saw that without writing any code, we are able to deploy our static website on Azure portal. It very simple and straight forward process.

Hey, thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.

Datalist control in Radzen Blazor (Part5)

ChandradevLeave a comment

Datalist is one of most useful controls for creating image gallery and product details screen. If we use Datalist controls, then it will save lots of our development time. It has inbuilt paging functionalities.

Before using this code, please configure your project for Radzen Controls like this

https://chandradev819.com/2022/09/28/getting-started-with-radzen-blazor-controls/

@page "/datalist"
@using RadzenTest.Shared
@inject HttpClient Http
<h3>RadzenDataList Demo</h3>
<RadzenDataList 
   WrapItems="true" 
   AllowPaging="true" 
   PageSize="2" 
   Data="@forecasts"
   TItem="WeatherForecast">
   <Template Context="WeatherForecast">
      <div class="container mt-3 border border-5">
         <b>Temp Details</b>
         <hr>
         <div class="row">
            <div class="col">Date: </div>
            <div class="col">@WeatherForecast.Date </div>
         </div>
         <hr>
         <div class="row">
            <div class="col">TemperatureC: </div>
            <div class="col">@WeatherForecast.TemperatureC </div>
         </div>
         <hr>
         <div class="row">
            <div class="col">Summary: </div>
            <div class="col">@WeatherForecast.Summary </div>
         </div>
         <hr>
         <div class="row">
            <div class="col">TemperatureF: </div>
            <div class="col">@WeatherForecast.TemperatureF </div>
         </div>
      </div>
   </Template>
</RadzenDataList>
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
}
}

Summary: In the above demo, we saw that how to use datalist control in Blazor.

Source code on Github: https://github.com/Chandradev819/RadzenTest/tree/master

Chart Controls in Radzen (Part4)

ChandradevLeave a comment

There are so many chart components (Controls) in Radzen. It is very simple and straight forward to use in project. It will save lots of our development time.

In this post, I will take few charts controls

Before using this code, Please configure your project for Radzen Controls like this

https://chandradev819.com/2022/09/28/getting-started-with-radzen-blazor-controls/

Line Chart In Radzen

@page "/linechart"
@using RadzenTest.Shared
@inject HttpClient Http
<h3>LineChart Demo</h3>

<RadzenChart>
    <RadzenLineSeries Smooth="true"
                      Data="@forecasts"
                      CategoryProperty="Date"
                      Title="Temp. C"
                      LineType="LineType.Solid"
                      ValueProperty="TemperatureC">
        <RadzenMarkers MarkerType="MarkerType.Circle" />
    </RadzenLineSeries>
    <RadzenLineSeries Smooth="true"
                      Data="@forecasts"
                      CategoryProperty="Date"
                      Title="Temp. F"
                      LineType="LineType.Solid"
                      ValueProperty="TemperatureF">
        <RadzenMarkers MarkerType="MarkerType.Circle" />
    </RadzenLineSeries>
    <RadzenValueAxis>
        <RadzenGridLines Visible="true" />
        <RadzenAxisTitle Text="Temp" />
    </RadzenValueAxis>
</RadzenChart>


@code {
    private WeatherForecast[]? forecasts;
    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
    }
}

Column Chart Controls

@page "/columnchart"
<h3>ColumnChart Demo</h3>

<RadzenChart>
  <RadzenColumnSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
</RadzenChart>
@code {
  class DataItem
  {
      public string Quarter { get; set; }
      public double Revenue { get; set; }
  }

  DataItem[] revenue = new DataItem[]
  {
      new DataItem
      {
          Quarter = "Q1",
          Revenue = 234000
      },
      new DataItem
      {
          Quarter = "Q2",
          Revenue = 284000
      },
      new DataItem
      {
          Quarter = "Q3",
          Revenue = 274000
      },
      new DataItem
      {
          Quarter = "Q4",
          Revenue = 294000
      }
  };
}

Summary: In the above code snippet, we saw few Radzen chart controls. we saw that it is very simple to use on Blazor project. There are nearly 10 different chart controls in Radzen. We can select the chart control depending on our scenario.

Hey, Thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.