← All posts

Frontend vs Backend: The Two Sides of Every Web App

Discover how the frontend (UI) and backend (logic) collaborate to build dynamic web apps, with simple code demos and real‑world examples.

The simple version

Think of building a website like making a sandwich.
The frontend is the bread, cheese, lettuce, and the way it looks on the plate. It’s everything the user sees and interacts with.
The backend is the kitchen: the chef, the ingredients, the stove, and the recipe. It’s what happens behind the scenes to make the sandwich tasty and ready for you.

Both parts are needed, but they do very different jobs. If you’re a student just starting out, here’s how to picture and experiment with each side.

1. What the frontend does

  • Presentation: It decides the colors, layout, fonts, and images.
  • Interaction: Buttons, forms, and animations let users click, type, and scroll.
  • Responsiveness: It adapts to phones, tablets, and desktops so the site works everywhere.

Technologies you’ll see on the frontend:

  • HTML – the skeleton (tags like <div>, <p>, <img>).
  • CSS – the styling (colors, margins, flexbox).
  • JavaScript – the behavior (show a modal, submit a form without reloading).

A tiny example of a button that changes color when you click it:

<button id="btn">Click me</button>
<script>
  const btn = document.getElementById('btn');
  btn.onclick = () => btn.style.backgroundColor = 'lightgreen';
</script>

When you load this in a browser, the button is part of the frontend.

2. What the backend does

  • Data storage: Keeps user accounts, posts, or any information in a database.
  • Business logic: Decides what happens when a user signs up or buys a product.
  • Security: Validates passwords, protects against bad input, and handles authentication.
  • API: Sends data to the frontend in a format the browser understands (usually JSON).

Typical backend tools:

  • Programming language: Python, Node.js, Ruby, Java, etc.
  • Framework: Flask (Python), Express (Node.js), Rails (Ruby).
  • Database: SQLite, PostgreSQL, MongoDB.

A quick Node.js example that returns a list of books:

// server.js
const express = require('express');
const app = express();

app.get('/books', (req, res) => {
  res.json([{ title: '1984', author: 'Orwell' }]);
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

Running node server.js starts the backend. The frontend can fetch this data with fetch('/books').

3. How they talk to each other

The frontend and backend communicate over the internet using HTTP.

  • The frontend sends a request (e.g., “give me the list of books”).
  • The backend processes it and sends back a response (the JSON data).
  • The frontend receives the response and updates the UI.

You can test this flow locally:

# 1. Start the backend
node server.js

# 2. In another terminal, open a browser and go to
http://localhost:3000/books

You’ll see the JSON data appear in the browser. That’s the backend sending data to the frontend.

4. Why the split matters

  • Specialization: Frontend developers focus on design and user experience; backend developers focus on data and logic.
  • Scalability: The backend can be scaled independently (more servers, better databases).
  • Security: Sensitive data stays on the backend; only what’s needed is sent to the frontend.
  • Teamwork: Teams can work in parallel; the frontend can use a mocked API while the backend is still being built.

Think of it like a movie production: the director (frontend) cares about the visual style, while the scriptwriter (backend) writes the plot. Both are essential for a good film.

5. Real‑world example: a simple blog

  • Frontend: Shows a list of posts, lets you click to read, and displays a form to add a new post.
  • Backend: Stores posts in a database, validates the form data, and returns the list of posts as JSON.
  • API: /posts (GET) returns all posts; /posts (POST) creates a new one.

The user never sees the database or the server code—only the polished page and the smooth interactions.

What to try next

  1. Build a static page

    • Create an index.html with a headline, paragraph, and an image.
    • Style it with CSS to make it look good on both mobile and desktop.

  2. Add interactivity

    • Write a small JavaScript function that changes the background color when you click a button.

  3. Create a simple backend

    • Install Node.js and Express (npm init -y && npm install express).
    • Write a /hello endpoint that returns { message: "Hello, world!" }.
    • Use fetch('/hello') in your HTML to display the message on the page.

By building these tiny pieces, you’ll see firsthand how the frontend and backend work together to create a complete web experience. Happy coding!

FAQ

What technologies are commonly used on the frontend?

The article lists HTML for structure, CSS for styling, and JavaScript for behavior, along with frameworks like React or Vue if you want more power.

How does the backend expose data to the frontend?

It creates API endpoints that respond with JSON; the frontend fetches these endpoints using HTTP requests, such as fetch('/books').

Why is separating frontend and backend beneficial?

It allows specialization, independent scaling, better security by keeping sensitive data server-side, and enables parallel team work.

What is a simple example of a backend route?

An Express route like app.get('/books', (req, res) => res.json([{ title: '1984', author: 'Orwell' }])); returns a JSON array of books.