Web Fundamentals: How Frontend Talks to Backend

Site Admin · 11 Sep 2026 · 8 views

Applications Split into Frontend and Backend

A modern web app is really two programs. The backend owns data and business rules and exposes an API, a set of endpoints that external programs can call. The frontend lives in the browser, renders the interface, and talks to that API. Their shared language is usually JSON.

JSON in Five Minutes

JSON, JavaScript Object Notation, is a lightweight text format for data. An object is a list of key and value pairs, and an array is a list of values. Keys must be in double quotes.

{
    "id": 101,
    "title": "First Post",
    "published": true,
    "tags": ["web", "api"]
}

The example is a post object with a numeric id, a string title, a boolean flag, and an array of tags. JSON values can nest objects inside objects as deeply as you need.

REST Endpoints

REST is a common API style where resources map to URLs and HTTP methods map to actions. A blog API might expose these endpoints:

GET /api/posts - list all posts.
GET /api/posts/101 - fetch one post.
POST /api/posts - create a post.
PUT /api/posts/101 - update a post.
DELETE /api/posts/101 - delete a post.

Fetching Data with fetch

The browser fetch function sends HTTP requests and returns a promise that resolves to the response. Here is a complete GET request that loads posts and prints their titles.

fetch("/api/posts")
    .then((response) => response.json())
    .then((posts) => {
        posts.forEach((post) => {
            console.log(post.title);
        });
    });

response.json() parses the JSON body into JavaScript objects. Sending data needs the second argument with method, headers, and a JSON string body.

fetch("/api/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title: "Draft", published: false })
});

JSON.stringify turns a JavaScript object into the JSON text format. Errors matter too: check response.ok before trusting the body, and wrap network work in try and catch blocks.