DEV Community: Suresh Mohan

What’s New in Essential JS 2: 2023 Volume 1

Suresh Mohan — Tue, 04 Apr 2023 12:58:13 +0000

We at Syncfusion are thrilled to share the latest updates to the Essential JS 2 platform for the 2023 Volume 1 release. Our team has worked tirelessly to bring you an even better user experience and application efficiency. With our latest release, we have introduced a plethora of new features and enhancements across various components that will blow your mind!

Let’s see what’s new!

New Ribbon control

The new Ribbon control provides a structured and easy-to-use interface for users to access different features and functions through series of tabs. This powerful feature improves the overall user experience and efficiency.

JavaScript Ribbon Control

Key features

The key features of the new Ribbon control are as follows:

Built-in items : Many built-in items, such as buttons, checkboxes, dropdown buttons, split buttons, combo boxes, and color pickers, can be customized and used to perform specific actions.
Modes : The Ribbon control offers a classic mode to organize items and groups in a traditional form and a simplified mode to organize items and groups in a single row for improved usability and reduced clutter.
Tooltip : You can show additional information using tooltips when a user hovers over a ribbon item. This will improve the user experience and the app’s usability.
File menu : A built-in menu allows you to add file-related actions easily.
Templates : Customize ribbon items and help pane content using templates.

Note: For more details, refer to the JavaScript Ribbon control demos and documentation.

Rating control is now marked as production-ready

In 2023 Volume 1, our Rating control has been updated to meet industry standards and is now marked as a production-ready control.

Note: For more details, refer to the JavaScript Rating control demos and documentation.

Syncfusion Vue components

Syncfusion Vue components now allow utilizing the provide and inject variables in templates.
These components are compatible with Nuxt 3, pnpm, and the Vitest testing frameworks.
Furthermore, the vue-class-component package dependency has been removed. This allows us to use Syncfusion Vue 3 components in Vue apps without the dependency package.

Note: For more details, refer to the Vue component demos.

Charts

The new features added in the Charts component are as follows:

Center label

It is now possible to place a label at the center of the pie and doughnut charts. Also, when the mouse pointer hovers over a pie slice, the relevant data will be displayed at the center of the pie chart.

Labeling JavaScript Doughnut Chart at the Center

Range step area chart (new)

A new chart type called range step area chart has been added in the 2023 Volume 1 release. It is used to display the difference between the minimum and maximum values over a certain period.

JavaScript Range Step Area Chart

Customize error bars

Now, you can customize the height and color of error bars on each data point.

Customizing the JavaScript Error Bar Chart

Note: For more details, refer to the JavaScript Charts demos.

Circular Gauge

RTL support

The entire Circular Gauge, including the tooltips and legends, can now be rendered in RTL (right-to-left), which is used in some languages and cultures.

Right-to-Left Rendering Support for JavaScript Circular Gauge

Note: For more details, refer to the JavaScript Circular Gauge demos.

Word Processor

The JavaScript Word Processor has been rolled out with the following new updates:

Continuous section break

This feature allows users to create a new section while staying on the same page in the JavaScript Word Processor. This is particularly useful when users want to adjust the number of columns for specific content without initiating a new page.

Continuous Section Break Feature in JavaScript Word Processor

Show or hide bookmarks

You can show or hide the start and end of bookmarks using the Word Processor component.

Showing Bookmarks in JavaScript Word Processor

Drag and drop selected content

Users can now drag and drop selected content within a Word document.

Dragging and Dropping the Selected Content in the JavaScript Word Processor

Optimized SFDT file size

SFDT files generated by the Word Processor are now optimized to reduce their size. All static keys are minified and the final JSON string is compressed. This helps us reduce the file size of SFDT relative to a DOCX file, providing the following benefits:

Quick file transfer between client and server through faster internet services.
The new optimized SFDT files require less storage space than the old SFDT files.

Note: For more details, refer to the JavaScript Word Processor demos.

File Manager

Virtual scrolling

This feature provides UI virtualization support for both the detailed and large-icon views in the JavaScript File Manager control.

Virtual Scrolling in JavaScript File Manager

Note: For more details, refer to the JavaScript File Manager demos.

Gantt Chart

Drag and drop tasks between resources

The Gantt Chart now allows users to drag and drop tasks between different resources in the resource view.

Dragging and Dropping Tasks between Resources in JavaScript Gantt Chart

Note: For more details, refer to the JavaScript Gantt Chart demos.

DataGrid

From the 2023 Volume 1 release onward, you can enjoy the following new updates in the DataGrid:

Search and filter with new operators

The following new operators have been added to the search and filter features, providing greater flexibility and control over how users search and filter data in JavaScript DataGrid:

does not contain : Search for items that do not include certain keywords or phrases.
is null and is not null : Search for items that are null or not null.
is like and is not like : Search for items that match or do not match a specific pattern using wildcards.
Does not start with and does not end with : Search for items that do not begin or end with a specific string of characters.

New Search and Filter Operators in JavaScript DataGrid

Autofit columns with empty space

This feature renders columns in a grid based on the specified width defined in the columns declaration. It means white space will be displayed in the grid instead of columns auto adjusting to fill the entire grid width if the total columns’ width is less than the grid’s width.

Auto Fitting Columns in DataGrid’s Empty Space

Note: For more details, refer to the JavaScript DataGrid demos.

Image Editor

The JavaScript Image Editor control delivers the following user-friendly features:

Undo and redo support

This feature provides undo and redo support by storing every action as an object that contains rotations, flips, annotations, and freehand drawings in an array. The undo and redo actions are performed based on that array.

Pinch zoom

You can zoom in or out of the image on touchscreen devices, such as phones or tablets, using two fingers to pinch or expand the screen.

Mouse wheel zoom

This feature allows zooming in or out of the image using the mouse wheel and the Ctrl key.

Note: For more details, refer to the JavaScript Image Editor demos.

Maps

The new features included in JavaScript Maps are as follows:

Customization of the zoom toolbar

Now you can customize the appearance of the buttons and tooltips in the zoom toolbar using built-in APIs.

Customizing the Zoom Toolbar in JavaScript Maps

Drag-and-drop support for markers

Markers inside Maps can now be dragged and dropped anywhere.

Dragging and Dropping Markers in JavaScript Maps

Note: For more details, refer to the JavaScript Maps demos.

Pivot Table

Role option in OLAP cube

The Pivot Table can now be bound to an SSAS OLAP cube, giving end users access to restricted cube information such as measures, dimensions, hierarchy, and more based on their assigned role.

Note: For more details, refer to the JavaScript Pivot Table demos.

Progress Bar

Secondary progress customization

Now you can easily customize the width and color of the secondary Progress Bar. This added flexibility provides greater visual appeal and distinction.

Customizing the Secondary Progress Bar

Tooltips

It is now possible to display tooltips with numeric or text values of the progress during initial loading of the progress bars and mouse hover. This gives users more context and understanding of the current progress.

Tooltips in JavaScript Progress Bar

Note: For more details, refer to the JavaScript Progress Bar demos.

Rich Text Editor

We have enhanced the appearance of the Rich Text Editor toolbar’s tooltips. These tooltips are redesigned to clearly display the keyboard shortcut information, making it easier for users to understand and access the functions of each toolbar item.

JavaScript Rich Text Editor Toolbar Tooltip Displaying Keyboard Shortcuts

Note: For more details, refer to the JavaScript Rich Text Editor demos.

Scheduler

The Scheduler component has also received some significant updates.

XSS security option

With the added XSS security option, appointment inputs are now sanitized to improve the overall security of the Scheduler component.

Filter query

The built-in filter support makes it easy to filter events when requesting data from the server.

Timeline views without horizontal scroller

This feature allows users to see an overview of the schedule timeline without a horizontal scroller. This improves the usability and accessibility of the Scheduler component.

Timeline View Without Horizontal Scroller in the JavaScript Scheduler

Spanned events in timeline year view

Spanned events in the timeline year view are now rendered as a single event instead of separate events, making it easier for users to understand the timeline.

Spanned Events in JavaScript Scheduler

Note: For more details, refer to the JavaScript Scheduler demos.

Conclusion

Thanks for reading! In this blog, we have seen the new features and components added in the Syncfusion Essential JS 2 platform for the 2023 Volume 1 release. We encourage you to test these user-friendly updates and share your feedback in the comments section below.

To explore other available features in this release, please visit our Release Notes and What’s New pages. Existing customers can access the new version from the License and Downloads page, while non-customers can take advantage of our 30-day free trial to try out the available features.

You can also contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Create Group Chat Profile View in .NET MAUI App

Suresh Mohan — Fri, 16 Sep 2022 11:30:45 +0000

One of the most typical user interfaces in chat applications is the group view. Almost all chat software allows for group chat, which calls for a standard group photo to serve as the group’s representation. A useful feature of the .NET MAUI Avatar View control is group view support. When you give the Avatar View a group source, it will transform it into a group view automatically. Let’s see how easy it is to achieve this in a .NET MAUI application.

.NET MAUI Avatar View

Almost all mobile apps have a user interface that shows the users’ initials or an avatar image (like in contact lists, images in tokens, and chat user displays). We at Syncfusion recognize the need for this straightforward but crucial control, and we are now offering the feature-rich .NET MAUI Avatar View control. The .NET MAUI Avatar View control gives users a graphic representation that can be customized by including images, background colors, icons, text, and more.

.NET MAUI avatar group chat profile view

The .NET MAUI Avatar View (SfAvatarView) control allows you to display the view in five different ways:

Default : Displays the default image when initializing without any other source such as image or group.
Initials : Displays initials in the view.
AvatarCharacter : Displays a default image in the view.
Custom : Displays a custom image in the view.
Group : Displays a maximum of three images or initials in a single view.

The group content type provides a group chat profile view in a .NET MAUI application.

Steps to integrate a group chat profile view

Step 1 : Get the class that contains the collection of members of the chat view. I have prepared a simple class that contains a collection of users.

public GroupMemberViewModel()
{
    GroupMembers = new ObservableCollection();GroupMembers.Add(new Person() { Name = "Selva Ganapathy", Picture = "selvaganapathy.png" });
    GroupMembers.Add(new Person() { Name = "Clara", Picture = "clara.png" });
    GroupMembers.Add(new Person() { Name = "Alexandar", Picture = "alexandar.png" });
    GroupMembers.Add(new Person() { Name = "Gabriella", Picture = "gabriella.png" });
    GroupMembers.Add(new Person() { Name = "Lita", Picture = "lita.png" });
    GroupMembers.Add(new Person() { Name = "Nora", Picture = "nora.png" });
    GroupMembers.Add(new Person() { Name = "Sebastian", Picture = "sebastian.png" });
    GroupMembers.Add(new Person() { Name = "Tye", Picture = "tye.png" });
    GroupMembers.Add(new Person() { Name = "Jennifer", Picture = "jennifer.png" });
    GroupMembers.Add(new Person() { Name = "Jackson", Picture = "jackson.png" });
}
public class Person
{
    public String Name { get; set; }
    public String Picture { get; set; }
}

Step 2 : Create an object for the previous class and set it as binding content to the page where you need to display the group chat profile view.

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = new GroupMemberViewModel();
    }
}

Step 3 : Include the .NET MAUI Avatar View reference. The NuGet packages for Syncfusion .NET MAUI controls are available on Nuget.org. To add the .NET MAUI Avatar View to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Core, and then install it.

Step 4 : Then, in the MauiProgram.cs file, register the handler for Syncfusion core.

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
        .UseMauiApp()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        }
        );builder.ConfigureSyncfusionCore();return builder.Build();
    }
}

Step 5 : Add the following XML namespace and include .NET MAUI Avatar View.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:Syncfusion="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
           x:Class="GroupProfileView.MainPage">
    <Grid>
        <Syncfusion:SfAvatarView />
    </Grid>
</ContentPage>

Step 6 : Set the ContentTypeProperty as Group , bind the GroupSource property to GroupMembers , and set the ImageSoureMemberPath property to Picture.

.NET MAUI Group Chat Profile View

Customization

In the previous group chat profile view, you can customize the following properties.

Corner radius

You can set the corner radius to be circular. Refer to the following code.

<Syncfusion:SfAvatarView WidthRequest="250"
                         HeightRequest="250"
                         CornerRadius="125"
                         BackgroundColor="Black"
                         ContentType="Group"
                         GroupSource="{Binding GroupMembers}"
ImageSourceMemberPath="Picture"/>

.NET MAUI Group Chat Profile View⁠—Circular Image

Initials view

To show only the initials, set the InitialsMemberPath property to Name. To set different background colors to the initials, store the colors in a collection and assign it to the BackgroundColorMemberPath property. Refer to the following code.

<Syncfusion:SfAvatarView
    ContentType="Group"
    GroupSource="{Binding GroupMembers}"
    InitialsMemberPath="Name"
    BackgroundColorMemberPath="Color"/>

.NET MAUI Group Chat Profile View⁠—Initials View

Note: If we assign values to both ImageSourceMemberPath and InitialsMemberPath, ImageSourceMemberPath will be given the first preference.

Displaying both image and initial view

If the items in the collection do not have the image source set, then the initials will display.

GroupMembers.Add(new Person() { Name = "Selva Ganapathy", Picture = "selvaganapathy.png", Color = Colors.LightBlue });
GroupMembers.Add(new Person() { Name = "Clara", Picture = "clara.png", Color = Colors.LightPink });
GroupMembers.Add(new Person() { Name = "Alexandar", Color = Colors.LightGreen });

For example, in the previous code, the third item is not assigned an image, so the result will be similar to the following screenshot.

.NET MAUI Group Chat Profile View⁠—Image and Initials View

Group chat profile view⁠—cascading view

You can simply bind the Avatar View to a HorizonalStackLayout to present it as a cascading view for the group profile view. Refer to the following code example.

<HorizontalStackLayout BindableLayout.ItemsSource="{Binding GroupMembers}" >
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Syncfusion:SfAvatarView Margin="-45,0,0,0"
                                     HeightRequest="100"
                                     WidthRequest="100"
                                     CornerRadius="50"
                                     ContentType="Custom"
                                     ImageSource="{Binding Picture}"/>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</HorizontalStackLayout>

.NET MAUI Group Chat Profile View⁠—Cascading View

Conclusion

Thanks for reading! In this blog post, we have gone through the group chat profile view feature of the .NET MAUI Avatar View control. You can download Essential Studio for .NET MAUI to evaluate this control.

Please let us know in the comments below if you have any questions or require clarification about this control. You can also contact us through our support forum, support portal, or feedback portal. We are happy to assist you!

Related blogs

JavaScript API Mocking Techniques

Suresh Mohan — Thu, 15 Sep 2022 11:00:56 +0000

API mocking plays a significant role in the software development process. It allows developers to simulate the actual APIs and receive realistic responses generated with custom data. For example, you can use mock APIs when writing unit tests or situations where external dependencies are unavailable to make things easier.

In this article, I will discuss what API mocking is, why we need it, and what different API mocking techniques we can use in JavaScript.

What is API Mocking?

API mocking is a process in which developers imitate the actual APIs with mock APIs. These mock APIs behave similarly to the actual APIs and perform the basic functionality required to develop or test.

For example, there may be dependencies with external APIs that are unavailable in the developer environment. In such instances, you can use mock APIs to continue the development uninterrupted until the actual external APIs come live.

In addition, there are instances where the developers need to implement and test the front end first or when two different development teams develop the front end and back end separately. In such cases, it is always better to check whether the front end is properly functioning even when the actual back end is not available. We can use API mocking to test and confirm that the front end functions properly.

Why Use Mock APIs?

They help to mock data when writing unit tests without calling the live API.
The whole development speeds up as the front-end and back-end developers can work parallelly.
They help carry out offline development.
They can speed up the development process if the real APIs are slow.
The front end can act as a standalone application without back-end dependencies in the development phase.

JavaScript Libraries for API Mocking

There are multiple JavaScript libraries available for API mocking. Selecting a suitable library is the first step. Here are some of the most used JavaScript API mocking libraries:

JSON Server⁠—A fast and efficient node module that allows creating a REST JSON web service quickly.
MirageJS⁠—This is an API mocking library for building, testing, and sharing JavaScript applications independent of back-end services.
Nock⁠—An HTTP server mocking library ideal for testing front-end components by making HTTP requests.
Axios-mock-adapter⁠—A JavaScript library for sending HTTP requests to APIs.
Faker—This is a famous library for generating fake data for testing.

JavaScript API Mocking Techniques: Examples

Now that you have a clear understanding of what API mocking is and why we need it, let’s see how we can create mock APIs using some of the aforementioned libraries.

Mock APIs for JavaScript apps with JSON server

We can use JSON Server to create demo REST APIs in minutes. JSON Server is a node module that allows the mocking of a REST API service with minimum configuration. JSON Server is one of the most popular choices for API mocking because of its efficiency and simplicity.

JSON Server also supports basic validations like responding with 400 if a record of the same ID already exists when creating a new record and 404 if the entity is not there.

Step 1⁠—Installing JSON Server

The first step is to install the JSON Server globally. Then, you can use it for any project when needed.

| npm install -g json-server |

Step 2⁠—Creating the mock data file

Then, create a JSON file with the necessary mock data.

{
  "users": [
    {"id":"1","name": "Nishani", "usertype": "Admin"},
    {"id":"2","name": "Nishani", "usertype": "Manager"},
    {"id":"3","name": "Nishara", "usertype": "Admin"},
    {"id":"4","name": "Nimal", "usertype": "Manager"},
    {"id":"5","name": "Nilantha", "usertype": "Manager"}
  ]
}

Step 3⁠—Starting the server

After that, start the server with the following command.

| json-server --watch users.json --port 8000 |

Step 4⁠—Using in the application

JSON Server supports all GET , POST , PUT , PATCH ,and DELETE request methods. The following code shows how to use the JSON Server for CRUD operations in a React application.

import http from "../http-common";
import axios from "axios";

export default axios.create({
    baseURL: "http://localhost:8000",
    headers: {
        "Content-type": "application/json"
    }
});

export const getAllUsers = () => {
    return http.get("/users");
};
export const getUser = (id) => {
    return http.get(/users/${id} );
};
export const createUser = (data) => {
    return http.post("/users", data);
};
export const updateUsers = (id, data) => {
    return http.put(/users/${id} , data);
};
export const removeUser = (id) => {
    return http.delete(/users/${id} );
};

However, there are several drawbacks to using JSON Server. For instance, JSON Server is not flexible and cannot configure different query parameters for non-CRUD endpoints. Also, you need to set up the test data again if it all gets accidentally deleted, as the JSON Server makes a permanent impact on the data.

Using MirageJS for API Mocking

MirageJS is a client-side mocking framework that mocks the API in the browser by utilizing the Pretender library. It has many built-in tools: serializer, route handlers, database, models, fixtures, and factories. They enable emulating dynamic behavior between the front end and back end, rather than mocking the same response over and over again by hitting an endpoint.

Step 1⁠—Installing MirageJS

MirageJS installation is quite simple with the following command.

| npm install --save-dev miragejs |

Step 2⁠—Edit the server.js file

import { createServer } from 'miragejs';
export function makeServer() {
  let server = createServer();
  return server;
}

The createServer function creates a new mock server instance.

Step 3⁠—Refactor index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import { makeServer } from './server';

if (process.env.NODE_ENV === 'development') {
  makeServer({ environment: 'development' });
} 
ReactDOM.render(
  <React.StrictMode><App /></React.StrictMode>,
  document.getElementById('root')
);

The if condition in the previous code is for using the MirageJS server only in the development phase.

Step 4⁠—Using “Model” in MirageJS

Server.js

import { createServer, Model } from 'miragejs';
export function makeServer({ environment = 'test' } = {}) {
  let server = createServer({
    environment,
    models: {
      books: Model,
    },
    seeds(server) {
      server.create('book', {
        title: 'Harry Potter: Philosophers Stone',
        body:
          'The story of a young wizard on his journey to defeat an evil wizard who killed his parents',
      });
      server.create('book', {
        title: 'Lunar Chronicles: Cinder',
        body:
          'A story where the old fairy tales are retold but with an unexpected end',
      });
      server.create('note', {
        title: 'Hunger Games',
        body:
          'The exciting story of Katnis Everdeen in a kill or die game of survival',
      });
    }
});
  return server;
}

Step 5⁠—Creating routes

routes() {

   this.namespace = 'api/books';
   this.get('/', (schema, request) => {
    return schema.books.all();
   });

   this.get('/:id', (schema, request) => {
    let id = request.params.id;
    return schema.books.find(id);
   });

   this.post('/', (schema, request) => {
    let attrs = JSON.parse(request.requestBody);
    return schema.books.create(attrs);
   });

   this.patch('/:id', (schema, request) => {
    let newAttrs = JSON.parse(request.requestBody);
    let id = request.params.id;
    let book = schema.books.find(id);
    return book.update(newAttrs);
   });

   this.delete('/:id', (schema, request) => {
    let id = request.params.id;
    return schema.books.find(id).destroy();
   });

  }

GET /api/books⁠ —fetch all book records.
GET /api/notes/:id ⁠—fetch a single book record.
POST /api/books ⁠—create a new book record.
PATCH /api/books/:id ⁠—update an existing book record.
DELETE /api/books/:id ⁠—remove an existing book record.

Step 6⁠—Create and configure the front end

The last step is to create or configure the existing front end to get the data created previously using the routes.

A sample output of the previous data follows.

Axios-mock-adapter for API Mocking

The Axios-mock-adapter is an NPM library that allows mocking API requests. It is pretty helpful in testing and fron-tend development as this library will enable us to send HTTP requests to an API.

Step 1⁠—Install the library

| npm install --save-dev axios-mock-adapter |

Step 2⁠—Create and pass an Axios instance to Axios adapter

The following code creates an Axios instance and then passes it to the Axios adapter.

import axios, { AxiosRequestConfig } from 'axios';
import AxiosMockAdapter from 'axios-mock-adapter';
const axiosMockInstance = axios.create();
const axiosLiveInstance = axios.create();
export const axiosMockAdapterInstance= new AxiosMockAdapter(
  axiosMockInstance, 
  { delayResponse: 0 }
);
export default process.env.isAxioMock? axiosMockInstance : axiosLiveInstance;

Now, we can import this file and use it where necessary.

Step 3⁠—Create the mock file

import { axiosMockAdapterInstance } from 'src/lib/axios';

mock
   .onGet('/api/social/profiles')
   .reply(() => {
     const profile: User = {
     id: 'u001',
     title: 'Manager',
     name: 'John Mayor',
     email: 'johne@example.com'
};

return [200, { User }];

You can read more about Axios Mocking with React here.

Strategies for API Mocking in JavaScript Applications

An application’s request journey involves three major components:

Application
Request client
Server

The application calls a request client to make a request. The request client sends the request using HTTP to the server. After receiving the request, the server returns the necessary response. So, we can mock the request client or the server as we test the application.

Mocking the Request Client

The mock request client replaces the actual request client with a compatible client to mimic the responses. You can implement this methodology more simply by using a third-party library like Nock and MirageJS.

The logical component of mocking is in the client-side code, and you can control the requests or responses at very early stages. However, an actual request is not made to the server by the request client when using this method.

Mocking the Server

The other strategy for API mocking is mocking the server itself. In this case, the actual server gets replaced with a mock server that accepts requests. Then it returns responses from and to the request client. We can use several libraries to accomplish this server mocking strategy, including JSON Server and ExpressJS server.

This strategy is quite similar to the actual application behavior in production. The request client works completely as only the server is replaced here. But setting up and maintaining an entire server can be quite costly and complicated. Therefore, we can simplify the operations in server mocking to a certain extent by using the libraries mentioned previously.

Conclusion

This article discussed why API mocking techniques are necessary and what kind of strategies we can use for API mocking, along with several examples. Of course, whichever method or library you use depends on the requirements of the scenario and the environment, yet it is essential to make sure a bare minimum of application behavior change is occurring due to the mocking.

So, I hope you found this article helpful.

Thank you for reading!

Syncfusion’s Essential JS 2 is the only suite you will ever need to build an app. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download a free trial to evaluate the controls today.

If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Replicating an Immersive UI in .NET MAUI

Suresh Mohan — Wed, 14 Sep 2022 10:46:41 +0000

Howdy! In this blog, we’ll be replicating an immersive UI in .NET MAUI based on this Dribbble design.

We are going to break down this UI as shown in the following screenshot to implement it step by step.

We will make some modifications to the original UI to get the most out of the controls with which we will be working.

Before starting, let’s have a glance at what will learn in this blog:

Render images with rounded borders.
Use the Syncfusion .NET MAUI Avatar Viewand Badge View controls to render a profile image with a badge.

Let’s start the coding!

Main layout

First, let’s design the main layout of the UI.

Inside the ScrollView , we will use a new layout that .NET MAUI provides us, the VerticalStackLayout . It helps us organize the controls on our screen vertically.

Refer to the following code example.

 <ScrollView VerticalScrollBarVisibility="Never">
<!--Main layout-->
<VerticalStackLayout Margin="20,0" VerticalOptions="Center">
<!-- Add all your UI content here -->
</VerticalStackLayout>
</ScrollView>

Step 1: Main information

To understand the code clearly, we have divided the implementation into several steps.

Rounding the edges of an image

Images with rounded borders provide a more modern and fresh look to our UI. To achieve this, please follow these steps:

Add a frame.

First, let’s add a frame and customize the following properties:

Padding: Set the padding value to 0. This will eliminate the blank spaces and allow our image to occupy the entire space of the frame.
IsClippedToBounds: Set this property with the value True. This indicates that the content will be clipped beyond its bounds.
CornerRadius: This represents the value that the edges will take to give the rounded corner effect.

After adding the frame, add the image. Refer to the following code example.

<!-- Main home image-->
<Frame Padding="0" IsClippedToBounds="True" HasShadow="False" CornerRadius="20" Margin="10,25,10,0">
<Image Source="mainhome.png" Aspect="AspectFill" HeightRequest="250"/>
</Frame>
<!-- You must write here what is explained in the next code block -->

Add profile image with a badge

To design the profile image, we are going to use the Syncfusion .NET MAUI Avatar View and Badge View controls:

Add the Syncfusion.Maui.Core NuGet package.
Go to the MauiProgram.cs file and register the handler for Syncfusion core by going to the CreateMauiApp method and adding the .ConfigureSyncfusionCore() method just below the .UseMauiApp() line *. *
Now, add the Syncfusion.Maui.Core namespace in your XAML page.

            xmlns:sfControl="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"

Then, add the Syncfusion .NET MAUI Avatar View and Badge View controls inside a grid to make it easier to organize the controls.

Refer to the following code.

<!--Profile information-->
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*,Auto" Padding="25,30">
<!-- Avatar & Badge view-->
<sfControl:SfBadgeView Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" BadgeText="1" HeightRequest="70" WidthRequest="60" HorizontalOptions="Center" VerticalOptions="Center">
<sfControl:SfBadgeView.Content>
<sfControl:SfAvatarView
ContentType="Default"
VerticalOptions="Center"
HorizontalOptions="Center"
BackgroundColor="LightBlue"
BorderColor="Transparent"
WidthRequest="50"
HeightRequest="50"
CornerRadius="25"/>
</sfControl:SfBadgeView.Content>
<sfControl:SfBadgeView.BadgeSettings>
<sfControl:BadgeSettings Type="Success" Position="BottomRight"/>
</sfControl:SfBadgeView.BadgeSettings>
</sfControl:SfBadgeView>


<!-- Add the basic information here: user's name, status, and phone button information here. →
</Grid>
<!-- You must write here what is explained in the next code block -->

Add name, status, and call button.

Now, add the basic user information: name, status, and call button.

<!-- Basic information: user's name, status, and phone button-->
<Label Grid.Row="0" Grid.Column="1" Text="Mark Won" FontAttributes="Bold" TextColor="Black" Padding="20,0,0,0" VerticalTextAlignment="End" FontSize="15"/>
<Label Grid.Row="1" Grid.Column="1" Text="Available" FontAttributes="Bold" TextColor="Silver" Padding="20,0,0,0" VerticalTextAlignment="Start" FontSize="13"/>
<Button Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" ImageSource="phone" CornerRadius="25" HeightRequest="50" WidthRequest="50" BackgroundColor="White" BorderColor="Silver" BorderWidth="1" VerticalOptions="Center"/>

Step 2: Details

First, let’s build the frame in which all the information of this block must be added.

<!-- General details-->
<Frame CornerRadius="10" BorderColor="Silver" Padding="0,20,0,0" HasShadow="False">
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="Auto,*,Auto" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Padding="25,0">
<!-- You must write here what is explained in the details block →
</Grid>
</Frame>
<!-- You must write here what is explained in the next code block -->

Then, add a set of information inside the previously added frame. For better understanding, we divided the explanation into sub-blocks.

Note: The names of these sub-blocks will be the same as those contained in the design line.

Pre-approved

We add two labels and a BoxView to achieve a dividing line. We can also achieve this design using the line shape feature in .NET MAUI.

Refer to the following code example.

<!--Pre-approved-->
<Label Grid.Row="0" Grid.Column="0" Text="Pre-approved" FontAttributes="Bold" TextColor="Black" FontSize="12"/>
<Label Grid.Row="0" Grid.Column="2" Text="Yes" TextColor="White" BackgroundColor="#00a77c" HorizontalOptions="End" FontSize="10" Padding="9,4"/>
<BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" HeightRequest="1" Color="Silver" Margin="-25,15" />
<!-- You must write here what is explained in the next code block -->

Plan to buy

This information contains the same elements as the previous code block, except that this time, we will also start working with the FormattedText.

Refer to the following code to add different styles to the same label. This helps avoid declaring different labels.

<!--Plan to buy-->
<Label Grid.Row="2" Grid.Column="0" Text="Plan to buy" FontAttributes="Bold" TextColor="Black" FontSize="12"/>
<Label Grid.Row="2" Grid.Column="1" HorizontalOptions="End" TranslationX="25">
<Label.FormattedText>
<FormattedString>
<Span Text="Opendoor" TextColor="Black" FontAttributes="Bold" FontSize="13"/>
<Span Text=" Home Loans" TextColor="Black" FontSize="11"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Image Grid.Row="2" Grid.Column="2" HorizontalOptions="End" VerticalOptions="Center" Source="arrow"/>
<BoxView Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" HeightRequest="1" Color="Silver" Margin="-25,15" />
<!-- You must write here what is explained in the next code block -->

Down payment

Refer to the following code example to render the down payment details.

<!--Down payment-->
<Label Grid.Row="4" Grid.Column="0" Text="Down payment" FontAttributes="Bold" TextColor="Black" FontSize="12"/>
<Label Grid.Row="4" Grid.Column="1" Text="$100,000" TextColor="Silver" FontSize="12" HorizontalTextAlignment="End" TranslationX="20"/>
<Label Grid.Row="4" Grid.Column="2" Text="20%" TextColor="Black" FontSize="12" HorizontalTextAlignment="End"/>
<BoxView Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" HeightRequest="1" Color="Silver" Margin="-25,15" />
<!-- You must write here what is explained in the next code block -->

Offer Amount

Refer to the following code example to render the offer amount details.

  <!--Offer amount-->
<Label Grid.Row="6" Grid.Column="0" Text="Offer Amount" FontAttributes="Bold" TextColor="Black" FontSize="12"/>
<Label Grid.Row="6" Grid.Column="2" Text="$500,000" TextColor="Black" FontSize="12" HorizontalOptions="End" />
<!-- You must write here what is explained in the next code block -->

Black space

Now, use another frame to simulate the footer of the main frame. This must have a black background.

Using the Margin property, we recover the borders required by the previous controls so that this frame will completely cover the footer of the parent frame. We achieve that by adding negative values to the edges.

Here, we also use another new layout called HorizontalStackLayout. It organizes the controls horizontally.

Refer to the following code example.

 <!--Black space-->
<Frame Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="3" HasShadow="False" BackgroundColor="Black" Margin="-25,20,-25,0">
<HorizontalStackLayout>
<Button ImageSource="mark" CornerRadius="25" HeightRequest="50" WidthRequest="50" BackgroundColor="White" VerticalOptions="Center"/>
<Label Text="Mark will go over this with you before
we make our all-cas offer." VerticalTextAlignment="Center" FontSize="12" Padding="15,0,0,0" TextColor="White"/>
</HorizontalStackLayout>
</Frame>

Send for review button

Finally, add the Send offer for review button using the following code.

<Button Text="Send offer for review" FontAttributes="Bold" TextColor="White" CornerRadius="10" HeightRequest="50" BackgroundColor="#1c85e8" Margin="0,20"/>

Step 3: Offer

To finish with the third step, create another page named OfferPage.xaml. Add the following code to render the Offer details.

<Grid RowDefinitions="*,Auto">
<!-- Main image-->
<Image Grid.Row="0" Source="mainhome.png" Aspect="AspectFill" Margin="0,-50,0,0"/>
<!-- General information-->
<Frame Grid.Row="1" CornerRadius="20" VerticalOptions="StartAndExpand" HasShadow="False" BackgroundColor="White" HeightRequest="400" Margin="0,-10,0,0">
<Grid RowDefinitions="*,*,*,*,*">
<Image Grid.Row="0" Source="key.png" WidthRequest="70" HeightRequest="70" Aspect="AspectFill" HorizontalOptions="Center"/>
<Label Grid.Row="1" Text="Offer Accepted" FontSize="23" FontAttributes="Bold" TextColor="Black" HorizontalTextAlignment="Center"/>
<Label Grid.Row="2" Text="Welcome home! We are wishing you 
all the best in your new home." FontSize="18" HorizontalTextAlignment="Center" TextColor="Silver"/>
<Button Grid.Row="3" Text="Schedule final walkthrough" FontAttributes="Bold" TextColor="White" CornerRadius="10" HeightRequest="55" BackgroundColor="#1c85e8"/>
<Label Grid.Row="4" Text="SKIP" TextColor="Silver" HorizontalTextAlignment="Center" Padding="0,15,0,0" />
</Grid>
</Frame>
</Grid>

And our UI is done! You can see the full design here.

GitHub reference

To see the complete code structure of this project, refer to our Immersive UI in .NET MAUI demo on GitHub.

Conclusion

Thanks for reading! In this blog, we have seen how to replicate an immersive UI using Syncfusion .NET MAUI controls. Try out the steps discussed in this blog and leave your feedback in the comments below.

Syncfusion .NET MAUI controls were built from scratch using .NET MAUI, so they feel like framework controls. They are fine-tuned to work with a huge volume of data. Use them to build your elite, cross-platform mobile and desktop apps.

For current customers, the new Essential Studio version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can always download our free evaluation to see all our controls in action.

For questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

See you next time!

Related blogs

Lazy Loading with React–An Overview

Suresh Mohan — Tue, 13 Sep 2022 11:44:58 +0000

Lazy loading is one of the most common design patterns used in web and mobile development. It is widely used with frameworks like Angular and React to increase an application’s performance by reducing initial loading time.

In the earlier versions of React, lazy loading was implemented using third-party libraries. However, React introduced two new native features to implement lazy loading with the React v16.6 update.

In this article, I will discuss what lazy loading is, how to implement it with React, and its pros and cons.

What Is Lazy Loading?

In simple terms, lazy loading is a design pattern. It allows you to load parts of your application on-demand to reduce the initial load time. For example, you can initially load the components and modules related to user login and registration. Then, you can load the rest of the components based on user navigation.

You might not feel much difference when using lazy loading for small-scale applications. But it significantly impacts large-scale applications by reducing the initial load time. Ultimately, it improves both the user experience and the application’s performance.

Advantages of Lazy Loading

Reduces initial loading time by reducing the bundle size.
Reduces browser workload.
Improves application performance in low bandwidth situations.
Improves user experience at initial loading.
Optimizes resource usage.

Disadvantages of Lazy Loading

Not suitable for small-scale applications.
Placeholders can slow down quick scrolling.
Requires additional communication with the server to fetch resources.
Can affect SEO and ranking.

Implementing Lazy Loading with React

Usually, lazy loading is not used in React applications, since we mostly use React to develop single-page applications. Developers can bundle the entire code as a single bundle and use it for deployments.

But, as the application gets complex, we need to consider performance and user experience. In such situations, we need to use the lazy-loading techniques available with React to bundle the critical and noncritical parts of the application separately.

You can use modern bundlers and transpilers like Webpack and Babel to implement applications following the modular pattern. Then, you can use code splitting to divide the application bundle into smaller ones and lazy load them.

React introduced two native features with the version 16.6 release to implement lazy loading in React applications. First, they use the power of code splitting and dynamic imports to allow developers to implement lazy loading for their applications easily.

So, let’s see how we can implement lazy loading in React.

React.lazy()

React.lazy() allows developers to easily create components with dynamic imports and render them as normal components. When the component is rendered, it will automatically load the bundle that contains the rendered component.

You need to provide a single input parameter to call React.lazy(). It accepts a function as an input parameter, and that function should return a promise after loading the component using import(). Finally, the returned promise from React.lazy() will give you a module with a default export containing the React component.

The following code shows how to use the React.lazy() function.

// Without React.lazy()
import AboutComponent from './AboutComponent ';

// With React.lazy()
const AboutComponent = React.lazy(() => import('./AboutComponent '));

const HomeComponent = () => (
    <div><AboutComponent /></div>
)

React.Suspense

When we use lazy loading, components are rendered as we navigate. So, we need to have a placeholder for those components until they are loaded. As a solution, React.Suspense was introduced, and it acts as a wrapper for the lazy components.

You can wrap a single lazy component, multiple lazy components, or multiple lazy components with different hierarchy levels with React.Suspense. In addition, it accepts a prop named fallback as the placeholder, and you can pass a component or an element for that.

For example, you can pass the waiting or loading message as the fallback prop, and it will be displayed until the wrapped lazy component is rendered.

import React, { Suspense } from "react";
const AboutComponent = React.lazy(() => import('./AboutComponent'));

const HomeComponent = () => (
    <div><Suspense fallback = { <div> Please Wait... </div> } >
            <AboutComponent /></Suspense></div>
);

As you can see, you need to use both the React.lazy() and React.Suspense features to build a lazy-loading component in React. These features are straightforward and anyone with basic React knowledge can easily use them.

However, sometimes you might face issues due to promise rejections in the React.lazy() function. To overcome such situations, you need to create a React error boundary component and wrap the Suspense components using it.

import React, { Suspense } from "react";
import ErrorBoundary from "./error.boundary.js";
const AboutComponent = React.lazy(() => import('./AboutComponent'));

const HomeComponent = () => (
    <div><ErrorBoundary>
        <Suspense fallback = { <div> Please Wait... </div>} >
          <AboutComponent /></Suspense></ErrorBoundary>
    </div>
);

Don’t Use Too Much Lazy Loading

As discussed, lazy loading has many benefits. But overusing it can have a significant negative impact on your applications. So, it is essential to understand when we should use lazy loading and when we should not.

You should not opt for lazy loading if your application has a small bundle size. There is no point in splitting a small bundle into pieces, and it will only increase coding and configuring effort.

Also, there are special application types like e-commerce sites that can be negative impacted by lazy loading. For example, users like to scroll through quickly when searching for items. If you lazy load shopping items, it will break the scrolling speed and result in a bad user experience. So, you should analyze the company’s website usage before using lazy loading.

On the other hand, lazy loading can be a real life-saver in large-scale projects. Projects with large bundle sizes take a significant amount of time for the initial load, and it is a significant drawback in terms of user experience. So, think of application requirements, scale, and current performance of the application before choosing lazy loading.

Conclusion

This article discussed what lazy loading is, how we can implement it in React, and the pros and cons we should know before using it. I hope this article helped you improve your knowledge of React lazy loading.

Thank you for reading.

The Syncfusion Essential Studio for React suite offers over 70 high-performance, lightweight, modular, and responsive UI components in a single package. It’s the only suite you’ll ever need to construct a complete app.

If you have questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related Blogs

Optimize Next.js App Bundle and Improve Its Performance

Suresh Mohan — Fri, 09 Sep 2022 11:47:36 +0000

In this article, we will learn how to optimize the Next.js app (link to the app) by reducing the bundle size by 43% and increase the score to 73 from 36 in Google’s PageSpeed Insights.

Let’s start with analyzing the production build of Next.js. When we execute npm run build , Next.js gives us a statistic of the production build. It specifies the size of pages and chunks that will be delivered to the browser.

Next.js creates files that are common and will be shared across pages. These files are called the First Load JS. The First Load JS files contain framework code and the code that is used by multiple pages.

If the component reuses more than 50% of the files, then Next.js includes that component in the First Load JS. We cannot change this behavior, but we can optimize our code.

Following is the output of the npm run build command and Google PageSpeed Insights score. As you can see, the sizes of the files are in red and yellow. Our goal is to make them green.

Let’s go.

Analyze First Load JS

We start by analyzing and identifying the bundles included in the First Load JS. In order to find that, we need to install the following dev dependencies.

| npm install –save-dev @next/bundle-analyzer cross-env |

After installation, add the following code in the package.json under scripts.

"scripts": {
    "analyze": "cross-env ANALYZE=true next build",
    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
  },

Add the following code in next.config.js. If you don’t have this file, then create it in the root directory of your project.

const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true'
})

module.exports = withBundleAnalyzer({
    env: {
        NEXT_PUBLIC_ENV: 'PRODUCTION', //your next configs goes here
    },
})

Next, execute this command npm run analyze , which will open two new tabs in your browser with graphs. Focus on the client.html graph.

Then, replace the larger libraries with smaller, equivalent ones and remove the irrelevant libraries. In order to replace any library, go to https://bundlephobia.com/, see the size of your library, and check whether you have any alternatives with smaller sizes. Otherwise, try to write your own custom code. In this demo:

We removed the js-cookie library, which was used to read and write cookies, and replaced it with custom code.
We replaced the framer-motion library with react-transition-group because it was 10 times smaller.
Instead of using react-gpt , which is used to display Google ads, we created our own custom ad component (more details following).
We moved the momentjs file to the server side from the client, as the size of momentjs is big. By doing this, we can either send the formatted date from the API or format the date on the server side, as follows.

export async function getServerSideProps(context) {
  const moment = (await import('moment')).default(); //default method is to access default export
  return {
    date: moment.format('dddd D MMMM YYYY'),
  }
}

Now this date will be sent as a prop to the component, which can be used (getServerSideProps can only be used in pages not inside components). Now, momentjs will not be sent to the browser.

Dynamic imports

Components that aren’t visible in the initial load of the page and components that are displayed based on certain conditions should be imported dynamically instead of normally. This ensures that these components are sent to the browser only when they are needed. Refer to the following code example.

import dynamic from 'next/dynamic'

const Modal = dynamic(() => import('../components/header'));

export default function Home() {
  return (
    {showModal && <Modal />}
  )
}

Open the Network tab. When the condition is fulfilled, you’ll see that a new network request is made to fetch the dynamic component (click the button to open a modal).

Lazy load images using next/image

Next.js has a built-in component named next/image. It loads images only when they are in the viewport.

import Image from "next/image";

const Index = () => {
  return (
    <>
      <p>
        External domains must be configured in <Code>next.config.js</Code> using
        the <Code>domains</Code> property.
      </p>
      <Image
        alt="Next.js logo"
        src="https://assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js-bg.png"
        width={1200}
        height={400}
      />
    </>
  );
};

Lazy load Google Ads

The Google Ads script usually blocks the main thread, so we are going to load the script eight seconds after the page load. Initially, we were using the react-gpt package to load the Google Ads script. We are going to replace that with our optimized custom code.

For this, we have created a custom hook to inject any scripts. It will return the status depending on the state of the injection when the Google Ads script is injected. Once it returns ready , we run the Ads code.

import React from "react";

const useScript = (src, delay = null) => {
  const [status, setStatus] = React.useState(src ? "loading" : "idle");

  React.useEffect(() => {
    if (!src) {
      setStatus("idle");
      return "idle";
    }

    let script = document.querySelector(`script[src="${src}"]`);
    let timeout = null;

    if (!script) {
      if (delay) {
        timeout = setTimeout(() => {
          injectScript();
          // Add event listener after the script is added
          script.addEventListener("load", setStateStatus);
          script.addEventListener("error", setStateStatus);
        }, delay);
      } else {
        injectScript();
      }
    } else {
      setStatus(script.getAttribute("data-status"));
    }

    const setStateStatus = (event) => {
      setStatus(event.type === "load" ? "ready" : "error");
    };

    //code to inject script
    function injectScript() {
      script = document.createElement("script");
      script.src = src;
      script.async = true;
      script.setAttribute("data-status", "loading");
      document.body.appendChild(script);

      const setDataStatus = (event) => {
        script.setAttribute(
          "data-status",
          event.type === "load" ? "ready" : "error"
        );
      };

      script.addEventListener("load", setDataStatus);
      script.addEventListener("error", setDataStatus);
    }

    if (script) {
      //script will be be undefined available when its delayed hence check it before adding listener
      script.addEventListener("load", setStateStatus);
      script.addEventListener("error", setStateStatus);
    }

    return () => {
      if (script) {
        script.removeEventListener("load", setStateStatus);
        script.removeEventListener("error", setStateStatus);
      }
      if (timeout) {
        clearTimeout(timeout);
      }
    };
  }, [src]);

  return status;
};

export default useScript;

Use this hook in pages/index.js.

const MyApp = () => {
  const status = useScript(script, 8000);
  return (
    <>
      <p>Parent status: {status}</p>
      {status === ‘idle’ && <Ads />}
    </>
  );
};

If you want to create a custom ad component like this, then follow this article.

You can also lazy load other scripts like the Google Analytics script.

Specific imports

If you are using libraries like lodash and date-fn , we can easily reduce bundle size by just importing specific functions instead of a full import, like this.

//Old
Import _get from ‘lodash’

//New
Import _get from ‘lodash/get’

We can optimize the usage of multiple other libraries. For more details, check out this article. Don’t forget to remove unused imports from the project.

Optimize next/link

If you are using next/link in your project, add the prefetch prop to it and set it to false. Next.js by default prefetches the pages whose links are in the viewport. Let’s say you have a header with two links, ‘/home’ and ‘/about’. Even though the users are on the home page, assets of the about page will also be loaded because the about link can be seen in the viewport.

When prefetch is set to false , prefetching will still occur but only when the link is hovered over.

<li>
    <Link href="/about" prefetch={false}>
        <a>About Us</a>
    </Link>
</li>
<li>
    <Link href="/blog/hello-world" prefetch={false}>>
        <a>Blog Post</a>
    </Link>
</li>

Optimize fonts

When we use icon libraries like font-awesome , we only use a maximum of 15 icons, but the full library is loaded. The problem is that it is render-blocking resources. So, instead of loading the complete library, you can just download the required icons as SVG files and use them. You can also lazy load these SVG images.

You can also use font-display: swap; for your fonts because it doesn’t block the rendering. The font face is instead given an infinite swap period and a minimal block period.

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

If you are using Google Fonts directly from the link, then download the fonts and self-host them.

Lazy load React components (optional)

We can also load a component only when it is in the viewport using the react-lazyload library, which also supports SSR. We can provide offset, too, so users will be unaware of this lazy-loading behavior.

import LazyLoad from 'react-lazyload';

<LazyLoad offset={100}>
    <Footer />
</LazyLoad>

Exclude big libraries from bundle

As I discussed earlier, libraries are added to First Load JS. In our project, we are using the Syncfusion Charts library on multiple pages, so the Syncfusion charts library was bundled into the first load.

Pages that were not using Syncfusion charts were also loading the Syncfusion charts library, since it was added into to First Load JS or the main bundle. In order to optimize it, we followed this awesome article by Robert S on how to exclude big libraries.

Final results

*We are currently optimizing the last red page

Bonus

If you want to convince your manager or client to remove some sections from the website or load them later, then visit https://www.performancebudget.io/.

Enter the number of seconds you want your web app to take to load. Then, select the 3G network (because Google PageSpeed Insights uses 3G speed to test). Press Calculate.

You will get your size budget (total size of resources that should be sent to the browser) that will allow your web app to load in the specified number of seconds.

Simply start your project from this step.

Conclusion

If you want good performance and a better Google PageSpeed Insights score, then ship fewer resources to the browser.

Before adding any package, check the size in https://bundlephobia.com/. You can’t keep multiple, complex features and have great performance at the same time.

I hope you now have a good idea of how to optimize the Next.js app to improve its score on Google PageSpeed Insights. Use these techniques to optimize your old website to make it faster.

Thank you for reading!

Syncfusion Essential JS 2 is the only suite you will ever need to build an app. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download a free trial to evaluate the controls today.

If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

JavaScript Objects vs. Maps

Suresh Mohan — Thu, 08 Sep 2022 11:36:17 +0000

Objects and Maps are used in JavaScript to store data as dynamic collections of key-value pairs. Since Maps are inherited from Objects, there are some similarities between the two entities, and prototype functions of Objects can be utilized in Maps.

However, there are some unique characteristics to each of these entities. This article will examine the differences between Maps and Objects, their usage, and the best situations where each can be used.

What is a Map?

A Map is a data structure that stores data as unique key-value pairs in which the insertion order is retained. It helps to avoid duplicity.

What is an Object?

The concept of an Object is very similar to that of a Map: it stores data using a key-value pair. However, minor variations make Map work better under specific conditions, mainly because Objects do not preserve the insertion order of elements when storing the data.

Manipulation of Maps and Objects

1. Construction

Maps

A Map can be created using the Map constructor in JavaScript.

const map = new Map([[1, "one"], [2, "two"], [3, "three"]]);

We can set the values initially by parsing an array of arrays. The inner arrays contain a key and a value as their elements. The key field in Maps can be of any data type such as number, array, or object.

Objects

There are many ways to instantiate an Object.

const obj1 = { 1: "one", 2: "two", 3: "three" };

const obj2 = new Object({ 1: "one", 2: "two", 3: "three" });

const obj3 = Object.create(obj1);

In the example above, obj1 is created using Object literal syntax while the Object constructor is used for obj2. In obj3 , we passed an Object that should be the newly created Object prototype. The data type of the key field in Object is limited to strings and symbols. As a result, the keys given as numbers in the above code snippet will be converted to strings internally.

2. Item manipulation

Maps: Get, set, and delete element s

In Maps, we have to use the set() method to insert values, the get() method to access elements, and the delete() method to delete elements.

const map = new Map();

map.set(1, "one");

console.log(map.get(1)); // output: one

map.delete(1);
console.log(map); // Map(0) {}

The set() method requires two parameters to initialize the key and value of a Map element. On the other hand, the get() method returns the value of the key we pass as the parameter. We can delete an element by passing the key to the delete() method.

Objects: Dot notation

We can use either dot notation or square bracket notation to access elements in an Object.

const obj = {};

obj.a = "one"
obj["b"] = "two"

console.log(obj.a); // output: one
console.log(obj["b"]); //output: two

delete obj.a
delete obj["b"]
console.log(obj); // output: {}

Dot notation is straightforward, and we can access elements directly by their key. On the other hand, square bracket notation should be used in full when dynamically accessing the element. Also, we can use the delete keyword to delete elements from an Object.

3. Read keys and values

Maps

In Maps, we can use the keys() method to get the list of keys in a map.

const map = new Map([[1, "one"], [2, "two"]]);

console.log(map.keys()); // output: [Map Iterator] { 1, 2 }
console.log(Array.from(map.keys())); // output: [1, 2]

console.log(map.values()); // output: [Map Iterator] { 'one', 'two' }
console.log(Array.from(map.values())); // output: ['one', 'two']

console.log(map.entries()); // output [Map Iterator] { [1, 'one'], [2, 'two'] }
console.log(Array.from(map.entries())); // output [[1, 'one'], [2, 'two'] ]

map.keys() returns a Map Iterator with the keys, while map.values() returns a Map Iterator with values. On the other hand, map.entries() can be used to return a Map Iterator with key-value pairs. We can convert these Map Iterators to arrays using Array.from().

Objects

To get the keys to an Object, we can use Object.keys() and Object.values() to get the values, while Object.entries() can be used to get the key-value pairs.

const obj = { 1: "one", 2: "two" };

console.log(Object.keys(obj)); // output: ['1', '2']

console.log(Object.values(obj)); // output: ['one', 'two']

console.log(Object.entries(obj)); // output: [['1', 'one'], ['2', 'two'] ]

The above functions return an array of keys, values, or key-value pairs of the Object we pass as the parameter.

4. Check if a key exists

Maps

Maps have the has() method to check if a key exists.

console.log(map.has(2)); // output: true or false

Objects

The following methods can be used to check the existence of a key in an Object.

console.log(2 in obj); // output: true or false
console.log(obj.hasOwnProperty(2)); // output: true or false

5. Get length

Maps

We can get the size or the number of elements of a Map using the size property.

console.log(map.size); // output: 2

Objects

We can get the size of an Object as shown below.

console.log(Object.keys(obj).length); // output: 2

Here, we got the keys array from the Object and used length to get the number of elements, similar to the Object’s size.

6. Iteration

Maps

There are several ways to iterate over the elements in a Map. The following code example illustrates iterating using for and forEach loops.

//method 1
for (const [key, value] of map) {
    console.log(value);
};
//method 2
map.forEach((value, key) => console.log(value));

Objects

Similar to Maps, Objects can also be iterated in many ways. The following code example illustrates iterating using for and forEach loops.

//method 1
for (const [key, value] of Object.entries(obj)) {
    console.log(value);
};

//method 2
Object.entries(obj).forEach(([key, value]) => console.log(value));

Unlike in Maps, we need helper functions to access key-value pairs in Objects.

When to use Maps and Objects

Maps have higher performance and require less code to write, giving them an advantage over Objects.

The following are some cases where you can use Maps:

If you want to use complex data types as keys.
If preserving the insertion order of your keys is required.
When performing hashing.

However, some cases necessitate the use of an Object. The following are some of them:

Objects are ideal for cases where we need a simple structure to hold data and the keys are either strings or symbols.
Object is unquestionably the best option in scenarios where different logic must be applied to each property piece.
When dealing with JSON data, Objects have direct support in JSON, but Maps do not.

Final thoughts

Although Maps perform better, it all comes down to the type of data being used and the operation that needs to be performed. Use Maps and Objects wisely in the appropriate situations.

I hope you now have a good understanding of using Objects and Maps in JavaScript.

Thank you for reading!

If you have any questions or comments, you can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Download Files from Azure Blob Storage with Blazor WebAssembly and ASP.NET Web API

Suresh Mohan — Thu, 04 Aug 2022 11:16:41 +0000

Microsoft’s Azure Blob Storage is a cloud storage service designed for modern data storage scenarios. Azure Blob Storage offers highly available, massively scalable, durable, and secure storage for various data objects in the cloud.

In this article, I will explain how to download files from the Azure Blob Storage using Blazor WebAssembly and ASP.NET Core.

I will be using the Syncfusion Blazor Card component to visualize the images in the Blazor WebAssembly application.

Creating the ASP.NET Core Web API application with Azure Blob Storage

First, create the server-side app using the ASP.NET Core Web API project.

1. Create the Azure Blob Storage.

Create the Azure Blob Storage to store the files. For this, we need to have an Azure subscription.

First, create a storage account in the Azure portal.

When creating the storage account, add the resource group, storage account name, region, and other details. Next, navigate to the storage account, and you can see the blob service as follows.

Navigate to the blob service and create a container to upload the files. Enter the container’s name and select the public access level as follows.

After that, upload a few images as files in the container.

2. Create an ASP.NET Core Web API project and connect it to the Azure Blob Storage.

Create an ASP.NET Core Web API project. Implement the endpoint to deal with blob storage.

After creating the Web API project, add a blob storage connection string into the ASP.NET Core Web API project using the appsettings.json file. Then, get the blob storage connection string from the storage account that we created.

Then, add the connection string to the appsettings.json file to connect with the Azure Blob Storage.

3. Implement the endpoints in the ASP.NET Core Web API project.

First, create a DTO class to transfer data to the client-side app from the server-side app. Then, create the Models folder and add the Dtos folder inside the Models directory. Inside the Dtos folder add class BlobDto as follows.

public class BlobDto
{
    public string Name { get; set; }
    public string FileUrl { get; set; }
    public string ContentType { get; set; } 
}

This BlobDto class is used to transfer the blob properties. Next, create the Dto class ContentDto as follows. This class is used to return a specific file’s content details to download it.

public class ContentDto
{
    public Stream Content { get; set; }
    public string Name { get; set; }
    public string ContentType { get; set; }
}

Then, create blob services to deal with the Azure Blob Storage. In this case, create a services folder in the root directory and then create an interface named IBlobService inside the services folder. Refer to the following code.

public interface IBlobService
{
    Task<List<BlobDto>> GetBlobFiles();

    Task<ContentDto> GetBlobFile(string name);
}

Create a BlobService class that implements the IBlobService interface.

public class BlobService : IBlobService
{
    private readonly string _blobConnectionString;
    private const string _blobContainer = "blazorblob-container";

    public BlobService(IConfiguration configuration)
    {
        _blobConnectionString = configuration.GetConnectionString("BlobConnectionString");
    }

    public async Task<List<BlobDto>> GetBlobFiles()
    {
        var blobs = new List<BlobDto>();
        var container = new BlobContainerClient(_blobConnectionString, _blobContainer);

        await foreach (var blob in container.GetBlobsAsync())
        {
            var blobDto = new BlobDto()
            {
                Name = blob.Name,
                FileUrl = container.Uri.AbsoluteUri + "/" + blob.Name,
                ContentType = blob.Properties.ContentType
            };
            blobs.Add(blobDto);
        }
        return blobs;
    }

    public async Task<ContentDto> GetBlobFile(string name)
    {
        var container = new BlobContainerClient(_blobConnectionString, _blobContainer);
        var blob = container.GetBlobClient(name);

        if (await blob.ExistsAsync())
        {
            var a = await blob.DownloadAsync();
            var contentDto = new ContentDto()
            {
                Content = a.Value.Content,
                ContentType = a.Value.ContentType,
                Name = name
            };

            return contentDto;
        }

        return null;
    }

}

This GetBlobFiles method gets all the files inside the blob container we created. Then, it references the Azure Blob Storage and container using the connection string and connection name. The GetBlobFile method is used to download specific files by providing the name as a parameter.

Then, register the blob service in the Program.cs file, as follows.

builder.Services.AddScoped<IBlobService, BlobService>();

After that, create the endpoint to get all files using the IblobService interface. For which, implement the controller named FileController inside the controllers’ folder, as follows.

[ApiController]
[Route("api/[controller]")]
public class FilesController : Controller
{

    private readonly IBlobService _blobService;

    public FilesController(IBlobService blobService)
    {
        _blobService = blobService;
    }

    [HttpGet]
    public async Task<IActionResult> Get()
    {
        var result = await _blobService.GetBlobFiles();

        return Ok(result);
    }

    [HttpGet("{name}")]
    public async Task<IActionResult> Get(string name)
    {
        var result = await _blobService.GetBlobFile(name);

        if (result == null)
            return BadRequest();

        return File(result.Content,result.ContentType, result.Name);
    }

}

We have implemented two endpoints to deal with the Azure Blob Storage. The first one is to get all the files, and the second one is to download the specific file from the Azure Blob Storage.

Enable the CORS on the server-side project. Refer to the following code.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: "AllowedCorsOrigins",
        builder =>
        {
            builder
                .SetIsOriginAllowed((_) => true)
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials();
        });
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseCors("AllowedCorsOrigins");
//..

app.Run();

Create the Blazor WebAssembly application

Next, we have to create the client-side app using the Blazor WebAssembly project.

1. Create and configure the Blazor WebAssembly app.

First, create a new Blazor WebAssembly application. Second, configure the app to deal with the server-side app.

For which, remove the following code line in the Program.cs file.

builder.Services.AddScoped(sp => new HttpClient {BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)});

We will then inject the HttpClient, creating the service to call the APIs.

2. Create the services to connect with the server-side application.

First, create the folder named services in the root directory. Then, create the interface named IFileService inside the service folder as follows.

public interface IFileService
{
    Task<List<BlobDto>> GetFiles();
    Task<ContentDto> DownloadFile(string name);
}

Next, create a class named FileService that implements the IFileService , as follows.

public class FileService : IFileService
{
    private readonly HttpClient _client;
    private const string _baseUrl = "https://localhost:7174/api/";

    public FileService()
    {
        _client = new HttpClient();
        _client.DefaultRequestHeaders.Accept.Clear();
        _client.DefaultRequestHeaders.Accept.Add(
            new MediaTypeWithQualityHeaderValue("application/json"));
    }

    public async Task<List<BlobDto>> GetFiles()
    {
        var response = await _client.GetAsync(_baseUrl+"files");
        var result = response.Content.ReadAsStringAsync().Result;
        var blobList = JsonSerializer.Deserialize<List<BlobDto>>(result);

        return blobList;
    }

    public async Task<ContentDto> DownloadFile(string name)
    {
        var response = await _client.GetByteArrayAsync(_baseUrl+"files/"+name);

        var content = new ContentDto()
        {
            Content = response,
            Name = name
        };

        return content;
    }
}

The FileService class deals with the server side of the app. We use the two endpoints to deal with the Azure Blob Storage. This service class calls those endpoints, injecting HttpClient to return the required content and details.

Then, register the service in the Program.cs file, as follows.

builder.Services.AddScoped&lt;IFileService, FileService&gt;();

3. Install and configure the Syncfusion Blazor Card component.

Add the following three NuGet packages to your app to add the Syncfusion Blazor Card component:

Syncfusion.Blazor.Cards 20.2.0.36 : This package provides the functionality and features for the Syncfusion Blazor Card component.
Syncfusion.Blazor.Themes 20.2.0.36 : This package adds and configures Blazor component themes as static web assets in the application.
Syncfusion.Blazor.Core 20.2.0.36 : This package includes the base component, standard classes, and interfaces utilized in other Syncfusion Blazor UI components.

Then, add the required Syncfusion Blazor component to the _import.razor file as follows.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Cards

After that, register the Syncfusion Blazor component in the Program.cs file.

var builder = WebAssemblyHostBuilder.CreateDefault(args);
//..
builder.Services.AddSyncfusionBlazor();
//..
await builder.Build().RunAsync();

Next, add a style theme to the Blazor app. Open the index.html file in the wwwroot directory and then edit the file, as shown.

<head> 
  <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

Open the index.html and add the script reference that the Syncfusion component requires.

<head><link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" /><script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

4. Implement the logic to download files from Azure.

Create a folder named scripts inside the wwwroot directory. Then, create the script.js inside the scripts folder as follows.

export function download(options) {
    var bytes = new Uint8Array(options.byteArray);
    var blob=new Blob([bytes], {type: options.contentType});

    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download=options.fileName;
    link.click();
}

This code example is the JavaScript function we are using to download the files in the Blazor WebAssembly app. We also isolate our JavaScript code as a separate JavaScript module using the export keyword. The options parameter is an object parameter that contains three properties: byte array, file name, and file content type.

5. Create the UI and add the Syncfusion Blazor Card component.

Create the UI for listing the retrieved files from the server-side app. Modify the Index.razor file inside the page folder as follows.

@page "/"
@using BlazorBlobDemo.Models
@using BlazorBlobDemo.Services

@inject IFileService _fileService;
@inject IJSRuntime JSRuntime;

<h1>Comic SuperHeroes</h1>

@if (blobs == null)
{
    <p><em>Loading...</em></p>
}
else
{
    foreach (var blob in blobs)
    {
        <div style="border:1px solid gray; margin-bottom:10px; width: 202px;">   
          <SfCard ><CardImage><img src="@blob.FileUrl" alt="@blob.Name" @onclick="() => Download(blob.Name, blob.ContentType)" width="200" height="200"/>
             </CardImage>       
          </SfCard></div>       
    }
}

@code {
    private IJSObjectReference _module;
    private List<BlobDto> blobs;

    protected override async Task OnInitializedAsync()
    {
        _module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/script.js");
        blobs = await _fileService.GetFiles();
    }

    private async Task Download(string name, string contentType)
    {
        var response = await _fileService.DownloadFile(name);

        await _module.InvokeVoidAsync("download", new 
        { 
            ByteArray = response.Content,
            FileName = name,
            ContentType = contentType
        });
    }
}

We inject the file service interface to retrieve all files and download the selected file. Then, we inject the IJSRuntime interface and create the private IJSObjectReference variable for the JavaScript function process.

The download method returns the file content as a byte array, calling the Web API from the server-side app. After that, it passes the required parameters as the object to the JavaScript download function as in the previous code.

Run and test the application

Run the server-side and client-side applications to test their functionalities.

Now, you can see the list of images from the Azure Blob Storage. Next, download a specific file by clicking the file thumbnail.

We can download the file successfully from the Azure Blob Storage using the Blazor WebAssembly and ASP.Net Core applications.

Resource

For more information, refer to the complete project, Azure Blob Storage with Blazor WebAssembly and ASP.NET Web API.

Conclusion

This article has demonstrated how to download files from the Azure Blob Storage using a Blazor WebAssembly application and ASP.NET Core Web API application.

You also saw how to create an Azure Blob Storage and add the Syncfusion Blazor Card component to the Blazor WebAssembly application.

Don’t forget to share your thoughts in the comments section. Thank you for reading!

Syncfusion’s Blazor component suite offers over 70 UI components that work with both server-side and client-side (WebAssembly) hosting models seamlessly. Use them to build marvelous apps!

If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Creating an ASP.NET Core CRUD Web API with Dapper and PostgreSQL

Suresh Mohan — Thu, 04 Aug 2022 10:30:18 +0000

PostgreSQL is a robust, open-source, easy-to-use object-relational database system. Dapper is a popular high-performance micro-ORM among .NET developers. This blog will demonstrate how to create an ASP.NET Core CRUD web API using Dapper and PostgreSQL databases. Here, we will be using the ASP.NET Core Web API template in .NET 6.

I explained using Dapper and PostgreSQL with a Blazor application in my last article.

Creating the ASP.NET Core CRUD web API

Prerequisites

Before creating the application, you need to have the following tools installed:

1. Create the database

First, create a database using PostgreSQL and create a table named Employee. I have used pgAdmin to create a database and table for this demonstration. pgAdmin is a web-based graphical user interface (GUI) tool for interacting with a PostgreSQL database.

2. Create the ASP.NET Core web API application

Now, open Visual Studio 2022 and create a new project. Then, select the ASP.NET Core Web API project template as shown in the following figure.

Provide the solution’s project name and click the Next button. Then, select .NET 6.0 as the framework for this project and None as the authentication type.

3. Add the PostgreSQL package and configure the project

Before writing the services, add PostgreSQL and Dapper to the project. To do that, open the NuGet package manager and select and install the PostgreSQL package as shown in the figure below. In this example, I install Npgsql version 6.0.4.

In the .NET environment, this package is used to access and communicate with the PostgreSQL server.

We should provide the connection string for the project to connect to the PostgreSQL server. You can use the appsettings.json file to add a connection string like the following code example.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "Employeedb" : "Server=localhost;Database= *****;User Id=postgres;Password=***** ;"
  }
}

4. Add the Dapper package to the project

After that, install the Dapper NuGet package to the project. To do so, open the NuGet package manager, go to the Browse tab, search for Dapper, and select and install the package as shown in the following screenshot. In this example, I install Dapper version 2.0.123.

When using table column names with underscores in the database, add the following configuration in the Program.cs file for mapping the table data with the model class.

DefaultTypeMap.MatchNamesWithUnderscores = true;

5. Create the database service

First, create a model class to communicate with the database using Dapper. In the table we are creating for demonstration purposes, create an Employee model class. Create the Models folder in the root directory and then create the Employee model class inside the Models folder.

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
    public string Address { get; set; }
    public string MobileNumber { get; set; }
}

Then, create the database service class which can perform CRUD operations as a generic service. Create a folder named Services in the root directory and create an interface named IDbService inside the Services directory.

public interface IDbService
{
    Task<T> GetAsync<T>(string command, object parms); 
    Task<List<T>> GetAll<T>(string command, object parms );
    Task<int> EditData(string command, object parms);
}

Here, T is a generic type parameter. We also use the T type parameter as the method’s return type. There are two parameters in the DB operations. The command parameter is the query command, and the object parameter is used for the database operations with PostgreSQL and Dapper.

Now, create a DbService class inside the Services folder that inherits the IDbService interface like the code example below.

public class DbService : IDbService
{
    private readonly IDbConnection _db;

    public DbService(IConfiguration configuration)
    {
        _db = new NpgsqlConnection(configuration.GetConnectionString("Employeedb"));
    }

    public async Task<T> GetAsync<T>(string command, object parms)
    {
        T result;

        result = (await _db.QueryAsync<T>(command, parms).ConfigureAwait(false)).FirstOrDefault();

        return result;

    }

    public async Task<List<T>> GetAll<T>(string command, object parms)
    {

        List<T> result = new List<T>();

        result = (await _db.QueryAsync<T>(command, parms)).ToList();

        return result;
    }

    public async Task<int> EditData(string command, object parms)
    {
        int result;

        result = await _db.ExecuteAsync(command, parms);

        return result;
    }
}

In the above code, IConfiguration accesses the appsettings.json file and reads the connection string. Then, we use the connection string NpgsqlConnection to connect with the PostgreSQL server.

Also, we implemented QueryAsync and ExecuteAsync operations. These are Dapper-based functions, and the difference between them is that the query method is used for executing a SELECT statement internally, and the execute method is used for executing DML statements like INSERT , UPDATE , and DELETE.

This service is used as a generic database service to avoid writing database operations inside the services.

6. Create the Employee service

Now let’s create a service for the Employee. In that case, create the IEmployeeService interface inside the Services folder as shown in the following code example.

public interface IEmployeeService
{
    Task<bool> CreateEmployee(Employee employee);
    Task<List<Employee>> GetEmployeeList();
    Task<Employee> UpdateEmployee(Employee employee);
    Task<bool> DeleteEmployee(int key);
}

Now, create the EmployeeService class, which inherits IEmployeeService. Refer to the following code example.

public class EmployeeService : IEmployeeService
{
    private readonly IDbService _dbService;

    public EmployeeService(IDbService dbService)
    {
        _dbService = dbService;
    }

    public async Task<bool> CreateEmployee(Employee employee)
    {
        var result =
            await _dbService.EditData(
                "INSERT INTO public.employee (id,name, age, address, mobile_number) VALUES (@Id, @Name, @Age, @Address, @MobileNumber)",
                employee);
        return true;
    }

    public async Task<List<Employee>> GetEmployeeList()
    {
        var employeeList = await _dbService.GetAll<Employee>("SELECT * FROM public.employee", new { });
        return employeeList;
    }

    public async Task<Employee> GetEmployee(int id)
    {
        var employeeList = await _dbService.GetAsync<Employee>("SELECT * FROM public.employee where id=@id", new {id});
        return employeeList;
    }

    public async Task<Employee> UpdateEmployee(Employee employee)
    {
        var updateEmployee =
            await _dbService.EditData(
                "Update public.employee SET name=@Name, age=@Age, address=@Address, mobile_number=@MobileNumber WHERE id=@Id",
                employee);
        return employee;
    }

    public async Task<bool> DeleteEmployee(int id)
    {
        var deleteEmployee = await _dbService.EditData("DELETE FROM public.employee WHERE id=@Id", new {id});
        return true;
    }
}

In this code, we used the queries to perform CRUD operations with the required parameters.

7. Register the services

builder.Services.AddScoped<IDbService, DbService>();
builder.Services.AddScoped<IEmployeeService, EmployeeService>();

8. Create Employee controller

Now, create an Employee controller to implement CRUD web APIs for this project. To do that, add a controller named EmployeeController inside the Controllers folder. Refer to the following code.

[ApiController]
[Route("[controller]")]
public class EmployeesController : Controller
{
    private readonly IEmployeeService _employeeService;

    public EmployeesController(IEmployeeService employeeService)
    {
        _employeeService = employeeService;
    }

    [HttpGet]
    public async Task<IActionResult> Get()
    {
        var result = await _employeeService.GetEmployeeList();

        return Ok(result);
    }

    [HttpGet("{id:int}")]
    public async Task<IActionResult> GetEmployee(int id)
    {
        var result = await _employeeService.GetEmployee(id);

        return Ok(result);
    }

    [HttpPost]
    public async Task<IActionResult> AddEmployee([FromBody]Employee employee)
    {
        var result = await _employeeService.CreateEmployee(employee);

        return Ok(result);
    }

    [HttpPut]
    public async Task<IActionResult> UpdateEmployee([FromBody]Employee employee)
    {
        var result = await _employeeService.UpdateEmployee(employee);

        return Ok(result);
    }

    [HttpDelete("{id:int}")]
    public async Task<IActionResult> DeleteEmployee(int id)
    {
        var result = await _employeeService.DeleteEmployee(id);

        return Ok(result);
    }
}

Here, EmployeeController uses the ApiController attribute to implement the web API controller. Also, we use the Route attribute to maintain the route with the controller name, and we inject IEmployeeService to use Employee CRUD operations in this controller.

9. Run and test the ASP.NET Core web API application

Now, run this application. You should see the Swagger documentation with REST APIs, which are implemented as CRUD operations in this app.

First, test the POST request, which is used to create an employee record.

Now you can see the request and the body that we use to create employees.

And there is the result of the POST request, which is used to create employees. We received a success response.

Now test the GET request, which is used to get all employees’ details.

Now we can see the GET request and its result. It receives a success response as well.

Now test the PUT request, which is used to update the employee details.

We are updating the age and address details.

Now you can see the response with updated details of the employee.

Next, test the DELETE request, which is used to delete the employee record. To test it, pass the employee ID as a path parameter with the API URL.

We pass the ID value 2 for the path parameter to delete the employee details.

It receives a successful response, too.

Resource

For more information, refer to the ASP.NET Core Web API with Dapper and PostgreSQL project on GitHub.

Conclusion

In this article, we learned how to create an ASP.NET Core CRUD web API in .NET 6 using PostgreSQL and Dapper. To better understand it, we implemented a database service as a generic service to perform the CRUD operations.

I hope this article helped you understand the construction of an ASP.NET Core web API. Please share your thoughts in the comment section below. Thank you for reading.

The Syncfusion ASP.NET Core UI control library, powered by Essential JS 2, is the only suite you will ever need to build an app. It contains over 70 high-performance, lightweight, modular, and responsive UI controls in a single package. Use them to build stunning web apps!

If you’re already a Syncfusion user, you can download the product setup. If not, you can download a free 30-day trial to evaluate our products.

You can contact us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!

Functional Reactive Programming with Node.js Streams

Suresh Mohan — Wed, 03 Aug 2022 11:04:10 +0000

Modern web applications use real-time events to provide a highly interactive user experience. As developers, it is essential to be aware of the tools and techniques to handle them appropriately.

Functional reactive programming (FRP) is a variant of reactive programming that appears to be one of the best solutions to address concerns with user experience. FRP supports complex data flows, making it easy to predictably develop and handle event streams.

In this article, I will take you through the basics of the FRP concept with Node.js. Then we’ll develop essential components to achieve FRP using only Node.js streams.

What is functional reactive programming (FRP)?

First, let’s understand what functional and reactive programming is:

Functional programming: The concept behind functional programming is that each time you call a function with the same parameters, it returns the same result. For that, functional programming languages must not hold any state. The advantage of this technique is that it makes code easier to test, more predictable, and therefore, in theory, more reliable.
Reactive programming: Reactive programming is programming with concurrent data streams. A program is considered reactive when a change in input results in a proportional change in output without having to update it explicitly. As a result, reactive programming entails writing code that works with time flow and computational events. It eliminates the burden of manually managing complex functionalities for software engineers.

The goal of FRP is to describe things like user inputs in a more direct declarative manner by making their behavior more apparent. There are two main concepts in FRP as different data categories, events, and behaviors are involved. Events indicate a value at a certain time, and behavior reflects values that change over time. When these concepts are joined effectively, the entire program becomes a collection of events and behaviors.

There are many amazing FRP-inspired libraries, such as RxJS and Bacon.js. But we shouldn’t forget the Node stream interface for FRP and event streams. Sadly, popular FRP-inspired libraries don’t make use of FRP. However, they have similar functions like Rx.Node.fromStream() and Bacon.fromBinder() to provide streaming capabilities like Node streams.

So, let’s see how to implement FRP using Node.js streams.

Need for Node streams in FRP

Let’s define a simple problem we want to solve. Assume that we fetch data from a database, in this case, a list of numbers. Later, we multiply each number by 100, filter the ones with a value higher than 500, and compute their sum.

const sumOfBiggerNumbers = async () => {
  const numbers= await DB.getNumbersAsArray({ collection: ‘Number’ });

  const sum = numbers
   .map((number) => number.value* MULTIPLIER) 
   .filter((value) => value> 500) 
   .reduce((sum, value) => sum + value, 0); 

 return sum; 
};
sumOfBiggerNumbers();

Let’s look at some potential drawbacks of this method. First, everything is kept in memory: the DB’s array is kept in memory. The memory cost can be enormous if there are hundreds of data points. Although map, filter, and reduce are helpful functions, the data set will rotate three times.

We can easily overcome such issues by using streams.

Introducing Node.js streams

Before moving forward with streams, let’s quickly recap what streams are.

Streams are one of the essential notions in Node.js applications. They efficiently manage reading and writing files, network communications, and end-to-end data transfer. For example, when you tell a program to read a file, it reads the file from beginning to end into memory before being processed.

But, with streams, you read it piece by piece, digesting the content without having to retain it all in memory.

Streams are of four categories:

Readable : You can only receive data from a readable stream. Data is buffered when pushed into a readable stream until a client begins to read it.
Writable : You can only send data from a writable stream.
Duplex : A readable and writable stream combined.
Transform : Identical to a duplex stream, except that the output is modified or transformed.

Let’s look at how we can solve the previously discussed problem with the help of streams.

Create a function named DB.getNumbersAsStream that returns the same results as DB.getNumbersAsArray in the previous scenario. But here, it’s as an object stream.

const stream = DB.getNumbersAsStream({ collection: ‘Number’ });

stream.on(‘read’, (number) => console.log(number)); 

// Output - When read callback is called
// {id:1, value: 150} 
// {id:2, value: 65}

Then, create a transform stream to perform the multiplication operation. It multiplies each number data by the MULTIPLIER and returns the product. For this stream, we’ll use a simpler constructor (number data * MULTIPLIER = product). We are using a transform stream since it can read data, transform it, and then write the changed data in a predefined format.

// Transform stream.
Const MULTIPLIER = 100;

const multiply= new Transform({ 
  objectMode: true, 
  transform(number, encoding, callback) { 
    callback(null, number.value* MULTIPLIER); 
  }, 
});

The complete code will look like the following and the stream.pipe() method helps us to connect the readable stream to the writeable stream.

Const { Transform } = require(‘stream’); 

const multiply = new Transform({ 
   objectMode: true, 
   transform(number, encoding, callback) { 
     callback(null, number.value* MULTIPLIER); 
   }
});

const stream = await DB.getNumbersAsStream({ collection: ‘Number’ });

const transformedStream = stream.pipe(multiply); 
transformedStream.on(‘data’,(value) => console.log(value));

// This will be the output. 
// 15000
// 6500

In the previous example, we implemented our map function .map((number => number.value*MULTIPLIER) as a transform stream, and filter and reduce can be written in the same way. But it is not necessary to write each function as a transform stream. Instead, we can handle it somewhere else while hiding the transform instantiation.

Now, let’s see how to do it.

Map

const map = (fn, options = {}) => new Transform({ 
  objectMode: true,  
  ...options, 

  transform(chunk, encoding, callback) { 
     let num; 
     try { 
       num = fn(chunk); 
     } catch (e) { 
        return callback(e); 
     } 
     callback(null, num); 
  }, 
});

Filter

const filter = (fn, options = {}) => new Transform({  
  objectMode: true,  
  ...options,   

  transform(chunk, encoding, callback) {  
    let res;  
    try {  
      res = fn(chunk);  
    } catch (e) {  
       return callback(e);  
    }  
    return callback(null, res ? chunk : undefined);  
  },  
});

Reduce

const reduce = (fn, acc, options = {}) => new Transform({  
  objectMode: true,  
  ...options,   

  transform(chunk, encoding, callback) {  
    try {  
      acc = fn(acc, chunk);  
    } catch (e) {  
      return callback(e);  
    }   
    return callback();  
  },   
  flush(callback) {  
    callback(null, acc);  
  },  
});

While map and filter both emit values when the stream is running, reduce only emits at the end. We can’t predict the number of chunks (numbers) present in a stream, so we have to wait until the stream ends to emit the sum (reduced) value.

Next, we use map , filter , and reduce for streams so that we can reuse our business logic. Finally, we write our code in this manner.

const multiply= (number) => number.value* MULTIPLIER; 
const greaterThan500 = (value) => value> 500; 
const sum = (sum, value) => value+ sum;

stream.pipe(map(multiply)).pipe(filter(greaterThan500)).pipe(reduce(sum, 0));

This is just a basic example. The final code will look as follows.

// Separate new map, filter, reduce functions created as transform streams in their module. 
const { map, filter, reduce } = require('./streamUtils');  

const multiply= (number) => number.value* MULTIPLIER; 
const greaterThan500 = (value) => value> 500; 
const sum = (sum, value) => value+ sum;  

const stream = await DB.getNumbersAsStream({ collection: ‘Number’ });

return stream  
   .pipe(map(multiply))  
   .pipe(filter(greaterThan500 ))  
   .pipe(reduce(sum));

With this approach, we can minimize the issues we had in the initial example. Memory is carefully managed because streams rarely overload your memory, keeping only the latest chunk. Furthermore, the data set is never cycled multiple times. Instead, every chunk traverses through the map and filter functions once before proceeding to the reduce function, which will also access the chunks one after the other.

Until now, we have tried FRP with Node streams, and it is clear that it increases code stability and facilitates debugging and testing. It is also possible to isolate all transformations into independent functions, give them appropriate names, consider the signature, and ensure sufficient coverage with testing.

Why functional reactive programming in Node.js?

Now that we’ve covered FRP basics with streams, it’s essential to understand why you should use Node.js to implement FRP.

Feature implementation extensibility

The FRP approach simplifies adding new features to an existing project and projects that demand frequent feature updates.

Code composability

The code is clean, fast, and has a small memory cost. The code is untidy because each map, filter, and reduce function is enclosed with a pipe function. We have two options: make the code chainable (.map().filter().reduce()) like arrays, or adopt a pointless code style. We can wrap the stream object to make the function chainable.

Scalability

Writing functional reactive code simplifies code management and increases application scalability.

Readability

Functional reactive programming paradigms dramatically minimize the number of code lines needed to develop a feature. In addition, it allows our reactive codebase to be more readable and comprehensible since it downsizes the callback problems.

Drawbacks of functional reactive programming in Node.js

On the other hand, the FRP technique has some disadvantages:

Code blocks are redundant due to splitting up the workflow and dispersing the pieces throughout all services.
Solid expertise in streams and event loops is essential in designing reactive services.

When to use the functional reactive programming method in Node.js?

FRP might not fit everywhere. However, it is ideal in the situations such as:

When we need to decentralize the application flow into maintainable microservices.
When there isn’t enough time to get an application into production.
When a brief failure in a prior dependency causes the entire system to fail.
When there are many asynchronous blocks of code, the anticipated results may be late.

Conclusion

FRP is more than a utility or a library. It shapes the way you architect and conceive apps. This article discussed the concept of functional reactive programming with Node.js streams along with its advantages, drawbacks, and applicability. I hope this article gave you new insight and many exciting features for your next Node.js application.

Thank you for reading!

If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Introducing the New Blazor Pager Component

Suresh Mohan — Tue, 02 Aug 2022 12:11:21 +0000

We are happy to introduce the new Syncfusion Blazor Pager component in our 2022 Volume 2 release. It is one of the most-awaited and upvoted components in our feedback portal.

Let’s explore the features of the new Blazor Pager component and its UI design with code examples.

Blazor Pager: Overview

The Blazor Pager component is a completely responsive and customizable control. It can easily split data sets into pages and enable us to view them through an intuitive UI.

You can configure the look and feel of the Pager using several built-in options. The component supports standard functionalities like accessibility, keyboard interactions, and events. It also comes with industry-standard themes such as Material, Fabric, and Bootstrap.

Ease of use

Every user prefers to render a component and enable their required functionalities with minimal configuration. We developed our Blazor Pager component to render and enable features with minimal property declaration and configuration.

From the API name itself, you can easily understand the usage of the property. For more details, check out the Getting Started with Blazor Pager documentation.

Key features

The key features of the new Blazor Pager component are as follows:

Dropdown to choose the page size
Template
Responsive layout
Web standards
Globalization
Themes

Dropdown to choose the page size

The Pager lets you show different page sizes as a list in the pager dropdown, which helps us dynamically change the page size. You can also change the page size of the Pager by setting the PageSizes property.

Refer to the following image.

Page Size Dropdown in Blazor Pager Component

Template

You can customize the appearance of the entire Pager UI with HTML elements or other components using the Template property.

Refer to the following GIF image.

Customizing the Blazor Pager Component

Responsive layout

The Blazor Pager component acts intelligently and changes its UI responsively based on the pager dimensions. Its optimized design provides the best UI interaction on different devices.

While resizing the browser window, the elements in the Pager component will adjust automatically. The beauty is: there is no need for any specific property support to enable this feature in the Pager.

Refer to the following image.

Blazor Pager Component’s Responsive UI Layout

Web standards

Web accessibility is a major and essential requirement for any application. An app should be readable and understandable even for users with disabilities. We have developed our Blazor Pager with complete web accessibility support to satisfy this essential need.

Accessibility is achieved in the Blazor Pager component through the WAI-ARIA standard and keyboard navigation:

WAI-ARIA: The Pager component’s UI includes high-contrast visual elements that help users with low vision enjoy the best viewing experience. The Pager component’s features are easily accessed through assistive technologies such as screen readers.

The following ARIA attributes are used in the Blazor Pager component:
- pager (role)
- link (role)
- aria-label (attribute)
- aria-selected (attribute)
Keyboard navigation : Ensures that every cell is keyboard-accessible. You can even perform the major functions like navigation using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible apps using this component.

The Blazor Pager component supports the following keyboard shortcuts:

Interaction Keys	Description
Page down/Right arrow	Navigates to the next page.
Page up/Left arrow	Navigates to the previous page.
Enter/Space	Select the page currently in focus.
Tab	Focus on the next pager item.
Shift + Tab	Focus on the previous pager item.
Home	Navigates to the first page.
End	Navigates to the last page.
Alt + Page up	Navigates to the previous pager.
Alt + Page down	Navigates to the next pager.

Globalization

This feature allows the Blazor Pager component to function globally, thus meeting the diverse needs of different regions.

RTL rendering displays the text and layout from the right-to-left direction. This improves the user experience and accessibility for RTL languages like Hebrew, Arabic, and Persian.

You can localize all the strings used in the Pager component’s UI. The localization (l10n) library is used to localize the UI strings.

Themes

Themes provide an elegant look and feel to an app. The Blazor Pager component supports several built-in SASS-based themes: Fluent, Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. You can also easily customize the themes by overriding the existing SASS styling.

Integrating the Pager and ListView components

We can integrate the Blazor Pager component with all data-binding components, such as DataGrid, Card, and ListView.

Let’s see how to integrate the Blazor Pager component with the ListView component.

You can split the ListView component’s data set into sectioned pages and view them page by page. Navigation can be done with the built-in numeric elements and buttons available.

First, render the Blazor ListView component. Refer to this documentation for more details regarding how to define this component.

<SfListView DataSource="@ListData" TValue="DataModel" HeaderTitle="Contacts" Height="355px" ShowHeader="true">
   <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Name"></ListViewFieldSettings>
</SfListView>

@code {

   // Initialize the list.
   List<DataModel> ListData = new List<DataModel>();
   protected override void OnInitialized()
   {
     base.OnInitialized();
     ListData.Add(new DataModel { Name = "Nancy, Berlin, France" });
     ListData.Add(new DataModel { Name = "Andrew, Madrid, Germany"});
     ListData.Add(new DataModel { Name = "Janet, London, Brazil"});
     ListData.Add(new DataModel { Name = "Margaret, Marseille, Belgium"});
     ListData.Add(new DataModel { Name = "Steven, Cholchester, Switzerland"});
     ListData.Add(new DataModel { Name = "Laura , Tsawassen, Venezuela");
     ListData.Add(new DataModel { Name = "Robert, Tacoma, Austria"});
     ListData.Add(new DataModel { Name = "Michael, Redmond, Mexico"});
     ListData.Add(new DataModel { Name = "Albert, Kirkland, USA"});
     ListData.Add(new DataModel { Name = "Nolan, London, Sweden" });
     ListData.Add(new DataModel { Name = "Jennifer, Berlin, Finland");
     ListData.Add(new DataModel { Name = "Carter, Madrid, Italy"});
     ListData.Add(new DataModel { Name = "Allison, Marseille, Spain"});
     ListData.Add(new DataModel { Name = "John, Tsawassen, UK"});
     ListData.Add(new DataModel { Name = "Susan, Redmond, Ireland" });
     ListData.Add(new DataModel { Name = "Lydia, Cholchester, Portugal" });
     ListData.Add(new DataModel { Name = "Kelsey, London, Canada"});
     ListData.Add(new DataModel { Name = "Jessica, Kirkland, Denmark"});
     ListData.Add(new DataModel { Name = "Robert, Berlin, Austria"});
     ListData.Add(new DataModel { Name = "Shelley, Tacoma, Poland"});
     ListData.Add(new DataModel { Name = "Vanjack, Tsawassen, Norway"});
     ListData.Add(new DataModel { Name = "shelley, Cholchester, Argentina"});
     ListData.Add(new DataModel { Name = "Lydia, Kirkland, Finland"});
     ListData.Add(new DataModel { Name = "Jessica, Madrid, Sweden"});
     ListData.Add(new DataModel { Name = "Nolan, London, UK"});
     ListData.Add(new DataModel { Name = "Jennifer, Redmond, Italy"});
   }
   public class DataModel
   {
     public string Name { get; set; }
     public string Id { get; set; }
   }
}

From the previous code, you can see that the entire data source is bound to the ListView component. In the following steps, we will learn how to limit the rendering of data in the ListView using the Pager component.

Now, render the Blazor Pager component. Refer to this documentation for more details regarding how to define this component.

<SfPager PageSize=5 NumericItemsCount=2 TotalItemsCount=25 >
</SfPager>

Then, limit the rendering of data during the initial rendering time of the ListView component based on the PageSize defined in the Pager component. Refer to the following code example.

<div class="control-container">
  @{
      // Process and bind current page data to the ListView component instead of binding the entire data.
      var listData = ListData.Skip(Skip).Take(Take).ToList();

     <SfListView DataSource="@listData" TValue="DataModel" HeaderTitle="Contacts" Height="355px" ShowHeader="true">
       <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Name"></ListViewFieldSettings>
     </SfListView>
   }
   <div class="pager-container">
     <SfPager PageSize=5 NumericItemsCount=2 TotalItemsCount=25>
     </SfPager>
   </div>
</div>

@code {

   public int SkipValue ;
   public int TakeValue = 5; // It refers the PageSize value of Pager component
   // Initialized the list.
   List<DataModel> ListData = new List<DataModel>();
   protected override void OnInitialized()
   {
     base.OnInitialized();
     ListData.Add(new DataModel { Name = "Nancy, Berlin, France" });
     ListData.Add(new DataModel { Name = "Andrew, Madrid, Germany"});
     ListData.Add(new DataModel { Name = "Janet, London, Brazil"});
     ListData.Add(new DataModel { Name = "Margaret, Marseille, Belgium"});
     ListData.Add(new DataModel { Name = "Steven, Cholchester, Switzerland"});
     ListData.Add(new DataModel { Name = "Laura , Tsawassen, Venezuela");
     ListData.Add(new DataModel { Name = "Robert, Tacoma, Austria"});
     ListData.Add(new DataModel { Name = "Michael, Redmond, Mexico"});
     ListData.Add(new DataModel { Name = "Albert, Kirkland, USA"});
     ListData.Add(new DataModel { Name = "Nolan, London, Sweden" });
     ListData.Add(new DataModel { Name = "Jennifer, Berlin, Finland");
     ListData.Add(new DataModel { Name = "Carter, Madrid, Italy"});
     ListData.Add(new DataModel { Name = "Allison, Marseille, Spain"});
     ListData.Add(new DataModel { Name = "John, Tsawassen, UK"});
     ListData.Add(new DataModel { Name = "Susan, Redmond, Ireland" });
     ListData.Add(new DataModel { Name = "Lydia, Cholchester, Portugal" });
     ListData.Add(new DataModel { Name = "Kelsey, London, Canada"});
     ListData.Add(new DataModel { Name = "Jessica, Kirkland, Denmark"});
     ListData.Add(new DataModel { Name = "Robert, Berlin, Austria"});
     ListData.Add(new DataModel { Name = "Shelley, Tacoma, Poland"});
     ListData.Add(new DataModel { Name = "Vanjack, Tsawassen, Norway"});
     ListData.Add(new DataModel { Name = "shelley, Cholchester, Argentina"});
     ListData.Add(new DataModel { Name = "Lydia, Kirkland, Finland"});
     ListData.Add(new DataModel { Name = "Jessica, Madrid, Sweden"});
     ListData.Add(new DataModel { Name = "Nolan, London, UK"});
     ListData.Add(new DataModel { Name = "Jennifer, Redmond, Italy"});
   }
   public class DataModel
   {
     public string Name { get; set; }
     public string Id { get; set; }
   }
}
<style>
  .e-listview , .pager-container {
     max-width: 460px;
  }
</style>

Now, we need to bind the data in the ListView component while navigating the pages in the Pager component. While navigating the numeric items in the Pager, the Click event will be triggered. In the Click event of the Pager, we will calculate the number of items to be displayed on each page of the ListView. Initially, the ListView items are displayed on each page based on the Pager’s PageSize property. Refer to the following code example.

<div class="control-container">
  @{
     var listData = ListData.Skip(Skip).Take(Take).ToList();

     <SfListView @ref="@List" DataSource="@listData" TValue="DataModel" HeaderTitle="Contacts" Height="355px" ShowHeader="true">
       <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Name"></ListViewFieldSettings>
     </SfListView>
  }
  <div class="pager-container">
    <SfPager @ref="@Pager" PageSize=5 NumericItemsCount=2 TotalItemsCount=25 Click="Click">
    </SfPager>
  </div>
</div>
@code {
  SfPager Pager;
  public SfListView<DataModel> List { get; set; }
  public int Skip ;
  public int Take = 5;

  // Initialized the list.
  List<DataModel> ListData = new List<DataModel>();
  protected override void OnInitialized()
  {
     base.OnInitialized();
     ListData.Add(new DataModel { Name = "Nancy, Berlin, France" });
     ListData.Add(new DataModel { Name = "Andrew, Madrid, Germany"});
     ListData.Add(new DataModel { Name = "Janet, London, Brazil"});
     ListData.Add(new DataModel { Name = "Margaret, Marseille, Belgium"});
     ListData.Add(new DataModel { Name = "Steven, Cholchester, Switzerland"});
     ListData.Add(new DataModel { Name = "Laura , Tsawassen, Venezuela");
     ListData.Add(new DataModel { Name = "Robert, Tacoma, Austria"});
     ListData.Add(new DataModel { Name = "Michael, Redmond, Mexico"});
     ListData.Add(new DataModel { Name = "Albert, Kirkland, USA"});
     ListData.Add(new DataModel { Name = "Nolan, London, Sweden" });
     ListData.Add(new DataModel { Name = "Jennifer, Berlin, Finland");
     ListData.Add(new DataModel { Name = "Carter, Madrid, Italy"});
     ListData.Add(new DataModel { Name = "Allison, Marseille, Spain"});
     ListData.Add(new DataModel { Name = "John, Tsawassen, UK"});
     ListData.Add(new DataModel { Name = "Susan, Redmond, Ireland" });
     ListData.Add(new DataModel { Name = "Lydia, Cholchester, Portugal" });
     ListData.Add(new DataModel { Name = "Kelsey, London, Canada"});
     ListData.Add(new DataModel { Name = "Jessica, Kirkland, Denmark"});
     ListData.Add(new DataModel { Name = "Robert, Berlin, Austria"});
     ListData.Add(new DataModel { Name = "Shelley, Tacoma, Poland"});
     ListData.Add(new DataModel { Name = "Vanjack, Tsawassen, Norway"});
     ListData.Add(new DataModel { Name = "shelley, Cholchester, Argentina"});
     ListData.Add(new DataModel { Name = "Lydia, Kirkland, Finland"});
     ListData.Add(new DataModel { Name = "Jessica, Madrid, Sweden"});
     ListData.Add(new DataModel { Name = "Nolan, London, UK"});
     ListData.Add(new DataModel { Name = "Jennifer, Redmond, Italy"});
  }

  // This Click handler is triggered while clicking on the Pager numeric item.
  public void Click(PageClickEventArgs args)
  {
    // From the Pager instance, you can access its properties value and the current action details from this PageClickEventArgs.
    // Based on this information, calculate the Skip and Take values of the current page and manipulate the data source to get the current page data.
       Skip = (args.CurrentPage * Pager.PageSize) - Pager.PageSize;
       Take = Pager.PageSize;
  }
  public class DataModel
  {
     public string Name { get; set; }
     public string Id { get; set; }
  }
}
<style>
  .e-listview , .pager-container {
      max-width: 460px;
   }
</style>

References

For more details, refer to our Getting Started with Blazor Pager Component documentation and demos.

Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the new Blazor Pager component, rolled out in the 2022 Volume 2 release. Try out this great control and provide your valuable feedback in the comments section. Check out our Release Notes and What’s New pages to see all the new updates in this release.

For current customers, the new Essential Studio version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our newest features.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

A Full-Stack Web App Using Blazor WebAssembly and GraphQL—Part 5

Suresh Mohan — Tue, 02 Aug 2022 11:00:23 +0000

In the previous article of this series, we learned how to register users with authentication. In this article, we will add the authorization feature to our application. Let’s start by adding the user policies.

Define the user policies

Our app will support policy-based authorization. Add the Policies.cs ** class file inside the **MovieApp.Shared\Models folder. Add the following code to it.

public static class Policies
{
    public static AuthorizationPolicy AdminPolicy()
    {
        return new AuthorizationPolicyBuilder()
            .RequireAuthenticatedUser()
            .RequireRole(UserRoles.Admin)
            .Build();
    }

    public static AuthorizationPolicy UserPolicy()
    {
        return new AuthorizationPolicyBuilder()
            .RequireAuthenticatedUser()
            .RequireRole(UserRoles.User)
            .Build();
    }
}

We will add support for the following two policies:

AdminPolicy: will check the Admin role for an authenticated user.
UserPolicy: will check the User role for an authenticated user.

Configure the Program.cs file

Now, register and configure the authentication services for the .NET middleware.

Add the following code to the Program.cs file.

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
 .AddJwtBearer(options =>
 {
     options.RequireHttpsMetadata = false;
     options.SaveToken = true;
     options.TokenValidationParameters = new TokenValidationParameters
     {
         ValidateIssuer = true,
         ValidateAudience = true,
         ValidateLifetime = true,
         ValidateIssuerSigningKey = true,
         ValidIssuer = builder.Configuration["Jwt:Issuer"],
         ValidAudience = builder.Configuration["Jwt:Audience"],
         IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(builder.Configuration["Jwt:SecretKey"])),
     };
 });

The AddAuthentication extension method helps us to register the services required by the JWT authentication scheme. The AddJwtBearer extension method allows us to enable JWT-bearer authentication.

To validate the JWT, define the token validation parameters. The description of each parameter is shown below:

ValidateIssuer: Asks the middleware to validate the issuer during token validation.
ValidateAudience: Asks the middleware to validate the audience during token validation.
ValidateLifetime: Asks the middleware to validate the lifetime during token validation.
ValidateIssuerSigningKey: Asks the middleware to validate the signing SecurityKey during token validation.
ValidIssuer: A string value that represents a valid issuer that will be used to check against the token’s issuer. We will use the same value that we used while generating JWT.
ValidAudience: A string value that represents a valid audience that will be used to check against the token’s audience. We will use the same value that we used while generating JWT.
IssuerSigningKey: Sets the security key that will be used during token validation.

The next step is to register the authorization policy services. Add the code shown.

builder.Services.AddAuthorization(config =>
{
    config.AddPolicy(UserRoles.Admin, Policies.AdminPolicy());
    config.AddPolicy(UserRoles.User, Policies.UserPolicy());
});

Update the GraphQL server configuration DI like in the following code example. This will add authorization support to the GraphQL server.

builder.Services.AddGraphQLServer()
    .AddDefaultTransactionScopeHandler()
    .AddAuthorization() //Add this extension method.
    .AddQueryType<MovieQueryResolver>()
    .AddMutationType<MovieMutationResolver>()
    .AddTypeExtension<AuthMutationResolver>()
    .AddFiltering()
    .AddSorting();

Add the following code to enable authentication and authorization capabilities for our application.

app.UseAuthentication();
app.UseAuthorization();

Note: Add these two lines of code after the app.UseRouting() method call.

Secure the GraphQL resolver

Use the [Authorize] attribute to secure our GraphQL server endpoint.

Note: The [Authorize] attribute is available in the Microsoft.AspNetCore.Authorization and HotChocolate.AspNetCore.Authorization packages. The packages are different from each other. Use the attribute provided by the HotChocolate.AspNetCore.Authorization package.

Navigate to the MovieMutationResolver.cs file and add the following import statement at the top.

using HotChocolate.AspNetCore.Authorization;

Allow only the authenticated user with the role Admin to add, edit, and delete the movie data. So, annotate the corresponding methods with the [Authorize] attribute and policy like in the following code example.

[Authorize(Policy = UserRoles.Admin)]
[GraphQLDescription("Add a new movie data.")]
public AddMoviePayload AddMovie(Movie movie)
{
    // Existing method definition.
}

[Authorize(Policy = UserRoles.Admin)]
[GraphQLDescription("Edit an existing movie data.")]
public async Task<AddMoviePayload> EditMovie(Movie movie)
{
    // Existing method definition.
}

[Authorize(Policy = UserRoles.Admin)]
[GraphQLDescription("Delete a movie data.")]
public async Task<int> DeleteMovie(int movieId)
{
    // Existing method definition.
}

Add GraphQL client mutation for authentication

Since we have added a new method on the server for user login, regenerate the GraphQL client using the process discussed in part 2 of this series.

Add the AuthenticateUser.graphql file inside the MovieApp.Client\GraphQLAPIClient folder. Add the GraphQL mutation to authenticate the user, as follows.

mutation login($userData:UserLoginInput!){
    userLogin(userDetails:$userData){
      errorMessage,
      token
    }
}

Please use the Visual Studio shortcut Ctrl+Shift+B to build the project. It will regenerate the Strawberry Shake client class.

Add the required NuGet packages

Now, add two NuGet packages to the client project.

Navigate to Tools >> NuGet Package Manager >> Package Manager Console. Select MovieApp.Client from the default project drop-down and run the following command.

Install-Package Microsoft.AspNetCore.Components.Authorization -Version 6.0.2

This package will provide the required support for authentication and authorization to the Blazor project.

Now, add the Blazored.LocalStorage package. This will allow us to access the local storage of the browser. This will help us store and fetch JWT in the local storage.

Install-Package Blazored.LocalStorage -Version 4.2.0

Add the following line in the MovieApp.Client\Program.cs file to register this package.

builder.Services.AddBlazoredLocalStorage();

Create the AuthToken class

Add the AuthToken.cs class file in the MovieApp.Client project. Include the following code inside the file.

public static class AuthToken
{
    public static string TokenValue { get; set; } = string.Empty;

    public static string TokenIdentifier { get; set; } = "authToken";
}

The static property TokenIdentifier provides the string value that will be used as a key while storing the JWT in local storage.

Create the custom authentication state provider

Add a class file in the MovieApp.Client project and name it CustomAuthStateProvider.cs. Include the following code inside the file.

public class CustomAuthStateProvider : AuthenticationStateProvider
{
    private readonly ILocalStorageService _localStorage;
    private readonly AuthenticationState _anonymousUser;

    public CustomAuthStateProvider(ILocalStorageService localStorage)
    {
        _localStorage = localStorage;
        _anonymousUser = new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
    }

    public void NotifyAuthState()
    {
        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }

    static IEnumerable<Claim> ParseClaimsFromJwt(string jwt)
    {
        var claims = new List<Claim>();
        var payload = jwt.Split('.')[1];

        var jsonBytes = ParseBase64WithoutPadding(payload);

        var keyValuePairs = JsonSerializer.Deserialize<Dictionary<string, object>>(jsonBytes);

        if (keyValuePairs is not null)
        {
            claims.AddRange(keyValuePairs.Select(kvp => new Claim(kvp.Key, kvp.Value.ToString())));
        }

        return claims;
    }

    static byte[] ParseBase64WithoutPadding(string base64)
    {
        switch (base64.Length % 4)
        {
            case 2: base64 += "=="; break;
            case 3: base64 += "="; break;
        }
        return Convert.FromBase64String(base64);
    }
}

The ParseClaimsFromJwt method helps us to extract the user claims from the JWT payload. The NotifyAuthState method allows us to raise the AuthenticationStateChanged event. It will notify all the components about the change in the authentication state of the application.

The CustomAuthStateProvider class is inherited from the abstract class AuthenticationStateProvider. Now, override the GetAuthenticationStateAsync method of the AuthenticationStateProvider class.

Add the following code.

public override async Task<AuthenticationState> GetAuthenticationStateAsync()
{
    AuthToken.TokenValue = await _localStorage.GetItemAsync<string>(AuthToken.TokenIdentifier);

    if (string.IsNullOrWhiteSpace(AuthToken.TokenValue))
    {
        return _anonymousUser;
    }

    List<Claim>? userClaims = ParseClaimsFromJwt(AuthToken.TokenValue).ToList();

    return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(userClaims, "BlazorClientAuth")));
}

Then, fetch the JWT from local storage. If the JWT is set in the local storage, invoke the ParseClaimsFromJwt method to fetch the user claims. Next, return an instance of the AuthenticationState class with the user claims.

If the token is not set, return an empty instance of AuthenticationState class.

Configure the Program.cs file

Add the following code in the MovieApp.Client\Program.cs file.

builder.Services.AddScoped<CustomAuthStateProvider>();
builder.Services.AddScoped<AuthenticationStateProvider>(
    provider => provider.GetRequiredService<CustomAuthStateProvider>()
    );

This will allow us to use the CustomAuthStateProvider as a scoped service across our client project.

Now, configure the HTTP client by setting the authorization header. This will make sure that the JWT is passed to the server via the request header in each HTTP request.

builder.Services.AddMovieClient()
           .ConfigureHttpClient(client =>
           {
               client.BaseAddress = new Uri(graphQLServerPath);

               client.DefaultRequestHeaders.Authorization =
                new AuthenticationHeaderValue("Bearer", AuthToken.TokenValue);
           }
);

Finally, add the authorization services using the following code.

builder.Services.AddOptions();

builder.Services.AddAuthorizationCore(config =>
{
    config.AddPolicy(UserRoles.Admin, Policies.AdminPolicy());
    config.AddPolicy(UserRoles.User, Policies.UserPolicy());
});

Create the login component

Create a new component under the pages folder and name it Login.razor. Add ComponentBase as base class for the component Login.razor.cs.

Add the following code to the base class.

public class LoginBase : ComponentBase
{
    [Parameter]
    [SupplyParameterFromQuery]
    public string returnUrl { get; set; } = default!;

    [Inject]
    NavigationManager NavigationManager { get; set; } = default!;

    [Inject]
    CustomAuthStateProvider CustomAuthStateProvider { get; set; } = default!;

    [Inject]
    MovieClient MovieClient { get; set; } = default!;

    [Inject]
    ILocalStorageService LocalStorageService { get; set; } = default!;

    [Inject]
    ILogger<LoginBase> Logger { get; set; } = default!;

    string _returnUrl = "/";
    protected UserLogin login = new();
    protected CustomValidator customValidator;

    protected override void OnInitialized()
    {
        if (returnUrl is not null)
        {
            _returnUrl = returnUrl;
        }
    }
}

Now, inject the required services. This component will accept an optional string parameter named returnUrl. This parameter will be supplied via the URL query string.

Add the following method to authenticate the user.

protected async Task AuthenticateUser()
{
    customValidator.ClearErrors();

    try
    {
        UserLoginInput loginData = new()
        {
            Password = login.Password,
            Username = login.Username,
        };

        var response = await MovieClient.Login.ExecuteAsync(loginData);

        if (response.Data is not null)
        {
            AuthResponse authResponse = new()
            {
                ErrorMessage = response.Data.UserLogin.ErrorMessage,
                Token = response.Data.UserLogin.Token
            };

            if (authResponse.ErrorMessage is not null)
            {
                customValidator.DisplayErrors(nameof(login.Username), authResponse.ErrorMessage);
                throw new HttpRequestException($"User validation failed. Status Code: 401 Unauthorized");
            }
            else
            {
                await LocalStorageService.SetItemAsync(AuthToken.TokenIdentifier, authResponse.Token);
                CustomAuthStateProvider.NotifyAuthState();
                NavigationManager.NavigateTo(_returnUrl);
            }
        }
    }
    catch (Exception ex)
    {
        Logger.LogError(ex.Message);
    }
}

Now, clear out any errors in the form by invoking the ClearErrors method of the customValidator service. We will create an object of the type UserLoginInput and invoke the Login method of the MovieClient.

If login fails at the server, the response will have an ErrorMessage. We will set a custom error for the username field of the form and throw a HttpRequestException from the method.

If the login is successful at the server, store the JWT in the local storage. Next, invoke the NotifyAuthState method of the customValidator service and then navigate the user to the path set by the returnUrl.

Add the following code to the Login.razor file.

@page "/login"
@inherits LoginBase

<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card mt-3 mb-3">
            <div class="card-header">
                <div class="d-flex justify-content-between">
                    <h2>Login</h2>
                    <div class="d-flex align-items-center">
                        <strong>New User? </strong>
                        <a href='register' class="nav-link">Register</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <EditForm Model="@login" OnValidSubmit="AuthenticateUser">
                    <DataAnnotationsValidator />
                    <CustomValidator @ref="customValidator" />

                    <div class="mb-3">
                        <label for="Username" class="form-label">Username</label>
                        <div class="col">
                            <InputText class="form-control" @bind-Value="login.Username" />
                            <ValidationMessage For="@(() => login.Username)" />
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="Password" class="form-label">Password</label>
                        <div class="col">
                            <InputText type="password" class="form-control" @bind-Value="login.Password" />
                            <ValidationMessage For="@(() => login.Password)" />
                        </div>
                    </div>

                    <div class="form-group" align="right">
                        <button type="submit" class="btn btn-success">Login</button>
                    </div>
                </EditForm>
            </div>
        </div>
    </div>
</div>

The EditForm component helps us to create the login form. We have added the built-in validators as well as the custom validators on the form. Invoke the AuthenticateUser method on valid submission of the form.

Create the redirect to the login component

Create a new component called RedirectToLogin.razor in the MovieApp.Client\Shared folder. Add the following code to it.

@inject NavigationManager Navigation

@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateTo($"login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}");
    }
}

This component can redirect the user to the Login page if the user tries to access a secure page without proper authentication. Then, set the returnUrl to the path the user tries to access.

Update the app component

Add the following import definition to the Imports.razor file.

@using Microsoft.AspNetCore.Components.Authorization

Open the App.razor file and replace the existing code with the following code.

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly" PreferExactMatches="@true">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @if (!context.User.Identity.IsAuthenticated)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p>You are not authorized to access this resource.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

The CascadingAuthenticationState component helps us to provide the authentication state at the root level inside the app.razor file. The AuthorizeRouteView component allows us to display the page matching for the specified route only if the user is authorized to see it.

The content inside the NotAuthorized tag will be displayed only to non-authorized users.

The context property is provided by the Blazor framework’s AuthenticationState class. Access the user information via the context property and check if the user is authenticated or not. If the user tries to access a page without authentication, we will redirect the user to the login page. Otherwise, we will display the message that the user is not authorized to access this resource.

Add authorization to the Blazor components

There are two ways to implement authorization in Blazor components:

Using the [Authorize] attribute in the component file.
Using the IAuthorizationService in the base class.

Open the AddEditMovie.razor file and add the following code at the top.

@using MovieApp.Shared.Models;
@using Microsoft.AspNetCore.Authorization

@attribute [Authorize(Policy = UserRoles.Admin)]
// Other code

We added the [Authorize] attribute and specified the policy, which is to allow to access this component.

After this, we will secure the ManageMovie component. Add the following code to the ManageMovies.razor.cs file.

// Other code

[Inject]
IAuthorizationService AuthService { get; set; } = default!;

[CascadingParameter]
public Task<AuthenticationState> AuthenticationState { get; set; } = default!;

// Other code

protected override async Task OnInitializedAsync()
{
    var authState = await AuthenticationState;
    var CheckAdminPolicy = await AuthService.AuthorizeAsync(authState.User, Policies.AdminPolicy());

    if (CheckAdminPolicy.Succeeded)
    {
        await GetMovieList();
    }
    else
    {
        NavigationManager.NavigateTo($"login?returnUrl={Uri.EscapeDataString(NavigationManager.Uri)}");
    }
}

We injected the IAuthorizationService into the class. We have supplied the AuthenticationState as a CascadingParameter, which helps in accessing the user claims.

Inside the OnInitializedAsync lifecycle method, we fetch the current AuthenticationState of the user. The AuthorizeAsync method validates if the user meets the criteria specified in the policy. This method will return a Boolean value specifying whether the policy evaluation is successful or not.

If the user policy evaluation fails, we redirect the user to the Login page and set the returnUrl query parameter.

Update the NavMenu component

Open the NavMenu.razor.cs file and add the following code to it.

public class NavMenuBase : ComponentBase
{
    [Inject]
    NavigationManager NavigationManager { get; set; } = default!;

    [Inject]
    CustomAuthStateProvider CustomAuthStateProvider { get; set; } = default!;

    [Inject]
    ILocalStorageService LocalStorageService { get; set; } = default!;

    protected bool show = false;

    protected async Task LogoutUser()
    {
        await LocalStorageService.RemoveItemAsync(AuthToken.TokenIdentifier);
        CustomAuthStateProvider.NotifyAuthState();
        NavigationManager.NavigateTo("/");
    }
}

In the LogoutUser method, we perform the following three operations:

Remove the JWT from the local storage.
Invoke the NotifyAuthState method to notify of the change in the application authentication state.
Navigate the user back to the home page.

Now, open the NavMenu.razor file and replace the existing code with the following.

@using MovieApp.Shared.Models
@inherits NavMenuBase

<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">Movie App</a>
        <span class="spacer"></span>
        <AuthorizeView Policy="@UserRoles.Admin">
            <Authorized>
                <a class="nav-link" href="admin/movies">Admin Panel</a>
            </Authorized>
        </AuthorizeView>
        <AuthorizeView>
            <Authorized>
                <div class="dropdown">
                    <a class="nav-link dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false" @onclick="e => show=!show">
                        @context.User.Identity.Name
                    </a>
                    <div class="dropdown-menu-end dropdown-menu @(show? "show" :"")">
                        <a class="dropdown-item" @onclick="LogoutUser">Logout</a>
                    </div>
                </div>
            </Authorized>
            <NotAuthorized>
                <a class="nav-link" href="login">Login</a>
            </NotAuthorized>
        </AuthorizeView>
    </div>
</nav>

The AuthorizeView component helps us to display the data only to the authorized users. The user with the role Admin can see the Admin Panel link in the nav-bar.

If the user is logged in, display a dropdown menu showing the username as the title and a logout button as a menu item.

If the user is not logged in, show a link to the login page.

Update the database

If a user registers using the UI, they will be registered with the User role. If we want to add a user with the Admin role, add it directly via the database.

Open SSMS and run the following SQL query in the MovieDB database.

INSERT INTO UserMaster
VALUES('Ankit','Sharma','admin','Admin@123','Male','Admin');

Execution demo

Launch the application and you can register a new user as shown.

After the registration is successful, log in as the user.

Resource

The complete source code of this application is available on GitHub.

Summary

Thanks for reading! In this article, we have added authorization to restrict access to the application resources based on the policies defined for the user.

In our next article of this series, we will configure the client-side state management in our application.

Syncfusion’s Blazor component suite offers over 70 UI components that work with both server-side and client-side (WebAssembly) hosting models seamlessly. Use them to build marvelous apps!

If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!