12 Working with data
This chapter covers
- Fetching, sending, and streaming data over HTTP.
- Modeling the request lifecycle as explicit UI states.
- Caching and persisting data on the client.
- Selecting the right data storage API.
In the previous chapters, we covered how to work with the user interface and the DOM, create web components, and implement navigation and routing. Now it is time to work with data. Frameworks typically package several data-related concerns into a single experience: loading remote data, keeping the UI synchronized with state, validating input, and persisting data locally. In Vanilla Web, the same concerns remain, but you assemble the solution from smaller browser primitives.
This chapter focuses on the first half of that story: how data reaches your app and where it lives once it arrives. We will fetch and stream data over HTTP, open real-time channels via WebSockets, model the request lifecycle as explicit UI states, and cache and persist data on the client. The next chapter takes the other half, turning that data into a reactive user interface through dynamic data binding.
12.1 Working with HTTP
The Fetch API is the default way to talk to HTTP services in modern web apps. It gives you a Promise-based interface around requests and responses, works with streams, and composes well with service workers and caching. Fetch models the request and the response as first-class objects.