How Efficient is Delegation Design Pattern in Angular

Kenneth Tengco — Mon, 09 Jan 2023 06:21:57 +0000

A quick introduction to Delegation Design Pattern. As the name implies, it delegates the context to a Delegate.

“You may not need State Management”

Intent

To reduce chaotic dependencies between the context.
A team of developers can work simultaneously on what they want to do with the context.
Prevents direct public method calls from the Delegator since it’s only an internal class used by the Event class.
Prevents changing of the original context.
Also, it resolves communication in micro frontend architecture.

How to Implement

Declare an interface of the Delegator and define the desired method between the Delegator and Delegate.

Declare the Delegator class and implement the interface. Make sure the Delegator class accepts a Map Object of Delegate from the constructor.

Declare the Event class as Injectable and Singleton. Then in the constructor, instantiate the Delegator class and assign it to a private property.

Make sure the Event class has:

A Map Object of Delegate, so we can pass it when instantiating the Delegator class.

A public method to register and unregister the Delegate.

Declare the Delegate and implement the Delegator interface. To register the Delegate, use the Event class as a Dependency Injection of the Delegate and call the register method.

This is the Abstract class and implements the interface of the Delegator for code reuse.

In the constructor, register the Delegate using the Event class and save the Delegate ID. We will use the Delegate ID to unregister when the component is going to be destroyed.

These are the methods that can be reused for the Concrete class.

Below is an example of Concrete classes that serve as the Delegate.

This Concrete class is used to display the total number of active cases and the last update on Covid19.

Covid19FeedSummaryComponent

This Concrete class is used to display the top five countries with the highest number of active cases of Covid19.

Covid19FeedCountryRankComponent

Below is a Concrete class used to display the list of countries grouped by continent with the highest number of active cases of Covid19.

import { Component, ChangeDetectionStrategy } from "@angular/core";

import { Covid19Statistic } from "../../covid19-tracker/model";
import { Covid19GroupStatisticAdapter } from "../../model";
import { Covid19FeedComponent } from "../covid19-feed.component";

type GroupKey = string;

@Component({
    selector: "covid19-feed-list-component",
    templateUrl: "./covid19-feed.list.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class Covid19FeedListComponent extends Covid19FeedComponent {

    private readonly listDictionary: Map<GroupKey, Covid19Statistic[]> = new Map();
    private readonly groupDictionary: Map<GroupKey, Covid19GroupStatisticAdapter> = new Map();

    public groups: Covid19GroupStatisticAdapter[] = [];

    public override statisticUpdate(statistic: Covid19Statistic[]): void {
        this.updateGroupList(statistic);
        this.sortGroupList();
    }

    public getList(group: Covid19Statistic): Covid19Statistic[] {
        const groupKey = this.generateGroupKey(group);
        const list = this.listDictionary.get(groupKey);

        if (list === undefined) {
            throw new Error(`'${groupKey}' groupKey is not found in the dictionary.`);
        }

        return list;
    }

    private updateGroupList(statistic: Covid19Statistic[]) {
        for (const stat of statistic) {
            if (stat.continent === "All") {
                continue;
            }

            const groupKey = this.generateGroupKey(stat);
            const group = this.listDictionary.get(stat.continent);

            if (stat.continent === stat.country) {
                this.groupDictionary.set(groupKey, new Covid19GroupStatisticAdapter(stat));

                if (group === undefined) {
                    this.listDictionary.set(groupKey, []);
                }

                continue;
            }

            if (group === undefined) {
                this.listDictionary.set(groupKey, [stat]);
            } else {
                group.push(stat);
            }
        }
    }

    private generateGroupKey(statistic: Covid19Statistic): string {
        return statistic.continent;
    }

    private sortGroupList(): void {
        this.groups = Array.from(this.groupDictionary.values())
            .sort((compareA: Covid19GroupStatisticAdapter, compareB: Covid19GroupStatisticAdapter) => {
                return compareB.statistic.cases.active - compareA.statistic.cases.active;
            });

        for (const list of this.listDictionary.values()) {
            list.sort((compareA: Covid19Statistic, compareB: Covid19Statistic) => {
                return compareB.cases.active - compareA.cases.active;
            });
        }
    }
}

Covid19FeedListComponent

Finally, we will use the Event class to delegate some context.

This component has three Delegate components in the template, see the figure below.

On initialization of the component, it will call the load statistics method. This is an event method that delegates some context. Let’s review the method quickly.

The statistic loading method accepts three states. LOADING, SUCCESS, and ERROR and delegate this context to the (concrete class) Delegate. The Delegate will receive this state and do what it needs to be done.
The statistic update method accepts an Array of “Covid19Statistic” (the model) class instances and delegates this context to the (concrete class) Delegate. The same thing, the Delegate will receive this state and do what needs to be done.

That technically sums up how Delegation Design Pattern works. Below is the output of the application.

The API used is for testing purposes only, so these numbers are not real.

Pros

The Delegate has clear method definitions of the Delegator to handle the context being delegated.
The files are easy to track because of the implementation of the interface of the Delegator.
Open/Closed Principle – Easy to introduce a new Delegate without breaking the existing client code.
Single Responsibility Principle – The communication is in one place that comes from the Event class, and using the Delegator interface makes it much easier to comprehend and maintain.
Can reduce coupling between various components or classes.
Can reuse the individual components or classes much more manageable.

Cons

When the interface of the Delegator is somehow abused, meaning it does not have segregation of interfaces or different behaviors are in one place.

Conclusion

Delegator Interface – used to describe the methods to communicate between the Delegator and Delegate class.
Delegator Class – implements the Delegator interface and delegates the context to the Delegate and is only used internally by the Event class.
Event Class – uses the Delegator class as internal and calls its method to delegate the context.
Delegate Class – implements the Delegator interface and uses the Event class to register or unregister itself. Also, it can call some event method from the Event class to trigger some Delegator method.

By the way, did you notice the Adapter model? If you don’t know how it works or need more explanation about it, subscribe now to get more updates. 😉

Thanks for reading!

Advantages of using Dictionary or Map Object in Angular

Kenneth Tengco — Mon, 02 Jan 2023 05:38:32 +0000

A quick introduction to Dictionary or Map Object. In a nutshell, it is used to manage key-value pairs.

Below is the primary usage of Map Object.

First, we are going to use the MODEL below as an example for storing our values.

Then we will use a Class as a SERVICE to manage our Map Object.

To add a record in our Map Object:

To delete a record in our Map Object:

To get a value in our Map Object:

To get the keys in our Map Object:

To get the key-value pairs in our Map Object:

To get the values in our Map Object:

To get the length or size of our Map Object:

That sums up the usage. Pretty simple, right?

Now we can use it in our Angular component like the code snippet below.

So what are the ADVANTAGES of using it?

Easy to manage, delete, update, or get a record
No need to use an index to do something with the record
Prevents Object Injection Attack
Convertible to Array
Uses Iterable by default

Iterable can be used directly in the *ngFor directive of Angular

Make sure the downlevelIteration is enabled in your tsconfig file

Let's expose the values as IterableIterator in our SERVICE

Let's add a Person to our Map Object and use the Iterable values in our Angular template

This is how to use the Iterable values in our Angular template, just similar to how we loop the normal Array

How about sorting the key-value pairs?

Currently, it is not supported in the Map Object itself but below is a workaround to sort the key-value pairs.

Let's add a sort method to our SERVICE. We have to clear our Map Object and reinsert the key-value pairs

Then let's add more values in our Map Object and call the sort method that we just added in our SERVICE

Finally, this will be our output after sorting

We can just use the normal Array to sort, so we don't need to reset our Map Object.

Thanks for reading! Don't forget to subscribe if you want more updates! 😉

Forem: Kenneth Tengco

How Efficient is Delegation Design Pattern in Angular

“You may not need State Management”

Advantages of using Dictionary or Map Object in Angular