Forms and Client-Server Interaction

Overview

---

So far, in the course, we’ve looked at building client-side functionality and server-side functionality separately. While client-side functionality provides user interface and a rich user experience, the server-side functionality provides APIs and data storage.

In this part, we look into integrating the two parts to create applications where the client interacts with the server. We start by learning about HTML forms, which make it easier to collect user input. Then, we look into the Fetch API, which is a standard way to make HTTP requests using JavaScript, and discuss the same-origin policy and cross-origin resource sharing (CORS) and their implications. This is followed by constructing functionality to interact with server-side APIs, and integrating this with shared state. Finally, we look into error handling when interacting with APIs.

The structure of this part is as follows.

• HTML forms introduces HTML forms, which are a standard way to collect user input. This makes it easy to collect data with multiple input fields.
• Forms and form events shows how to handle form submission in Svelte.
• Fetch API and client-side requests introduces the Fetch API which is used to programmatically interact with APIs exposed by the server.
• Same-origin policy and cross-origin resource sharing presents same-origin policy and cross-origin resource sharing, which relate to how browsers communicate with content outside of the main web application domain.
• Mounting and effect rune discusses the steps that lead to a page being rendered in the browser, including component mounting. Then, it presents a Svelte rune called $effect that can be used to call functionality on component mount.
• Client-side API modules shows how to construct client-side API modules for interacting with a server-side API.
• State and client-side APIs shows how to share state between components when interacting with server-side APIs.
• Client-side API for hierarchical resources discusses APIs with hierarchical resources and shows how to construct a client-side API module for such APIs.
• APIs and error handling discusses possible API errors and shows how to handle errors when interacting with APIs.
• 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.