DEV Community

Cover image for Multiparadigm state manager for React by ~2 kB.
Slava Birch
Slava Birch

Posted on

Multiparadigm state manager for React by ~2 kB.

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

Try on CodeSandbox

  • 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>
)
Enter fullscreen mode Exit fullscreen mode

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.

I made my choice!

Discussion (4)

Collapse
ben profile image
Ben Halpern

So I better understand what I'm looking at: What is a "Multiparadigm state manager" in the abstract?

Collapse
betula profile image
Slava Birch Author

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).

const [getA, setA] = box(0)
const [getB, setB] = box(0)

const sum = () => getA() + getB()

on(sum, console.log)
Enter fullscreen mode Exit fullscreen mode

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.

const App = () => <p>{useValue(sum)}</p>
Enter fullscreen mode Exit fullscreen mode

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!

Collapse
ben profile image
Ben Halpern

Awesome

Thread Thread
betula profile image
Slava Birch Author

And thanks so much for your question!
I added this abstractions explanation to the project readme.
For better understanding for future users ๐Ÿ˜Š