Client-Server Interaction

CRUD Pattern

---

The acronym CRUD refers to create, read, update, and delete, which are four often used basic operations for managing data. The operations are present in most web applications in one form or another, often in multiple locations. As an example, a blog application could consist of the following four main operations:

• Adding a new blog post (create)
• Viewing a list of blog posts (read)
• Editing an existing blog post (update)
• Removing an existing blog post (delete)

Similarly, a book application could consist of the following four main operations:

• Adding a new book item (create)
• Viewing a list of book items (read)
• Editing an existing book item (update)
• Removing an existing book item (delete)

And so on. The pattern is often present in both the server-side and client-side of the application. As an example, on the server-side, the operations — for a book management application — could be implemented through the following routes:

app.post("/books", (c) => {
  // Create a new book item
});

app.get("/books", (c) => {
  // Retrieve all book items
});

app.put("/books/:id", (c) => {
  // Update a book item with the given id
});

app.delete("/books/:id", (c) => {
  // Delete a book item with the given id
});

On the client-side, the operations would be implemented using fetch, where the high-level idea would be as follows.

const createBook = async (book) => {
  // POST to /books
};

const getBooks = async () => {
  // GET to /books
};

const updateBook = async (id, book) => {
  // PUT to /books/:id using the id and
  // book given to the function
};

const deleteBook = async (id) => {
  // DELETE /books/:id using the id
  // given to the function
};

In the above, each route is paired with a specific CRUD operation, making the server-side API easier to interpret. Similarly, the client-side functionality that would be used to interact with the server-side API would follow a similar structure, mapping functions to the routes.

We’ll visit the CRUD pattern again later on in the course. However, it is already good to be aware of it.