Storex - Frontend store with the state on the backend

I would like to present a library which moves frontend stores to elixir backend, named Storex. Whole communication going through WebSocket.

More info available on Github.

10 Likes

Hello,

I want to announce that stex was renamed to storex and published to hex.pm with version 0.1.0.

Changelog:

  • The only diff of the store state is being sent on each mutation.
  • Subscriber of connection status
  • Fixes in library

Links:

4 Likes

Version 0.2.0 released

Changelog:

  • Dynamic registry declaration
    • Default registry on ETS
  • Fix issue with a restart of Store when stopped on disconnect
  • Update dependencies
1 Like

@drozdzynski FYI, I noticed the title of the thread was out-of-sync with the new name and adjusted it.

4 Likes

Version 0.2.2 released

Changelog:

  • Typescript/Javascript improvements
  • Fix reconnect of WebSocket on connection close

Version 0.2.3 released

Changelog:

  • Fix reconnect of WebSocket on connection close

That’s interesting.
Do you think it would be feasible to add fw-specific wrappers around Storex, so that we could (for example) use a SolidJS store transparently?

So (in this case) Solid’s reactive system could create an event, which is (maybe) processed in the backend (without any further ado) which then modifies the store which then leads to a reaction (without further ado) on the client side…?

1 Like

I designed it as a replacement for frontend stores.
If you want to use it with SolidJS you can use from function to display the current state.

Example:

import { render } from "solid-js/web";
import { from } from "solid-js";
import Storex from "storex";

const store = new Storex({
  store: "App.RandomNumber",
  params: {},
});

function RandomNumber() {
  const state = from(store);

  return (
    <button onClick={() => store.commit("change", Math.random())}>
      {state()}
    </button>
  );
}

render(() => <RandomNumber />, document.getElementById("app")!);
1 Like

Thats very nice. So Storex on the client side acts as an observable (implementing subscribe)…?

I’ve only played a little with SolidJS, so I can’t say if there are any drawbacks (besides having to “learn” the Storex API for writing). If it works as I think (have to try it out) this just rocks. Liveview is really great, but I’ve a project now, that is so dynamic that I need a frontend framework. This could bring one of the biggest benefits of LV - removing all the layers between backend and frontend - to any (reactive?) framework (implementing sth like from)

Yes, storex has the subscribe method in Store to work with reactivity.
I’m using storex with svelte frontend framework which works on subscribe method on reactivity.

Example:

<script lang="ts">
  import Storex from 'storex'
  
  const store = new Storex<RandomNumber>({
    store: 'App.RandomNumber',
    params: {},
  })
</script>
{#if $store}
  Random number: {$store}
{/if}
1 Like