Self Introduction

Motoki Nakae

Solutions Consultant at Infragistics.
I am solving customers’ UI/UX problems with our knowledge and products, especially about web applications every day.
Also known as a "dog lover".

MNakae@infragistics.com, ESEA@infragistics.com
@Kashikoinu

Infragistics

246

meetings with customer in 2022

What's happening in Japan

One of common scenario:

• The developer works for implementing desktop application for the system inside a plant.
• They are facing new request that about monitoring system to see a status of plant operation for managers.
• Since the manager have to move around a lot during the job, they want a web application to access from anywhere.
• Performance is important.

Today's Topics

• The reason why I recommend you Blazor as the web development framework.
• The points you should take care for web application as performance perspective.
• Let's start to create a new Blazor web application with performance tuning.
• What if more complex functional UI components are needed.

Why you should choice Blazor

• You are C# developer.
• You are familiar with Blazor Server. (similar to client server model)
• You can create latest SPA web application.
• Document and showcase are incresing day by day.
• Microsoft is investing a lot to Blazor.
• A lot of library vendors were adopted Blazor including Infragistics.

Time to start Blazor!

Web application performance

Three dimensions of web app performance

• How fast the web application load.
• For a desktop app, the time to excute application and be able to start interaction for user.
• To measure this performance, I suggest your use the "Lighthouse" (Chrome Extension).
• You should check "First Contentful Paint" metrics firstly.

To reduce the Load Time

Three points of web app performance

• How responsive the web app is to user interactions.

• Chrome developer tools is good to identify performance bottlenecks.

• Some guidelines to improve run time performance:

  • Less than 1500 nodes in total. The maximum depth is 32 nodes. No parent node has more than 60 child nodes.
  • Properly size images, and lazy load images.

Chrome developer tools

Three points of web app performance

• How responsive the web app is to user interactions.

• Chrome developer tools is good to identify performance bottlenecks.

• Some guidelines to improve run time performance:

  • Less than 1500 nodes in total. The maximum depth is 32 nodes. No parent node has more than 60 child nodes.
  • Properly size images, and lazy load images.

Three points of web app performance

This dimension is not easy to talk, hard to measure, this is related to User Experience for example:

• How easy it is for your user to find and navigate to the feature they want to use.
• How appealing the look and feel of your application is.
• How good the error messages your software produces to understand what the end user did wrong.

Tips of Web application performance

Component Virtualization

Virtualization is a technique for limiting UI rendering to just the parts that are currently visible.

• You can use this technique for huge amount of looping content, like list, card, table.
• With calculating the position of scroll, just rendering necessary DOM inside a viewable area.
• When rendered DOM go outside from viewable area, it going to be destroyed.
• This is an out-of-the-box function for Blazor.

Let's make virtulized table with 10k items

<table>
    ...
        @foreach (var item in Items)
            <tr>
                <td>@item.FirstName</td>
                <td>@item.LastName</td>
                ...
        }

...
        <Virtualize Items="@Items" Context="item">
            <tr>
                <td>@item.FirstName</td>
                <td>@item.LastName</td>
                ...
        </Virtualize>

What happens if you don't virtulize?

Let's look at the result of virtulization

You need more complex functional UI?

To keep both functionality and performance is so difficult

• Feature request that never ends.

  • Sorting, Filtering, To register the short cut and so on.

• The difficulty of performance tuning increase for functional UI cotrols.

• Too hard to navigate the end user to each feature, easily produce bad user experience.

What we have done for customer in Japan.

• Supported them to adopt Blazor as blandnew framework.
• Provided the training video to learn Blazor for biginner.
• Solved their UI requirements trough our controls.
• Provided consultation service.

Takeaway