Writing a selfhosted software

I wouldn’t have started working on Filestash if the selfhosted ecosystem had the tools I wanted and what I wanted was a selfhosted fast alternative to Dropbox. The objective was always and still is to make the fastest file browser there is and I’ve been working on that for quite some time already.

This post will be part of a serie that explore the many facets of making things fast and in this first episode we will explore one aspect of it: getting rid of loading spinner or how to make navigation on Dropbox feel faster than on dropbox.com itself?

You might think this is a fool errand but stay with me, when you navigate on any browser based file browser including Dropbox, you end up asking a server for a list of files/folder in a particular location and while the server is busy computing stuff you are shown a loading spinner.

This is a perfectly fine approach until you start jumping back and forth between folders you’ve already visited and still get to see this terrible spinner in folders you already know the content of …

Why couldn’t we get rid of the spinner when we already know the content of those folders you’ve already visited? How hard would it be to cache the content of a folder somewhere in your browser and get rid of that spinner?

Well this is the trick we’ve been using ever since the beginning to make it feel faster to navigate around than any other browser based file browser there is. Under the hood it works like this:

BrowserBrowserServerServerStorageStoragelist files & folders under "/home/"hey indexedDB, do you know about "/home/"?yes I do, here is the list of files & folders for "/home/"cool I will display that for now instead of showing a spinnerLIST /home/here is the files & folders under "/home/"update the screen with the latest files/foldersupdate the indexedDB cache with the latest files & folders

But this wasn’t a simple thing to do, in fact it was one of those big technical decision that was taken early on and we had to make a ton of code to nicely handle all the edge cases to get things behaving properly when you move files/folder around, try to upload some stuff, …

Some other things I think I got right is to stay away from any synchronous browser storage like localstorage which most people prefer because it’s easy to use but have the major drawback of locking the main thread which as a result can easily degrade the performance.

If you ever need to go through something similar in your app, beware of the dragons. For some reasons Firefox doesn’t allow application to store anything in indexedDB when using incognito mode, hence why we had to create another implementation that does the same thing than indexedDB but in memory, effectively resetting the cache when you refresh the page.

This is the end of the first episode, the next ones should be about: