DEV Community: Meat Boy

How to add Limited Login Facebook on iOS and Android on server-side and client-side

Meat Boy — Mon, 19 Aug 2024 19:54:57 +0000

Meta recently introduced the concept of Limited Login for iOS authentication with Facebook. This tutorial provides a step-by-step guide on integrating Facebook Login into a React Native application, including server-side implementation, with a focus on supporting both standard and limited login flows in 2024.

1. Project Initialisation

If you have an existing application, you may bypass this section. For those starting anew, follow these instructions to create a new application:
Initialise a new project using Expo
Initialise a new project with React Native CLI

2. Installation of react-native-fbsdk-next

Follow the official documentation for installation instructions:
FBSDK Next - Expo Setup
or
FBSDK Next - React Native CLI Setup

3. Implementation of Limited Login on the Client Side

Integrate the following code snippet to implement Limited Login in your React Native project:

const loginWithFacebook = async () => {
    try {
      const result = await LoginManager.logInWithPermissions(
        ['public_profile', 'email'],
        'limited' // This parameter ensures consistent limited login behaviour on iOS
      );
      if (result.isCancelled) {
        return;
      }

      let token = await (Platform.OS === 'ios'
        ? AuthenticationToken.getAuthenticationTokenIOS().then(
            data => data?.authenticationToken || ''
          )
        : AccessToken.getCurrentAccessToken().then(
            data => data?.accessToken || ''
          ));

      // Utilise the token for further operations, such as server-side authentication
    } catch (e) {
      console.error(e);
    }
  };

4. Server-Side Token Validation

The server-side implementation requires handling both authorisation codes and authentication codes to support standard and limited login flows.

Let's create a new endpoint using express. Note that this approach can be adapted to other web server frameworks with minimal modifications.

router.post('/auth/facebook', async (req, res, next) => {
  try {
    const { facebookToken } = req.body;
    const { facebookUserId, facebookUserName } = await getFacebookUser({ token: facebookToken, appId: facebookAppId });

    // Utilise facebookUserId and facebookUserName for user creation or authentication
  } catch (err) {
    // Token exchange or validation failure; handle the error or pass it to the next middleware
    next(err);
  }
});

Now, let's implement the getFacebookUser function to validate and exchange tokens for user data. This function handles both authentication tokens and OIDC Authorisation Tokens.

interface FacebookUser {
  facebookUserId: string;
  facebookUserName: string;
}

interface GetFacebookUserParams {
  token: string;
  appId: string;
}

export async function getFacebookUser({ token, appId }: GetFacebookUserParams): Promise<FacebookUser> {
  try {
    return await getStandardFacebookUser(token);
  } catch (error) {
    console.warn('Failed to get standard Facebook user, trying limited user');
    return getLimitedFacebookUser({ token, appId });
  }
}

First, let's handle the standard flow Authorisation Code. You can simply use it to exchange data by calling API. We will use axios for REST API calls. You may also need jwks-rsa for extracting the proper key from jwks endpoint (you may also use axios, but it requires a little more effort) and jsonwebtoken library for validation and decoding of JWT. Of course, you can use any other tech stack. The general idea will be the same in Go, Python or Java.

const FACEBOOK_GRAPH_API = 'https://graph.facebook.com/me';

async function getStandardFacebookUser(token: string): Promise<FacebookUser> {
  try {
    const { data } = await axios.get(`${FACEBOOK_GRAPH_API}?fields=id,name&access_token=${token}`);
    if (!data.id || !data.name) {
      throw new Error('Invalid token (missing id or name)');
    }
    return { facebookUserId: data.id, facebookUserName: data.name };
  } catch (error) {
    if (axios.isAxiosError(error)) {
      throw new Error(`Failed to fetch Facebook user: ${error.message}`);
    }
    throw error;
  }
}

In the response, you will get both the id and the name of the user scoped into your application. If any data is missing, we will throw an error. No matter what the issue is, we still want to give the user a chance to sign in. Maybe the user signed in using iOS with ATT turned off and the token is OIDC Authentication Token. Then we need to:

const FACEBOOK_JWKS_URI = 'https://www.facebook.com/.well-known/oauth/openid/jwks';
const FACEBOOK_ISSUER = 'https://www.facebook.com';

async function getLimitedFacebookUser({ token, appId }: GetFacebookUserParams): Promise<FacebookUser> {
  const client = jwksClient({ jwksUri: FACEBOOK_JWKS_URI });

  return new Promise((resolve, reject) => {
    jwt.verify(
      token,
      async (header, callback) => {
        try {
          const key = await client.getSigningKey(header.kid);
          callback(null, key.getPublicKey());
        } catch (error) {
          callback(error as Error, undefined);
        }
      },
      {
        algorithms: ['RS256'],
        audience: appId,
        issuer: FACEBOOK_ISSUER,
      },
      (err, decoded) => {
        if (err) {
          reject(new Error(`JWT verification failed: ${err.message}`));
        } else {
          const { sub, name } = decoded as JwtPayload;
          if (!sub || !name) {
            reject(new Error('Invalid token (missing sub or name)'));
          } else {
            resolve({ facebookUserId: sub, facebookUserName: name });
          }
        }
      }
    );
  });
}

In the code above, first, you create a new JWKS client looking for a list of public keys of Facebook. Then you will extract key id (kid) from JWT to get the proper public key. At this moment, all JWT signatures are signed using RS256 algorithm, so you have to specify that. The audience of the JWT is your application, so it must be set to appId from the Facebook app developer dashboard. The issuer is constant and always https://www.facebook.com.

In the next step, JWT will be either validated or not. If it's validated, you can safely decode it and get both sub and name. The sub property is the user id in your Facebook application scope, while name is the public display name of the user.

The whole code looks like this:

import jwksLocalClient from 'jwks-rsa';
import jwt, { JwtPayload } from 'jsonwebtoken';
import axios, { isAxiosError } from 'axios';

export async function getStandardFacebookUser(token: string) {
  const { data } = await axios.get(`https://graph.facebook.com/me?fields=id,name&access_token=${token}`);
  if (!data.id) {
    throw new Error('Invalid token (missing id or name)');
  }
  return { facebookUserId: data.id, facebookUserName: data.name };
}

export async function getLimitedFacebookUser({
  token,
  appId,
}: {
  token: string;
  appId: string;
}) {
  const jwksClient = jwksLocalClient({
    jwksUri: 'https://www.facebook.com/.well-known/oauth/openid/jwks',
  });

  return new Promise<{
    facebookUserId: string;
    facebookUserName: string;
  }>((resolve, reject) => {
    jwt.verify(
      token,
      async (header, callback) => {
        const key = await jwksClient.getSigningKey(header.kid);
        const signingKey = key.getPublicKey();
        callback(null, signingKey);
      },
      {
        algorithms: ['RS256'],
        audience: appId,
        issuer: 'https://www.facebook.com',
      },
      (err, decoded) => {
        if (err) reject(err);
        const decodedData = decoded as JwtPayload;
        if (!decodedData.sub) {
          reject(new Error('Invalid token (missing sub)'));
        } else {
          resolve({ facebookUserId: decodedData.sub, facebookUserName: decodedData.name });
        }
      },
    );
  });
}

export async function getFacebookUser({
  token,
  appId,
}: {
  token: string;
  appId: string;
}) {
  try {
    return await getStandardFacebookUser(token);
  } catch (error) {
    if (isAxiosError(error)) {
      console.warn('Failed to get standard Facebook user, trying limited user');
    }
    return getLimitedFacebookUser({
      token,
      appId,
    });
  }
}

router.post('/auth/facebook', async (req, res, next) => {
  try {
    const { facebookToken } = req.body;
    const { facebookUserId, facebookUserName } = await getFacebookUser({ token: facebookToken, appId: facebookAppId });

    // Utilise facebookUserId and facebookUserName for user creation or authentication
  } catch (err) {
    // Token exchange or validation failure; handle the error or pass it to the next middleware
    next(err);
  }
});

This implementation provides a quick solution for authenticating users regardless of their chosen login flow. If you require further assistance, please leave a comment, and I will do my best to help :)

How I created AI-powered ORM for PostgreSQL, MySQL and SQLite and why you shouldn't use it

Meat Boy — Fri, 13 Oct 2023 10:54:19 +0000

tl;dr
I created AI-powered ORM for Node with TypeScript or JavaScript called ormgpt. It works, it's silly and please don't use it.
npm install ormgpt

Cutting edge, blazing fast technology everywhere

In the last few years number of new ORMs (object relation mappers) and query builders has grown like crazy. A few years ago, the golden standard was either an ORM like Sequelize or a query builder like Knex. Since then we got TypeORM, Bookshelf, Objection, Mikro-ORM, Prisma, Drizzle, kysely and many, many more. While I agree that more option is good since anyone can choose the best-suited solution for their needs, it also creates many copy-alike libs.

At this point, I think ORMs have become the new days since the last javascript frameworks but for the backend.

Another hot topic, wider than just the javascript ecosystem is AI. Entire group of algorithms to recognize patterns, predict output and generate things. Now tech startup not only must store data in the hot blockchain, NoSQL or vector database, but compute on edge computing using quantum technology. Must be also AI - artificially intelligent.

Afternoon idea

My thought was, what if I create a hot, new lib to access data like ORMs or query builders but using AI? So anyone can access data using plain language like:

give me 10 recent posts from the category travel and where the author is John Doe, with the author and comments info

or even in other languages like for example German

bitte legen Sie einen neuen Benutzer Hans Schmidt mit Wohnadresse München, Kaufingerstraße und Neuhauser Straße 1A an

so I messed a little with OpenAI API to call with prompts like

Prepare SQL query for ${prompt}

but that was too general. I tried then

Having database schema: 

${dbSchema}

Prepare SQL query for:

${prompt}

still, often it was returning with invalid queries or additional comments. So I went even stricter passing also dialect, entire db schema and asking to not write any other response than a query.

You are an SQL engine brain. 
You are using ${this.dialect} dialect.
Having db schema as follows:
${this.dbSchema}

Write a query to fulfil the user request: ${request}

Don't write anything else than SQL query.

And that worked quite well. So the next part was to prepare methods to call OpenAI programmatically and adapters for database engines.

Method calling OpenAI was pretty simple and using built-in fetch:


  private async getResponse(request: string): Promise<string> {
    const prompt = `
      You are an SQL engine brain. 
      You are using ${this.dialect} dialect.
      Having db schema as follows:
      ${this.dbSchema}

      Write a query to fulfil the user request: ${request}

      Don't write anything else than SQL query.
    `;

    const response = await fetch(this.apiUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${this.apiKey}`,
      },
      body: JSON.stringify({
        model: this.model,
        messages: [
          {
            role: "user",
            content: prompt,
          },
        ],
        ...this.modelOptions,
      }),
    });

    const data = (await response.json()) as ErrorResponse | SuccessResponse;

    if (data.hasOwnProperty("error")) {
      throw new Error((data as ErrorResponse).error.message);
    }

    return (data as SuccessResponse).choices[0].message.content;
  }

I know OpenAI has also SDK lib but I prefer simple calls instead of another dependency since it's hard to manage them in the long term. API allows direct access to the resource, SDK package would have to be updated separately and eventually can be abandoned.

For the database engine, I choose to support Postgres, MySQL and SQLite out of the box. They are the most popular and I worked with all of them before with success. The first was SQLite which allowed me to experiment with different interfaces of adapter. With such an interface, anyone can create their own adapter for other engines like Oracle, ClickHouse, CouchDB etc. I decided to stick with the smallest possible set of methods in the interface, leaving other responsibilities than executing queries to native clients:

export interface DatabaseEngineAdapter {
  executeQuery(query: string): Promise<any[]>;
}

Then I created silly adapters:

import { DatabaseEngineAdapter } from "./DatabaseEngineAdapter";
import betterSqlite3, { Statement } from "better-sqlite3";

export class SqliteAdapter implements DatabaseEngineAdapter {
  private db: betterSqlite3.Database;

  constructor({ dbFilePath }: { dbFilePath: string }) {
    this.db = new betterSqlite3(dbFilePath);
  }

  executeQuery(query: string): Promise<unknown[]> {
    return new Promise((resolve, reject) => {
      const statement: Statement = this.db.prepare(query);
      if (this.isSelectQuery(query)) {
        resolve(statement.all());
      } else {
        const info = statement.run();
        resolve([]);
      }
    });
  }

  private isSelectQuery(query: string): boolean {
    return query.trim().toLowerCase().startsWith("select");
  }
}

Now it's possible to run.

For example for request to SQLite database with simple schema of users, posts, comments and likes:

  const sqliteAdapter = new SqliteAdapter({
    dbFilePath: "./db.sqlite",
  });

  const ormgpt = new ormGPT({
    apiKey: process.env.OPENAI_API_KEY || "",
    schemaFilePath: "./schema.sql",
    dialect: "postgres",
    dbEngineAdapter: sqliteAdapter,
  });

ormgpt.query("give me post with id 1, all comments for this post and user information about author");

generated query:

SELECT 
  p.id AS post_id, 
  p.title, 
  p.body, 
  c.id AS comment_id, 
  c.body AS comment_body, 
  u.username AS author_username, 
  u.email AS author_email 
FROM 
  posts p 
  JOIN comments c ON p.id = c.post_id 
  JOIN users u ON u.id = p.user_id 
WHERE 
  p.id = 1;

and after execution response from the database:

[
  {
    post_id: 1,
    title: 'Hello world!',
    body: 'This is my first post!',
    comment_id: 1,
    comment_body: 'Hello world!',
    author_username: 'test',
    author_email: '[email protected]'
  }
]

It's kind of hard to test such app because it's non-deterministic. The only way I thought about is to test short, precise statements like "create x with y and z" and then look up db if it's there.

Conclusion

Here we come to the conclusion, of why this lib is useless for now. If you look for something more complex like joins, nested subqueries or engine-related queries with the current state of GPT is not possible to get results you can rely on. However, at least you can minimize randomness by being very strict about the requirements in your statement and decreasing "temperature" as low as 0 for deterministic results!

Anyway, as an experimental project, I decided to finish it. So the last part was to allow fine-tuning model parameters:

export type ModelTuning = {
  temperature: number;
  max_tokens: number;
  top_p: number;
  frequency_penalty: number;
  presence_penalty: number;
}

and prepare Postgres and MySQL adapters. The last part was to publish lib. The name ormGPT comes from ORM + GPT model but in fact it's neither orm nor query builder. The proper ORM should "map" the database into objects. Then maybe it's "intelligent" query builder? Also no. Query builder usually allows you to chain query object before generating sql. You can chain plain string, but is that enough? Maybe it should be chatGPTtoQueryFacade.js?

Too much thinking, not enough willingness. Published as ormGPT.

That's it. Tiny afternoon project, you shouldn't use in your production application. Or maybe you should? At the end you can tell your clients, you are using cutting-edge technologies and advanced AI.

You can find the lib on the NPM: https://www.npmjs.com/package/ormgpt

or at the GitHub repository:

pilotpirxie / ormGPT

An ORM based on OpenAI that translates plain language into SQL queries and executes them on a database.

ormGPT

An ORM based on OpenAI that translates plain human language into SQL queries and executes them on a database.

Currently supports database dialects: MySQL, PostgreSQL, and SQLite.

Supported languages: English, German, French, Spanish, Polish, Italian, Dutch, Portuguese, Ukrainian, Arabic, Chinese, Japanese, Korean, Turkish and many more.

ormgpt.query("give me post with id 1, all comments for this post and user information about author");

Generated query:

SELECT 
  p.id AS post_id, 
  p.title, 
  p.body, 
  c.id AS comment_id, 
  c.body AS comment_body, 
  u.username AS author_username, 
  u.email AS author_email 
FROM 
  posts p 
  JOIN comments c ON p.id = c.post_id 
  JOIN users u ON u.id = p.user_id 
WHERE 
  p.id = 1;

Response:

[
  {
    post_id: 1,
    title: 'Hello world!',
    body:

…

View on GitHub

How to update a few years old outdated project in Node and React?

Meat Boy — Thu, 24 Aug 2023 08:40:06 +0000

Navigating old Node.js dependencies can be confusing. In this article, I'll share how I decoded this challenge in a few-year-old repository using a custom tool—and how you too can benefit from my experience.

tl;dr
Use the tool dependency-time-machine to quickly update dependencies one by one in chronological order. Most dependencies are compatible with other packages from a similar or pastime.
This tool is intended to simulate the typical updating workflow as it was done regularly.
npx dependency-time-machine --update

Outdated codebase

Recently I joined a new team with a great product but a highly outdated codebase. So my first task was to update dependencies and made changes so we can migrate from Node 16 to Node 18 and finally to Node 20. Some parts of the code were still relying on Node 14. The initial thought was to use ncu or yarn upgrade-interactive and update all patch versions since they shouldn't break anything if package developers were following the semver. But they didn't.

Dependency void

Many dependencies were not only "old" - this is not the problem, but they were incompatible with new Node versions and other dependencies which features we looked for. At the moment of doing this process, Node 16 becomes deprecated and Node 18 is going into maintenance. Having such an old codebase makes it hard to further develop and with backend part makes it also insecure and vulnerable.

Dependency management is not only about blindly updating, but also about knowing when it's beneficial to use or drop package and having common sense about long term tech debt.
Sometimes, newer versions of a dependency can introduce breaking changes, reduced performance, or other issues. Before updating, developers should check changelogs, understand the implications of the update, and, ideally, test the update in a controlled environment before deploying it.

Over time, some dependencies might become redundant, or better alternatives might emerge. A good practice is to periodically review the project's dependencies to determine if they are still aligned with the project's needs. Additionally, if a package is no longer maintained or has known vulnerabilities, it might be wise to seek alternatives or drop it altogether.

Over-reliance on multiple dependencies can lead to technical debt. If not managed properly, this debt can accumulate, making future changes or updates cumbersome and risky. It's essential to strike a balance between leveraging existing solutions (dependencies) and the potential long-term costs associated with them.

Going back to the case. Thankfully the team wrote plenty of good tests, both unit tests, some integration and a lot of end-to-end so after each update it was possible to check if something broke. At this point, I realized I have to go one-by-one dependency and look at which dependency will be compatible with others and SDK.

Some packages had phantom dependencies. They are indirect dependencies (but also not peerDependencies) and it is expected to have them installed and be available in certain directories. npm since v3 and yarn classic install dependencies in the flat structure of node_modules with nesting only sub-dependencies so the issue with phantom dependencies is hidden until changes in the package structure. pnpm - another package manager installs dependencies in a hidden directory and uses symlinks to make them available at node_modules levels. Also, it hides all sub-dependencies which brokes phantom dependencies early, leaving clean node_modules (IMO, that's good).

Other problems were changes in Node SDK from 16 to 18. In the meantime, Node 17 introduced changes in the open SSL provider which brokes older webpack and DNS resolve mechanism from "by-default-ipv4" to "by-default-ipv6" which brokes usage of some backend and testing libraries.

dependency-time-machine

To maintain all this headache I wrote in my spare time a library called dependency-time-machine which retrieves information about every package listed in package.json and its version. Then it creates a single timeline which is used to determine which library is the most behind and should be updated next.

I found libraries written at certain moments are compatible with other libraries at similar or previous timespan. So, for instance, library [email protected] that came when library [email protected] was already available makes it higher chance compatible than with the same library but with a higher version e.g. [email protected] that was released a year later than [email protected].



npx dependency-time-machine --timeline

Moreover, this replicates the natural process of updating dependencies. When you do this regularly you match existing libs with other existing libraries. So, the main problem that dependency-time-machine tries to solve is to reconstruct the process of natural updating.

And because it may be a lot of work, like in my case where I had to take care of over 200 packages (!) so to ease this process I put into tool auto mode which can find the next dependency to update before another dependency was released, install it and run tests. If tests pass, it will do the same over and over. If the tests fail it will stop so you can look closer and fix either codebase or test.



npx dependency-time-machine --update --install --auto --install-script "yarn install" --test-script "yarn test"

Also, if you don't want to rely on auto-mode you can print the timeline in JSON and make decisions manually of updating dependencies. Other options allow you to exclude dependencies you don't want to update for some reason.

Going back to the story. It still took some time but at least I was more certain about the process and had the linear plan of work. After all, I wrote the document to describe the process so other team members know what's going on with the repository and discussed the process. Deployment went smoothly with only few minor issues in the meantime because most of the problems were spotted early thanks to willing help from team members.

Dependency management can be painful, but done regularly and with patience makes our future work easier. I hope someone finds this article and tool useful :)

Data Structures using JavaScript for beginners

Meat Boy — Wed, 07 Dec 2022 10:13:53 +0000

Data structures are an essential part of computer science, as they provide the means to efficiently organize and store data. In the field of computer programming, data structures are used to implement algorithms and perform operations on data. JavaScript, a popular programming language, offers a number of built-in data structures that can be used to efficiently manipulate and store data.

This guide consists of introduction to:

built-in objects
built-in arrays
linked list
double linked list
heap
stack
queue

Built-in

One of the most commonly used data structures in JavaScript is the array. An array is a linear data structure that stores a collection of elements in a contiguous block of memory. The elements in an array can be of any data type, including numbers, strings, and objects.

Arrays in JavaScript are zero-indexed, which means that the first element in the array has an index of 0, the second element has an index of 1, and so on. To access an element in an array, we use its index. For example, to access the first element in an array named "myArray", we would use the following syntax:

myArray[0]

In addition to accessing elements by their index, JavaScript arrays also provide a number of useful methods that can be used to manipulate the data they contain. For example, the "push" method can be used to add new elements to the end of an array, and the "pop" method can be used to remove the last element from an array.

Another common data structure in JavaScript is the object. An object is a collection of key-value pairs, where the keys are used to identify the values. Objects in JavaScript are similar to dictionaries in other programming languages.

To create an object in JavaScript, we use the "object literal" syntax, which involves enclosing a list of key-value pairs in curly braces. For example, the following code creates an object named "myObject" that contains two key-value pairs:

let myObject = {
  key1: "value1",
  key2: "value2"
};

To access the values in an object, we use the dot notation or the square bracket notation. For example, to access the value associated with the "key1" key in the "myObject" object, we could use either of the following syntaxes:

myObject.key1
myObject["key1"]

In addition to the built-in data structures, JavaScript also allows developers to create their own data structures. For example, we could create a linked list data structure by defining a "Node" class that has properties for the data and a reference to the next node in the list, and a "LinkedList" class that has methods for adding, removing, and searching for nodes in the list.

Linked lists are useful for situations where we need to store a large amount of data and we don't know the size of the data in advance. Unlike arrays, linked lists do not have a fixed size, so they can grow and shrink dynamically to accommodate the data.

One of the main advantages of using data structures in JavaScript is that they provide a way to organize and store data in a way that is efficient and easy to work with. By using the built-in data structures and creating our own custom data structures, we can write code that is efficient, reusable, and maintainable.

In summary, data structures are an essential part of computer science and JavaScript provides a number of built-in data structures as well as the ability to create custom data structures. By using data structures, we can write code that is efficient, organized, and easy to work with.

Linked list

A linked list is a data structure that consists of a sequence of nodes, where each node contains a reference to the next node in the sequence. Linked lists are often used in computer programming because they provide a flexible and efficient way to store and manipulate data.

In a linked list, each node is an object that contains a value and a reference to the next node in the sequence. The first node in the linked list is called the "head" node, and the last node in the linked list is called the "tail" node.

class LinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  addToTail(value) {
    const newNode = { value, next: null };
    if (!this.head) {
      this.head = newNode;
    }
    if (this.tail) {
      this.tail.next = newNode;
    }
    this.tail = newNode;
  }

  removeHead() {
    if (!this.head) {
      return null;
    }
    const value = this.head.value;
    this.head = this.head.next;
    return value;
  }
}

One of the main advantages of linked lists is that they can be easily modified by adding or removing nodes from the list. For example, we can add a new node to the beginning of a linked list by simply setting the new node's "next" reference to the current head node, and then setting the linked list's head node to the new node. Similarly, we can remove a node from the beginning of a linked list by simply setting the linked list's head node to the current head node's "next" reference.

Another advantage of linked lists is that they can be easily traversed. To traverse a linked list, we simply start at the head node and follow the "next" references until we reach the tail node. This allows us to perform operations on all of the nodes in the list without having to know the size of the list in advance.

However, one disadvantage of linked lists is that they do not provide constant-time access to individual elements, like arrays do. To access a specific element in a linked list, we have to traverse the list from the beginning until we reach the desired element. This can be slow for large lists, especially if we want to access an element near the end of the list.

Double linked list

A double linked list is a variation of the linked list data structure that allows nodes to be traversed in both directions. In a double linked list, each node contains not only a reference to the next node in the sequence, but also a reference to the previous node in the sequence.

This allows us to traverse the list in either direction, starting at either the head or the tail node. It also allows us to easily remove a node from the middle of the list, by simply updating the previous node's "next" reference to point to the current node's "next" reference, and the next node's "previous" reference to point to the current node's "previous" reference.

class DoubleLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  addToHead(value) {
    const newNode = { value, next: this.head, prev: null };
    if (this.head) {
      this.head.prev = newNode;
    }
    this.head = newNode;
    if (!this.tail) {
      this.tail = newNode;
    }
  }

  addToTail(value) {
    const newNode = { value, next: null, prev: this.tail };
    if (this.tail) {
      this.tail.next = newNode;
    }
    this.tail = newNode;
    if (!this.head) {
      this.head = newNode;
    }
  }

  removeHead() {
    if (!this.head) {
      return null;
    }
    const value = this.head.value;
    this.head = this.head.next;
    if (this.head) {
      this.head.prev = null;
    }
    return value;
  }

  removeTail() {
    if (!this.tail) {
      return null;
    }
    const value = this.tail.value;
    this.tail = this.tail.prev;
    if (this.tail) {
      this.tail.next = null;
    }
    return value;
  }
}

Stack

A stack is a data structure that provides two main operations: "push" and "pop". The "push" operation allows us to add an element to the top of the stack, and the "pop" operation allows us to remove the element at the top of the stack. Stacks are often used in computer programming because they provide a simple and efficient way to manage data.

One of the main characteristics of a stack is that it follows the "last-in, first-out" (LIFO) principle, which means that the last element that was added to the stack will be the first one to be removed. This is because the "pop" operation always removes the element at the top of the stack, and the "push" operation always adds an element to the top of the stack.

class Stack {
  constructor() {
    this.items = [];
  }

  push(item) {
    this.items.push(item);
  }

  pop() {
    return this.items.pop();
  }

  peek() {
    return this.items[this.items.length - 1];
  }

  isEmpty() {
    return this.items.length === 0;
  }
}

A common example of a stack in computer programming is the call stack, which is used to keep track of the sequence of function calls in a program. When a function is called, its parameters and local variables are pushed onto the call stack, and when the function returns, its parameters and local variables are popped off the call stack.

Heap

A heap is a data structure that provides two main operations: "insert" and "extract". The "insert" operation allows us to add a new element to the heap, and the "extract" operation allows us to remove and return the largest or smallest element from the heap. Heaps are often used in computer programming because they provide a fast and efficient way to manage data.

class Heap {
  constructor(compareFn) {
    this.compareFn = compareFn;
    this.items = [];
  }

  add(item) {
    this.items.push(item);
    this.heapifyUp();
  }

  // Method to remove an item from the heap
  remove() {
    if (this.items.length === 0) return null;
    if (this.items.length === 1) return this.items.pop();

    const removedItem = this.items[0];
    this.items[0] = this.items.pop();
    this.heapifyDown();

    return removedItem;
  }

  heapifyUp() {
    let currentIndex = this.items.length - 1;
    let currentItem = this.items[currentIndex];
    let parentIndex = this.getParentIndex(currentIndex);

    while (
      parentIndex >= 0 &&
      this.compareFn(currentItem, this.items[parentIndex]) > 0
    ) {
      this.items[currentIndex] = this.items[parentIndex];
      currentIndex = parentIndex;
      currentItem = this.items[currentIndex];
      parentIndex = this.getParentIndex(currentIndex);
    }

    this.items[currentIndex] = currentItem;
  }

  heapifyDown() {
    let currentIndex = 0;
    let currentItem = this.items[currentIndex];
    let [leftChildIndex, rightChildIndex] = this.getChildIndices(currentIndex);

    while (
      (leftChildIndex < this.items.length &&
        this.compareFn(currentItem, this.items[leftChildIndex]) < 0) ||
      (rightChildIndex < this.items.length &&
        this.compareFn(currentItem, this.items[rightChildIndex]) < 0)
    ) {
      let swapIndex;
      if (
        rightChildIndex < this.items.length &&
        this.compareFn(this.items[leftChildIndex], this.items[rightChildIndex]) <
          0
      ) {
        swapIndex = rightChildIndex;
      } else {
        swapIndex = leftChildIndex;
      }

      this.items[currentIndex] = this.items[swapIndex];
      currentIndex = swapIndex;
      currentItem = this.items[currentIndex];
      [leftChildIndex, rightChildIndex] = this.getChildIndices(currentIndex);
    }

    this.items[currentIndex] = currentItem;
  }

  getParentIndex(childIndex) {
    return Math.floor((childIndex - 1) / 2);
  }

  getChildIndices(parentIndex) {
    return [2 * parentIndex + 1, 2 * parentIndex + 2];
  }

One of the main characteristics of a heap is that it is a "complete binary tree", which means that all of the levels of the tree are fully filled, except possibly the last level, which is filled from left to right. This allows us to efficiently access and manipulate the elements in the heap.

Heaps can be either "max heaps" or "min heaps", depending on whether the largest or smallest element is at the root of the heap. In a max heap, the parent nodes are always greater than or equal to their child nodes, and in a min heap, the parent nodes are always less than or equal to their child nodes.

A common example of a heap in computer programming is the priority queue, which is used to store and manage a set of elements with associated priorities. In a priority queue, elements are added to the heap with their priorities, and the element with the highest priority is always extracted first.

Queue

A queue is a data structure that provides two main operations: "enqueue" and "dequeue". The "enqueue" operation allows us to add an element to the end of the queue, and the "dequeue" operation allows us to remove and return the element at the front of the queue. Queues are often used in computer programming because they provide a simple and efficient way to manage data.

// Queue class
class Queue {
  constructor() {
    this.items = new Heap((a, b) => a.priority - b.priority);
  }

  enqueue(item, priority) {
    this.items.add({ item, priority });
  }

  dequeue() {
    if (this.isEmpty()) return null;

    const removedItem = this.items.remove();
    return removedItem.item;
  }

  isEmpty() {
    return this.items.items.length === 0;
  }
}

One of the main characteristics of a queue is that it follows the "first-in, first-out" (FIFO) principle, which means that the first element that was added to the queue will be the first one to be removed. This is because the "dequeue" operation always removes the element at the front of the queue, and the "enqueue" operation always adds an element to the end of the queue.

A common example of a queue in computer programming is the message queue, which is used to store and manage messages that are being sent between different components of a system. In a message queue, messages are added to the queue with the "enqueue" operation, and they are removed and processed with the "dequeue" operation.

Summary

In summary, linked lists, double linked lists, stacks, heaps, and queues are all important data structures in computer science. They provide different ways to store and manipulate data, and they have different strengths and weaknesses. By understanding the characteristics and operations of these data structures, we can choose the right one for the task at hand and write efficient and effective code.

React Hooks - definitive guide for beginners

Meat Boy — Tue, 06 Dec 2022 14:35:42 +0000

React hooks are a new feature introduced in React 16.8 that allows developers to use state and other React features without writing a class. This makes it possible to use React features in functional components, which are components written as JavaScript functions instead of classes.

useState

One of the most commonly used React hooks is the useState hook, which allows a functional component to have local state. Here is an example of how to use the useState hook to implement a simple counter component:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrement
      }
      </button>
    </div>
  );
};

In this example, the useState hook is called inside the Counter component to create a piece of state called count. The useState hook returns a pair of values: the current state value and a function to update it. In this case, the count variable holds the current value of the count state, and the setCount function is used to update the count state when a button is clicked.

Another useful React hook is the useEffect hook, which allows a functional component to perform side effects, such as making an API call or subscribing to a data source. Here is an example of how to use the useEffect hook to fetch data from an API and display it in a component:

import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://example.com/api/data')
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  return (
    <div>
      {data && data.map(item => (
        <p key={item.id}>{item.text}</p>
      ))}
    </div>
  );
};

In this example, the useEffect hook is called inside the DataFetcher component to perform a side effect when the component is rendered. The useEffect hook takes a function as an argument, which is called when the component is rendered. In this case, the function makes an API call to fetch some data and updates the component's state with the data when it is received.

React hooks provide a convenient and declarative way to use state and other React features in functional components. They can make code more readable and maintainable by avoiding the need to write complex class components.

useEffect

The useEffect hook is a built-in React hook that allows a functional component to perform side effects, such as making an API call or subscribing to a data source. It is called inside a functional component, and it takes a function as an argument, which is called when the component is rendered.

Here is an example of how to use the useEffect hook to fetch data from an API and display it in a component:

import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  // Declare a new piece of state to hold the fetched data
  const [data, setData] = useState(null);

  // Use the useEffect hook to perform a side effect (fetching data)
  useEffect(() => {
    // Call the API to fetch the data
    fetch('https://example.com/api/data')
      // Parse the response as JSON
      .then(response => response.json())
      // Update the component's state with the fetched data
      .then(json => setData(json));
  }, []); // The second argument to useEffect specifies when the effect should be executed

  return (
    <div>
      {/* Display the fetched data */}
      {data && data.map(item => (
        <p key={item.id}>{item.text}</p>
      ))}
    </div>
  );
};

Have in mind this is just simple example. As @brense pointed 👏

Updating state asynchronously in useEffect without cleanup is no-bueno. When the component unmounts while your request is still executing, it will produce a nasty error when the request finishes and tries to update the state of your unmounted component. If you do anything asynchronously inside a useEffect you need to have a cleanup function that runs on unmount:

useEffect(() => {
  // Do async stuff like fetch
  return () => {
    // Cleanup by cancelling your fetch
  }
}, [])

The useEffect hook can also be used to perform cleanup actions, such as canceling a subscription or removing an event listener, when a component is unmounted. This can be done by returning a function from the effect callback, which will be called when the component is unmounted.

Here is an example of how to use the useEffect hook to subscribe to a data source and perform cleanup when the component is unmounted:

import React, { useState, useEffect } from 'react';

const DataSubscriber = () => {
  // Declare a new piece of state to hold the subscribed data
  const [data, setData] = useState(null);

  // Use the useEffect hook to perform a side effect (subscribing to a data source)
  useEffect(() => {
    // Create a new subscription to the data source
    const subscription = dataSource.subscribe(data => setData(data));

    // Return a cleanup function, which will be called when the component is unmounted
    return () => {
      // Cancel the subscription
      subscription.unsubscribe();
    };
  }, []); // The second argument to useEffect specifies when the effect should be executed

  return (
    <div>
      {/* Display the subscribed data */}
      {data && data.map(item => (
        <p key={item.id}>{item.text}</p>
      ))}
    </div>
  );
};

In this example, the useEffect hook is called inside the DataSubscriber component to perform a side effect when the component is rendered. The useEffect hook takes a function as an argument, which is called when the component is rendered. In this case, the function creates a subscription to a data source and updates the component's state with the data when it is received. The useEffect hook also returns a cleanup function, which is called when the component is unmounted to cancel the subscription.

useContext

The useContext hook is a built-in React hook that allows a functional component to access the current value of a context, which is a way of passing data through the component tree without having to explicitly pass props at every level. It is called inside a functional component, and it takes a context object as an argument, which is created using the React.createContext method.

Here is an example of how to use the useContext hook to access the current theme in a component:

import React, { useContext } from 'react';

// Create a new context object
const ThemeContext = React.createContext('light');

const ThemeChanger = () => {
  // Use the useContext hook to access the current theme
  const theme = useContext(ThemeContext);

  return (
    <div>
      <p>The current theme is {theme}.</p>
    </div>
  );
};

In this example, the useContext hook is called inside the ThemeChanger component to access the current value of the ThemeContext context. The useContext hook takes a context object as an argument, which is the ThemeContext object created at the top of the file. The useContext hook returns the current value of the context, which in this case is the current theme.

To provide a value for the context, a component can render a Provider component from the context object, passing the value as a prop. The Provider component will make the value available to all components in the component tree that are descendants of the Provider.

Here is an example of how to use the useContext hook with a Provider component to provide a value for the context:

import React, { useContext } from 'react';

// Create a new context object
const ThemeContext = React.createContext('light');

const App = () => {
  // Use the useContext hook to access the current theme
  const theme = useContext(ThemeContext);

  return (
    <div>
      <p>The current theme is {theme}.</p>
    </div>
  );
};

const ThemeChanger = () => {
  return (
    <div>
      {/* Render a Provider component from the context object, passing the new theme as a prop */}
      <ThemeContext.Provider value="dark">
        <App />
      </ThemeContext.Provider>
    </div>
  );
};

In this example, the useContext hook is called inside the App component to access the current value of the ThemeContext context. The ThemeChanger component renders a Provider component from the ThemeContext object, passing a new value for the theme as a prop. This makes the new theme available to the App component, which uses the useContext hook to access the theme. The useContext hook will return the new theme provided by the Provider, rather than the default light theme.

useReducer

The useReducer hook is a built-in React hook that allows a functional component to manage state in a complex component, or share state between multiple components. It is called inside a functional component, and it takes a reducer function and an initial state as arguments, and returns the current state and a dispatch method.

Here is an example of how to use the useReducer hook to manage state in a complex component:

import React, { useReducer } from 'react';

// Define a reducer function to handle state updates
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

const Counter = () => {
  // Use the useReducer hook to manage state in the component
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>The current count is {state.count}.</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Decrement
      </button>
    </div>
  );
};

In this example, the useReducer hook is called inside the Counter component to manage state in the component. The useReducer hook takes a reducer function and an initial state as arguments, and returns the current state and a dispatch method. The reducer function defines how the state should be updated in response to actions, and the initial state sets the initial value of the state.

The Counter component uses the useReducer hook to access the current state and dispatch method, and uses them to display the current count and handle button clicks to increment or decrement the count. When a button is clicked, the component calls the dispatch method with an action object, which is passed to the reducer function to update the state.

The useReducer hook can also be used to share state between multiple components. This can be done by creating a context object and using the useReducer hook in a component higher up in the component tree to manage the shared state. The current state and dispatch method can then be accessed using the useContext hook in descendant components.

Here is an example of how to use the useReducer hook to share state between multiple components:

import React, { useReducer, useContext } from 'react';

// Create a new context object
const CounterContext = React.createContext();

// Define a reducer function to handle state updates
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

const App = () => {
  // Use the useContext hook to access the current count and dispatch method
  const { count, dispatch } = useContext(CounterContext);

  return (
    <div>
      <p>The current count is {count}.</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Decrement
      </button>
    </div>
  );
};

const CounterProvider = () => {
  // Use the useReducer hook to manage state in the component
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      {/* Render a Provider component from the context object, passing the current state and dispatch method as props */}
      <CounterContext.Provider value={{ count: state.count, dispatch }}>
        <App />
      </CounterContext.Provider>
    </div>
  );
};

In this example, the useReducer hook is called inside the CounterProvider component to manage state in the component. The useReducer hook takes a reducer function and an initial state as arguments, and returns the current state and a dispatch method. The CounterProvider component uses the useReducer hook to access the current state and dispatch method, and renders a Provider component from the CounterContext object, passing the current state and dispatch method as props.

The App component uses the useContext hook to access the current count and dispatch method from the CounterContext context. The useContext hook takes the CounterContext object as an argument, and returns the current count and dispatch method provided by the Provider component. The App component uses the count and dispatch method to display the current count and handle button clicks to increment or decrement the count. When a button is clicked, the component calls the dispatch method with an action object, which is passed to the reducer function to update the state.

useCallback

The useCallback hook is a built-in React hook that allows a functional component to memoize a callback function, so that the function is not recreated on every render. It is called inside a functional component, and it takes a callback function and an array of dependencies as arguments, and returns a memoized callback function.

Here is an example of how to use the useCallback hook to memoize a callback function:

import React, { useState, useCallback } from 'react';

const Counter = () => {
  // Declare a new piece of state to hold the count
  const [count, setCount] = useState(0);

  // Use the useCallback hook to memoize the incrementCount callback function
  const incrementCount = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // The second argument to useCallback specifies the dependencies of the callback function

  return (
    <div>
      <p>The current count is {count}.</p>
      <button onClick={incrementCount}>
        Increment
      </button>
    </div>
  );
};

In this example, the useCallback hook is called inside the Counter component to memoize the incrementCount callback function. The useCallback hook takes a callback function and an array of dependencies as arguments, and returns a memoized callback function. In this case, the incrementCount callback function updates the count by calling setCount, and the dependencies array is empty, so the callback function will only be recreated when the dependencies change.

The Counter component uses the useCallback hook to memoize the incrementCount callback function, and passes the memoized callback function to the onClick event handler of the Increment button. When the button is clicked, the incrementCount callback function is called, and the count is updated. Because the incrementCount callback function is memoized, it will not be recreated on every render, which can improve performance.

useMemo

The useMemo hook is a built-in React hook that allows a functional component to memoize a value, so that the value is not recalculated on every render. It is called inside a functional component, and it takes a value-calculating function and an array of dependencies as arguments, and returns the memoized value.

Here is an example of how to use the useMemo hook to memoize a value:

import React, { useState, useMemo } from 'react';

const Counter = () => {
  // Declare a new piece of state to hold the count
  const [count, setCount] = useState(0);

  // Use the useMemo hook to memoize the result of the square calculation
  const square = useMemo(() => {
    // Calculate the square of the count
    return count * count;
  }, [count]); // The second argument to useMemo specifies the dependencies of the value calculation

  return (
    <div>
      <p>The current count is {count}.</p>
      <p>The square of the count is {square}.</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
        Increment
      </button>
    </div>
  );
};

In this example, the useMemo hook is called inside the Counter component to memoize the result of the square calculation. The useMemo hook takes a value-calculating function and an array of dependencies as arguments, and returns the memoized value. In this case, the value-calculating function calculates the square of the count, and the dependencies array contains the count state, so the value will only be recalculated when the count changes.

useImperativeHandle

The useImperativeHandle hook is a built-in React hook that allows a functional component to expose a custom imperative API to its parent component. It is called inside a functional component that is wrapped in a forwardRef callback, and it takes an object containing the custom imperative methods as an argument, and returns nothing.

Here is an example of how to use the useImperativeHandle hook to expose a custom imperative API to a parent component:

import React, { useRef, forwardRef } from 'react';

const TextInput = forwardRef((props, ref) => {
  // Create a ref to store the input element
  const inputRef = useRef(null);

  // Use the useImperativeHandle hook to expose a custom imperative API
  useImperativeHandle(ref, () => {
    return {
      // Define a focus method that sets focus on the input element
      focus: () => {
        inputRef.current.focus();
      }
    };
  });

  return (
    <input ref={inputRef} />
  );
});

In this example, the useImperativeHandle hook is called inside the TextInput component to expose a custom imperative API to the parent component. The useImperativeHandle hook takes an object containing the custom imperative methods as an argument, and returns nothing. In this case, the object contains a focus method that sets focus on the input element.

The TextInput component is a functional component that is wrapped in a forwardRef callback, which allows the parent component to access the ref passed to the TextInput component. The useImperativeHandle hook is called inside the TextInput component, and it is passed the ref object provided by the forwardRef callback. This allows the useImperativeHandle hook to access the ref object and attach the custom imperative methods to it.

Here is an example of how to use the ref object passed to the TextInput component to call the custom imperative focus method:

import React, { useRef } from 'react';

const App = () => {
  // Create a ref to store the TextInput instance
  const inputRef = useRef(null);

  return (
    <div>
      <TextInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>
        Focus the input
      </button>
    </div>
  );
};

In this example, the App component uses the useRef hook to create a ref to store the TextInput instance.

useLayoutEffect

The useLayoutEffect hook is a built-in React hook that allows a functional component to perform layout effects, such as measuring the dimensions of an element. It is called inside a functional component, and it takes a callback function that performs the layout effects as an argument, and returns nothing.

The main advantage of using the useLayoutEffect hook is that it runs synchronously after the browser has painted the layout, so it can be used to update the layout in response to a change in state or props. This is different from the useEffect hook, which runs asynchronously after the browser has painted the layout, so it cannot be used to update the layout.

Here is an example of how to use the useLayoutEffect hook to measure the dimensions of an element:

import React, { useRef, useLayoutEffect } from 'react';

const MeasureElement = () => {
  // Create a ref to store the element
  const elementRef = useRef(null);

  // Use the useLayoutEffect hook to measure the element's dimensions
  useLayoutEffect(() => {
    // Measure the element's dimensions using the getBoundingClientRect method
    const rect = elementRef.current.getBoundingClientRect();

    // Log the dimensions of the element
    console.log(`Width: ${rect.width}, Height: ${rect.height}`);
  });

  return (
    <div ref={elementRef}>
      ...
    </div>
  );
};

In this example, the useLayoutEffect hook is called inside the MeasureElement component to measure the dimensions of the div element. The useLayoutEffect hook takes a callback function that performs the layout effects as an argument, and returns nothing. In this case, the callback function measures the dimensions of the div element using the getBoundingClientRect method, and logs the dimensions to the console.

The MeasureElement component uses the useRef hook to create a ref to store the div element, and passes the ref to the div element as the ref prop. The useLayoutEffect hook is called inside the MeasureElement component, and it is passed the ref to the div element. This allows the useLayoutEffect hook to access the div element and measure its dimensions.

When the MeasureElement component is rendered, the useLayoutEffect hook runs synchronously after the browser has painted the layout, so it can measure the dimensions of the div element and log the dimensions to the console. This allows the MeasureElement component to update the layout in response to a change in state or props, without causing a layout thrashing.

useDebugValue

The useDebugValue hook is a built-in React hook that allows a functional component to display a custom label in the React DevTools. It is called inside a functional component, and it takes a value that represents the current state or props of the component as an argument, and returns nothing.

The main advantage of using the useDebugValue hook is that it allows a developer to see the current state or props of a functional component in the React DevTools, which can be useful for debugging and understanding the behavior of the component. This is especially useful for components that are wrapped in higher-order components, such as connect from the Redux library, because it allows the developer to see the values passed to the wrapped component.

Here is an example of how to use the useDebugValue hook to display a custom label in the React DevTools:

import React, { useState, useDebugValue } from 'react';

const Counter = (props) => {
  // Declare a new piece of state to hold the count
  const [count, setCount] = useState(0);

  // Use the useDebugValue hook to display the count in the React DevTools
  useDebugValue(count);

  return (
    <div>
      <p>The current count is {count}.</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
        Increment
      </button>
    </div>
  );
};

In this example, the useDebugValue hook is called inside the Counter component to display the current count in the React DevTools. The useDebugValue hook takes a value that represents the current state or props of the component as an argument, and returns nothing. In this case, the value is the count state, so the useDebugValue hook will display the current count in the React DevTools.

When the Counter component is rendered, the useDebugValue hook will display the current count in the React DevTools, under the label "Counter". This allows the developer to see the current count of the Counter component in the React DevTools, which can be useful for debugging and understanding the behavior of the component.

To sum up, there are several advantages to using React hooks in functional components. Some of the main advantages include:

Improved performance: Hooks allow functional components to manage state and perform side effects, without requiring the overhead of class components. This can improve the performance of the application by reducing the amount of code that needs to be executed.
Cleaner code: Hooks allow functional components to manage state and perform side effects using a simple and declarative syntax. This can make the code easier to read and understand, and can make it easier to refactor and maintain.
Reusable logic: Hooks can be extracted from functional components and shared across multiple components, allowing developers to reuse common logic and avoid duplication. This can improve the modularity and maintainability of the application.
Better composition: Hooks allow functional components to be composed in a more flexible and powerful way, allowing developers to create custom hooks that combine multiple hooks in a reusable and composable way. This can make it easier to create complex and flexible components, without sacrificing readability and maintainability.

Overall, the use of React hooks in functional components can improve the performance, cleanliness, and reusability of the code, and can make it easier to create complex and flexible components.

Recommendation system #4 - Algorithm and final results

Meat Boy — Thu, 08 Sep 2022 04:28:40 +0000

In the previous post we looked closer at the algorithm and connection between Redis and Node. Today, quickly I summarize how the recommendation is made.

A single recommendation is an overlap between item tags and actor tag-event interactions.

For example items:
Titanic has tags: drama, tragedy, history, action.
Merlin has tags: adventure, fantasy, history, wizards.
Harry Potter has tags: adventure, fantasy, action, wizards.

Actor - user - previously could interact with some films:
Liked a film with tags: action, fantasy
Add to favourite film with tags: action, fantasy
Liked a film with tags: history, action, comedy
Liked a film with tags: adventure, fantasy, dragons
Liked a film with tags: wizards, history, action
Add to favourite film with tags: drama, wizards, fantasy

Now let's say, each like is a weight of 1 and each favourite is a weight of 3. The Sum of overlap (with or without duplication, with or without clamp to 1) divided by the maximum value per film is our overlap. And the higher it is, the stronger recommendation is.

Example with duplication

To make sure tags are still relevant, they have an expiration time. So as the interest may change, they expire and will be replaced with new tags. In this approach is also worth to notice the more keywords items have, the more suggestion is precise.

Demo of film recommendations with 10,000 videos

And the source code:

pilotpirxie / recommendation

🦝 Simple and open source recommendation system

recommendation

Open source recommendation system based on time-series data and statistical analysis. Written in TypeScript and Node.js using Redis for storage. The recommendation system uses the Jaccard index to calculate the intersection between two sets. One set is represented by the maximum possible sum of tag score and the other set is the score sum of user events per tag. The higher the Jaccard index, the higher the recommendation. It uses numbers to represent sets to increase performance.

Features

Use tag score and Jaccard index
Content-based filtering
Event-driven powered engine
Naive exploration of new tags
Suitable for product and content recommendation
Fine-tuning of tag weights
Minimalist and lightweight
Written in TypeScript and Node.js

Overview video

How it works

How the data is stored:

Actors are stored in Redis as simple String keys with create date timestamps as value.
Items are Set type with tags as members. The item may have…

View on GitHub

That was the last post about my Redis Hackathon journey. It was fun to participate and learn more about the technical aspects of Redis. Also, the hackathon allowed me to stay focused and finish another side project! What a wonderful event! ;)

Recommendation system

Meat Boy — Sun, 28 Aug 2022 10:04:00 +0000

Overview of My Submission

Recommendation System

Open source recommendation system based on time-series data and statistical analysis. Written in TypeScript and Node.js using Redis for storage. The recommendation system uses the Jaccard index to calculate the intersection between two sets. One set is represented by the maximum possible sum of tag score and the other set is the score sum of user events per tag. The higher the Jaccard index, the higher the recommendation. It uses numbers to represent sets to increase performance.

Features

Use tag score and Jaccard index
Content-based filtering
Event-driven powered engine
Naive exploration of new tags
Suitable for product and content recommendation
Fine-tuning of tag weights
Minimalist and lightweight
Written in TypeScript and Node.js

How it works

How the data is stored:

Actors are stored in Redis as simple String keys with create date timestamps as value.
Items are Set type with tags as members. The item may have multiple tags.
Events are String type with actorId:id:tag:timestamp:ttl and an expire attribute set to ensure freshness of recommendations.

How the data is accessed:

Get the actor with events
- Check if the actor exists with EXISTS actor:${id}
- Get all user events with SCAN ${loop cursor} MATCH actor:${id}
Delete a single actor
- Scan for each related to actor key SCAN ${loop cursor} MATCH actor:${id}*
- For each key delete with DEL ${key}
Add a single actor
- Scan for each related to actor key SCAN ${loop cursor} MATCH actor:${id}*
- For each key delete with DEL ${key}
- Add new actor with SET actor:${id} ${Date.now().toString()}
Add a single event
- Check if actor exists if flag is set using EXISTS actor:${id}
- Add event with SET actor:${id}:${tag}:${date}:${ttl} ${score}
- If TTL has been provided, set expiration for event with EXPIRE actor:${id}:${tag}:${date}:${ttl} ${ttl}
Get all items with tags
- Get all items with SCAN ${loop cursor} MATCH item:*
- For each item get all tags with SMEMBERS ${itemKey}
Get a single item with tags
- Get all tags of item with SMEMBERS item:${id}
Delete single item
- Call with DEL item:${id}
Add a single item
- Check if item already exists EXISTS item:${id}
- If so, then remove DEL item:${id}
- And add item with tags SADD item:${id} ${tags}

pilotpirxie / recommendation

🦝 Simple and open source recommendation system

recommendation

Features

Use tag score and Jaccard index
Content-based filtering
Event-driven powered engine
Naive exploration of new tags
Suitable for product and content recommendation
Fine-tuning of tag weights
Minimalist and lightweight
Written in TypeScript and Node.js

Overview video

How it works

How the data is stored:

Actors are stored in Redis as simple String keys with create date timestamps as value.
Items are Set type with tags as members. The item may have…

View on GitHub

Video - Demo of film recommendations

Submission Category:

Minimalism Magicians

Replaces time series database for high volume input of actor (e.g. user) events and OLAP operations to calculate recommendations. Have in mind the time limitation of hackathon so take this statement with a pinch of salt ;)

Language Used

TypeScript

Link to Code

https://github.com/pilotpirxie/recommendation

Additional Resources / Info

Collaborators

Meat BoyFollow

AWS, Web & Mobile Dev

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

Recommendation system #3 - Redis & Node Architecture

Meat Boy — Sun, 28 Aug 2022 08:58:00 +0000

It is quite some time since the last time when I wrote about business requirements and goals of the recommendation system. That because I had busy private life recently. Thankfully, I am back and here is the next part of my Redis Hackathon journey.

You can find source code of this project on GitHub:

pilotpirxie / recommendation

🦝 Simple and open source recommendation system

recommendation

Features

Use tag score and Jaccard index
Content-based filtering
Event-driven powered engine
Naive exploration of new tags
Suitable for product and content recommendation
Fine-tuning of tag weights
Minimalist and lightweight
Written in TypeScript and Node.js

Overview video

How it works

How the data is stored:

Actors are stored in Redis as simple String keys with create date timestamps as value.
Items are Set type with tags as members. The item may have…

View on GitHub

First of all, I set taxonomy for architecture. System is made of relations between four entities:

Actor - decisive entity, for whom we try to match recommendations. In most cases this is a user or a group of users.
Item - this entity represents what we try to match e.g. product in a store, article on a blog or video on a streaming platform.
Event - are actor's actions used to calculate recommendation. It consist of tag with a score (weight).
Recommendation - final verdict, how close certain actor and item are.

Redis

Having domain entities I tried many different Redis data structures to find one suitable to store them. To store actor data the most useful was HashSet with key of actorId, field of tag and value of score but I wanted to add event expiration and it isn't possible to do that easily with this structure. So instead I decided to use basic String structure where key contains all such information and value is the score. Then using SCAN with wildcard I'm retrieving data. Item have set of unique tags so the Set structure seems perfect choice and Actor - just to point existence - are again simple Strings with create timestamps.

Node

Node part of the application has been written using TypeScript and Express. System consists of app layer with recommendation mechanism run by controllers. Redis is hidden behind data access layer so can be easily replaced with different storage engine. High level architecture of recommendation system.

In the next part we are going look close at algorithm used to find recommendations.

Recommendation system #2 - Business objectives

Meat Boy — Fri, 12 Aug 2022 21:58:00 +0000

In the previous post, I mentioned my plan to write a recommendation system using Redis and Nodejs. In this article, we look closer at the most important business objectives.

The recommendation system I'm creating will be used in the product-based application, similar to e-commerce apps. Will be difficult to measure direct leads as it's integrated with various partners and websites and it may vary from one to another. So recommendations will be calculated based on events with different weights.
For now, I think about something like opening product page +1 score, give a like to product +2, comment +2, go to the details +5 and so on. For each tag associated with the product composite key with the event will be created.

Back to high-level requirements, the number of products will be relatively low when compared to full feature e-commerce and up to about ~10k items. Cold start which means a situation when the user didn't make any interaction before should be solved by choosing products popular among the overall audience of users.

The needs and tastes of the user may change so the composite of user-tag-event should expire, this can be done in Redis by setting TTL or in the more general database by WHERE clause plus maintenance worker or trigger for periodical cleanup.

In the next post, we will look more closely at the implementation. My initial thoughts are to use Redis TimeSeries to gather events and then use aggregation per composite for each user tag in a certain time span. However, it may be different as I need to dive deeper into Redis structures. If you have any advices or comments, you are welcome.

Recommendation system #1 - Redis Hackathon

Meat Boy — Fri, 05 Aug 2022 15:14:00 +0000

In one of the applications that I'm involved in on my spare time, with a friend we decided to add a recommendation section. With such section, users who interact with one product will get a recommendation of other similar products. I already read a little about this problem and seems to be not trivial. And because I like challenges decided to write my simple recommendation engine.

To make sure I won't discard this project too soon I decided to participate in Redis Hackathon not for prizes or splendour but to have fun with limitations and maybe cooperate with others thru post series.

My initial thoughts are to use Redis for the stream of user events and storage of products to match (eventually QuestDB but hey, it's Redis Hackathon!). Algorithms? Still researching, the easy one to implement seems to be the Jaccard index extended by weights on individual events.

If you are interested in this journey, follow me and in the next post, we are starting an adventure!

What do you think about 4 hour workday?

Meat Boy — Thu, 04 Aug 2022 12:49:11 +0000

As the civilization we have moved on with technology, education and overall life status. Sycophants praising honest toil seem to lose interest and more people are looking for leisure time. What is your opinion on 4 or 6 hour workday?

What is your goto technology for 2022? 🤔

Meat Boy — Mon, 27 Jun 2022 07:53:51 +0000

It’s middle of 2022. Many technologies came up, many reached the enterprise level grade. What technology is your favourite? What technology are you eager to learn? What technology you are currently learning or see bright future for?