Всееем привет! С вами @art_al_ar: тимлид в @dbeaver_news.

На этой неделе, в основном, будем говорить о стейт-менед… twitter.com/i/web/status/1…

Немного обо мне:

Так же я веду t.me/web_conf_repor… где стараюсь публиковать все записи докладов по вебу и вообще стараюсь помога… twitter.com/i/web/status/1…

Коллеги, я бы хотел плавно войти в тему в общем и не фокусироваться только на reatom, но т.к. уже начали поступать… twitter.com/i/web/status/1…

Каким требованиям должен удовлетворять стейт-менеджер (СТМ) и вариативность каждого требования.
Сравнительная табли… twitter.com/i/web/status/1…

Что такое стейт-менеджер (СТМ), кто-нибудь видел определение? Откуда этот термин вообще взялся и за что отвечает?
(… twitter.com/i/web/status/1…

Стейт-менеджер, очевидно из названия, ответственен за управление каким-то состоянием, т.е. в нем описаны обстоятель… twitter.com/i/web/status/1…

Это описание может быть реализовано разными способами:

предподготовленные запросы можно разделить на:

(способы переходов отсортированы от императивщены к декларативщене)

Но это еще не все, практика подсказывает, что, помимо чтения и записи, необходимо реагировать на изменения и кмк им… twitter.com/i/web/status/1…

Дело в том что самое сложное - это именно определение того что изменилось. Часто, в зависимости от того каким образ… twitter.com/i/web/status/1…

Типы определения изменений:

При этом библиотека может использовать те или иные типы в разных комбинациях или как-то частично. В рамках твиттера… twitter.com/i/web/status/1…

Выше я вкратце, но на сколько возможно полно, описал то с чего СТМ начинается. Кажется, все уже достаточно не прост… twitter.com/i/web/status/1…

Стейт-менеджер (СТМ) - это реактивная база данных.

Может быть не совсем прямолинейный вывод, но в рамках твиттера остановимся на этом 👀

Ааа сегодня мы разберем зачем мемоизировать селекторы редакса и почему автору стейт-менеджера (СТМ) хорошо бы знать… twitter.com/i/web/status/1…

Давайте представим следующую модель данных, в корзине товаров у нас отображаются:

Все это, конечно, должно быть связано реактивно, как показано на рисунке (push-подход) - update обновляет только pr… twitter.com/i/web/status/1…

Цветами разделены необходимые этапы, выполнение которых должно произойти при поступлении нового значения:
1. (зелен… twitter.com/i/web/status/1…

Классические реактивные подходы основанные на потоках (observable) с которым можно познакомится тут… twitter.com/i/web/status/1…

Но с этим стандартным и столь распространенным подходом есть достаточно серьёзная проблема - glitches, одна сторона… twitter.com/i/web/status/1…

На нашем примере стандартная последовательность оповещения observable будет выглядеть так:

update(1) ->
price(1)… twitter.com/i/web/status/1…

И тут мы видим что "cost" и "cost subscriber" были вызваны дважды, что содержит целых две проблемы: лишние вычислен… twitter.com/i/web/status/1…

Так же не верным считается вызов сайд-эффектов (subscribers) в процессе вычисления зависимых значений , почему - ра… twitter.com/i/web/status/1…

Правильный порядок обхода подписок должен был бы выглядеть так:

update ->
price ->
tax ->
cost (сразу с новыми… twitter.com/i/web/status/1…

Что бы достичь этого следует понимать что все зависимости - это определенный граф (DAG чаще всего… twitter.com/i/web/status/1…

Либо обход, все же, может осуществляться в глубину, но со стороны subscribers (что бы контролировать получение, а н… twitter.com/i/web/status/1…

Вот тут есть немного более детальное сравнение (в тестах) эффектора, мобыкса и Rx codesandbox.io/s/effector-com…

Я, к сожалению, не знаю литературы introduction уровня в которой бы это хорошо описывалось. Т.е. есть какие-то пейп… twitter.com/i/web/status/1…

К счастью @theKashey только что опубликовал свой материал с разбором на конкретной практике, за что ему огромное сп… twitter.com/i/web/status/1…

При этом в push подходе все наоборот: мы медленно инициализируемся перестраивая (сортируя) граф под каждый апдейт, … twitter.com/i/web/status/1…

В продолжении треда @roman01la
MobX вообще хитро работает: он подписывается (push) только на то чей кеш был инвали… twitter.com/i/web/status/1…

Второй выпуск подкаста про Reatom (современный state manager на TypeScript): сравниваем с MobX, обсуждаем производи… twitter.com/i/web/status/1…

О, что-то свежее (и большое) про react zombie children
kaihao.dev/posts/Stale-pr…
Это крайне не приятная проблема появ… twitter.com/i/web/status/1…

Немного сложно объяснять, почитайте статью, или посмотрите вот этот доклад: youtube.com/watch?v=cRtAjT…
Там достаточно… twitter.com/i/web/status/1…

Пришло время обсудить обработку ошибок 🔥🧨🎆🌋☄️🌡️

Я еще в начале недели кидал ссылку в которой описаны некоторые иде… twitter.com/i/web/status/1…

Вернемся к нашей корзине с товарами и подумаем где могут возникнуть ошибки при работе стейт-менеджера (СТМ) и что с… twitter.com/i/web/status/1…

Для каждого пункта, при ошибке, возникают вопросы:

Ну т.е. все сложно...
Вообще лучше всего когда в СТМ *по умолчанию* заложена такая логика обработки ошибок, которая… twitter.com/i/web/status/1…

Что такое сайд-эффект? Это какой-то эффект, который находится в стороне, в не ореола нашего контроля. Сайд-эффект -… twitter.com/i/web/status/1…

На самом деле, с точки зрения разработчика, сайд-эффектов в приложении может вообще не быть, потому что в его руках… twitter.com/i/web/status/1…

Но нам необходимо рассмотреть зону ответственности СТМ, который, конечно, вообще ничего не знает про свое окружение… twitter.com/i/web/status/1…

Соответственно какое есть влияние у СТМ на окружающую среду (я не про патчинг протатипов 😁)? - Состояние и подписчи… twitter.com/i/web/status/1…

Причем в реальном приложении связей "изменение - вызов подписчика" так много, что проконтролировать каждое и, возвр… twitter.com/i/web/status/1…

В итоге, СТМ имеет возможность внести непредсказуемое поведение в приложение двумя способами: изменить состояние не… twitter.com/i/web/status/1…

Что бы избежать неконсистентности данных для иммутабельной модели - необходимо использовать rollback'и, либо исполь… twitter.com/i/web/status/1…

У протестированных мной СТМ: redux, MobX, effector есть одна и та же проблема - возможны ситуации когда состояние… twitter.com/i/web/status/1…

Reatom задизайнен так, что там никогда не произойдет частичного изменения состояния: либо полное изменение соответс… twitter.com/i/web/status/1…

При этом, подчеркиваю, я описал необходимое поведение по умолчанию. В идеале библиотека должна так же предоставлять… twitter.com/i/web/status/1…

Выводы такие: стейт-менеджемент - это сложно, имеется множество подводных камней (мы разобрали только часть) с кото… twitter.com/i/web/status/1…