Skip to content

Instantly share code, notes, and snippets.

@julianrubisch
Created October 15, 2022 13:29
Show Gist options
  • Save julianrubisch/ffa640ef345652eeecda32a890d2b8dc to your computer and use it in GitHub Desktop.
Save julianrubisch/ffa640ef345652eeecda32a890d2b8dc to your computer and use it in GitHub Desktop.

Dynamic UI Disposition with Kredis

What is Kredis?

Brief introduction to “Keyed Redis”. What are the benefits of using it over “vanilla” Redis access? When does it make sense to use it instead of persisting to the database?

Case Study: Persist and Restore a Collapsed/Expanded State

What problem are we trying to solve?

=> Save and restore UI state, independent of the session (i.e., survives logout)

For example:

  • Sidebar open/closed state
  • Tree view open/closed state
  • Accordion collapsed/expanded state
  • Custom dashboard layout
  • how many lines of a data table to display etc.

We will take a look at how to manage the collapsed/expanded state of slide-in drawers.

A Generalized User-local State Container for …

which is independent from the session.

Observing UI Changes with JavaScript

Using a Stimulus controller, we’ll place MutationObservers on DOM nodes whose attributes we want to track. Once an attribute changes, e.g. an active class is added, the affected targets’ current attributes are sent to the server.

(what if a target was added or removed?)

Persisting UI State

UIDispoController => send user_id as param, encrypted source_location/cache_key and attributes (as JSON) as FormData.

sanitize (after decrypting)!

  1. generate hash key
  2. store targets’ attributes in kredis hash

Rehydrate UI

TODO

Conclusion

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment