Back in 2011 TFL made available, realtime arrival data for London's 19,000 bus stops. At the time this was only displayed on their non-mobile site. Mostly out of a desire to have this information whilst out and about, I decided to have a go at making an HTML5 Mobile app to display it more conveniently.
First bash
The first version of this app appropriated the JSON feed used by the map on the TFL website. I built the interface with the Google Maps API and jQuery Mobile, and made use of some HTML5 browser features such as geolocation, localstorage and AppCache. To speed things up a bit, I cached the location data in MongoDB, and used a simple Python server to serve JSON to the front-end.
Rebuild
The TFL arrival API was made public a few months later, so there was no longer a need to proxy requests, or cache bus stop locations.
The performance of jQuery mobile felt pretty jankey, so I rebuilt the app, leveraging CSS animations effects to give it a smoother, more ‘appy’ feel. The transitions were assisted by the great work on hackerweb done by Cheeaun.
As well as improving display performance, the rebuild uses BackboneJS, and its MVC architecture, to manage the data and views.
