1

So i am working on a IoT SaaS project in React. The user selects a sensor and a time range and receives data visualized in charts with a resolution about 5 minutes. My question is regarding best practices when handling fetching and saving of this data on the front-end. I have tried always fetching which works fine, but makes the system kind of slow. This is especially true while users are quickly switching back and forth between sensors. I have also tried saving the data, just as a json in the react state. This significantly increase performance, but has a lot of other problems. The browser starts complaining about ram uses and can sometimes get out of memory errors. There is also a lot of needed data handling as saving several non continuous data-ranges for the same sensor, locating and merging date-range overlaps etc...

So i am wondering what is the best practice here, should i always fetch or save on front-end? are there any frameworks i could use helping me with the data handling front-end or do i have to do this manually.

Håkon Halldal
  • 71
  • 2
  • 2
  • 5
  • hmm i dunno what best practice is for this case, but sounds wrong to me to constantly fetch data or save Data in Frontend...as you mentioned the Browser/PC will complain. Did you tried to stream the Data? Basically save everything backend wise and stream frontend-wise? – CrissCrossCrass Nov 11 '19 at 15:12

1 Answers1

2

Saving all data in front end is an antipattern. Because of memory and out-of-sync issues. To make your system work seemingly faster and use backend data you can try following:

  1. Optimistic response. This technique uses some simplified parts of backend logic in front end, while doing actual request. So user will see result before backend data reaches browser. Lets say you are doing +1 operation on backend. User sends number 2 to perform this operation. So in your front end you can use something const optimisticResponse = (userData) => userData + 1. And then when you get data from backend you can overwrite value, of needed
  2. GraphQL allows you reduce overhead by asking backend only for data you need.
Dima Vishnyakov
  • 1,361
  • 10
  • 21