2

It's about trying to understand the architecture behind how updates to web application is done.

I've been working on a non-public website that has bunch of records displayed in a UI, now the intelligent part of this application is that if I delete something in the database through API's without touching any button within the UI, the UI automatically takes it off the list.

If there's an upload of a file in progress, I see progress bar with percentage, any changes in the metadata behind the scenes I see it reflected immediately, it's like it's fully wired with the changes one the backend database.

We have something similar in our mail applications too, for instance gmail, if a mail arrives, automatically a record gets added without the refresh.

The question, how the UI knows that something changed in the backend, are there any connected sockets sending data back and forth, or are there continuous ajax calls (doesn't seem efficient).

Basically the gist is, how the UI synchronizes itself with the changes on the backend.

0
1

"if I delete something in the database through API's without touching any button within the UI, the UI automatically takes it off the list" - the browser page is polling the server regularly and downloading the state of the database.

Yes, it's AJAX, as you thought. Efficient or not, that's the only way to do it, as not all browsers currently support pushing data form the server.

(if you code both client & server & can enforce usage of a particular browser, for instance in a work environment, then you could user server push)

8
  • 1
    Thanks for your response. Yes I control both client and server end, please enlighten more on server push and web sockets. but one fact remains the same whether Ajax or web sockets both have to continuously pool the database, I was wondering if there's an event based architecture like any changes to the database is propagated to the socket at the server and from there it's pushed down. Please enlighten me more. – App2015 Mar 14 '18 at 8:03
  • 1
    here's the interesting part, I went back to this 3rd party website and under developer tools -> network, I don't see any firing of the Ajax calls and worst there's no socket connection there either, that's what's confusing me like how they did it – App2015 Mar 14 '18 at 8:05
  • 1
    " I control both client and server end" - but can you enforce the use of only one browser? if users can choose, then you can't user server push (tehre's a great deal of info, tutorials, etc. if you Google for that phrase). Browser support is much better than the last time I checked. See caniuse.com/#search=server-sent%20events – Mawg says reinstate Monica Mar 14 '18 at 8:14
  • 1
    that will also work, so long as the server sends the timestamp to the client with the data. Or Google for either checksum or CRC - that is a little more effort, but guarantees your data won't be sent twice if unchanged, even if the clock is wrong somehow. But we are drifting into a second question here :-) – Mawg says reinstate Monica Mar 14 '18 at 8:49
  • 1
    I monitored the activity via Charles proxy and noticed calls to https://www.pubnub.com, a GET request would be made and and the status is simply "Waiting for response" for unlimited amount of time until I add something via api and then immediately a response comes back for this long running GET request with the entity name followed by browser calling metadata and adding element to the DOM, what would you call this technique and is there a reference doc to it? – App2015 Mar 20 '18 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.