DEV Community: vikash tiwary

Design Patterns Cheat Sheet.

vikash tiwary — Tue, 09 Jan 2024 07:11:21 +0000

Creational Patterns ✍️:

Abstract Factory: Creates related objects without specifying the concrete classes. For example -> A car manufacturing plant that produces multiple models and brands of cars without specifying the concrete classes of each part.
Builder: Separates the construction of complex objects from their representation. For example ->A pizza restaurant that lets customers build their own pizza by selecting toppings, crust, and sauce separately.
Factory Method: Defines an interface for creating objects, but lets subclasses decide which class to instantiate. For example -> A car dealership that sells different types of cars and lets customers choose which brand and model they prefer.
Prototype: Creates new objects by cloning an existing object. For example -> A graphic design software that lets users clone an existing object and modify it to create a new design.
Singleton: Ensures only one instance of a class is created and provides a global point of access to it. For example -> A logging system that ensures only one instance is created and used throughout the application to manage log messages.

Structural Patterns ✍️:

Bridge: Separates an object’s interface from its implementation. For example -> A camera that separates its user interface from its hardware components, allowing users to adjust settings and capture images separately.
Composite: Composes objects into tree structures to represent part-whole hierarchies. For example -> A file manager that displays files and folders in a tree structure, allowing users to navigate and manage them hierarchically.
Decorator: Dynamically adds responsibilities to an object. For example -> A coffee shop that offers a variety of flavors and toppings to add to a basic coffee drink.
Facade: Provides a unified interface to a set of interfaces in a subsystem. For example -> An online shopping site that provides a simplified interface to a complex e-commerce system.
Flyweight: Shares objects to reduce memory usage. For example -> A game that shares textures and sprites to reduce memory usage and improve performance.
Proxy: Provides a placeholder for another object to control access to it. For example -> A user authentication system that provides a proxy interface to validate user credentials and control access to restricted resources.
Adapter: Converts the interface of a class into another interface that clients expect. For example -> A power adapter that converts the interface of a foreign electrical device to match the interface of the socket.

Behavioral Patterns ✍️:

Command: Encapsulates a request as an object to allow its invocation at a later time. For example -> A TV remote control that sends commands to a TV set, allowing users to turn it on/off, change channels, and adjust the volume.
Interpreter: Defines a representation for a grammar of a language and provides an interpreter for it. For example -> A language translation service that provides an interpreter to translate text from one language to another.
Iterator: Provides a way to access the elements of an aggregate object sequentially without exposing its underlying representation. For example -> A music player that allows users to navigate through a playlist sequentially without exposing the underlying structure of the playlist.
Mediator: Defines an object that encapsulates how a set of objects interact. For example -> A chat application that allows users to send messages to each other through a centralized server.
Memento: Captures an object’s internal state to restore it later. For example -> A game that allows players to save and restore their game progress at any point in time.
Observer: Defines a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically. For example -> A weather app that notifies users of weather changes in real-time based on their location.
State: Allows an object to change its behavior when its internal state changes. For example -> A traffic light system that changes its behavior depending on the current state of traffic flow.
Strategy: Defines a family of algorithms, encapsulates each one, and makes them interchangeable. For example -> A payment system that offers different payment methods, such as credit card, PayPal, and bank transfer, and allows users to choose which one to use.
Template Method: Defines the skeleton of an algorithm in a method, allowing subclasses to redefine certain steps of the algorithm without changing its structure. For example -> A recipe app that provides a template for cooking a dish, allowing users to customize certain steps of the recipe.
Visitor: Separates an algorithm from an object structure by moving the algorithm into a separate object. For example -> A code editor that analyzes the syntax of a program and provides a visitor to detect and fix coding errors.
Chain of Responsibility: Allows multiple objects to handle a request. For example -> A customer service hotline that forwards customer complaints to multiple levels of support until they are resolved.

Implementing Lock Using Promise.

vikash tiwary — Mon, 24 Jul 2023 13:11:18 +0000

There are some (rare) cases when you want to forbid a block of code to be executed in “parallel,” or let’s say, that since JavaScript is single-threaded, you want to have more on the execution flow and force execution of a block of code to be sequential.

A really simple definition of a using a lock can be that, once a block of code acquires a lock, it becomes locked and no one else can run the same block until the lock is released regardless of the size of the block. It could be one line or 100.

interface Lock {
  await(): Promise<void>;

  acquire(): void;

  release(): void;
}

To get the lock, you first need to await for it, then acquire it, and finally release it once done.

Implementing this with Promise is pretty straightforward. The await function needs to return a Promise which has been created by the acquire call, and resolved by the release call. The implementation also needs to initialize the Promise as resolved since the first one that needs to await for it does not have to be locked. This can be implemented as follows:

class LockImpl implements Lock {
  private promise: Promise<void>;

  private resolve: (() => void) | undefined;

  constructor() {
    this.promise = Promise.resolve(); //Line 7
    this.resolve = undefined;
  }

  await() {
    console.log("await lock");
    return this.promise; // Line 13
  }

  acquire() {
    console.log("acquire");
    // eslint-disable-next-line no-return-assign, no-promise-executor-return
    this.promise = new Promise<void>((resolve) => (this.resolve = resolve)); //Line 19
  }

  release() {
    console.log("release");
    if (this.resolve) {
      this.resolve(); // Line 25
    }
  }
}
const lock = new LockImpl();

export default lock;

Here’s some explanations about what is happening in the Lock implementation:

Line 7: Create a resolved Promise
Line 13, await(): Return the Promise. The consumer can await for it to be resolved
Line 19, acquire(): instantiate a new Promise, and save the resolve reference in the lock instance
Line 25, release(): resolve the Promise, unlock the current consumer block, and allow another block of code to acquire the lock.

Using it is as easy as awaiting the lock by calling await lock.await() , then locking the block by calling lock.acquire() and finally releasing it by calling lock.release(). Here’s the code:

import lock from "./lock";

const send = async (id: number) => {
  await lock.await();
  lock.acquire();

  try {
    console.log("Calling", id);
  } catch (err) {
    console.log(err);
  } finally {
    lock.release();
  }
};

Promise.all(Array.from(Array(20), (v, k) => k).map((v) => send(v)));

In the code above, the send function is expected to be called 20 times from a Promise.all call which ‘virtually’ make parallel calls since sendreturns a Promise.

By using the Lock, we force the block between lock.acquire() and lock.release() to be called one after the other. This is pretty useless in the current example, but imagine if you replace line 8 with something more complex that takes time, shares a scope, or does anything you cannot control, like a third-party library, a remote service, etc.

You can now force everyone calling send to wait until the previous call is complete, even if it has been called from several places at the same time, just by using a really simple Lock, based on a Promise and a resolve callback.

codesandbox example

Using the web locks API

Web Locks API is more powerful than just our Promise-based implementation. By using it, you can lock code running on the same origin, on multiple tabs, and even more on workers opening the door to create really advanced process control and coordination.

The API is pretty simple and can be used as follows:

navigator.locks.request("my_resource", async (lock) => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

Once the lock is acquired, the callback (async (lock) => {}) will be executed. The callback is the block of code to be locked, which is something really clear. It does not force you to call acquire and release like we did in our implementation. Once the callback is executed, the next one can be, since the lock is released and can be acquired.
Notice the first parameter of the locks.request function, which is a string. This allows us to use locks from many places (tabs and workers) and also allows us to use the same lock name for different blocks, which is something more powerful than our single lock instance.

React: Virtualized List From Scratch

vikash tiwary — Thu, 06 Apr 2023 08:22:02 +0000

A virtualized list is a list that renders only a subset of its items and replaces the invisible items with placeholders. The virtualization technique can significantly improve the performance of rendering long lists by reducing the number of DOM nodes that need to be created and updated.

To build a virtualized list from scratch, we will follow these steps:

1. Create a component for the list.

The first step in building a virtualized list is to create a component that represents the list. We can create a functional component that takes an array of items as a prop.

function VirtualizedList({ items }) {
  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>{item.content}</div>
      ))}
    </div>
  );
}

In this example, we use the map method to iterate over the items array and render each item as a div element. We also assign a unique key to each item to help React identify them.

2. Render a subset of the list items.

The second step in building a virtualized list is to render only a subset of the list items. To achieve this, we need to know the height of each item and the height of the container that holds the list.

function VirtualizedList({ items, itemHeight, containerHeight }) {
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(
    startIndex + Math.ceil(containerHeight / itemHeight),
    items.length
  );
  const visibleItems = items.slice(startIndex, endIndex);

return (
    <div style={{ height: `${items.length * itemHeight}px` }}>
      <div
        style={{
          position: "relative",
          height: `${visibleItems.length * itemHeight}px`,
          top: `${startIndex * itemHeight}px`,
        }}
      >
        {visibleItems.map((item) => (
          <div key={item.id} style={{ height: `${itemHeight}px` }}>
            {item.content}
          </div>
        ))}
      </div>
    </div>
  );
}

In this updated example, we added the itemHeight and containerHeight props to the component. We also calculated the startIndex and endIndex based on the scrollTop, itemHeight, and containerHeight. The startIndex represents the index of the first visible item, and the endIndex represents the index of the last visible item.

We then used the slice method to extract only the visible items from the items array. Finally, we rendered the visible items as div elements with a height of itemHeight. We also positioned the container using the top property, which is equal to startIndex * itemHeight.

3. Replace the invisible items with placeholders.

The third step in building a virtualized list is to replace the invisible items with placeholders. This step is essential to maintain the correct height of the list and prevent the visible items from jumping when scrolling.

function VirtualizedList({ items, itemHeight, containerHeight }) {
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(
    startIndex + Math.ceil(containerHeight / itemHeight),
    items.length
  );
  const visibleItems = items.slice(startIndex, endIndex);
  const invisibleItemsHeight =
    (startIndex + visibleItems.length - endIndex) * itemHeight;

  return (
    <div style={{ height: `${items.length * itemHeight}px` }}>
      <div
        style={{
          position: "relative",
          height: `${visibleItems.length * itemHeight}px`,
          top: `${startIndex * itemHeight}px`,
        }}
      >
        {visibleItems.map((item) => (
          <div key={item.id} style={{ height: `${itemHeight}px` }}>
            {item.content}
          </div>
        ))}
      </div>
      <div style={{ height: `${invisibleItemsHeight}px` }} />
    </div>
  );
}

In this updated example, we calculated the invisibleItemsHeight by subtracting the height of the visible items from the height of the container. We then added an empty div element with a height equal to invisibleItemsHeight to replace the invisible items.

4. Add scrolling functionality to the list.

The fourth and final step in building a virtualized list is to add scrolling functionality to the list. We can achieve this by adding an event listener to the container element and updating the scrollTop state whenever the user scrolls.

function VirtualizedList({ items, itemHeight, containerHeight }) {
  const [scrollTop, setScrollTop] = useState(0);
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(
    startIndex + Math.ceil(containerHeight / itemHeight),
    items.length
  );
  const visibleItems = items.slice(startIndex, endIndex);
  const invisibleItemsHeight = (startIndex + visibleItems.length - endIndex) * itemHeight;
  const handleScroll = (event) => {
    setScrollTop(event.target.scrollTop);
  };
  return (
    <div
      style={{ height: `${containerHeight}px`, overflowY: "scroll" }}
      onScroll={handleScroll}
    >
      <div style={{ height: `${items.length * itemHeight}px` }}>
        <div
          style={{
            position: "relative",
            height: `${visibleItems.length * itemHeight}px`,
            top: `${startIndex * itemHeight}px`,
          }}
        >
          {visibleItems.map((item) => (
            <div key={item.id} style={{ height: `${itemHeight}px` }}>
              {item.content}
            </div>
          ))}
        </div>
        <div style={{ height: `${invisibleItemsHeight}px` }} />
      </div>
    </div>
  );
}

In this final example, we added the scrollTop state using the useState hook. We also added the onScroll event listener to the container element and called the handleScroll function to update the scrollTop state whenever the user scrolls.

We also added the overflowY property to the container element to enable scrolling. Finally, we wrapped the entire list inside the container element with a height equal to containerHeight.

Reference: taken from here