Practical Tips for implementing Typeahead

Typeahead is an often overlooked feature but a major experience improvement for users. It is the feature that pops-up a window to offer autocompletion when you’re typing in the app. In the case of Twitter, it is used to auto-complete @username, #hashtag and some trending topics.

Data Sources

A remote backend is usually used to implement Typeahead because the Twitter servers would have access to all your Twitter following/follower graph at a much faster speed. However, that means for every character you typed, we need to send off a query to our API servers. Although the response usually came in fast and concise, this might still falls apart when the user is in a spotty network coverage area.

To overcome the potential network problem, we have implemented a feature called prefetch. The idea of prefetch is to pre-load 200 users that is closest to you in your social graph, so we can provide relevant results in an instant even if you are offline.

Caching the prefetch

If the prefetch data is not cached for a period of time, it will become a burden on our users since they will have to fetch the whole data set everytime they refresh the page. Given the prefetch data is around [INSERT NUMBER HERE] KB, it is not acceptable for an application optimizing for data usage. The first approach we have tried is just to simply persist it in the redux by serializing it into IndexDB or LocalStorage depending on the availability. However, our JavaScript errors spiked. It turns out