Realar multiparadigm state manager for React based on reactive mathematic.
Light, Fast, and Pretty looked 😘
Targeted to clean code, modulable architecture, and time of delivery user experience.
Supported two kinds of data and logic definitions.
- Plain functional reactive programming with only functions
const [getCount, set] = box(0);
const tick = () => set(getCount() + 1);
setInterval(tick, 200);
const App = () => {
const count = useValue(getCount);
return (
<p>{count}</p>
)
}
- And transparent functional reactive programming with classes, decorators and jsx wrapper
class Ticker {
@prop count = 0
tick = () => ++this.count;
}
const ticker = new Ticker();
setInterval(ticker.tick, 200);
const App = () => (
<p>{ticker.count}</p>
)
Try wrapped version on CodeSandbox
Realar targeted to all scale applications up to complex enterprise solutions on microfrontends architecture.
You can use as many from Realar as you want. For small websites or theme switchers, two functions are enough👌 Step by step on applications scale stairs you can take more and more. From sharing state to all application parts, to modulable architecture with apps composition.
Top comments (4)
So I better understand what I'm looking at: What is a "Multiparadigm state manager" in the abstract?
The abstraction of the core is an implementation of functional reactive programming on javascript and binding that with React.
It uses usual mathematic to describe dependencies and commutation between reactive values.
In contradistinction to stream pattern, operator functions not needed. The reactive “sum” operator used a simple “+” operator (for example).
That code has a graph of dependencies inside. “sum” - reactive expression depends from “A” and “B”, and will react if “A” or “B” changed. It is perfectly demonstrated with “on” function (that subscribes to reactive expression) and “console.log” (developer console output).
On each change of “A” or “B” a new value of that sum will appear in the developer console output.
And for tasty easy binding reactive expressions and values with React components.
That component will be updated every time when new sum value is coming.
The difference from exists an implementation of functional reactive programming (mobx) in Realar dependency collector provides the possibility to write in selectors and nested writable reactions.
Realar provides big possibility abstractions for reactive flow. We already know about reactive value container, reactive expressions, and subscribe mechanism. But also have synchronization between data, cycled reactions, cached selectors, and transactions.
Below I will talk about high level abstractions provided from Realar out of the box.
Shared instances decomposition. The pattern for decomposing applications logic to separate independent or one direction dependent modules. Each module can have its own set of reactive values. (ssr, comfort “mock” mechanism for simple unit testing)
Actions are a necessary part of reactive communication, well knows for most javascript developers. Possibility for subscribing to action, call action, and wait for the next action value everywhere on the code base.
React components context level scopes. Declaration one scope and use as many reactive value containers as you want no need to define a new React context for each changeable value.
Decorators for clasess lovers. And babel plugin for automatic wrap all arrow functions defined in the global scope with JSX inside to observe wrapper for the total implementation of transparent functional reactive programming (TFRP) in javascript with React.
This is a set of Realar abstractions on current time that I can describe.
I hope my answer was complete, if I understood the question correctly, thanks for your interest!
Awesome
And thanks so much for your question!
I added this abstractions explanation to the project readme.
For better understanding for future users 😊