^ переходите в канал, оставляйте вопросы в комментариях к посту. Подписывайтесь, добьем Сергею 2к :)

Немножко поговорим про роутинг

BarcelonaJS. Записи нет (но слайды дублируют выступление на 95%)

Максим хорошо пишет про новости, зацените @msosnovfeed

Ещё одна реклама другого канала, просто потому что я сам их читаю и могу рекомендовать :)

На носу выходные, грядут 48 часов для работы над петами как обычно делюсь видео, в этот раз очень важным для меня - туториал по реатому!

Трижды перезаписывал, жду фидбек и критику :)

Всю неделю болею я и семья.., на посты уж совсем сил не хватает. Но вот вам краткая сводка интересного за неделю:

Опять ругаю final-form

Хвастаюсь реатомом

Про неочевидный афект перформанса простыми вещами: https://twitter.com/artalar_dev/status/1598429731023687681 и https://github.com/evanw/esbuild/issues/478

Обсуждаем атомарность в треде новой реактивной библиотеки

Видео на посмотреть из моих закладок

Всегда думал что не смогу писать в канал потому что темы закончатся, а у меня их столько что времени все переварить нет.

Активно пишу доки к @reatom_ru_news и внедряю в свой прод.

Думаю над обновлением stylerun.

Ковыряю внутрянку преакта.

Планирую запись подкаста и новые статьи по реатому...

Изи контрибьюшен #help_oss

Подъехала идея. Хотите законтрибьютить в реатом целый пакет? Склонте репу, запустите npm run package-generator, укажите имя web-requestanimationframe и в сурсы запихните экшен который будет вызываться по requestAnimationFrame.

Делов немного, только засуньте инициализацию подписки на rAF в функцию в отдельном файлике create.ts, а в index.ts экспортируйте ее результат (что бы пользователь мог запустить ее когда ему нужно, или не запускать в ssr).

useSyncExternalStore

Подъехал очередной апдейт beta.reactjs.org. Все достаточно подробно и просто описано, только вот это вот важное замечание где-то вконце скрывается: If a different subscribe function is passed during a re-render, React will re-subscribe to the store using the newly passed subscribe function. You can prevent this by declaring subscribe outside the component.

Иначе говоря, НЕ создавайте функции для гета или подписки инлайн (как для useEffect), иначе на каждый ререндер будет отписка и подписка useSyncExternalStore((cb) => some.subscribe(cb))

Но у меня все еще есть проблема интеграции с реактом - я не могу (не знаю как?) отследить старт и окончание рендера дерева, а это нужно что бы забатчить чтение и апдейты атомов во время рендера.

Большинство библиотек реализуют автоматический батчинг - они накапливают изменения и запускают зависимые вычисления через какой-то таймаут / некст тик. Проблема с этим подходом в том что при возникновении ошибки в таких вычислениях не понятно куда ее выбрасывать и кто ее должен перехватывать. Понятно, что должен быть общий onCatch, но правильнее выдать ошибку источнику обновления, что невозможно при прозрачном асинхронном батчинге. Поэтому батчинг в реатоме синхронный и явный.


Недавно, начал писать адаптер для Preact. Это не полная калька с адаптера для реакта, потому что у преакта батчинг есть уже давно, а для обобщенных хуков есть options api. Казалось, что debounceRendering решает мою проблему оборачивания рендеринга в собственный хук, но вылезло две проблемы: 1) пока не понял как добраться до провайдера что бы получить релевантный контекст реатома; 2) этот колбек не вызывается для первого рендера =/

Повторю в сотый раз всю ту же истину реактивного программирования - при вынесении связей в рантайм неизбежно появляются конфликты очередей обслуживающих эти связи. Пока мы не придем к единому стандарту единой очереди (или комплексу правильно связанных очередей) - разработчики библиотек и их пользователи будут страдать от краевых случаев. Но стандарта такого пока не намечается…

Стори тесты!

Идея такая: пишем отдельные тесты с адекватным неймингом и коментами и автоматически копируем их в доку.

Отличие от реплов / сендбоксов в том что такой тест проверятеся на каждый апдейт в используемых фичах и всегда будет актуален. Ну и ментейнеру немного меньше работы :)
Так же, такой текст позволяет показать какой-то сценарий работы (многоступенчатый?). В репле это не удобно расписывать, а просто текстом обычно занимает много места - скриншоты с повторным кодом и т.п.

Что думаете?

Примеры:

https://www.reatom.dev/packages/async#story-test

https://www.reatom.dev/packages/testing#story-test

Доклад с YaTalks можно глянуть по таймкоду https://youtu.be/G72O84_mIqI?t=8550

Надеюсь, что скоро нарежут на отдельные файлы.