currently i have a requirement to manage the web application's data that follows certain hierarchy using a react app,every time data is submitted it needs to show the latest data on the page .I thought of saving the submitted form data locally in the react app and add it to page every time I make POST request.if i do that,app may not reflect the exact data if multiple persons are simultaneously adding since they will only see what the have added each till they do complete page refresh.I am just wondering what should be good strategy while making react apps to always show the latest data as of server?
(1)do I need to use timers to do GET requests to pull the latest data from server?
(2) or do I need to re issue relevant GET requests whose response may likely to change after every PUT,DELETE,POST request i do?
Related
I'm using Firebase to allow users to save certain information about their logged-in profiles. In total I have 4 different collections, and all of which contain UID-matching documents.
When my site loads up, I need to immediately access data from all 4 collections for a given user's UID. This means that right now, whenever a user reloads my application they generate 4 get requests. However users of my application tend to not change their stored information very often (perhaps once every 20 or so times they load the application), so there's really no need for this data to be re-requested every time.
I've already taken steps to cache all of this data within the user's browser local storage, but here is where my problem lays: how can I know when the data I have cached is out of date?
In the past I've created similar cache mechanisms which ultimately rely on a 'version' flag. Both the data source and the user's local storage contain a 'version'. When both match, the application knows that it has the latest data, however when they are out of sync, the application knows it needs to re-request the data. The 'version' flag on the data source is ultimately changed every time an update occurs which impacts the user in question.
Ideally I want to end up with this flow:
User loads application.
Application compares local data version with version contained in Firebase.
If versions match, use local data.
If versions do not match, request all data.
Is it possible to do something like this with Firebase? Right now I can't see this possible without having to generate an extra set call every time the user's data is modified to change this version flag.
If this isn't possible, how can I know when a user's data needs updating without using up multiple requests?
If it helps, I'm using Firestore and this is a web application with no backend.
Intro:
I've got a complex and long lasting query on the back-end, feeding back the angular app on the front-end.
Currently the angular app uses the cached data on the back-end rather than reading directly from the complex query, which would take few minutes. The cache gets warm every morning and every night.
As users make changes to the UI, and save the data, which is then passed onto the server side, and saved to database. At that time the UI is up to date until the user refreshes the page. At the same time database is up to date, but the cache is stale.
So when the user refreshes the page the stale cache values are displayed on the page.
More info:
I'm now thinking of ways to refresh the cache, and any advice from more experienced folks would be most welcome.
My idea is to refresh the cache by a cache job (one at a time), which is queued as soon as user saves something. The job will have the relevant info what changed, and the whole cache won't have to be recalculated but rather just the bit which changed.
Question part:
What technique can I use to keep the user up to date with the data even if the user refreshes the page? Should I save the 'deltas', on the client side in a form of indexedDB or localstorage, at the same when the data is sent to server. So when the page refreshes the user reads the data from the localstorage or indexed db.
I'm still thinking this through, obviously I don't have much experience in this, any comments on the directions I've taken so far?
Basically I can change anything including back-end/front-end/caching it's still in the POC phase, I'm just trying to be as informed as possible to what worked for other people.
Update
Little more background. I'm working on a index like page, so there are more than one records that can be edited inline.
Also I'm doing some transformation of the flat db records on the back-end, before dumping them into the map like structure, and passing it to the front-end in a form of json.
I would think the simplest way would be to make sure you know the time the cache was created. When you make changes, save the current state of the page in localStorage, along with the time of the cache. When you load the page, you get the cached data, check it's time to see if it is more recent than your localStorage version. If it is, use the cache, if not, reload your data from localStorage since it has the cached data PLUS your changes already.
Your question is too long, let me summarize the facts.
You have a lot of information in the database
Direct search query takes several minutes
To provide fast search, you use cache which is updated two times a day
When user changes the data, database is updated and cache is not, so web page shows outdated information from cache.
This looks like a typical cache using scenario and the solution is obvious: you should update the cache with deltas as soon as database is changed. The real implementation will depend on your application architecture and cache structure.
The typical workflow for your problem would be:
def updateRequest(Request req) {
def tx = db.startTransaction();
tx.execute(createUpdate(req.getData()));
tx.commit(); // if transaction fails, cache is not updated
cache.update(req.getData()); // can be done in background, if you return delta
}
It seems that you are storing your data in tables and you use those tables with a complex query to build a JSON configuration to render your index.html file. I avoided this problem by avoiding tables and using a NoSQL solution. I build the JSON configuration object on the client side and store that JSON configuration object in a NoSQL collection. I do a simple query using the URL to grab the JSON configuration object and render the index.html file.
I have a little experience storing the JSON configuration object with AWS DynamoDB, and if I need to get faster I will probably switch to AWS ElastiCache.
The key is that you need to cache your JSON configuration object with a useful key like the site hostname or some other base URL and use that as your source of truth for index.html rendering.
I'm controlling a d3JS interface from another platform. The workflow: Data->Python to create JSON->d3JS to generate graphic->load the html page locally in a browser.
Is anyone aware of a way within this workflow to force a page reload when the JSON data is updated?
This is essentially a problem of how to push updates from the server to the client.
There are two approaches:
Fake it. You could use AJAX polling to periodically ask the server whether new data is available.
Do it for real. You could use WebSockets to push the data from the server to the client when an update occurs.
With the new data in hand, it should be simple to bind in D3 via the General Update Pattern. See http://bl.ocks.org/mbostock/3808218
If you must reload the page, you can also use either of these approaches to trigger it.
In the application I am writing, a user captures information about a person via an online form. When they have completed the form they save their work, repeating this process several times in a session. When they hit 'Save and End Session' they are returned a list of the several person instances they have just saved, all data being saved to a server.
I wish to replicate this functionality in an offline app. Using HTML5 I understand how to cache pages, and how store the JSON form data in localStorage using raw Javascript (or perhaps Angular.js cache).
But is it possible to dynamically update cached webpages with cached data while offline? how, for example, can I write the the cached form data to a cached copy of the list page, updating that page with the data just produced, all during the offline session?
I cannot find an answer to this one. All suggestions are much appreciated!
If I understood this correctly, you want to dynamically update the html view while offline.
If you are using Angular, this is pretty simple.
You just have to cache also the JS controller, not only the html file (set it in the cache.manifest). The page will have the same functionality as the online app then. But if you want to send the stored offline data back to the server when offline, you can write a simple code that will:
Save the parameter in localStorage, which will mark if the data was saved while running online/offline app (you can recognize onine/offline by sending AJAX request to an existing part of the app, which is not available offline (so not cached one))
When app runs then in online mode, it will collect all the data stored offline and send it to the server
I'm trying to build a single page web app using Backbone. the app looks and behaves like a mobile app running on a tablet.
The web app is built to help event organizers manage their lists of people attending their events, and this includes the ability to search and filter those lists of attendees.
I load all attendees list when the user opens the attendees screen. and whenever the user starts to search or filter the attendees, the operation happens on the client side.
This way always works perfectly when the event has about ~400 attendees or less, but when the number of attendees gets bigger than that (~1000), the initial download time takes longer (makes sense) .. but after all data is loaded, searching and filtering is still fast relatively.
I originally decided to go with the option of fully loading all the data each time the app is loaded; to do all search operations on the client side and save my servers the headache and make search results show up faster to the user.
I don't know if this is the best way to build a web/mobile app that processes a lot data or not.
I wish there's a known pattern for dealing with these kinds of apps.
In my opinion your approach to process the data on the client side makes sense.
But what do you mean with "fully loading all the data each time the app is loaded"?
You could load the data only once at the beginning and then work with this data throughout the app lifecycle without reloading this data every time.
What you also could do is store the data which you have initially fetched to HTML5 localstorage. Then you only have to refetch the data from the server if something changed. This should reduce your startup time.