DEV Community: Hassam Ali

React encapsulating data fetching logic with container components

Hassam Ali — Sun, 05 Dec 2021 15:16:57 +0000

Container components are components that encapsulate the data loading and data management for the child application.

Let’s say you have a component called StarShipInfo component which lists the information about starship

const StarShipInfo = (id) => {
 const [starShip, setStarShip] = useState(null);
 useEffect(() => {
   const fetchStarShip = async () => {
     const response = await fetch(`https://swapi.dev/api/starships/${id}/`);
     const data = await response.json();
     setStarShip(data);
   };
   fetchStarShip();
 }, [id]);
 return (
   starShip && (
     <div>
       <p>Name: {starShip.name}</p>
       <p>Hyper Drive Rating: {starShip.hyperdrive_rating}</p>
       <p>Manufacturer: {starShip.manufacturer}</p>
       <p>Class: {starShip.starship_class}</p>
     </div>
   )
 );
};

By using container component pattern we can separate out the data fetching logic into a separate container.
First, let’s create a separate component called StarShipInfoLoader. The purpose of this component is to create a fetch request, wait for the request to be completed, and then render the StarShipInfo component. The StarShipInfo component is passed as a children prop to this component, we access the passed component and render it with data.

const StarShipInfoLoader = ({ id, children }) => {
 const [starShip, setStarShip] = useState(null);
 useEffect(() => {
   const fetchStarShip = async () => {
     const response = await fetch(`https://swapi.dev/api/starships/${id}/`);
     const data = await response.json();
     setStarShip(data);
   };
   fetchStarShip();
 }, [id]);
 return (
   <>
     {starShip &&
       Children.map(children, (child) => {
         if (isValidElement(child)) {
           return cloneElement(child, { starShip });
         }
       })}
   </>
 );
};

This is how we can use the StarShipInfoLoader and StarShipInfo together.

 <StarShipInfoLoader id={id}>
   <StarShipInfo />
 </StarShipInfoLoader>

How to create your own getEelmentById

Hassam Ali — Mon, 05 Jul 2021 19:05:39 +0000

In this write up I am going to show how to create your getElementById function it will be similar to document.getElementById

So before we begin I want to clarify what document.getElementById does it. It is a function when called with a given id finds the DOM element which has same id as the one passed to the function. If there are multiple ids it then will return the first element. Before we begin writing our function let's quickly recap how DOM is structured and what are some useful methods which we can use.

DOM

In layman terms DOM stands for document object model it is a tree like representation of HTML element. so for example lets say we have following HTML:

<!DOCTYPE HTML>
<html>
<head>
  <title>Hello World</title>
</head>
<body>
  <h1> A quick brown fox jumps over the lazy dog </h1>
  <div>
    <h2>This is a h2</h2>
    <p>This is a paragraph</p>
    <article>This is a article</article>
  </div>
</body>
</html>

For this HTML the DOM would be like this:

In the above image we can see all the DOM nodes for the HTML. There are different types of DOM nodes. You can see the list at MDN. The document.getElementId works on HTML element and HTML elements have nodeType of 1.

So first of all we need to get all the children of document.body we can do this by calling document.body.children, this method return HTMLCollection so we need to convert it into array now there are different ways via which we can do that but the simples one is simply used the spread operator eg [...root.children]. Now this array contains all the children of document.body.

Now we will iterate over array and during each iteration we will pick an item from the array and we will check if the id of the elements is equal to the id we are looking for, this can done by calling .id on the selected item. if id matches then we will return the item otherwise we will repeat the same process on all of the children of the current element. In computer science this type of algorithm is called Depth First Search.

const walkDOM = (root, elementId) => {
 let result = null;
 const elements = [...root.children];
 for (let element of elements) {
  if (element.id === elementId) return element;
  if (element.children.length && element.nodeType === 1) {
   result = walkDOM(element, elementId);
   if (result) return result;
  }
 }
 return result;
};
const getElementById = (elementId) => {
 return walkDOM(document.body, elementId);
};

Please note that this is not a replacement for document.getElementById but a simple snippet showing how powerful and feature rich the DOM the API is and how far we can go in web development without knowing how these methods work.

TypeScript: Typeguards and Type Narrowing.

Hassam Ali — Sun, 27 Jun 2021 21:22:43 +0000

Hi,
In this post we will be exploring a feature of TypeScript called type guards. To be more precise we will be exploring the typeguard using the in operator.

Note: The in operator is javascript feature not TypeScript.

Consider the following scenario: I am writing a todo application. In my todo application I have two types of Todos:

Anonymous Todo
Validated Todo

Anonymous todo have text and id fields. Lets write an interface for it

interface AnonymousTodo {
    text: string;
    id: number;
}

Validated Todo is similar to anonymous todo but with two extra fields authorName and validationDate. Lets write interface for it too.

interface ValidatedTodo {
    text: string;
    id: number;
    authorName: string;
    validationDate: Date;
}

so far so good, now lets write a method which will print the todo to console. So if anonymous todo is passed we should prepend anonymous logging text and id, but if ValidatedTodo is passed we should prepend 🔒 before logging the todo details.

function printValidation(todo: AnonymousTodo | ValidatedTodo) {

}

so our function printValidation accepts both AnonymousTodo and ValidatedTodo. But if you try to console.log(log.authorName); you will get the following error:

Property 'authorName' does not exist on type 'ValidatedTodo | AnonymousTodo'.
  Property 'authorName' does not exist on type 'AnonymousTodo'.(2339)

Lets try to log id instead of authorName, that works fine. Now lets try to log text, yes thats also works fine finally lets try to log validationDate. we get similar error as before.

So why is that? This is because TypeScript wants to make sure we only access the properties which are available on both ValidatedTodo and AnonymousTodo, in our case these common properties are id and text. But we want to access authorName and validationDate too. How can we do that?

This is where Typeguard comes in. We can use the typeguard to narrow the type. So as of now todo can be one of the two types. It can be either of type AnonymousTodo or ValidatedTodo. So we need to narrow it down for TypeScript, so TypeScript will know which type it is and will allow to access the properties available on it instead of allowing us to only access common properties. If it does not make sense do not worry. I have example coming up. Hopefully it will clear things up

There are multiple different type of guards available eg: instanceof,typeof etc. But in our case as we are using interface we will narrow the type using the in operator. The in operator is javascript language feature which can be used to check if a property is present in an object.

const myObj = {apple: 20};
if ("apple" in myObj) console.log(`We have ${myObj.apple} apples`);

So in the above snippet property apple is present in the myObj so we get true and a message will be logged to console. so lets integrate this in our example. Before we do that lets create objects of both type:

const todoWithValidation: ValidatedTodo = { text: "Ping", id: 1, validationDate: new Date(), authorName: "admin" };
const todoWithoutValidation: AnonymousTodo = { text: "Pong", id: 1 };

By looking at the both object we can see that ValidatedTodo will always have validationDate and authorName. So we can tell TypeScript to all at these two properties to distinguish between the ValidatedTodo and AnonymousTodo and we can do that by adding a simple if check which checks for these properties using the in operator. lets write the code for this.

function printValidation(todo: AnonymousTodo | ValidatedTodo) {
    if ("authorName" in todo && "validationDate" in todo) {
        console.log(`🔒 ${todo.authorName}, ${todo.validationDate}, ${todo.text}`);
    } else {
        console.log(`Anonymous ${todo.id}, ${todo.text}`);
    }
}

Inside the else block you can only access the properties of AnonymousTodo and inside the if block you can only access the properties of ValidatedTodo and outside of these scope you can only access the common properties.

Bonus:
Instead of the if ("authorName" in todo && "validationDate" in todo) we can also use a type predicate function:

function isValidatedTodo(todo: AnonymousTodo | ValidatedTodo): todo is ValidatedTodo {
  return ("authorName" in todo && "validationDate" in todo);
}

Notice the return type type of the function. You can find more details on type predicate in the official docs. Thats all for now. If you want to play with code you can access it here.

Composition vs Inheritance

Hassam Ali — Sat, 26 Jun 2021 12:14:42 +0000

I recently completed an online course and these are my takeaway from Composition and Inheritance.

Inheritance

With inheritance we can extend the functionality of an existing class by overriding its method in a Child class e.g

class Parent {
  function sayHi() {
    console.log("sayHi from Parent");
  }
}
class Child {
  function sayHi() {
    console.log("sayHi from the Child");
  }
}

Inheritance is characterised by an "is-a" relationship between two classes e.g Apple is Fruit, Car is a Vehicle etc. Inheritance is suited for use cases where there is tight coupling between the classes which is rarely the case in the real world.

Lets say your are building a house and you need to model a window in code. So you might come up with following:

class Window {
  height: number;
  width: number;
  open: boolean;
  toggleOpen() {}
  area(){}
}

The properties are self explanatory. Pay attention to the area method. It calculates the area.
Now in addition to window we also want to add a Wall. The code for the wall might look as follow.

class Wall {
  height: number;
  width: number;
  color: string;
  area() {}
}

You see that they share some common properties so you use inheritance for code reuse. You come up with class named Rectangle which has common properties from the both of the classes.

class Rectangle {
  height: number;
  width: number;
  area() {}
}

class Wall extends Rectangle {
  color: string;
}

class Window extends Rectangle {
  open: boolean;
  toggleOpen() {}
}

So according to this code Wall is rectangle and Window is also a rectangle, now let's suppose the we want to introduce new type of window called circle window.

Circle window can not extend from Rectangle window because it does not make sense. Now this is a type of Window so you might be tempted to inherit from the window class but window class itself inherits from Rectangle so although it can be extended but it will also inherit the methods from Rectangle class which does not make sense and it as it is derived from Rectangle.

You wanted a banana but what you got was a gorilla holding the banana -- Joe Armstrong

So an other way is be to create a new Circle class and extend from it. It might seem a nice idea initially but as the application grows we might encounter again a similar situation. I will show on later how we can resolve this via composition.

class Circle {
 radius: number;
 area(){}
}

class CircleWindow extends Circle {
  open: boolean;
  toggleOpen() {}
}

Composition

For this I would quote the following text from GoF Design Patterns Book

Object composition is an alternative to class inheritance. Here, new functionality is obtained by assembling or composing objects to get more complex functionality. [...] Object composition is defined dynamically at run-time through objects acquiring references to other objects

To recap, composition is an alternative strategy to class Inheritance for code reuse. In composition a class will have reference to another class instance as its memeber variable. Lets see this with an example. I will change the example in the last section.

interface Shape {
 area(): number;
}

class Wall {
  color: string;
  area(){}
  dimensions: Shape;
}

class Window {
  open: boolean;
  toggleOpen(){}
  area(){}
  dimensions: Shape;
}
class Rectangle implements Shape {
  height;
  width;
  area(){}
}
class Circle implements Shape {
  radius;
  area(){}
}

So in this example inside Wall and Window we have a member variable called dimensions, which is of type Shape. The interface Shape guarantees us that their will be always a method named area present. So now we both Window and Wall can accept any object for its memember variable dimensions as long it satisfies the interface Shape, in a way we have delegated the responsibility for calculating the area to the class Rectangle and Circle

Inheritance vs Composition

So this was a quick recap of inheritance vs composition. This is very difficult to explain topics but with time you develop instincts for this. Now lets take a look at Abstract class and Interface. These are features provided by programming languages to aid in inheritance and composition.

Abstract Class

Abstract classes are classes for which you create an instance of them. They maybe used to provide a default implementation in case the overriding classes does not provide one. In javacript you can create an abstract class by adding the keyword abstract infront of the class.

abstract class Destroyer {
  onDestroy() {
    db.close();
    analytics.send("Database Closed);
  }
}
class MyDestroyer extends Destroyer {
}
The class MyDestroyer gets the implemntation defined in class Destroyer.

Interface

Interface are used to define set of properties that must exist on class. Interface only contains what a class implentating that interface should have it does not dictate what it should do. Interface are loosely coupled compared to Abstract classes and are usually favoured.

In next part of the article I will show an example of inheritance and how to convert it into composition along with use of abstract and interface. stay tuned!🙂

P.S: if you find any mistakes please let me know in comments. Design Patterns are difficult to understand and even harder to write about.

Exploring ViewChild Selectors

Hassam Ali — Mon, 27 Jul 2020 19:16:32 +0000

`ViewChild`

ViewChild decorator is most commonly used to access the Child Component's instance and template. This is one the most common use cases. In this article we will be exploring several lesser known use cases.

`ViewChild` Selectors

The ViewChild has following selectors

Any class with the @Component or @Directive decorator
A template reference variable as a string (e.g. query with @ViewChild('cmp'))
Any provider defined in the child component tree of the current component (e.g. @ViewChild(SomeService) someService: SomeService)
Any provider defined through a string token (e.g. @ViewChild('someToken') someTokenVal: any)
A TemplateRef (e.g. query with @ViewChild(TemplateRef) template;)

The 1, 2 and 5 are most commonly known and used. In this write up I will be exploring 3 and 4. So let's get started!

Accessing Child Component Provider Without Injecting.

Suppose you have a component called Parent component inside which there is another component called child. Child Component injects a service inside it called RandomNumberService which has method called getRandomNumber this method return a random number. This service is provided in Child's components decorator metadata

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  providers: [RandomNumberService],
})

Service injected via this method is not singleton. For each instance of child component a new instance RandomNumberService will created. So if we want to access this service we will need to use ViewChild, lets see how we can use it.

export class ParentComponent implements OnInit {
  @ViewChild(RandomNumberService) randomNumberService: RandomNumberService;
  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    console.log(this.randomNumberService.number);
  }

}

We can achieve the same result by accessing the child component's instance and then accessing the service but then we would have to make sure that the service instance variable is public otherwise it won't work so to avoid that we can use ViewChild with service.

Now lets take at point 4 which is

Accessing Any Provider Defined Through A String Token.

Moving forward with previous example suppose that inside child component you have provider defined in following way:

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  providers: [{provide: 'TokenName', useValue: 'Foo Bar'}],
})

and now you need to access it. You can use the following format of ViewChild

export class ParentComponent implements OnInit {
  @ViewChild('TokenName') token: RandomNumberService;
  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    console.log(this.token); // logs 'Foo Bar'
  }
}

Thats all for now!. Let me know how you use angular decorators and what are your favourite tips and tricks, and do let me know if missed anything.

Thanks for reading!
cover image credits: https://unsplash.com/photos/1seONCyPWfQ

Disable Interpolation Angular

Hassam Ali — Mon, 27 Jul 2020 09:24:20 +0000

You can disable string interpolation in angular by using ngNonBindable directive. This is useful in cases where you want to show some text but do not want it to be interpolated like showing some code snippet.

<div>

In angular pair of curly braces are used for string interpolation e.g

<span ngNonBindable>My name is {{name}}</span>
</div>

<div>{{ 1 + 1 }}</div> // <div>2</div>
<div ngNonBindable>{{ 1 + 1 }}</div> // <div>{{1 + 1}}</div>

Angular CDK Virtual Scroll

Hassam Ali — Sat, 27 Jul 2019 09:26:39 +0000

What is Virtual Scrolling?

Modern web application are complex. They have a lot of moving parts, complexity and often times they have to deal with huge amount of data.

Consider that you have application in which you have to display a list of users, a very common use case.

As the number of items in the list increase so does number of elements in DOM resulting in more memory and cpu usage.
We can reduce memory and cpu consumption by rendering only limited set of all the items, we can determine this limited set by looking at the height of container, scroll position and height of individual item and then perform some calculations which tell us which items from the list should rendered in DOM and as soon user scroll we again perform this calculation, remove previously rendered items and render new items according to calculation. All of this sounds very complex and it is, but the good news is that Angular Material CDK Virtual Scroll does this all for you and then some more. From now on I will be referring Angular Material CDK Virtual Scroll as Virtual Scroll

So let's get started!

Prerequisites

Before we begin we need a sample application with list of data so we can play with it and later on add angular virtual scroll to it. I have created a small example
This example is built on using Angular version 8. It uses fake to generate fake data, add it to array and uses *ngFor to render item of array as DOM elements in template.

Installation

Installing Material CDK is pretty straight forward. If you are following along: In the stackblitz demo click on dependencies, it is just beneath window where project file are listed see screen shot below, type @angular/cdk and hit enter this will install material cdk. If you want to install it inside your angular cli project simply type npm i --save @angular/cdk

Once you have installed CDK, we are ready to move towards next step: using it!

Usage

Before we can begin using the Virtual Scroll we need to import the module for it. Let's import it. Open your app.module.ts add this line after the last import

import { ScrollingModule } from '@angular/cdk/scrolling';

This will import the ScrollingModule, now we need to tell our app.module.ts to import contents of this module. For this inside the imports array add ScrollingModule your app.module.ts will look like this



 import  {  NgModule  }  from  '@angular/core';
import  {  BrowserModule  }  from  '@angular/platform-browser';
import  {  FormsModule  }  from  '@angular/forms';
import  {  AppComponent  }  from  './app.component';
import  {  ScrollingModule  }  from  '@angular/cdk/scrolling';

@NgModule({
imports:  [  BrowserModule,  FormsModule,  ScrollingModule  ],
declarations:  [  AppComponent  ],
bootstrap:  [  AppComponent  ]
})
export  class  AppModule  {  }

Now we are ready to use Virtual Scroll!

We will modify our application to use Virtual Scroll! Here is link to stackblitz app with desired state. This is same as our initial app but with Angular CDK installed and imported.

Open app.component.ts, inside the constructor of AppComponent you will see



constructor()  {
  this.persons =  Array(100).fill(0).map(()  =>  { 
  return {
      name: faker.name.findName(),
      bio: faker.hacker.phrase(),
      avatar: faker.image.business()
    }
  })
}

What this does is creates an array of 100 objects, each object contains name, bio and avatar generated by faker. This array is assigned to instance variable called persons

Now open the template file for this component (app.component.html).



<div  class="search-wrapper cf">
  <input  type="text">
  <button (click)="undefined">Go To</button>
</div>

<div *ngFor="let person of persons;let i = index">
  <div class="card">
      <img  src="https://i.imgur.com/63S0RAq.png"  alt="Avatar">
      <div  class="container">
        <h4><b>{{person.name}}</b></h4>
        <h4><b>ID: {{i}}</b></h4>
        <p>{{person.bio.substr(0, 30)}}</p>
      </div>
  </div>
</div>

The template consist of a button with click handler defined as of now it does nothing. Below the button we are using *ngFor to iterate over person array, for each person array we create a div with class card. This card div consist person's name, id, bio and avatar. We are displaying only first 30 characters of bio.

Now let's modify our template to use Virtual Scroll. For this first we need to wrap our ngFor with <cdk-virtual-scroll-viewport> and then replace *ngForwith . cdk-virtual-scroll-viewport has a required input called [itemSize].

itemSize represents the height of item in pixels which we are rendering in our case this should be exact height of our card div which is 141px. Another thing to note is that height of all of our cards component should be same. As of now the Virtual Scroll does not support fully support variable height. We will look into matter of variables heights later.

so lets wrap our *ngFor with cdk-virtual-scroll-viewport and replace our *ngForwith *cdkVirtualFor. Another thing which needs to be done before we see any visual change is giving height to our cdk-virtual-scroll-viewport I want to show two user cards at once so I will give cdk-virtual-scroll-viewport height of 282px (size of single card is 141, 141 * 2 = 282) you can either give height in stylesheet our add style tag. I will be adding height via style tag



<cdk-virtual-scroll-viewport [itemSize]="141" style="height: 282px">
<div *cdkVirtualFor="let person of persons;let i = index">
  <div  class="card">
    <img  src="https://i.imgur.com/63S0RAq.png"  alt="Avatar">
    <div  class="container">
        <h4><b>{{person.name}}</b></h4>
        <h4><b>ID: {{i}}</b></h4>
        <p>{{person.bio.substr(0, 30)}}...</p>
    </div>
</div>

</div>
</cdk-virtual-scroll-viewport>

Now we can see that our user list items are rendered. Lets verify that we DOM items are created dynamically and reused. Open your browser developers tools, select Elements Panel. Find the DOM element shown in screen shot below and expand it.

Now if you scroll through the list you will see that limited number of DOM elements are created, which leads to reduce memory and cpu usage.

Items with variable heights

As of now Virtual Scroll does not support variable heights, but it is being worked on and is in experimental phase which means you should not use it in production as its api may change.

For items with variable height we need to install @angular/cdk-experimental. You can install into stackblitz by click on dependencies and type @angular/cdk-experimentaland hit enter. It will install the experimental cdk for you. User of angular cli can install it by npm @angular/cdk-experimental.

Now we need to import it into our app module. Just like before, add following line in app.module.ts



import  {  ScrollingModule  as  ExperimentalScrollingModule}  from  '@angular/cdk-experimental/scrolling';

It will import ScrollingModule and rename it as ExperimentalScrollingModule. We need both ScrollingModule and ExperimentalScrollingModule for variable height to work. Now add ExperimentalScrollingModule into import array. You app.module.ts should look like this:


  {  NgModule  }  from  '@angular/core';
import  {  BrowserModule  }  from  '@angular/platform-browser';
import  {  FormsModule  }  from  '@angular/forms';
import  {  AppComponent  }  from  './app.component';
import  {  ScrollingModule  }  from  '@angular/cdk/scrolling';
import  {  ScrollingModule  as  ExperimentalScrollingModule}  from  '@angular/cdk-experimental/scrolling';

@NgModule({
imports:  [  BrowserModule,  FormsModule,  ScrollingModule,  ExperimentalScrollingModule  ],
declarations:  [  AppComponent  ],
bootstrap:  [  AppComponent  ]
})
export  class  AppModule  {  }

Now open app.component.html and replace [itemSize] with autosize. Thats it! Now you can elements of variable height in your Virtual Scroll but as said before this feature is experimental and should not be used. You can find example for autosize here