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!

GitHub logo betula / realar

5 kB Advanced state manager for React

Realar

npm version npm bundle size code coverage typescript supported

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

And bind to React easily play on codesandbox

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

  return <p>{state}
    <button onClick={inc}>+</button>
  </p>
}
Enter fullscreen mode Exit fullscreen mode

You can make streams play on runkit

const addendum = value('0')
  .pre((ev: ChangeEvent<HTMLInputElement>
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

19

Catégories:

JavascriptTypescriptReact

Tags:

JavascriptTypescriptWebdevReact