Storex - Frontend store with the state on the backend

Your Libraries & OS Mentoring Libraries
,
1

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.

11 Likes
2

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
3

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
4

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

4 Likes
5

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
6

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
7

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

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)

9

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
10

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 https://github.com/kevinlang/plug_socket which makes that easy.

Sample app: GitHub - georgfaust/storex_example_app

2 Likes
11

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

1 Like
12

Version 0.2.4 released

Changelog:

  • Fix root state update
  • Remove optional from jason dependency
3 Likes