DEV Community: Manish Kumar

Resource loading strategies in Web applications

Manish Kumar — Wed, 06 Jan 2021 19:06:10 +0000

I will start with a simple question How long will you wait for a website to load?

As per google recommendation, a website page should load within 2 seconds,

“Two seconds is the threshold for ecommerce website acceptability. At Google, we aim for under a half-second.”

but still, you may have encountered many websites that take a long time for initial loading which results in a terrible user experience.

Usually, when we build web apps which is of the medium or large scale we usually end up using many JavaScript libraries, CSS framework, images, etc. which ultimately results in a bigger bundle size.

But we can configure our app to split that bigger bundle into smaller chunks and load them when they are required. This strategy called Lazy loading

Lazy loading

As the name suggests, in this strategy you will not load resources (JS, CSS, Images) until it is required. For example, let see a small demo

I the above GIF I am trying to show a calendar on a webpage that is initially hidden and will be shown when the user clicks on the "Show calendar" link

If you have noticed that there are additional JS files requested when I clicked on the "Show calendar" link. Those JS files are related to the calendar but we requested them only when we actually need them.

This makes our initial page load faster by not shipping unused code to the browser as you can see below images the percentage of unused code in both the cases

Without lazy loading

With lazy loading

This also helps in reducing bandwidth usage as we only need to load a few resources rather than all regardless of their usage

Eager loading

In Eager loading approach is we try to load or initialize all the resources available as soon as our web pages loaded. Quite opposite of Lazy loading. Eager loading also involves pre-loading of related resources.

It looks bad approach initially but this is very useful for below use cases

Small applications where you can load all the resources without much waiting time
Few API calls to put to reduce stress on server
Background downloading of related objects

Lazy loading with Webpack

If you are using Webpack as your bundler then you can use import(...) syntax to lazy load resources. With Magic comments, how our chuck should be loaded

'lazy' (default): Generates a lazy-loadable chunk for each imported module.


 function component() {
   const element = document.createElement('div');

   const _ = await import(/* webpackMode: "lazy" */ 'lodash');

   const button = document.createElement('button');

   const br = document.createElement('br');

   button.innerHTML = 'Click me and look at the console!';
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   element.appendChild(br);

   element.appendChild(button);

   return element;
  }

 document.body.appendChild(component());

Dynamic import i.e. import() statement also works with Parcel

Jumpstart on advance typescript Part 2

Manish Kumar — Sat, 08 Aug 2020 18:05:50 +0000

This is continuation of my previous blog where I was trying to introduce some advance Typescript concepts

Type Guards

To better understand this lets look at below code block

const numbers = [0, 1, 2, [3, 4], 5, 6, [7], [8], 9]

function flatten(array: Array<number | Array<number>>): Array<number> {
  const flatten: Array<number> = []
  for (const element of array) {
    if (Array.isArray(element)) {
      flatten.push(...element)
    } else {
      flatten.push(element)
    }
  }
  return flatten
}

flatten(numbers)

In this function we are just trying to flat an array (in this case, return array of numbers) which can have number or array of numbers as element.

on line flatten.push(...element) Typescript allow us to use spread operator inside the if statement without giving any type error. Which means Typescript compiler knows the element inside the if statement will be an array of number because we put a check in if statement which will make sure it should be an array.

Which means Array.isArray() is a type guard in this case and protect us from type error here. Similar way we have other inbuilt type guards: typeof and instanceof

typeof can only be used to check primitive data types: string, number, boolean, function, symbol, object, symbol and undefined types

instanceof can be used to check if an object is an instance of a class. So it means we can use instanceof type guard on class only

But we always don't have simple data structure to deal with in real scenario so how to type guard complex object shape. The answer is create our own type guard!

Custom Type Guard

let create a function to sum all the numbers in array

function calculateSum(array: Array<number>) {
  return array.reduce((sum, curr) => sum + curr, 0)
}

In above function we can only pass an array of numbers as argument

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
calculateSum(arr) // No TS error

const notFlatArr = [0, 1, 2, [3, 4], 5, 6, [7], [8], 9]
calculateSum(arr) // TS error

To prevent throwing error we will create our own type guard

const notFlatArr = [0, 1, 2, [3, 4], 5, 6, [7], [8], 9]

function isFlat(array: Array<number | Array<number>>): array is Array<number> {
    return !array.some(Array.isArray);
}

if (isFlat(noFlatArr)) {
    calculateSum(arr)
}

Let go one step ahead. Our type guard function is very specific to numbers only. It will be great if we can use it for other types as well. So lets make it generic

function isFlat<T>(array: (T | T[])[]): array is T[] {
    console.log(!array.some(Array.isArray));
}

Now this can be used for any data type and can tell us if the array of any data type is flat or not.

Discriminated Union Types

Discriminated union types allow us to model a finite set of alternative object shapes in the type system. Using it we will only expose valid properties at a given location therefore we will introduce less bugs in system. Lets see some an example for better understanding

type PersonalInfo = {
  name: string
  location: string
}

const personalInfoCollection: { [key: string]: PersonalInfo } = {
  'max@xyz.com': {
    name: 'Max payne',
    location: 'USA',
  },
  'manish@abc.com': {
    name: 'Manish Kumar',
    location: 'India',
  },
}

function getPersonalInfo(email: string) {
  const info = personalInfoCollection[email]
  if (info) {
    return {
      success: true,
      value: info,
    }
  } else {
    return {
      success: false,
      error: 'Information not found',
    }
  }
}

In getPersonalInfo function we are trying to get the info using email address, as you can see the function returns a positive case where we find the information for the email and a negative case where the information is not available for the given email. If we have to give the return type of the function what it could be?

type Result = {
  success: boolean
  value?: PersonalInfo
  error?: string
}

function getPersonalInfo(email: string): Result {
  const info = personalInfoCollection[email]
  if (info) {
    return {
      success: true,
      value: info,
    }
  } else {
    return {
      success: false,
      error: 'Information not found',
    }
  }
}

Type Result will work fine and there will be no typescript error as well as value and error properties and optional, but did you noticed we introduced some run time bug. As value is optional, I can remove it from the positive scenario as below and the function still be type correct but in actual care we want the value if success is true

function getPersonalInfo(email: string): Result {
  const info = personalInfoCollection[email]
  if (info) {
    return {
      success: true,
      // value: info,
    }
  } else {
    return {
      success: false,
      error: 'Information not found',
    }
  }
}

To make sure we return the value when success is true, we can modify our Result Type something like below

type Result =
  | {
      success: true
      value: PersonalInfo
    }
  | {
      success: false
      error: string
    }

Here we have modeled the Return type to reflect specific object structure. Now our function will throw type error if we remove value property because it is not an optional property now. same way error is also not optional.

Every discriminated union types needs a discriminant property to distinguish between the various alternatives. That discriminant property must be of literal type. In our case, we are using the success property as discriminant which is of a Boolean literal type

We can refactor the this code a bit more and make our Result type generic so the it can work with other types as well

type Result<T> =
  | {
      success: true
      value: T
    }
  | {
      success: false
      error: string
    }

function getPersonalInfo(email: string): Result<PersonalInfo> {
  const info = personalInfoCollection[email]
  if (info) {
    return {
      success: true,
      value: info,
    }
  } else {
    return {
      success: false,
      error: 'Information not found',
    }
  }
}

When we use this function interesting things happen, we check if personal information is available by checking success property

const info = getPersonalInfo('manish@kumar.com')
if (info.success) {
  console.log(info.value)
  info.error // TSC Will throw error
} else {
  console.log(info.error)
}

If success is true we will be able to access only value property only, we can use error property here beside Typescript compiler will throw error if we try to do it.

Similarly, in else case we will be able to access only error property.

Using discriminated unions this way can really help you write fewer bugs. The type system forces you to check the discriminant property first before it gives you access to the individual properties. Note that for all of this to work properly, you should have these strict all checks compiler option set to true

That's all for this part. Let me know in comments what you think about it.

Jumpstart on advance typescript Part 1

Manish Kumar — Fri, 15 May 2020 10:03:00 +0000

I started learning Typescript couple of months back and initially, it was quite overwhelming for me because I used to write plain old javascript where no strict type checking, no interfaces, no generic types. Seeing these feature/keywords in a large project was not recognized by my mental modals for initial few days at that moment just only one way I have left to do is to learn those jargons and make them my friend

In this blog, I will try to explain some of Typescript's advance feature which is I learned during this process and are very useful. The main idea is to explain it in the simplest way possible. I am also assuming you already have a basic understanding of how strict type system works.

⚙️ Generics

A good piece of code is that which is reusable and flexible. Generics in Typescript provides a way to write components which can work over various kind of data type rather than a single one.

If we are performing some operation on more then one data types we don't need to repeat same code block for each data type. Generics allow us to do so while keeping it type-safe at same time.

Let's see an example where we are just returning what we have passed.

// Will return string
function rebound(arg: string): string {
    return arg
}

// Will return number
function rebound(arg: number): number {
    return arg
}

We can combine this two functions using any type

function rebound(arg: any): any {
    return arg
}

but as you already know any is not type safe, it means compiler can't catch error on compile time.

Now lets make it type safe using Generics

function rebound<T>(args: T): T {
    return args
}

You must be thinking

Wait the heck is <T> or T

These are called Type parameters. These lets users to use this function with any type. It tells typescript which data-type argument is passed. let see the example of how to use it.

const message = rebound<string>('Hello, World'); // OK

const count = rebound<number>(200); // OK

const count = rebound<number>('200'); // Error, data-type expected is number but passed string

You can use multiple type parameters as well

function someFunction<T, U>(arg1: T, args2: U) { ... }

Not only functions, but Classes and interfaces can be Generic as well. let's see below example where a generic interface is used as type

Generic interface as Type

interface KeyValuePair<T, U> {
    key: T;
    value: U;
}

let keyPair1: KeyValuePair<number, string> = { key:1, value:"Manish" }; // OK
let keyPair2: KeyValuePair<number, number> = { key:1, value:1988 }; // OK

As you can see in the above example, by using generic interface as type, we can specify the data type of key and value

Generic interface as Function Type

In same way, we can use interface as a function type.

interface KeyValueLogger<T, U>
{
    (key: T, val: U): void;
};

function logNumKeyPairs(key:number, value:number):void { 
    console.log('logNumKeyPairs: key = ' + key + ', value = ' + value)
}

function logStringKeyPairs(key: number, value:string):void { 
    console.log('logStringKeyPairs: key = '+ key + ', value = ' + value)
}

let numLogger: KeyValueLogger<number, number> = logNumKeyPairs;
numLogger(1, 12345); //Output: logNumKeyPairs: key = 1, value = 12345 

let strLogger: KeyValueLogger<number, string> = logStringKeyPairs;
strLogger(1, "kumar"); //Output: logStringKeyPairs: key = 1, value = Bill

Generic classes

So we learned about generic functions and interfaces. Similar way we can create generic classes too. Let's see below example

interface KeyValuePair<T, U> {
    key: T;
    value: U;
}

class Dictionary<T, U> {

    private keyValueCollection: Array<keyValuePair<T, U>>

    add(key:T, value: U) {
        if(this.keyValueCollection.findIndex(pair =>  pair.key === key) > -1) {
            throw new Error(key + ' key already exist in dictionary');
        }
        this.keyValueCollection.push({key, value});
    }

    remove(key: T) {
        const index = this.keyValueCollection.findIndex(pair =>  pair.key === key);

        if(index > -1) {
            this.keyValueCollection.splice(index, 1);
        } else {
            throw new Error(key + ' key does not exist in dictionary');
        }
    }
}

const dictionary = new Dictionary<string, string>();
dictionary.add('name', 'john');
dictionary.add('country', 'India');

You can see in the above example, I have used both generic interface and generic class, which gives us flexibility to create a HashMap with custom implementation.

⛓Conditional Type

Conditional type is something which we are not going to use very frequently directly but we use them indirectly a lot of time. In very simple terms it is a kind of ternary expression for Types.
Let's look at a very basic example

type BookPages = bookId extends string[] ? number[] : number;

in above example, we are first check if bookId variable is a array of string, if yes then we will make BookPages array of number otherwise the only number

according to Typescript definition of conditional types

"A conditional type selects one of two possible types based on a condition expressed as a type relationship test"

Filtering using conditional type

As we already seen a basic example lets see some more examples to get a better understanding. Let's create a filter type which will select a subset of a union type

type Filter<T, U> = T extends U ? never : T;

type CarTypes = 'SUV' | 'HATCHBACK' | 'SEDAN' | 'MUSCLE' | 'VINTAGE';

type NonVintageCarTypes = Filter<CarTypes, 'VINTAGE'>; // 'SUV' | 'HATCHBACK' | 'SEDAN' | 'MUSCLE'

The conditional type here is just going to check each string literal in string literal union parameter (T in this case), is assignable to a string literal union under the second type parameter (U in this case). If yes, never is returned which means no result otherwise string literal is added to resulting union

In the above example, we filtered out one of union type from CarType and created a new type NonVintageCarTypes.

Basically this is how is in-built Exclude type is defined. So at this point, we can create Include type very easily, we just need to reverse the condition

type Include<T, U> = T extends U ? T : never;

Now we get some understanding about conditional type, hence it won't be very tough to create a copy of built-in NonNullable type using conditional type

type MyNonNullable<T> = T extends null ? never : T;

type SomeNullableType = string | number | null;

type SomeNonNullableType = MyNonNullable<SomeNullableType>;

Replace overloading with conditional types

Suppose there is an entertainment center which maintains a database of Books and TV series as below

interface Book {
  id: string;
  name: string;
  tableOfContents: string[];
}

interface TvSeries {
  id: number;
  name: string;
  Episode: number;
}

interface IItemService {
  getItem<T>(id: T): Book | Tv;
}

let itemService: IItemService;

In IItemService interface, getItem function can return detail of Book or TvSeries. If you look closely we have id as string then we need to return Book and if it is number we need to return TvSeries. We could achieve this with overloading as below and it works perfectly

interface IItemService {
  getItem(id: string): Book;
  getItem(id: number): Tv;
  getItem<T>(id: T): Book | Tv;
}

But using conditional types we can keep only one definition. Let's see below change

interface IItemService {
  getItem<T>(id: T): T extends string ? Book : Tv;
}

Isn't it very handy!

There are many ways we can use conditional type in conjunction with other Typescript fundamentals. I will try to cover some of those in my next blog. Thanks for reading it

Lessons learned after 7 years of programming

Manish Kumar — Thu, 06 Jun 2019 20:24:14 +0000

Last December I completed 7 years as a web developer but I still feel like there is much to learn from others whether they are more experienced or not.
In today's fast-paced environment it is just a matter of days or week to get started on technologies or learning a new programming language.

But I believe some things you will learn with time only, So I will share my experience what I have learned till now.

Fail Fast but try not to fail for the same reason again

When I started my journey to learn programming every other hour I am was stuck on something for hours or even days (i still do some time :P).

I always felt like the problems are overwhelming and there is no end of those. I was always looking for help from senior team members and this went like for like the first 3 months in my first job. Then one day my senior gave me a golden mantra! He said Pay more attention to error details. I took this hand to hand and digging that error into more detail and was able to understand the pattern in a few days. From there the learning process become a lot simpler than before, and I was able to avoid the common problems just by observing the error and there patterns. It also helped me to not disturb my seniors who are working on more complex problems

Don't hesitate to ask for help

No problem is stupid but my small mind took a loooong time in recognizing and digesting this fact.

I spent countless hours to found some very stupid mistake or some missing step on my task. One part of my brain asking for help but another part was telling me to not make my self stupid and solve it on your own. Trust me it is a very bad state to be in. I myself have wasted a lot of time in this state. So if you are just starting your journey don't hesitate, Just ask.

I would like to add one more point here is that you need to respect others time as well. You should not constantly ping the other person just be patient and wait and use other resources as well like StackOverflow to look if someone has already solved the same problem.

Learn to say 'NO'

After 2 years of learning and constant practicing, I become much better in programming compared to when I started. The benefit of working in a startup company is you are never out of task so my plate was also full of things. Things were coming at faster pace so I have to increase my pace as well to finish the task. right? I thought the same and made mistakes.

Quality factor started to decline, I was having more bugs in code the design patterns were not followed properly and got a lot of 'WTF!!' during code review sessions. I understand time is an important factor and it is also important to complete tasks in reasonable short span of time but you shouldn't compromise on things which will backfire later.

How to handle such a situation? Take your time to analyze the task consider all the parameters (Writing test cases, testing, fixing bugs if any), calculate some rough time and see if you can do it within the time limit. If you don't know how to analyze take some help from senior/peers members in your team. If you see the time limit is way off then you should say 'No' for the time limit and ask for more time to work on it.

Seek a Mentor

Having a mentor is the best thing you can have when you are learning to program and trust me equally difficult to find one as well. I was lucky that I found it when I got my first job. Most of us are at the starting point of something and seeking a mentor and it makes your life a lot simple if you find the mentor who can help you in taking the right decision. I will tell you my story, I was going to join some organization which was paying me way more than my salary at that time, I talked to my mentor about it and he gave me some insight about it after listing to him and declined the offer and a few months later I heard about the same company lost a big customer and now firing the employees for cost saving. I got saved, Phew... This is just one of many ways a mentor can help you. How to find you? There is more than one way join some slack channel, on Twitter follow someone you admire and many more.

Seeing things from a bigger perspective

Sometimes we may feel the requirement is not very useful or will have bad user experience and due to that feeling we may lower priority of the requirement

For example in our application we had a feature of record editing already, in the later phase we received a new feature request to edit records using CSV upload. Initially, we thought it was not much necessary as we already have edit feature but as we got an idea about the users that they are already very much familiar with spreadsheets and it will it much easier for them to edit multiple records from CSV in one go, we implemented it in our application as well.

So When you are working on some new feature try to visualize it from a bigger picture, think how it can help the users of your application, What can be the possible ways users can interact with it.

Be a helping hand

Developers are always trapped in learning cycle and fortunately, other developers are there to help us. They tell us what is our mistake or what we missed out. This is one of the ways our community has grown and become so helpful to one who is in need of help. So whenever you think you can, help others.

Do something for yourself

It is very hard to keep yourself motivated and focused for a long time. It is very common to a programmer as they get burned out because of the monotonous lifestyle. You should not overlook the life you have outside of your computer so you should keep some time for your hobbies or anything which makes you happy. Do something beside coding like hitting gym, learn to play some musical instrument, read a book, meet family or friends. Trust me you will be a better version of yourself.

So here are my tips till now. Hope it can help you :)