Overview
So far, we have learned the very basics of building server-side web functionality, including returning responses to requests, and creating routes that map paths and methods to functions. The applications have not had a user interface as the responses have been primarily in text format. Despite this, we’ve built a solid foundation, as server-side logic is the backbone of web applications.
Client-side development focuses on building the user interface and the interactivity of web applications. Contemporary client-side development leverages libraries and frameworks for the task, allowing the creation of the user interface from components, and making state management easier.
In this part, we take the first steps in building client-side functionality. We start by looking into the basics of Hypertext Markup Language (HTML), which is the standard markup language for documents designed to be displayed in a web browser. We then start with creating interactive experiences by introducing Svelte, learning how to create components, manage state, and overall how to create interactive client-side applications.
Svelte is a component-based framework, where the application is built from components. A component is a self-contained piece of code that can be reused in different parts of the application.
The structure of this part is as follows:
- Brief introduction to HyperText Markup Language outlines the basics of HTML needed to understand client-side development with Svelte.
- Svelte components outlines how to create Svelte components and how to add them to an application.
- Template logic describes how logic can be added to Svelte components.
- Reactivity, state, and events introduces a key concept in Svelte called reactivity, which allows updating the shown content whenever the application state changes. In addition, the chapter briefly discusses handling events.
- Input bindings and form events shows how variables can be bound to input elements, and outlines how to work with forms with Svelte.
- Nesting components and passing properties shows how to decompose a component into smaller components and how to pass data between components through properties.
- Sharing state between components shows how to separate state from components and how to share state between components. In addition, the chapter shows how to store state in local storage.
- Deploying client-side applications briefly demonstrates how a client-side application can be deployed to a server.
- Overarching project continues with the overarching project, describing the next steps to take to create client-side functionality for the 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.