Ways of Talking to a Backend: From HTML Forms to GraphQL

The frontend and the backend communicate through several layers of abstraction that are easy to confuse with one another.

fetch() is not REST. REST is not HTTP. GraphQL does not replace the transport. RPC does not mean one particular network protocol.

This series sorts those concepts out from the bottom up.

We start with the oldest and still fundamental model of the web: the HTML form, where the HTTP request is part of document navigation. Then we move on to AJAX and XMLHttpRequest, which for the first time separated backend communication from reloading the page.

Next comes fetch(), the modern browser API for performing requests, and only then do we move a level up: to the ways of designing the API itself.

HTML Form
   |
   v
XMLHttpRequest
   |
   v
Fetch API
   |
   v
HTTP
   |
   v
REST / RPC / GraphQL

Each of those layers answers a different question.

HTML Form / XHR / Fetch
-> how does the browser start a request?

HTTP
-> how are the request and the response transferred?

REST / RPC / GraphQL
-> how does the application model operations and data?

The series is not a catalogue of libraries or a framework tutorial. It does not matter whether the request is made by React Query, Axios, Angular HttpClient or a wrapper of your own.

What matters is the mechanism underneath:

• what the browser actually sends,
• who defines the semantics of the request,
• where the responsibility of HTTP ends,
• what makes a resource different from an operation,
• when API flexibility helps and when it raises the cost of the system.

Every article follows from the limitations of the previous one.

A form is simple, but a request means navigation. AJAX separates those two mechanisms. fetch() cleans up the browser API, yet still says nothing about how to design endpoints. REST models resources, RPC models operations, and GraphQL moves part of the control over the shape of the response to the client.

By the end we should have one coherent model:

browser API
!=
transport protocol
!=
API architecture

Only once those layers are separated can we sensibly talk about how the frontend communicates with the backend.