DEV Community: Vijendra-Tech

Javascript promise in depth: examples

Vijendra-Tech — Mon, 10 Jul 2023 06:19:02 +0000

Javascript Promise became popular when it was introduced. Javascript promise is mainly used to handle asynchronous tasks. In this article, we will deep dive into promise through examples.
Promise state:
A Javascript promise can have only one state in either fulfilled or rejected.

A promise in a state of fulfillment or rejection is called a promise settled.

Example#1
Promise with resolved state

// Asnc function always return Promsie with resolve or resolve state
async function getMyName(){
  return "Vijendra Rana"
}
//OR
function getMyName(){
   return new Promise((resolve)=>{
     resolve("Vijendra Rana")
})
}
//or
function getMyName(){
 return Promise.resolve("Vijendra Rana")
}

Example#2
Promise with rejected state

// Asnc function always return Promsie with resolve or resolve state
async function getMyName(){
//Throw here return Promise with rejected state with reason
  throw Error("Name not found")
}
//OR
function getMyName(){
   return new Promise((_,reject)=>{
     reject(Error("Name not found"))
})
}
//or
function getMyName(){
 return Promise.resolve(Error("Name not found"))
}

//Error - when promise rejected, provide proper reason using Error

Example#3
Get a response from resolved Promise - By using then() chain method

getMyName().then(res =>{
 console.log("------",res)
})

Example#4
Handle rejected the promise. catch() chain method

getMyName().then(res =>{
 console.log("------",res)
})
.catch(err =>{
//log the reasons
})

Example#5
in then(), we can add resolve and reject handler

//Reject Hanndler

async function getAllNames(id) {
  if (id) {
    return ["a", "b", "c"];
  } else {
    throw new Error("id is undefined");
  }
}

//every Promise has resolve and reject hander

const namePromise = getAllNames(12);
// namePromise
//   .then((res) => {
//     console.log(res);
//   })
//   .catch((err) => {
//     console.warn(err);
//   });

console.log(typeof namePromise);

namePromise.then(
  () => {
    console.log("Resolved");
  },
  () => {
    console.log("Unresolved");
  }
);

Example#6
finally() to clean up purpose.

//finally to clean up

async function getMovies(id) {
  if (id) {
    return ["1", "2", "3"];
  } else {
    throw new Error("Id req");
  }
}

getMovies(12)
  .then((res) => {
    if (!res) {
      throw Error("Unsuccessful attempt");
    } else {
      console.log("data", res);
    }
  })
  .catch((err) => {
    console.log("error-->", err);
    throw new Error("....");
  })
  .finally(() => {
    console.log("more clean up work");
  });

Example#7
Return reject promise from resolve handler when the response is not ok.

//Promise to reject

async function getMovies(id) {
  if (id) {
    return ["1", "2"];
  } else {
    return [];
  }
}

getMovies().then((res) => {
  if (res.length === 0) {
    return Promise.reject(new Error("unsuccessful response"));
  }
}).catch((err) =>{
    console.warn('---!!!!',err);
});

Example#8
Create Promise with Promise constructor.

//Promise Constructor
// const promise = new Promise((resolve, reject) => {
//   // do some async operation then return promise with resolved state
//   setTimeout(() => {
//     resolve();
//   }, [1000]);
// });

//refactor to sleep
// function sleep(ms) {
//   return new Promise((resolve) => {
//     // do some async operation then return promise with resolved state
//     setTimeout(() => {
//       resolve();
//     }, [ms]);
//   });
// }
//further refactor
function sleep(ms) {
  return new Promise((resolve) => {
    // do some async operation then return promise with resolved state
    setTimeout(resolve, ms);
  });
}
//resolve invoked jsut after constructor called not an asynchronous call so if
function Rejectsleep(ms) {
  return new Promise((resolve) => {
    throw Error("+++++");
    setTimeout(resolve, ms);// This line will not be reachable
  });
}

sleep(1000)
  .then(() => {
    console.log("Resolved");
  })
  .catch((err) => {
    console.log("Rejected from resolved promise");
  });

Rejectsleep(1000)
  .then(() => {
    console.log("Resolved");
  })
  .catch((err) => {
    console.log("Rejected from resolved promise");
  });

Example#9
Convert callback to Promise

//convert call back to promise

//read file from fs lib, Node api use callback heavily
// import { readFile } from "fs";
const fs = require("fs");
//this is  callback based
// fs.readFile(__filename, "utf-8", (error, contents) => {
//   if (error) {
//     console.error(error);
//   } else {
//     console.log(contents);
//   }
// });

//convert to Promise based app
function readFile(path, encoding) {
  return new Promise((resolve, reject) => {
    fs.readFile(path, encoding, (error, contents) => {
      if (error) {
        reject(error);
      } else {
        resolve(contents);
      }
    });
  });
}

readFile(__filename, "utf8").then(
  (contents) => {
    console.log(contents);
  },
  (error) => {
    console.error(error);
  }
);

Example#10
Promise.race() - get the fastest settled promise

//Promise.race()

//examplep-1
function resolveAfter(ms, value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(value);
    }, [ms]);
  });
}

// const pA = resolveAfter(1000, "A");
// const pB = resolveAfter(2000, "B");

// const PResult = Promise.race([pA, pB]);
// PResult.then((val) => {
//   console.log(val);
// });

//Least use of Race  method but in one case
function timeout(ms, promise) {
  let timeoutId;
  const timeoutPromise = new Promise((_, reject) => {
    timeoutId = setTimeout(() => {
      reject(Error(`Operation timed out after ${ms}`));
    }, ms);
  });

  return Promise.race([promise, timeoutPromise]).finally(() => {
    clearTimeout(timeoutId);
  });
}

const promise = resolveAfter(1000, "Promise A");

timeout(5000, promise).then(
  (value) => {
    console.log(value);
  },
  (error) => {
    console.error(error);
  }
);

Example#11
Promise.all() - get all promises when all API calls parallel

//Promise.all

async function getMovieTitle(id){
 return "Iron Man"
}

async function getMovieId(dir, actor){
  return 1
}

// getMovieId("Rachel","RJD").then((res) =>{
//     if(res){
//         getMovieTitle(res).then((t) =>{
//             console.log('++++',t);
//         })
//     }

// })

//If both are independent call then call Parallely
const promsies = Promise.all([
    getMovieId("Rachel","RJD"),
    getMovieTitle(1)
])

// console.log('Fullfilled Promsie',promsies);
promsies.then(([id,title]) =>{
    // const id = res[0]
    // const title = res[1]

    console.log('Id',id, 'Title',title);
}).catch(err =>{
    console.log(err);
}).finally(() =>{
    //do some clean up work
})

//in order Promise to  be fullfilled , all promise must be fullfilled

Example#12
If any promise failed from Promsie.all() then no return one Promsie with rejected state. So Promsie.allSettled()

//Promsie.allSettled
async function getMovieTitle(id) {
  throw Error("Something Wrong!!");
}

async function getMovieId(dir, actor) {
  return 1;
}

//Promise.allSettled always return settlled  promise
Promise.allSettled([getMovieId("Rachel", "RJD"), getMovieTitle(1)]).then(
  ([id, title]) => {
    if (id.status === "fulfilled") {
      console.log(id.value);
    }
    if (title.status === "fulfilled") {
      console.log(title.value);
    }
  }
);

Example#13
Promise. any() - > In the real word, API failed. To make it resilient we can use Promise.any()

//Promsie.any() to make more resilinet in api down time

var promises = [
  Promise.reject(Error("Fail#1")),
  Promise.reject(Error("Fail#2")),
//   Promise.resolve(2),
];

// Promsie.any return fullfilled promise if any Promise is fullfilled

Promise.any(promises).then(
  (value) => {
    console.log("fullfilled ", value);
  },
  (error) => {
    console.warn(error.errors);
  }
);

Example#14
Async/Await - We can use better readable code with async/await keyword from JS.

//Async/Await

function getMovies() {
  return new Promise((resolve, reject) => {
    resolve(["a", "b", "c"]);
    // reject(Error("Erorr Occured"));
  });
}

function getMovies2() {
  return new Promise((resolve) => {
    resolve(["a1", "b1", "c1"]);
  });
}

async function main() {
  try {
    //it is a sequential api call
    // const movies = await getMovies();
    // const movies2 = await getMovies2();
    //parrallel
    const [movies, movies2] = await Promise.all([
      await getMovies(),
      await getMovies2(),
    ]);
    console.log("+++++", movies, movies2);
  } catch (error) {
    console.log("Some error occured");
  }
}

main();

I hope it will help to understand and write promise-based codes in JS.

Next, we will deep dive into Async/Await. Check my articles to know more about technical stuff.

Happy coding :)

Framework for LLM apps

Vijendra-Tech — Wed, 21 Jun 2023 11:19:50 +0000

To Build better apps, we need always a framework. If you want to build LLM apps then Langchain is a framework that will provide all the necessary needs for LLM apps.

Langchain Framework

Langchain is open source for LLM apps.

Currently, Langchain provides Python and Javascript (typescript) libraries. It focuses on composition and modularity and is a common way to combine.
The major components provided by Langchain are:
Models - We can use any LLM models.

Prompts- we can pass prompts to the model.

Parse - we can parse LLM output before replying to users.

Indexes - It can index large chunks of text.

Memory- it can memorize the previous conversation of users.

Chain - It can perform a sequence of operations on your data.

Evaluation - To evaluate your app whether it is meeting the defined criterion.

Agents- Give instructions to LLM to perform some tasks by allowing using external tools.

Models, Prompt and Parsing

We can use any kind of modal and we can provide some instruction as prompt.

if we use the Open AI model - all response is a string format but looks like a Python dictionary. By using Langchain , it will automatically parse outputs to the dictionary so that we can use it as a key to get a particular answer.

Langchain provides Prompt Template.

Why use it?
Sometimes Prompts can be long and detailed.

Langchain reuse good prompts whenever you want.

Langchain provides prompts for common operations.

Memory

Sometimes or most of the time we need the LLM model to remember the previous part of the conversation and feed that into language.
Since LLM models are stateless and each transaction is independent. Chatbots appear to have memory by providing the full conversation as a context.

But memory can be very long so more tokens and if more tokens then more costly.

So Langchain provides several kinds of memory to store and accumulate the conversation.

Memory types:

ConversationBufferMemory

ConversationBufferWindowMemory

ConversationSummaryMemory

Chains

To carry a sequence of tasks based on your data. Langchain provides chains as one of the core features.

LLM chain is the very basic type of chain

Sequential Chain - The idea to combine all chains where the output of one chain is the input of the next chain.

Router chain - chaining based on some routing.

Question and Answering based on Documents

One of the very common applications Q &A based on uploaded documents. We can store the documents in a vector store and can upload documents using the Document loader provided by Langchain.

But How can answer big files as we know that every LLM model has max tokens limit? So for these reasons, Embedding and Vector store comes into the picture.

Embedding Vector captures contents/meaning and text with similar content will have similar vectors.

Evaluations

We always want to know if the LLM apps that we are developing must meet the criteria.

Agents

One of the cutting and very new technology. By using Agents we can allow the model to use external tools for some specific task.

Agents can use any custom tool defined by the user, API, web search etc.

I hope this article gives some information on the Langchain framework.

In my next article, will implement and develop some LLM apps.

Math for AI and ML: The Reasons Behind It

Vijendra-Tech — Sun, 11 Jun 2023 07:17:08 +0000

Artificial Intelligence (AI) and Machine Learning (ML) have become buzzwords in recent years. They are revolutionizing the world as we know it, changing the way we live, work, and interact with each other and with technology. Behind these powerful technologies lies a foundation of mathematics that is essential to their development and implementation. In this blog post, we will explore the reasons why math plays such a crucial role in AI and ML.

The Importance of Linear Algebra
Linear algebra is a branch of mathematics that deals with linear equations, matrices, and vector spaces. It forms the backbone of many algorithms used in AI and ML, such as principal component analysis, linear regression, and deep learning. Linear algebra is essential for understanding how to manipulate data and how to build models that can make predictions based on that data. Without a solid grasp of linear algebra, it is impossible to develop and implement effective AI and ML algorithms.

The Significance of Calculus
Calculus is another branch of mathematics that is crucial to AI and ML. It deals with the study of rates of change and how things vary over time. In AI and ML, calculus is used to optimize algorithms and to find the best solutions to complex problems. It is also used to understand the behavior of neural networks, which are a fundamental component of many AI and ML systems. A strong understanding of calculus allows developers to create more sophisticated and accurate models and to make better predictions based on data.

The Relevance of Probability and Statistics
Probability and statistics are also essential to AI and ML. They provide tools for understanding uncertainty and for quantifying the likelihood of events occurring. Probability and statistics are used to build models that can predict outcomes with a certain degree of accuracy. They are also used to identify patterns in data and to understand the underlying structure of complex systems. Without a strong foundation in probability and statistics, it is impossible to develop AI and ML models that are reliable and accurate.

Conclusion
In conclusion, math is a critical component of AI and ML. It provides the tools and techniques necessary to build sophisticated algorithms and models that can make accurate predictions based on data.

Tech Stack- How to make tech choice for Web apps?

Vijendra-Tech — Sat, 20 May 2023 07:41:45 +0000

Choosing the right tech stack for web development is crucial for the success of any project. A tech stack is a combination of programming languages, frameworks, and tools used to create web applications. In this blog post, we will discuss the importance of selecting the right tech stack and how it can impact your web development project.

The below Diagram shows different components involved in web development and each component can be implemented by different technologies.

To make a better tech choice, we have to know the underlying architecture of tech and based on architecture, we can match the use case of the application.
For example-

To Serve static content and dynamic content.

-Static Content- (a) Apache Web Server (b)Nginx Web Server (c) Cloud Storage

-Dynamic Content - (a) Web Server -> Apache HTTPD, Node JS (b)Java Web container- Tomcat, Jetty, Spring-boot.

-Content Caching- Nginx

-Content Distribution- CDN.

To make a good decision first We can check the architecture of the tech choice.
Ex. Nginx Web Server

can store static content
Generate dynamic content
Act as Reverse proxy( Excellent )
Cache content -(Good)

Compatibility and Scalability
One of the most important factors to consider when choosing a tech stack is compatibility and scalability. A tech stack that is compatible with your project's requirements will ensure that your web application runs smoothly and efficiently. Scalability is also important as your web application grows and more users access it. Choosing a tech stack that can easily scale and handle large amounts of traffic is essential to the success of your web application.

Development Time and Cost
Another factor to consider when choosing a tech stack is development time and cost. Some tech stacks require less time and effort to develop, while others are more complex and require more expertise. It's important to choose a tech stack that aligns with your development team's skillset and experience. Choosing a tech stack that requires less development time and cost can also help you save money and launch your web application faster.

User Experience and Functionality
The user experience and functionality of your web application are also important factors to consider when choosing a tech stack. Some tech stacks offer better functionality and user experience than others. It's important to choose a tech stack that aligns with your project's goals and user needs. A tech stack that offers better functionality and user experience can help you attract and retain more users, which is essential for the success of your web application.

Conclusion
Choosing the right tech stack for web development is crucial for the success of any project. Compatibility and scalability, development time and cost, and user experience and functionality are important factors to consider when selecting a tech stack. By considering these factors, you can choose a tech stack that aligns with your project's goals and requirements and ensures the success of your web application.

And check the next articles on tech stack, how can we implement each component?

Prompt engineering - Instruction based LLM

Vijendra-Tech — Sun, 07 May 2023 13:22:16 +0000

Prompt engineering is a technique used to fine-tune and customize language models such as OpenAI's GPT-3 for specific tasks. This technique involves crafting prompts or inputs that guide the model toward generating more relevant and accurate outputs. In this blog post, we will explore how prompt engineering can be used to enhance the performance of GPT-3 for various NLP tasks.

Prompt engineering principle:
1.Practice writing clear and specific instructions
2.Give the modal some time to think
Best prompt engineering can be achieved by an iterative process.

Guideline:

Be clear and specific
Analyze why the result does not give the desired output
Refine the idea and prompt
Repeat To achieve the best result always refine the prompt with a batch of examples.

Use cases for Prompt engineering:
1.Summarizing text - For example, summarize meetings or summarize customer reviews on products.

2.Inferring - For example, extract the sentiment of the text. (Like Positive or negative reviews )

3.Transforming - For example - Take inputs in one language and transfer them to another language.

4.Spelling fix

5.Check review

6.Expand a sorter text to longer text

7.Chatbot -(Any chatbot like Tiffin service order chatbot)

And many more...

I hope this article will give some ideas of prompt engineering . In next article, How can we implement using python , open AI modal(3.5 turbo) , next Js, React ?

Authentication for apps -> How can utilize next-auth for authentication?

Vijendra-Tech — Mon, 01 May 2023 13:38:08 +0000

Authentication and Authorization is an integral processes to keep the application secure. Without proper authentication measures in place, unauthorized users could gain access to sensitive information or perform actions that could harm the application or its users.

Authentication can be done using the User's Google account or GitHub Apple etc.

How can we implement such an authentication process?
There are several ways to implement but today we can check how we can utilize the next-auth library for GitHub authentication and it can be extended to any other authentication (google, apple, Reddit etc).

Steps for GitHub authentication :
1.First, get Github Client ID and secret Id by creating a new OAuth app from (Setting ->Developer setting -> New OAuth app-> provide URL and callback URLs) then generate the client Id.

2.Keep the Client ID and secret ID in the env file (.env file)

Authentication (NextAuth.js)

NEXTAUTH_URL=localhost:3000

NEXTAUTH_SECRET=

GITHUB_CLIENT_ID=

GITHUB_CLIENT_SECRET=

GITHUB_ACCESS_TOKEN=
3.

 // Keep  this Option in any folder(lib->auth.js)
   import GithubProvider from "next-auth/providers/github"

   export const authOptions = {
     // Configure one or more authentication providers
     providers: [
       GithubProvider({
         clientId: process.env.NEXT_GITHUB_CLIENT_ID,
         clientSecret: process.env.NEXT_GITHUB_CLIENT_SECRET,
       }),
       // ...add more providers here
     ],
     secret:process.env.NEXT_JWT_SECRET
   }

4.create a folder under (src->pages->auth->[...nextauth].js file and add these lines of codes.

import NextAuth from "next-auth"

import { authOptions } from "@/lib/auth"

// @see ./lib/auth
export default NextAuth(authOptions)

5.Then import sign/signout/ from next-auth/react and call on the login and signout button.

 import { signIn } from "next-auth/react"
   <button
             type="button"
              className="bg-white border border-slate-200 hover:bg-white-100 dark:border-slate-700 dark:text-slate-100 p-10 rounded"
              onClick={() => {
                signIn();
              }}
            >
              Login With GitHub
            </button>

With all these changes we will be able to GitHub log in.

DEMO URL: https://poc-next-auth.netlify.app/

CODE: https://github.com/Vijendra-Tech/poc_next_auth

Happy Coding :)

POC#1-Build online code editor using react+vite, tailwindcss,judge0

Vijendra-Tech — Mon, 24 Apr 2023 09:08:52 +0000

Today I will write about how can we build an online code editor using React.

I am using React +Vite to create UI and tailwind CSS for styling.

Libraries are used codemirror and react-codemirror for code input in the browser.

To compile and execute codes: Juggeo APIs are used.

Judge0 APIs can be found in the Rapid API hub. First, need to register and get the API key and place in the .env file.

Replace with your API key and host details.

Here is Demo UI and Can check the live demo here.

You can find entire codes on GitHub. You can modify and add more use cases.

Happy Coding :)

[Cont...] System design of chat system-part2

Vijendra-Tech — Fri, 21 Apr 2023 11:28:14 +0000

From part-1 on we decided to choose a WebSocket network protocol for communication to simulate server-initiated connection. WebSocket connection initiated by Client. It is bidirectional and persistent. Though it is a persistent connection, a server could send updates to a client.WebSocket generally works even if a firewall is in place. This is because of the same port 80 or 443 used by HTTP/HTTPS.

High-Level Design-

As we decided to use websocket for a chat so for other features we can use the traditional request/response method of HTTP(Rest API).

So Now the chat system is divided into three parts:- Stateless service, stateful service and third-party.

Stateless Service-> Manage user sign-up. login, user profile etc.

Stateful Service->Manage chat communication among users.

Third-party- Push Notification when the user is offline.

DataStore:

To Make a database choice - we have 2 types -SQL and No-SQL DB
RDMS for Stateless service for User Management. It can be scaled by using replication and Sharding technique.

But to maintain chat history data. Need to understand read/write the pattern.

Chat history has enormous data and users mostly check recent chats. But in some cases, users might want to search with a particular keyword and the chat system can navigate to a specific message.

So r/w = 1:1 in one -one chat

Random excess is expensive in RBMS.So we choose key-value stores to store messages. Facebook and Discord choose key-value stores for messages. Facebook is using HBase and Discord was using Cassandra but recently modified the architecture of Discord.

Key-value stores can easily be scaled horizontally and have low latency.

So high-level design with services and data store is

Next, we will see the data modal design for the chat system, online status and group messaging design.

Check my blogs.

System Design for chat system

Vijendra-Tech — Thu, 20 Apr 2023 14:26:16 +0000

The system design process has the following pattern:

Gather Requirement

Capacity measurement

Propose High-level design

High-level Design

a.Technology selection

b.Service selection

c.Think of scalability

d.Storage selection

API Design

Data Modal

Requirements:

1) Kind of chat -> 1-1 chat and group chat

2)Should support 70 million daily active users

3)Group of max 200 peoples

4)System should allow only text messages

5)Maximum 5000 chars

6)History should available forever.

Propose a very high-level design and buy-in

For a chat system, client needs to connect chat service using one or more network protocols and choice of network is important.

HTTP Protocol communication is very common. Client can initiate HTTP connection by providing a keep-alive header to keep the connection persistent. Initially, Many company started http protocol but it is not reliable.

Since the Http connection is initiated by the client end so from receiver side it is very difficult and it is not trivial to send message from the server. Server-initiated connection are used to persistent connection and easy to send and receive message.

There are few technique- Polling, long polling , and Websocket.

Websocket is the most common solution for sending asynchronous updates from server.

Next will post on Service and Storage selection.......

How Docker is helping developer and Dev Ops team??

Vijendra-Tech — Sat, 15 Apr 2023 12:05:35 +0000

As we all are aware that many many tech companies adopted containerization bases applications because of their growing demand. But what problems are solved by using docker?

For Developer- What is the developer's main task in the job- writing codes?

But Developer has to do all the setup work before writing codes and for different environments different sets up, version issues etc.

What if I don't have to do set up and do only coding?

Here are some problems solved by docker-

Portability: Docker containers are portable and can run consistently across different environments, from development to production, without changes or configuration. This allows developers to easily move their applications between different systems, reducing the risk of environment-related issues.

Dependencies: Docker allows developers to package an application and its dependencies into a single unit called a container. This ensures that all the required dependencies, libraries, and configurations are included in the container, which eliminates the "works on my machine" problem and makes it easy to share and deploy applications.

Consistency: Docker provides a consistent runtime environment for applications, regardless of the underlying infrastructure. This reduces the risk of compatibility issues and ensures that applications behave predictably across different environments.

Scalability: Docker makes it easy to scale applications horizontally by adding or removing containers as needed. This allows developers to quickly respond to changes in demand and ensures that the application can handle increased traffic without downtime or performance issues.

Speed: Docker can significantly reduce the time it takes to set up and configure development, testing, and production environments. This enables developers to focus on writing code and delivering features rather than dealing with infrastructure-related tasks.

And the problems that the Operation team faces are:

Environment inconsistencies: Applications often behaved differently in different environments due to differences in the underlying infrastructure, which made it difficult to replicate issues and deploy applications reliably.

Resource utilization: Applications often required dedicated infrastructure, which resulted in underutilized resources and higher infrastructure costs.

Complex deployments: Deploying applications often required manual configuration and scripting, which was time-consuming and error-prone.

Limited scalability: Scaling applications vertically by adding more resources to a single server was often complex and expensive, and scaling horizontally by adding more servers required complex load balancing and networking configurations.

Dependency management: Managing dependencies between applications and different versions of libraries and software were often difficult and error-prone, leading to compatibility issues and application fail

To address all these issues many companies started using a containerization-based approach.

Terms that are always used with Docker are:

a.Container b.Images

What is an Image in Docker?

An image is a template that defines the contents and configuration of a container. An image is a read-only file that includes everything needed to run an application, such as code, runtime, system tools, libraries, and settings.

What is a container?

A container is a lightweight, standalone executable package that includes everything needed to run an application, such as code, runtime, system tools, libraries, and settings. A container is an instance of a Docker image that runs as a process in isolation from the host system and other containers.

Then what is different between Container and Virtual Machine?

To Know the difference first have to know the general OS Structure.

Every OS(Operating systems like Windows, macOS, or Linux) has three layers.

The kernel layer serves as the operating system's core, handling hardware allocation, memory management, and file systems for the application layer.

Docker solely virtualizes the application layer, while Virtual Machines virtualize both the OS and Kernel layers.

That is the reason has compatibility problem but docker has given solution for this(Docker Desktop).

In summary, Docker containers offer a versatile and effective method for packaging and deploying applications, ensuring consistent and isolated runtime environments that operate seamlessly across various systems and infrastructures.

How to Set Up Docker, Create a Docker Image, and Run It?

So Overall workflow looks like in docker?

Be sure to check out my upcoming blog post!

How to do in-memory Caching using ReactJS

Vijendra-Tech — Thu, 13 Apr 2023 13:12:59 +0000

In some cases where we don't require to call multiple API calls for the same result.

Using a Map object can be more efficient than using a plain object as a cache, especially when dealing with a large amount of data, as Map objects are optimized for handling key-value pairs. Additionally, using a hash map allows for faster lookup times than using an array or other data structures for caching.

In a real-world application, you may want to implement more advanced caching strategies or use a dedicated caching solution like Redis or Memcached.

But for the simple use case, we can use the in-memory cache mechanism.

Here is example

//using cahed object
import React, { useEffect, useState } from 'react';

const cache = {};

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://example.com/api/data');
      const jsonData = await response.json();
      setData(jsonData);
    };

    // Check if the data is in the cache
    if (cache['cachedData']) {
      setData(cache['cachedData']);
    } else {
      fetchData();
    }
  }, []);

  useEffect(() => {
    // Store the data in the cache
    cache['cachedData'] = data;
  }, [data]);

  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default App;
//using Map
import React, { useEffect, useState } from 'react';

const cache = new Map();

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://example.com/api/data');
      const jsonData = await response.json();
      setData(jsonData);
    };

    // Check if the data is in the cache
    if (cache.has('cachedData')) {
      setData(cache.get('cachedData'));
    } else {
      fetchData();
    }
  }, []);

  useEffect(() => {
    // Store the data in the cache
    cache.set('cachedData', data);
  }, [data]);

  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default App;

Quantum Computing in simple words

Vijendra-Tech — Sun, 09 Apr 2023 10:17:44 +0000

The Computer was invented to solve computing problems. Traditional computer or classical computer was developed based on classical physics concept. Traditional computers use binary digits (bits) that can be either 0 or 1 to represent information. But some problems can not be solved by classical computers or it will take a week or month or years to solve.

For Example maze problem

The time taken by a classical computer to solve a maze problem depends on the size and complexity of the maze. For small and simple mazes, a classical computer can solve the problem quickly, typically in a matter of milliseconds or seconds.

However, as the size and complexity of the maze increase, the time taken by a classical computer to solve the problem can increase exponentially, and it may take hours, days, or even longer to find a solution.

But to simulate one nature behavior like chemical simulation, will take years or can not be solved by using traditional computers. To solve very complex kinds of problems, the Quantum computer comes into the picture.

Quantum computers use quantum bits, or qubits, which can be both 0 and 1 at the same time. This allows quantum computers to perform many calculations simultaneously and solve certain problems that classical computers would take a very long time to solve, or even be unable to solve at all.

It can have many states of 0 and 1 like the states of the rolling coin.

Use cases where Quantum Computers can be used

1.Chemical Simulation

2.Health sector :

Drug discovery: Quantum computing can accelerate the process of drug discovery by simulating the behavior of molecules at the quantum level. This can help identify new drug candidates and optimize existing ones much faster than classical computers.

Medical imaging: Quantum computing can improve the accuracy of medical imaging by optimizing the processing of large data sets and reducing the time required for analysis. This can lead to faster and more accurate diagnoses of diseases such as cancer.

Genomics: Quantum computing can help analyze large genomic data sets to identify genetic mutations and develop personalized treatments for patients. This can lead to more effective treatments and better outcomes for patients with genetic diseases.

Health data analysis: Quantum computing can help analyze large and complex health data sets, such as electronic health records, to identify patterns and correlations that may be missed by classical computers. This can lead to more accurate diagnoses, better treatments, and improved health outcomes for patients.

And there are many more.

Quantum computer will not going to replace traditional computer and will be available through cloud service as it is a very complex machine. Quantum computer is next big thing gonna happen and the winner will rule. That is the reason many companies are betting billions of dollars in quantum computer. This is the area where many products can be build.

Links to know more.
https://en.wikipedia.org/wiki/Quantum_computing