DEV Community: Jaydeep Khachariya

What is Monolith and Microservices architecture?

Jaydeep Khachariya — Tue, 16 May 2023 12:51:15 +0000

Recently, Amazon announced they saved costs by 90% after shifting from microservices to the monolith architecture for Amazon prime video, Consequently, I got a question what are monolith and microservices ? then I start to research on it and create this beautiful summery so enjoy it,

Microservices and monoliths are two different architectural approaches for designing and building applications. Let's explore each of them:

Monolith:

A monolithic architecture refers to an application that is built as a single, self-contained unit. It means everything in the application is tightly connected and deployed together. So, if you want to make any changes or updates, you have to redeploy the whole thing.

Imagine it like a massive LEGO structure where all the blocks are glued together. You can't remove or modify just one block without affecting the entire structure. It's like a giant, inseparable entity.

In this monolithic architecture, the different parts of the application, like the presentation layer, business logic layer, and data access layer, are all intertwined. They communicate with each other through method calls or shared libraries. So, if one part needs more resources or scaling, you have to scale the entire monolith, even if other parts don't really need it.

Example: It's like having a pizza with all the toppings fused together into one big, delicious slice. You can't separate the cheese, pepperoni, and mushrooms - it's all mixed up! So, if you want extra cheese, you'll end up with extra pepperoni and mushrooms too, whether you like it or not.

Microservices:

Microservices architecture, on the other hand, is an architectural style where an application is composed of small, loosely coupled, and independently deployable services. Each service represents a specific business capability and is responsible for a well-defined set of functionalities.

In a microservices architecture, services communicate with each other through lightweight protocols such as HTTP/REST or messaging queues. Each service can be developed, deployed, and scaled independently, allowing for flexibility and scalability. Teams can work on different services simultaneously, using different technologies and programming languages if needed.

Microservices enable better isolation of concerns, independent scaling, faster deployment cycles, and improved fault tolerance. However, they introduce additional complexities such as inter-service communication, service discovery, and distributed data management.

Example: In a microservices architecture, the e-commerce application would be divided into separate services, each responsible for a specific functionality.

For instance, you could have individual microservices for user management, product catalog, shopping cart, order processing, and payment processing. Each microservice would have its own codebase, database, and API. They could communicate with each other using lightweight protocols like REST or message queues.

Comparing Microservices and Monolith:

Microservices architectures offer several benefits over monolithic architectures:

Scalability: Microservices allow for fine-grained scalability, where only the specific services experiencing high demand can be scaled independently. In contrast, scaling a monolithic application typically requires scaling the entire application, including components that may not require additional resources.
Independent Deployment and Development: Microservices enable independent deployment of services, which means that teams can work on and release services autonomously. This results in faster development cycles, easier maintenance, and the ability to adopt different technologies for different services.
Fault Isolation: In a monolithic architecture, a failure in one component can affect the entire application. In a microservices architecture, failures are isolated to individual services, limiting the impact on the overall system.

However, adopting a microservices architecture also introduces challenges, such as managing inter-service communication, handling distributed data management, and ensuring consistency across services.

The choice between microservices and monolith depends on various factors, including the size and complexity of the application, scalability requirements, development team structure, and organizational constraints. Each approach has its strengths and trade-offs, and the decision should be based on careful consideration of the specific requirements and constraints of the project.

Socket in React JS: A Guide to Real-Time Communication

Jaydeep Khachariya — Thu, 16 Mar 2023 09:24:19 +0000

Real-time communication has become a crucial aspect of modern web applications. To facilitate real-time communication, we use web sockets. In this article, we will discuss how to use Socket in React JS.

What is a socket?

Socket is a network communication protocol that enables real-time, bidirectional, and event-driven communication between the client and the server. It is based on TCP/IP and allows the client and server to communicate in a full-duplex manner. Socket is widely used for building real-time applications such as chat applications, multiplayer games, and stock trading applications.

Sockets in React JS

React JS is a popular frontend library for building user interfaces. It provides a simple and efficient way to manage the state of the application. React is widely used for building single-page applications, and it can be used in conjunction with Socket to build real-time applications.

To use Socket in React JS, we need to create a Socket client and connect it to the server. We can use the Socket.IO library to create a Socket client. Here's an example of how to create a Socket client in React JS:

import io from 'socket.io-client';

const socket = io('http://localhost:3000');

In this example, we import the io module from the socket.io-client library and create a socket connection to http://localhost:3000.

Once the socket connection is established, we can use it to send and receive events. We can send events using the emit method, and we can listen for events using the on method. Here's an example of how to send an event using Socket in React JS:

socket.emit('chat message', 'Hello, World!');

In this example, we send a chat message event to the server with the message Hello, World!.

We can also listen for events from the server using the on method. Here's an example of how to listen for a chat message event using Socket in React JS:

socket.on('chat message', (message) => {
  console.log(message);
});

In this example, we listen for chat message events from the server and log the message to the console.

Socket in React JS can be used for building real-time applications such as chat applications, multiplayer games, and collaborative document editing applications. Socket enables real-time communication between the client and server, and React JS provides a simple and efficient way to manage the state of the application.

In conclusion, Socket in React JS provides a powerful way to build real-time applications. We can use the Socket.IO library to create a Socket client, send and receive events, and build real-time applications such as chat applications and multiplayer games. Socket in React JS is a powerful tool for building modern web applications that require real-time communication.

How make zip of images and download it using React JS in 3 Easy steps

Jaydeep Khachariya — Fri, 27 Jan 2023 05:14:07 +0000

To make zip file of images and download it, which is stored in state variable first we need to install one dependencies,

Step 1 -- Install JSZIP using npm :

npm i jszip

Step 2 -- then import it inside our JSX file and make instance of it :

import { useState, useCallback } from "react";
import JSZip from "jszip";


export default Download(){

    const [images,setImages]=useState([ // Array of images
      "image1.jpg",
      "image2.jpg",
      "image3.jpg",
      "image4.jpg",
      "image5.jpg",
    ])

    const zip = new JSZip(); // instance of JSZip

return (
        <div>
             <button onClick={handleDownload}>Download</button>
        </div>
      )
}

in above code we make one array state variable for store the images if you get this images from server then you use setImages to store images inside state.

Step 3(Final step) -- Write function to make zip of images and download it.

import { useState, useCallback } from "react";
import JSZip from "jszip";


export default Download(){

    const [images,setImages]=useState([ // Array of images
      "image1.jpg",
      "image2.jpg",
      "image3.jpg",
      "image4.jpg",
      "image5.jpg",
    ])

    const zip = new JSZip(); // instance of JSZip

    // Function for make zip file and download it

    async function handleZip(){
         // Add Images to the zip file
          for (var i = 0; i < images.length; i++) {
          const response = await fetch(images[i]);
          const blob = await response.blob();
          console.log(blob);
          zip.file(images[i].split("/").pop(), blob);



             if (i == selectedImages.length - 1) {
            // Generate the zip file
            const zipData = await zip.generateAsync({
              type: "blob",
              streamFiles: true,
            });
            console.log(zipData);
            // Create a download link for the zip file
            const link = document.createElement("a");
            link.href = window.URL.createObjectURL(zipData);
            link.download = "snapcial-ai.zip";
            link.click();
          }

    }

      return (
        <div>
             <button onClick={handleDownload}>Download</button>
        </div>
      )
}

Tadaaaa if it is helpful for you then follow me on linkedin :
Jaydeep Khachariya

if you face any errors then contact me on : khachariyajaydeep@gmail.com this email id.