drozdzynski
Storex - Frontend store with the state on the backend
Storex is a frontend store with state management handled on the backend. It allows you to update the store state both from the frontend and backend, with all communication occurring over WebSocket.
More info available on Github.
Why Storex?
Features
-
Efficient state management: Only the differences (diffs) in the store state are sent with each mutation, minimizing data transfer.
-
Real-time updates: State changes are immediately reflected across all connected clients via WebSocket communication.
-
Backend-driven state: Storex allows both the frontend and backend to update the store state seamlessly.
-
Lightweight and fast: Designed for minimal overhead, ensuring rapid state updates and communication.
Key Differences from Phoenix LiveView
Phoenix LiveView is a powerful tool for building rich, interactive web applications without writing custom JavaScript. However, as your application grows, managing complex client-side state across multiple LiveViews or components can become challenging. This is where Storex comes in.
-
Client-Side State Management: While Phoenix LiveView handles server-side rendering and event handling, Storex focuses on managing state on the client side. It allows you to keep your client-side state in sync with the server, but with more flexibility in how that state is stored, updated, and accessed.
-
Decoupled State Logic: Storex decouples state management from the LiveView itself, enabling you to manage state across multiple components or even across the entire application. This contrasts with LiveView, where state is typically tied to a specific LiveView process.
-
Predictable State Updates: Storex follows a predictable, unidirectional data flow similar to Redux. This makes it easier to reason about state changes and debug issues, especially in complex applications.
-
Extensibility: Storex is designed to be highly extensible, allowing you to integrate it with other tools and libraries in the Elixir ecosystem. You can also define custom middleware to handle side effects, logging, or other tasks.
For an overview of Storex in action, check out the example provided here.
Most Liked
drozdzynski
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:
al2o3cr
@drozdzynski FYI, I noticed the title of the thread was out-of-sync with the new name and adjusted it.
drozdzynski
Version 0.2.4 released
Changelog:
- Fix root state update
- Remove
optionalfromjasondependency
Sebb
Bumped my examples repo.
drozdzynski
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")!);
Popular in Libraries
Other popular topics
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers. By developers, for developers.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"