API = Application Programming Interface
Definition: A set of rules or methods that allows two software programs to communicate.
Purpose: Let programs talk to each other without knowing the internal details.
Client web API
A Browser Web API is a set of features provided by the web browser that allows JavaScript to interact with the browser environment, the webpage, or the user’s device, beyond what core JavaScript can do. These APIs are built into the browser, so you don’t need to install anything to use them. They extend JavaScript’s capabilities, enabling tasks such as making HTTP requests (fetch()), storing data locally in the browser (localStorage or sessionStorage), manipulating HTML elements via the DOM (document.querySelector), running heavy tasks in background threads (Web Worker), showing desktop notifications (Notification), accessing the user’s location (Geolocation), or enabling real-time communication with the server (WebSocket). Browser Web APIs are primarily client-side, meaning they run in the user’s browser, and they are often used to interact with server-side Web APIs by sending requests and receiving responses. In essence, these APIs are the tools provided by the browser that empower JavaScript to do things it otherwise cannot, such as communicating with servers, storing data, or accessing device features, all while keeping the frontend responsive and interactive.
Server-side web API
A Server-Side Web API is an interface provided by a backend server that allows clients, such as web browsers, mobile apps, or other servers, to communicate with it. Its main purpose is to let clients read, create, update, or delete data stored on the server or in a database. Server-side Web APIs do not provide features to manipulate the client’s interface or access the user’s device; they are purely for communication and data handling. Clients interact with the API by sending HTTP requests—for example, GET to fetch data, POST to create new entries, PUT/PATCH to update existing data, and DELETE to remove data. The server processes these requests, performs necessary operations such as querying a database or executing logic, and responds with structured data, usually in JSON format. Examples include REST API endpoints like /api/contact for submitting a contact form, /api/products for retrieving product data, or public APIs like GitHub API or Stripe API.
Clear difference
Browser (Client-Side) Web APIs are features provided by the browser that let JavaScript interact with the browser environment, the webpage, and the user’s device. They include capabilities like making network requests (fetch()), accessing storage (localStorage), manipulating the DOM (document.querySelector), running background tasks (Web Worker), showing notifications, and accessing device features like geolocation. Besides these capabilities, browser Web APIs also provide the interface for communicating with servers, allowing the frontend to send requests to server-side Web APIs and receive responses.
On the other hand, Server-Side Web APIs do not provide extra features for the client like manipulating the UI or accessing the device. Their purpose is purely to serve as an interface for clients to interact with the server—to read, create, update, or delete data on the server or database. They handle requests coming from clients, process them (e.g., query a database), and send back responses, usually in JSON format. Server-side Web APIs are all about communication and data handling, not providing browser or device-specific capabilities.
Top comments (0)