Module 3: Frontend vs Backend

Module objective

Understand the difference between what you see on screen (the frontend) and what happens behind the scenes (the backend), and why this distinction matters.

Simple explanation

When you use a website or an application, there are two worlds working together:

The Frontend — What you see

The frontend (or "client side") is everything that appears on your screen and that you interact with directly:

• The buttons you click
• The menus you open
• The forms you fill out
• The animations you see
• The layout, colors, and images

The frontend is the shop window. It's the visible part, the one the visitor sees and touches.

It's built with the three building blocks we've already covered: HTML, CSS, and JavaScript.

The Backend — What works behind the scenes

The backend (or "server side") is everything that happens behind the curtain, on the server:

• Checking that your password is correct
• Finding products that match your search
• Recording your order
• Sending a confirmation email
• Calculating the price with the discount applied

The backend is the back office of the shop: the stockroom, the cash register, the manager's office. The customer never sees it, but without it, nothing works.

How they communicate

graph LR
    subgraph You["What you see"]
        F["Frontend (your browser)"]
    end
    subgraph Server["What you don't see"]
        B["Backend (the server)"]
        D["Database"]
    end
    F -->|"Request: I want to see my orders"| B
    B -->|"Fetches the data"| D
    D -->|"Here are the orders"| B
    B -->|"Response: here are your orders"| F

The frontend and backend are in constant dialogue. Every time you click a button that requires data (logging in, searching for a product, placing an order), the frontend sends a request to the backend, which does the work and sends back a response.

In summary

Concrete example

You log in to your email:

1. Frontend: you see a form with two fields (email and password) and a "Log in" button. You type your information and click.
2. Backend: the server receives your email and password. It checks its database to see if the account exists and if the password is correct. If so, it retrieves your emails and sends them back.
3. Frontend: your browser receives the list of your emails and displays them neatly on screen, with sender names, subjects, and dates.

This entire process takes less than a second, and you only see the final result.

Metaphor

Think of a restaurant:

• The frontend is the dining room: the decor, the tables, the menu, the waiter who takes your order. It's everything the customer sees and touches.
• The backend is the kitchen: the chefs preparing the dish, the refrigerator where ingredients are stored, the recipe being followed. The customer never sees the kitchen, but that's where the real work happens.

The waiter serves as the link between the two: they take your order in the dining room and pass it to the kitchen, then come back with your dish. On the web, that "waiter" connecting the two is the internet.

What if one of them stops working?

• Frontend down: the page doesn't display properly, the buttons don't work. You see something, but it's broken or ugly. It's like a restaurant with a dining room in the dark.
• Backend down: the page displays, but nothing works — you can't log in, can't search, can't order. It's like a restaurant with a beautiful dining room, but no one in the kitchen.

Summary in 3 key points

1. The frontend is what you see and touch — the backend is what works behind the scenes
2. They communicate constantly: the frontend sends requests, the backend responds with data
3. A website needs both to work — just like a restaurant needs a dining room AND a kitchen