Frontend Business Logic

In the frontend, business logic involves decisions, calculations, and validations that are performed in the user interface (UI) layer. This can range from handling user inputs, dynamically rendering UI components, managing application state, or performing lightweight calculations before submitting data to the backend.

Business Logic in a Web Application:

Frontend (React): On the frontend, React focuses more on presenting the user interface (UI) and interacting with the backend. However, some business logic can still reside here, particularly for validating user inputs, managing UI states, and interacting with the backend through APIs.

Business logic on the frontend might include:

UI validation: Ensuring that user inputs (like forms) are correct and meet business rules before submitting them to the backend (e.g., checking if a password is strong enough or a form field is not empty).
State management: React (with state management tools like Redux or Context API) might handle user session states, application state (such as whether the user is logged in), or dynamically managing the UI based on business rules.
Client-side calculations: Some business logic (like calculating a price total or applying a discount) can be handled directly on the client side to improve performance and provide instant feedback to users.

For example, in a React-based frontend for an e-commerce site, the logic might include:

Product search filters: Filtering products based on user-selected criteria (price range, categories, etc.).
Cart management: Handling user interactions with the shopping cart, such as adding/removing items and calculating totals.

Example of Business Logic in a React Frontend:

Cart Calculation:

const calculateCartTotal = (cartItems) => {
    return cartItems.reduce((total, item) => {
    return total + item.price * item.quantity;
    }, 0);
};

Form Validation (Business Rule):

const validateEmail = (email) => {
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    return emailPattern.test(email);
};

Types of Business Logic in Frontend (React):

State Management: Handling UI state like loading indicators, modal visibility, or form state.
Client-Side Validation: Checking inputs before submitting them to the server (e.g., password strength, required fields).
Dynamic Rendering: Showing or hiding elements based on business logic (e.g., showing a discount badge only if a product is on sale).
Interactive Features: Handling user interactions such as product filtering, search, and sorting.

Conclusion:

Frontend (React): Handling user interactions, dynamic updates, and presenting results, but some business logic like validation and minor calculations may also occur here.

Business Logic Definition in Frontend (React)

Overview

In the frontend, business logic involves decisions, calculations, and validations that are performed in the user interface (UI) layer. This can range from handling user inputs, dynamically rendering UI components, managing application state, or performing lightweight calculations before submitting data to the backend.

Key Areas of Business Logic in Frontend React

User Input Validation

Validating data entered by users is an essential part of frontend business logic. It ensures that the data is in the correct format or meets certain business rules before being submitted to the backend.

Example: Validating an Email Address

In React, a form input validation might check if the email address follows a valid format.

import React, { useState } from "react";

function EmailForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!validateEmail(email)) {
      setError("Invalid email format");
    } else {
      setError("");
      // Proceed with submitting data to backend
      console.log("Form submitted with:", email);
    }
  };

  const validateEmail = (email) => {
    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return regex.test(email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
      <button type="submit">Submit</button>
      {error && <p style={{ color: "red" }}>{error}</p>}
    </form>
  );
}

export default EmailForm;

In this example, the business logic ensures that the email input is validated before the form is submitted to the backend.

State Management

React's state management (with hooks like useState, useEffect, or libraries like Redux or Context API) allows you to manage and persist the application state. This logic controls the UI based on user interaction and other factors.

Example: Managing Cart State

A shopping cart could have business logic to add and remove items, calculate the total, and apply discounts.

import React, { useState } from "react";

function ShoppingCart() {
  const [cartItems, setCartItems] = useState([]);
  const [total, setTotal] = useState(0);

  const addToCart = (item) => {
    const updatedCart = [...cartItems, item];
    setCartItems(updatedCart);
    calculateTotal(updatedCart);
  };

  const removeFromCart = (itemId) => {
    const updatedCart = cartItems.filter((item) => item.id !== itemId);
    setCartItems(updatedCart);
    calculateTotal(updatedCart);
  };

  const calculateTotal = (items) => {
    const total = items.reduce(
      (acc, item) => acc + item.price * item.quantity,
      0
    );
    setTotal(total);
  };

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {cartItems.map((item) => (
          <li key={item.id}>
            {item.name} - ${item.price} x {item.quantity}
            <button onClick={() => removeFromCart(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
      <p>Total: ${total.toFixed(2)}</p>
      <button
        onClick={() =>
          addToCart({ id: 1, name: "Product A", price: 30, quantity: 1 })
        }
      >
        Add Product A
      </button>
    </div>
  );
}

export default ShoppingCart;

This example demonstrates the business logic of managing a shopping cart by:

Adding and removing items.
Calculating the total price based on the items in the cart.

Conditional Rendering

Based on certain conditions, you might display or hide UI elements. This is another example of business logic applied to the frontend.

Example: Displaying Content Based on User Role

You can conditionally render content based on the user's role or permissions.

import React from "react";

function UserDashboard({ userRole }) {
  return (
    <div>
      <h1>User Dashboard</h1>
      {userRole === "admin" && (
        <div>
          <h2>Admin Panel</h2>
          <p>Manage users, settings, and more!</p>
        </div>
      )}
      {userRole === "user" && (
        <div>
          <h2>Welcome User!</h2>
          <p>View your profile and activities here.</p>
        </div>
      )}
      {userRole !== "admin" && userRole !== "user" && <p>Access denied</p>}
    </div>
  );
}

export default UserDashboard;

Here, the business logic determines which section of the dashboard to display based on the userRole prop.

Client-Side Calculations

Simple calculations that need to be done on the client-side (without needing to hit the backend) are often part of the business logic. This could involve calculating discounts, applying tax, or any other logic required before finalizing a transaction.

Example: Calculating Discount Before Checkout

In a checkout process, you might need to apply a discount based on certain conditions, such as coupon codes or sales.

import React, { useState } from "react";

function Checkout() {
  const [total, setTotal] = useState(100); // Initial total
  const [discount, setDiscount] = useState(0);
  const [finalPrice, setFinalPrice] = useState(total);

  const applyDiscount = (code) => {
    let discountAmount = 0;

    if (code === "SAVE10") {
      discountAmount = total * 0.1; // 10% discount
    } else if (code === "FREESHIP") {
      discountAmount = 20; // Flat $20 discount
    }

    setDiscount(discountAmount);
    setFinalPrice(total - discountAmount);
  };

  return (
    <div>
      <h2>Checkout</h2>
      <p>Total: ${total}</p>
      <p>Discount: ${discount}</p>
      <p>Final Price: ${finalPrice.toFixed(2)}</p>
      <input
        type="text"
        placeholder="Enter discount code"
        onChange={(e) => applyDiscount(e.target.value)}
      />
    </div>
  );
}

export default Checkout;

In this example, the business logic applies a discount based on the user's input, modifying the total price of the checkout.

Conclusion

Business logic in the frontend (React) involves a variety of tasks, including input validation, managing state, applying calculations, handling conditional rendering, and controlling the flow of the UI based on the user’s interactions and business rules. This ensures that the user experience is smooth, data is consistent, and the application behaves according to the business requirements.