/Data-Loss-Prevention

Preventing FormData Loss and comparing different methods by technical explanation

Primary LanguageJavaScript

How To Run Project

  1. git clone https://github.com/mkhavari01/task-cloud.git

  2. cd task-cloud

if you have Docker

3. docker-compose up

if you don't have Docker

3. cd server uncommnet code line 2 in .env file
4. npm start
5. cd client
6. npm start

in this mode by cd to server or client and running npm run test command u can visit available tests

Graphs for Load testing results are availabe at results directory

Technical Documentation

Overview

The project is a web application that simulates a user filling out a form. The application has two inputs, and every user has a session that distinguishes them from each other. The session is saved in cookies so that data is not lost when the user reloads the webpage or closes the tab.

Architecture

The project is built using a client-server architecture. The client-side of the application is developed using Javascript framework( Reactjs ) . The server-side of the application is built using Node.js, Express framework, and MongoDB.

Client-Side

The client-side of the application contains two input fields where users can input data. When a user inputs data into these fields, the data is sent to the server to be saved in the database. If a user leaves the webpage or closes the tab, their session is saved in cookies, so they can continue where they left off when they return.

Server-Side

The server-side of the application is responsible for managing user sessions, storing form data, and serving data to the client-side.

User Session Management

When a user visits the website, the server checks their cookies to see if they have a session or not. If they do, the form data is fetched from the server, and the user can continue filling out the form. If they do not have a session, one is generated, and the session data is saved in cookies.

Changing Saving Methods

The project also includes a page where users can see all sessions and retrieved data and update it. At the top of the page, there is a button that allows users to change the method of saving data to the database.

Deployment

The project can be deployed using Docker and Docker Compose. The Docker Compose file includes three services: frontend, backend, and mongo. The frontend service builds the client-side of the application, and the backend service builds the server-side of the application. The mongo service is responsible for running the MongoDB database.

Preventing Data Loss Methods

When users fill out a form on a website, it is important to prevent data loss in case the user navigates away or the browser crashes. Here are five methods that were explored to prevent data loss in this project:

Method 1: Web Socket Connection

A web socket connection was used to send data to the server every time the user typed a character. This ensured that data was saved in real-time and was always up-to-date. However, this method can be resource-intensive, especially when there are many users, and may cause performance issues on the server.

Method 2: HTTP Request on Each User Typing

An HTTP request was sent to the server every time the user typed a character. This ensured that data was saved on the server and was always up-to-date. However, this method can also be resource-intensive, especially when there are many users, and may cause performance issues on the server.

Method 3: Periodic HTTP Requests

An HTTP request was sent to the server every 2.5 seconds to save the user's form data. This ensured that data was saved periodically and was not lost if the user navigated away or the browser crashed. However, this method can be less accurate and may result in data loss if the user leaves the page before the data is saved.

Method 4: HTTP Request on More Than 5 Characters Typed

An HTTP request was sent to the server every time the user typed more than 5 characters in an input field. This ensured that data was saved on the server and was always up-to-date, while reducing the number of requests made to the server. However, this method may result in data loss if the user navigates away or the browser crashes before the data is saved.

Method 5: Debounce Method

The best method that was found was to use the debounce method. This method waits for the user to stop typing for 500ms and then sends an HTTP request to save the data on the server. This ensures that data is saved on the server and is always up-to-date, while significantly reducing the number of requests made to the server.

Advantages and Disadvantages

Each of these methods has its own advantages and disadvantages. The WebSocket Connection and HTTP Request on Each User Typing methods ensure that data is always up-to-date but can be resource-intensive and cause performance issues on the server. The Periodic HTTP Requests method ensures that data is saved periodically but can be less accurate and may result in data loss. The HTTP Request on More Than 5 Characters Typed method reduces the number of requests made to the server but may result in data loss if the user navigates away or the browser crashes before the data is saved. The Debounce Method ensures that data is always up-to-date while significantly reducing the number of requests made to the server.

Overall, this project demonstrates the importance of preventing data loss and utilizing effective methods to achieve this goal. The debounce method proved to be the best method for this particular scenario, but it's important to choose the most suitable method based on the project's requirements and limitations.