Client-Server Interaction

Overview


In the chapter client-server model and HTTP of server-side development, we presented the client-server model as the foundation of web applications. In the client-server model, the work is divided between servers and clients, where servers provide resources, while clients request resources. Typically, there are multiple clients interacting with a server, as shown in Figure 1.

Fig 1. -- Client-server model. The server provides resources and services to one or more clients.

Fig 1. — Client-server model. The server provides resources and services to one or more clients.

So far, in the course, we’ve looked at server-side development and client-side development separately. In this part, we look into integrating the two parts to create applications where the client interacts with the server.

The structure of this part is as follows:

  • Server-Side Application Programming Interfaces introduces the term application programming interface (API) and presents examples of server-side APIs.
  • Cross-Origin Resource Sharing (CORS) presents same-origin policy and cross-origin resource sharing, which both relate to how browsers are allowed to communicate with content outside of the main web application domain.
  • Fetch API and Client-Side Requests introduces the Fetch API which is used to programmatically interact with the server, and showcases a Svelte rune called $effect that can be used to call functionality on page load.
  • APIs and Error Handling presents a way to handle errors when interacting with APIs.
  • RESTful API Design discusses the term REST, outlines features of RESTful APIs, and discusses contemporary API design.
  • Sharing State and APIs shows how to share state between components when interacting with server-side APIs.
  • CRUD Pattern introduces the term CRUD, which is present in one way or another in many web applications.
  • Overarching project continues with the overarching project.

Finally, at the end of the part, there is a recap and feedback chapter that briefly summarizes the part and asks for feedback on the part.