Storex - Frontend store with the state on the backend

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:

• hex.pm
• hexdocs.pm
• github

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

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

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…?

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")!);

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}

I finally had the time to check this out. Looks very promising.

Some things I noticed (I have very limited JS-skills, so may be bullshit)

• In your “connect to store” example, I replaced const with var here: subscribe: (state) => {var state = state} (does not work otherwise)
• your example uses an integer as state, which did not work for me. Changed to a map.
• storex depends on Jason, which is not installed with deps.

I created a sample app. Especially the websocket handling is not obvious, I used GitHub - kevinlang/plug_socket: Add Cowboy websockets to your Plug.Router easily. · GitHub which makes that easy.

Sample app: GitHub - georgfaust/storex_example_app: solidjs examples for https://github.com/nerdslabs/storex · GitHub

In your “connect to store” example, I replaced const with var here: subscribe: (state) => {var state = state} (does not work otherwise)

You are right, it’s my mistake, I will update README

your example uses an integer as state, which did not work for me. Changed to a map.

I tested that as well and it’s a bug, thanks for catching that

storex depends on Jason, which is not installed with deps.

I will fix it with this integer as a state