State manager of dream

Some time ago during one of my interviews, a potential employer asked me to describe a perfect frontend framework in my wildest dreams. I gave quite a thorough answer explaining how it works, and realized that it actually was a description vaguely resembling the synthesis of React and Angular. My dream was born at that moment!

Currently, when it comes to all existing frontend frameworks, those widely popular or not, I prefer React since it has a beautiful integration with the typescript. Using JSX as part of a language is really convenient. It offers a lightweight version with perfect compatibility (4 kB Preact instead of 30), with the possibility to inject it on the Webpack level without changes to your codebase. And React is simply a view system without any special solution builder, application architecture, or advanced state management control. That is just awesome!

As for the organization of application logic, if we don’t find it in React we can choose one of the existing solutions.

Redux has the most powerful community in that field. A big set of trusted community-based components are provided to develop a lot of popular types of applications for topical business issues. It enables you to have both a quick start and a quick make.

Action, Store, and Selector are just great to add an abstraction layer and allow you to define a way to control your state.
Actions can be possible to use everywhere in your app, the subscription with sagas provides a great mechanism for listening to your app’s actions and reacting to them.
The immutable state in the store makes your app free from a proxy-based data transformation, and provides a very easy and understandable modification for both simple and nested states.
And selectors that cache parts of your state for performance reasons are useful a lot as well.

As far as more customizable reactivity goes, the desirable functions are either the possibility to subscribe to selector changes, or description of several stores for modular decomposition. Other options are that you probably want to code the view component local logic in the same way as to control your global app's store, or you want to manage the reactive state that contains not only plain javascript objects and arrays.

Once similar thoughts have already come to Mobx. This is a totally different way to organize your application logic.
Decomposition of your business issues using the object-oriented technique is a great decision for people who have knowledge in that field. Subscription to the result changes of of any combinations of values and selectors is really convenient.
Great modular decomposition and transparent reactive programming both sound awesome.

And on the testy is the streaming programming there is a beautiful pattern that has Rx as the most popular implementation. It offers a declarative way to coding your app’s actions as chaining configurable objects of reactive streams. It is a perfect instrument for event management.

Well, in such a way, we can take the most appealing state control techniques, and use them however we want.

And as a cherry on the cake, I like one more technique which is a shared stateful logic decomposition. Angular implemented it as the service on dependency injection.

All of the above-mentioned ideas inspired me to combine such really progressive techniques into one implementation for playing it together!

Stores, actions, selectors, object-oriented support, imperative and declarative styles, reactive streams, and stateful logic availability scopes - all in one, my dream implemented in Realar state manager. This is my pride and result of long, deep, and happy work.

My work is not only techniques connected together, I have reached an incredibly small size with this functionality. I used a special style of the code, which achieves the maximum compression of the minified code. 5 kB for all It’s a real success story! With Preact you can get a modern frontend environment by 10kB bundle size for all you need)

I’m happy after tons of deep coding hours, happy that I can share. Achievement is unlocked))))

Already in production on the Card of the Day react native app 👍

I’m looking for a sponsor because my hands have already been burning from continuing development non-stop! I want to make a beautiful form framework and a streams framework for nodes, with core on Realar. I would like to start recording teaching videos about all actual questions on the modern frontend field. And I dream of writing an open book. If you know any methods for searching sponsors, or if some of your friends know something, I urge you to tell me in the comments. It will be your great contribution to make a better world!

Thanks a lot for your attention, and
Happy coding!

realar-project / realar

5 kB Advanced state manager for React

Realar

Realar state manager targeted to all scale applications up to complex enterprise solutions on a modular architecture. And has an incredible small size 5 kB for all you need.

Usage

You can make stores and "actions" ^{play on runkit}

const store = value(0)

const add = store.updater((state, num: number) => state + num)
const inc = store.updater(state => state + 1)

And bind to React easily ^{play on codesandbox}

const App = () => {
  const state = useValue(store)

  return <p>{state}
    <button onClick={inc}>+</button>
  </p>
}

You can make streams ^{play on runkit}

const addendum = value('0')
  .pre((ev: ChangeEvent<HTMLInputElement>

…

View on GitHub

Comments

[Alex Khismatulin]

Thanks for the read and nice tool!
What's the perfect use case for using realar in your opinion? As I can see, state management tooling is heading towards simplification but realar doesn't look like a simple solution so it's a bit confusing to me. I have a feeling that it's capable of doing too many things and that may mess things up. I'm sure you have your own idea on that

[Slava Birch]

Thank you very much for your feedback!
For highlighting a problem that I have not seen.
Great! I will think)))

[Pavel Ravits]

Seems interesting.
How to use it with typescript, is there an example?

[Slava Birch]

Thanks for your interest!
Totally supported typescript. Most types are calculated automatically. Only several places where are you need to define it manually.

When you define a parameterized action. (play on codesandbox)

// you should pass user type manually for an argument of action
const userUpdate = signal<string>();

// store type will be received from the initial state type
const store = value({ user: "" });

// all arguments will be typed automatically
store.update.by(userUpdate, (state, user) => ({
  ...state,
  user
}))

// only a string type allowed for an argument of action
userUpdate("John");

Or in the shortcut for the above example. (play on codesandbox)

// you should pass user type manually for the second argument
const userUpdate = store.updater((state, user: string) => ({
  ...state,
  user
}));

Types are calculated automatically as more as it possible 👍

[Ashish Khare😎]

I'm just struck by the hero image. Great click.

[Slava Birch]

Thanks a lot for your hearty words! Nice to hearing 😊