7

I'm facing a really huge issue (at least for me). I'll give you some background.

I'm developing a mobile web app which will show information about bus stations and bike stations in my city. It will show GMap markers for both bus and bike stops and, if you click it, you will have info about the arrival time for the bus or how many bikes are available. I have that covered pretty nicely.

The problematic part is loading the stations.

My first approach was to load the whole amount of stations at page loading. It is about 200 Kb of JSON plus the time it gets to iterate through the array and put it in the map. They are hiddenly loaded so, when the users click on the line name, they appear using the 'findMarker' function. If other stations were present at the map, they get hidden to avoid having too many markers in the map.

This worked good with new mobiles such as iPhone 4 or brand new HTC but it doesn't perform good with 2 years old mobiles.

The second approach I thought, was to load them by request, so you click on the station, they are loaded to the map, and then shown but this leads to two problems:

  • The first is that you may be (or may be not) perform several requests which may ends the same (?)
  • The second one is that to avoid having so many markers, they should be hidden or deleted so you may be deleting info that should be needed again in a while, like bike stations that are loaded as a group and not by line.

Finally, I thought about using LocalStorage to store them, as they won't change that much but will be a huge amount of data and then, a pain in the ass to retrieve them as they are key-value, and also (and I'm not really sure about that) I could find devices with no support of this feature having to fallback to one of the other options.

So, that said, I thought that may be someone faced some similar problem and solved it in some way or have some tips for me :).

Any help would be really appreciated.

Antonio Laguna
  • 8,973
  • 7
  • 36
  • 72
  • I think for a webapp it's all about speed and performance, so caching any static data before hand (during a loading splash screen or something) IMHO is the way to go. This would also be optinal for offline usage or when the connection is bad. The initial load might take a little longer but I think the webapp would be snappier. – Phill Pafford Nov 11 '11 at 05:08
  • Thanks for your comment Phill. This thought is the one that lead to more confussion. Won't be more cpu consuming searching and adding from local storage than retrieving and adding from server? – Antonio Laguna Nov 11 '11 at 07:33
  • Reading from Local storage will almost certainly be quicker than making an HTTP request, reading the response and parsing the JSON data. However, I think by using browser caching you can avoid using Local storage, see my answer below. – StefanOS Nov 11 '11 at 13:06

1 Answers1

5

The best approach depends on the behaviour of your users. Do they typically click on a lot of stations or just a few? Do they prefer a faster startup (on-demand loading) or a more responsive station detail display (pre-loading data)?

An approach worth investigating would be to load the data by request but employ browser caching (ETag and Expires headers) to avoid retrieving the same information over and over again. This would solve both your concerns without dealing with LocalStorage.

See this this question for different approaches for browser caching ETag vs Header Expires

Community
  • 1
  • 1
StefanOS
  • 2,718
  • 2
  • 25
  • 27
  • Really thanks for your reply StefanO. Your point seems to be a really good starting point. Though I've found that jQuery have the ifModified property in Ajax calls to check both ETag and Expires headers, I can't find any reliable source to implement these into a json response by PHP. Do you have any information about thas? – Antonio Laguna Nov 11 '11 at 14:05
  • I'm no PHP expert so I don't know about any framework features which would help automate this. But these are standard HTTP headers so you could set them like this: header('Expires: Fri, 11 Nov 2011 15:00:00 GMT'); header('ETag: "686897696a7c876b7e"'); – StefanOS Nov 11 '11 at 14:25
  • Also, web servers like Apache and nginx can be configured to set the caching headers automatically (e.g. cache all pages for 24 hours). You only need to concern your code with this if you require greater control over the caching. – StefanOS Nov 11 '11 at 14:27
  • It tooks some time to implement but finally I did what you suggested and it's working pretty fine. Load avarege has been decreased dramatically since JSON is beeing cached and it's time decreased from 400 Ms to 1 Ms on each one. – Antonio Laguna Nov 30 '11 at 09:39