Overview
So far in the course, we have emphasized the client-server model, where a server provides resources that the clients can interact with. The client-server model is the foundation of web applications. Web applications can also have servers that interact with each other. That is, server can also act as a client, asking for resources from another server. This is the case, for example, when using a database: the server that offers an API for clients typically queries the database, which is on a separate server that needs to be connected to.
There is also another server that is less often discussed and that we have not explicitly highlighted so far: the server that serves the client-side functionality.
Often, the client-side functionality is served from a separate server that can render parts of the user interface on the server, which is then sent to the client. This server is separate from the server that provides data over APIs. The separation into multiple servers is shown in Figure 1.
Figure 1 shows a scenario where one server is responsible for providing the client-side application, while another is responsible for providing APIs. The server responsible for providing the APIs interacts with a database server to retrieve data. In such a case, clients can interact with two different servers: (1) the server for the client-side application, and (2) the server for the APIs. As also shown in Figure 1, it can be the case that not all clients interact with the server responsible for the APIs, solely retrieving the application but not interacting with the APIs.
In this part, our focus is more on the server responsible for the client-side application. We look into creating pages and layouts, looking also into how the pages come into “life” in browsers. The server responsible for creating client-side functionality is especially present when looking into dynamically creating pages. We also look into styling of applications, starting with cascading style sheets, and then moving into styling frameworks and libraries.
The structure of this part is as follows:
- Pages, Navigation, and Layouts shows how to create and navigate between pages. As pages often have common functionality such as links, we also look into extracting common functionality into layouts.
- Rendering and Hydration discusses options for where the content of the pages is created, and outlines how pages turn interactive in the browser.
- Routing and Dynamic Pages introduces file-based routing, which is used by SvelteKit, and demonstrates creating dynamic pages with “path variables” in the client-side application.
- Cascading Style Sheets (CSS) discusses the very basics of styling web applications and shows how to target specific elements for styling.
- Tailwind CSS and Skeleton introduces a framework and a library for styling web applications and shows how they are added to a SvelteKit client-side application.
- Common Layout Structure outlines a common layout structure and shows how to add basic styles to a layout with a header, a main part, and a footer.
- Styling an Application continues with the theme of styling, showcasing adding styles to a simple todo application.
- 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.