Role of Web Services and REST APIs in a MERN Stack Application

What is web service?

A web service is a software system designed to allow communication between different applications over the internet. It provides a standardized way for applications to exchange information, regardless of the programming language, platform or operating system they use. Web services typically use XML or JSON for data exchange and are based on a set of industry standards such as HTTP, XML, SOAP, and WSDL.

Web services can be used for a wide range of purposes, such as integrating different software systems, sharing data between applications, or exposing functionality to other applications or devices. They are often used in the context of service-oriented architectures (SOA) and can be deployed on various platforms, including cloud computing environments.

Web services can be accessed using a variety of protocols, such as SOAP, REST, and XML-RPC, and can be implemented using various programming languages and technologies, such as Java, .NET, and PHP.

What is json? JSON (JavaScript Object Notation) is a lightweight, text-based data interchange format that is easy for humans to read and write and easy for machines to parse and generate. It is commonly used for transmitting data between a server and a web application, as an alternative to XML.

JSON is based on a key-value pair data structure, which consists of a collection of name-value pairs separated by commas and enclosed in curly braces. The name or key is always a string and the value can be a string, number, Boolean, null, object or an array.

Here is an example of a simple JSON object: {

   "name": "John Doe",

   "age": 30,

   "city": "New York"

}

JSON is also widely used in web APIs to exchange data between different applications and services.

Difference between Web Service and REST API Web services and REST APIs are related concepts in web development, but they are not identical. Here’s a detailed comparison to clarify their differences:

• Web Service: A web service is a standardized medium to allow communication between different software applications over a network. It provides functionality or data to other applications via the web.

• REST API: A REST (Representational State Transfer) API is a type of web service that adheres to REST architectural principles. It is a set of rules and conventions for building web services that are lightweight, stateless, and use standard HTTP methods.

Web Service in a MERN Stack Application

• A web service in a MERN stack application is typically the backend server created using Node.js and Express.js.

• This server is responsible for handling client requests, interacting with the database (MongoDB), and sending responses back to the client.

• Backend Server / Web Service exposes REST API end points

app.get('/products', (req, res) => {

    // Fetch products from MongoDB and send as a response

    res.json(products);

});

REST API in a MERN Stack Application

• A REST API in a MERN stack application is a specific implementation of the web service that adheres to REST architectural principles.

• REST APIs define how the client (React) communicates with the server (Node.js/Express.js) using standard HTTP methods like GET, POST, PUT, and DELETE.

• REST API Endpoints are designed using REST principles

// Get a list of all products

app.get('/api/products', (req, res) => {

    res.json(products);

});

// Create a new product

app.post('/api/products', (req, res) => {

    const newProduct = req.body;

    // Save newProduct to MongoDB

    res.status(201).json(newProduct);

});

// Update a product

app.put('/api/products/:id', (req, res) => {

    const { id } = req.params;

    const updatedProduct = req.body;

    // Update product in MongoDB by ID

    res.json(updatedProduct);

});

// Delete a product

app.delete('/api/products/:id', (req, res) => {

    const { id } = req.params;

    // Delete product from MongoDB by ID

    res.status(204).send();

});

How They Fit Together

• Backend (Node.js/Express.js):

  • Acts as both the web service and the REST API provider.

  • Exposes endpoints that handle requests from the frontend or other clients.

• Frontend (React.js):

  • Consumes the REST API by making HTTP requests to the backend.

  • Uses libraries like fetch or axios to interact with the REST API.

• Database (MongoDB):

  • Stores and retrieves the data.

  • The backend interacts with MongoDB using tools like Mongoose.

Example Flow

1. Frontend Request:

   • React sends an HTTP GET request to /api/products to fetch the product list.

2. REST API Endpoint:

   • The Express.js backend handles the request, queries MongoDB for the product data, and sends the response back.

3. Database Interaction:

   • MongoDB serves as the data layer, providing the requested product information to the backend.

By adhering to REST principles in your backend, you are essentially creating a REST API as part of your web service in the MERN stack application.