The Web is the Platform: File System Edition

I've been spending too much time lately thinking about file systems.  What started it was a casual conversation I had with Alan about work he was doing to implement a node.js style POSIX file system in JS on top of IndexedDB.  At the same time I was writing about an idea I had to create a new Webmaker tool called Nimble.  The basic idea behind Nimble is to integrate Adobe's Brackets editor with Webmaker and replace Thimble.

I knew that one of the things holding Brackets back from working in the browser was the file system, so I decided to try hacking IDBFS into Brackets, and get it running in both WebKit and Gecko.  I'll skip to the end of the story and show you a demo of it working in Chrome and Firefox.  You can see the contents of my db in Chrome's resource inspector:

The timing of this work was perfect because Adobe literally landed code to change their File System API the same week.  Previously Brackets assumed it was talking to the OS file system via the CEF Shell.  With the new API, I was able to swap in my own implementation, and use IDBFS to handle all the various operations.  Alan and I worked to add the missing methods that Brackets needed, and now it "Just Works."

My browser-fs branch of Brackets has more details, but the majority of the code related to the file system is in src/filesystem/impls/browser/BrowserFileSystem.js.  There's still more work to do, for example, adding UI for the File Open and Save As dialogs in HTML, but this is going to work.  Adobe also have another branch underway to refactor other parts of the code that assume a native appshell vs. a browser, so I'm hopeful about getting something like Nimble to work.

Back to IDBFS...doing the patches in Alan's code to add operations I needed gave me time to think.  Now that I had a node.js like file system, what else could I do?  The amount of fs code already written in node.js means that we're going to have a lot of libraries and other tools we can port to the browser pretty quickly.  Another project I've been following with interest is js-git.  The way Tim's done the API there, you can easily swap in different backends for git storage.  So I've started in on one for IDBFS + js-git.

Also while I was doing the Brackets work I noticed code Adobe has started for DropBox support.  It made me think about the kinds of things that having a file system in your browser would let you do.  Imagine going to a web page and being able to clone a repo, edit your work, push up changes, share/sync things with other cloud drives, etc, and all without installing anything.  Imagine if Mozilla's sync stuff could be taught to sync indexeddb databases you have (maybe it already can, I don't know), and now you can do rsync between browsers/devices.

One of the things I am hoping to do in the coming weeks is add other storage backends to IDBFS.  IndexedDB is cool, but limited in where it's supported.  If we add support for WebSQL and LocalStorage we hit many more browsers (obviously at a cost of storage space, but still...), we can s/IDBFS/WebFS/ and make this generally useful cross-browser.

If you're interested in file systems and want to help with this effort, please get in touch.  I'm hoping to have Alan speak to my class next week so we can make some plans about how to push on this work.

Show Comments