Firebase - does caching improve performance?

Question

I'm building a web application using Firebase that takes the same data and presents it in two different ways - in a list and as an markers on a google map.

Right now, in each view - map or list - I have code to query data from firebase, merge it together, and display it. Instead, I'm considering this plan: on startup, query the data, merge it, and save it all into an array that I pass from view to view.

In a sense, I am "caching" the firebase data in an array. This isn't ideal in one sense - cached data isn't as up-to-date as directly querying Firebase. On the other hand, I only call Firebase once.

Does this make performance sense? Does reading data from a Firebase take within the same order of magnitude time as reading data from an array?

Answer 1

In general, caching data to limit use of Firebase is unnecessary. Firebase maintains its own cache of "active" data on the client. "Active" is defined as data for which an "on" call is outstanding on it. Therefore for any active data, any additional "on" or "once" calls will require no network traffic as the data has already been loaded.

I'm not entirely sure what you mean by "querying firebase". Firebase does not have queries in the traditional sense. It simply has methods for attaching callbacks. Are you using the "once()" function to get data periodically from Firebase? If so this could potentially be very inefficient. Once is a convenience method and should generally only be used for data that is accessed extremely infrequently or that for some reason the developer does not want to update in real-time. If no active "on" calls are outstanding when the once() completes, Firebase will flush the cache of that data, and any subsequent calls to once() will require a roundtrip to the server.

If what you want is a way to synchronously access a local copy of the latest version of the data in an efficient way, I recommend this method:

var savedSnapshot = null;
dataRef.on("value", function(snapshot) {
  savedSnapshot = snapshot;
});

//and then when you need to read the data
var theData = savedSnapshot.val()

By maintaining one single on() call, Firebase is able to keep your data up-to-date by only sending deltas over the wire when things change, rather than reloading all of the data every time you need it.