CODEWITHSUNDEEP
javascriptjavaangularjscaching
Gandalf StormCrow
Gandalf StormCrow

Reputation: 26212

Cache invalidation and synchronisation Angular/back-end

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.

Upvotes: 8

Views: 1166

Answers (3)

Gavin Palmer
Gavin Palmer

Reputation: 1220

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.

Upvotes: 0

AdamSkywalker
AdamSkywalker

Reputation: 11619

Your question is too long, let me summarize the facts.

  1. You have a lot of information in the database
  2. Direct search query takes several minutes
  3. To provide fast search, you use cache which is updated two times a day
  4. 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 
}

Upvotes: 2

dave
dave

Reputation: 64695

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.

Upvotes: 3

Related Questions