Main aspects of reactivity
Tags: webdev, algorithms, javascript, architecture
Published: 2021-11-11 14:11:32

Hello, my name is Dmitriy Karlovskiy, and I want to share with you the results of my 6-years research of reactivity to build a user interface.

It introduces a clear definition of reactivity, consisting of 6 bases. 4 fundamental requirements for the implementation of reactivity are introduced. Then 12 aspects of reactivity are analyzed in detail, which it is important when choosing a reactivity model. For each aspect, the behavior option that is most practical is selected. As a result, an idea is formed about how the most practical reactivity model should work. After that, well-known libraries and frameworks are taken, and compared according to the degree of approximation to the ideal.

This is a very large article written in Russian. I will keep it up to date. Therefore, I did not translate it manually and repost it, as it is very exhausting, and the result will quickly become outdated. So I suggest reading it either in the original or in an auto-translation:

- [Original Russian article](https://github.com/nin-jin/slides/blob/master/reactivity/readme.md)

- [Auto translated by Google](https://github-com.translate.goog/nin-jin/slides/blob/master/reactivity/readme.md?_x_tr_sl=ru&_x_tr_tl=en)

However, if someone is willing to make and support an English version, I only welcome it. And, of course, be sure to let me know about any inaccuracies so that I correct them and do not mislead people.

Have fun reading, and may supersonic be with you!

Some spoilers..

| Lib/FW  | Style | Watch | Dupes | Origin | Tonus | Order | Flow  | Error | Cycle | Depth | Atomic | Extern 
|---------|-------|-------|-------|--------|-------|-------|-------|-------|-------|-------|--------|--------
| [$mol_wire](https://github.com/hyoo-ru/mam_mol/tree/master/wire)   | 🤓✅ | 🤝✅ | 🎭✅ | 🚂✅  | 🦥✅ | 👨‍💻✅ | 🚕✅ | 🦺✅ | 🌋✅ | 🗻❌ | 👻❌  | 🏇✅
| [CellX](https://github.com/Riim/cellx)                             | 🤓✅ | 🤝✅ | 🆔❌ | 🚂✅  | 🦥✅ | 👨‍💻✅ | 🚕✅ | 🦺✅ | 🌋✅ | 🗻❌ | 🦶✅  | 🏇✅
| [MobX](https://mobx.js.org/)                                       | 🤓✅ | 🤝✅ | 🆔❌ | 🚂✅  | 🦥✅ | 👨‍💻✅ | 🚕✅ | 🦺✅ | 🌋✅ | 🗻❌ | 👻❌  | 🏊‍♂️❌
| [ChronoGraph](https://www.npmjs.com/package/@bryntum/chronograph)  | 🧐❌ | 🤝✅ | 🆔❌ | 🚂✅  | ⏰❌ | 👨‍💻✅ | 🚕✅ | ⏮❌ | 🌋✅ | 🌌✅ | 🤼‍♂️❌  | 🏊‍♂️❌
| [Reatom](https://reatom.js.org/)                                   | 🤯❌ | 🤝✅ | 🆔❌ | 🚂✅  | 🦥✅ | 🧨❌ | 🦽❌ | ⏮❌ | 🚫❌ | 🗻❌ | 🤼‍♂️❌  | 🏊‍♂️❌
| [Effector](https://effector.dev/)                                  | 🤯❌ | 🤝✅ | 🆔❌ | 🥌❌  | 🍔❌ | 📰❌ | 🦽❌ | 🎲❌ | 💤❌ | 🌌✅ | 👻❌  | 🏊‍♂️❌
| [RxJS](https://rxjs.dev/)                                          | 🤯❌ | 🤝✅ | 👯‍♀️❌ | 🥌❌  | 🍔❌ | 📰❌ | 🦽❌ | ⛔❌ | 🚫❌ | 🗻❌ | 👻❌  | 🏊‍♂️❌
| [Vue](https://vuejs.org/)         | 🤓✅ | 🤝✅ | 🆔❌ | 🚂✅  | 🦥✅ | 👨‍💻✅ | 🚕✅ | 🦺✅ | 🎰❌ | 🗻❌ | 👻❌  | 🏊‍♂️❌
| [Ember](https://emberjs.com/)     | 🤓✅ | 🔎❌ | 🆔❌ | 🚂✅  | 🦥✅ | 👨‍💻✅ | 🚕✅ | 🎲❌ | 🌋✅ | 🚧❌ | 👻❌  | 🏊‍♂️❌
| [Solid](https://www.solidjs.com/) | 🧐❌ | 🤝✅ | 🆔❌ | 🚂✅  | 🍔❌ | 👨‍💻✅ | 🚕✅ | ⛔❌ | 🚫❌ | 🗻❌ | 👻❌  | 🏊‍♂️❌
| [React](https://reactjs.org/)     | 🧐❌ | 🔎❌ | 👯‍❌ | 🥌❌  | ⏰❌ | 👨‍💻✅ | 🦽❌ | ⛔❌ | 🌋✅ | 🚧❌ | 👻❌  | 🏇✅
| [Angular](https://angular.io/)    | 🧐❌ | 🔎❌ | 🆔❌ | 🥌❌  | ⏰❌ | 👨‍💻✅ | 🚕✅ | 🎲❌ | 🎰❌ | 🚧❌ | 👻❌  | 🏊‍♂️❌
| [Svelte](https://svelte.dev/)     | 🧐❌ | 🔎❌ | 🆔❌ | 🥌❌  | ⏰❌ | 👨‍💻✅ | 🚕✅ | ⛔❌ | 🚫❌ | 🌌✅ | 👻❌  | 🏊‍♂️❌