📀 Large Local Storage

Published 2022-05-13

Way way back in 2013 there wasn't a common way to save large blobs in all browser. Back then, all of these were true:

At that time I was also writing strut.io as a side project.

strut.io was & is a completely local-first presentation editor hosted in the browser. Given it was local-first I needed a way to save large blobs and given Chromium based browsers had not yet come to dominate the entire browser market, I needed it to work across all browsers.

Enter Large Local Storage -- my solution to this problem of yester years.

Learnings

LargeLocalStorage (LLS) is certainly no longer needed given IndexedDB and the FilesytemAPI now have reasonable support in all browsers. There's even a new "storage foundation" layer coming for better access to storage from the web. In any case, I think its valuable to keep around as a record of

Architecture

LLS proivded a unified interface for:

It leveraged a pipeline architecture to enable adding plugins such as caching, logging, s3 uploads, and so on.

In other words, I could instantiate a LargeLocalStorage instance in my app and then later, as my requirements changed, plug in a caching layer, persistence layer, image optimization layer and on and on.

In code this looked like:

const storage = new lls({name: 'strut-db', size: 10 * 1024 * 1024});
Cache.addTo(storage);
S3Persist.addTo(storage);
Logger.addTo(storage);
ImageOptimizer.addTo(storage);
BlobDeDuplication.addTo(storage);
... etc

If I rebuilt this today, I probably would have gone for a slightly more ergonomic API and one that doesn't mutate the original instance.

E.g.,

const storage = new lls({name: 'strut-db', size: 10 * 1024 * 1024})
  .use(LRUCache)
  .use(S3Persist)
  .use(Logger)
  .use(ImageOptimzer)
  .use(BlobDeDuplication);

Build

Building is quite funny. It literally just concatenated JS files together. So simple 🤣 so naive?

https://github.com/tantaman/LargeLocalStorage/blob/master/Gruntfile.js#L12-L22

Cosmetics

I'm highly impressed by the super clean document generation

They're generated via yuidoc which apparently never gained much traction and was abandoned in 2017. It'd be interesting to know why yuidoc got so little traction.

docs

the notion of having the test suite for a project clickable and executable in a browser!!

And a super simple demo app