Look into using RxDB for client-side cache

[rglover]

This has been on my mind a lot. I want to make it easy to have a super-reactive UI that's not dependent on the DB.

The goal would be to make it so that you could write data to local storage, but, have a hook function that allows you to call to a setter on the back-end to actually commit data to the DB. So, the UX is super fast, but you also get persistence behind the scenes.

Couple this with using Joystick's existing cache layer on the server and it should make for a really smooth, fast UX (and not terribly complex code to achieve it).

What I'd imagine:

import joystick, { local_storage, set } from '@joystick.js/ui-canary';

const PostEditor = joystick.component({
  data: async (api = {}, req = {}, input = {}, instance = {}) => {
    return {
      posts: await api.local_storage('posts').find(),
    };
  },
  events: {
    'submit form': (event = {}, instance = {}) => {
      local_storage('posts').insert({
        title: event.target.title.value,
        content: event.target.content.value,
      }).then((inserted_data = {}) => {
        set('create_post', {
          input: inserted_data,
        });
      });
    },
  },
  render: ({ props, state, data, each, when, methods }) => {
    return `
      <form>
        <input type="text" name="title" placeholder="Post Title" />
        <textarea name="content" placeholder="Type your post here..."></textarea>
        <button>Save Post</button>
      </form>
    `;
  },
});

export default PostEditor;

Above, we have an additional api.local_storage() method that executes on the client at load time. Then, we have a Promised insert method that lets you do something after the write (like call a setter to write to the DB).

My only hesitation with this is reliability. Generally speaking this should work fine, but there could be network issues that prevent the hook from working (i.e., local write works, but the server is down when calling set() and so it doesn't actually get there).

To solve that, I'd consider researching some existing "offline" database stuff. Maybe even consider using an IndexedDB wrapper that does some sort of syncing or replay when the network is available again.

[rglover]

Didn't come to mind at first but this may be best solved by writing a thin layer around RxDB. We can get away with just using the parts we need, too, so there's not much footprint. Would also be nice to figure out a way to get a sync between client and server caches (though, that may be overkill and risky for security so try it before you buy it).