Monday, 9 September 2013

Recreating Google Docs automatic "Saving..." status display

Developing a new Warcraft guild website gave me a handful of good opportunities to construct and recreate/imitate some edge features used in modern apps today. One of them is a "Saving" status display when you are editing a Google document. So here are the steps I wanted to mirror in my own app:

  1. when the app is constantly saving what the user inputs
  2. when it is just done saving every piece of data
  3. when some time passed and it wants to inform the user about real time status information

These are the steps for the frontend side. On the server side, well just look at this network traffic below, this absolutely has to be custom tailored to everyones infrastructure

Let's look at my original code that was born to recreate this action


The above code looks like this in the browser (sorry, it's the Hungarian version)


Now let me sum up the crucial points in the above code. Javascript is good in using callbacks, async calls. This behaviour could lead to tricky "bugs" or some hours of search on Google. When using setTimeout() with AJAX hand-in-hand then we have to think about AJAX's async nature, where calls are not finished one-by-one in a numbered row. They will finish independently on different timeframes, some fired later but finishes earlier. To overcome this I use an array to store the timeout ids and clear all of them out when the user sends more input. Now there will be no race to clear all living timeouts in time :)

I hope this little code gives some of you more ideas. Please bare with this code as it is premature and not yet ready for production (I believe).