Getting the right data in the correct format at the right time is crucial to making your UI living and dynamic. Data is what fuels your apps, tools and even regular websites. Visualizing your data in an orderly fashion helps your user to better understand or even filter your content.
This guide is a work in progress. Hopefully you still find something useful today.
This guide will help you to decide:
- When is the best time is to load the data?
- Which method to prefer depending on the situation?
- Where do you get the data from in the first place?
These are the questions to answering the above questions:
- What is the refresh-rate of the data?
- What is the preferred method to fetch
What is the refresh-rate of the data?
Most of the time, you will find yourself dealing with dynamic data. Which means that the dataset you fetch today, could be different tomorrow. This is most commonly true for results from a database.
If the data changes so frequently, that you need live updates, you should consider websockets. With sockets, you can push the data from the server to the browser. Live updates on the client are not always necessary though, it depends on the kind of data you want to display. It might not be the most user friendly, to make products pop up in the middle of a list, just as they were added to the catalog.
If websockets are not possible, you maybe need to cope with a pull strategy. So you have to look up the data every once in a while.
If you know, that the data will never ever change, you could maybe load it with the web app already. For example:
- list of pages
Then you should store the data as
.json file and bundle it with your application.
This requires a build step.
import json from './products.json' // render
When do you need the data?
Data does not necessarily need to be there on pageload, Finding out when you need your data is crucial to deciding
As soon as possible
On user interaction
Scrolling, form submission like filtering or pagination
A stream of data
How do you charter unknown server territory?
If only you would know what to do next, you wouldn't have to get stuck in connecting your data with your website or app.
Get free advice on delivered to your inbox.