Архитектура и реактивное программирование https://habr.com/p/737114/

Лайк, шер, подписка!

Пример в студию, что не может решить MobX, но при этом может решить Reatom пожалуйста. Спросили меня во вчерашней статье (Архитектура и реактивное программирование - всем обязательно к прочтению). В конце были объяснены общие принципы и что мобых не может, сейчас приведу пачку примеров.

1. Общий пример, такое много кому нужно. Есть какая-то модель, пусть это будет форма, не важно. Мы хотим навесить трекеры на ключевые события заполнения формы или ее изменение. Проблема в том что таких форм или моделей у нас очень много, а еще система аналитики весит как самолет и хотелось бы подгружать это все лениво. Код логики, кстати, становится заметно чище без необходимости вставлять логпоинты - это из личного опыта. Скрин кода очень упрощенного примера.

2. Непосредственно event-streaming и его шаринг, пример с текущего проекта. У нас есть виджет для сайтов-партнеров, который собирает разные события и агрегирует их. Кода, будем считать, много. Что бы улучшить перф и упростить все, потоки переиспользуются. Т.е. мы создаем какое-то событие, потом фильтруем его, дебаунсим и получаем новое производное событие и шарим его в разных частях кода. Какой-то модуль производное событие еще как-то обрабатывает, другой модуль ожидает другое событие и строит логику на основе обоих. Все это сейчас переписывается с rxjs на реатом ради бандлсайза - важный момент для встраиваемого виджета.

3. Продуктовый кейс из головы. Есть процесс оформления заказа. Отдельно пилится менее важный, но полезный модуль подсказок, который никак с критичным процессом оформления не должен быть связан. Он подгружается лениво, подписывается на событие открытия формы заказа (она может быть открыта в разных местах, в том числе в модалке) и ждет событие завершения заказа, или через 1 минуту (это я сейчас придумал), показывает нотификацию "Вам нужна помощь? Напишите нам в чат!".

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

Я думаю, это очень мило.
https://www.youtube.com/watch?v=N0jMmiCS8oQ

Накидайте вопросов, мб сделаю сейчас небольшой стрим с ответами.

Наткнулся на странное поведение каретки для input type=“email”, при удалении символа после пробела. Вроде, связано с тем что имейл не может содержать пробелы. Особо не гуглил, кто-то знает почему так?
репл

Красивое?
https://github.com/BuilderIO/build.

https://github.com/localtunnel/localtunnel

npx localtunnel --port 3000

Бесплатная и простая альтернатива ngrok - возможность пошарить локальный сервер по публичному адресу. Удобно, что бы быстро показать результат работы, пока она не доделана.

Раньше я volta.sh пользовался, возможность пинить свою версию ноды под каждый проект очень удобная, но потом что-то пригорел от количества проблем и дополнительной сложности (не я один) и перешел на более простой n.

Вот и закончился очередной, третий эпизод наших круглых столов. На этот раз вместе с экспертами из GitHub, Playbook, Algolia, Postman и Gatsby обсуждали, что отличает интерфейсы девтулов от всех остальных и как правильно их создавать.

Запись тут: https://www.youtube.com/watch?v=PIhJtTboXZ0

Вооот это крутотень!
https://bun.sh/blog/bun-macros

"Я потыкал @reatom" - непредвзятая попытка переписать небольшую модель с эффектора на реатом.

код на эффекторе
код на реатоме

Плюсы:
- “Код на реатоме пишется процедурно, поэтому он очень просто читается”
- Простое апи
- На 20 строк меньше (специфичного для библиотеки кода в полтора раза меньше)

Минусы:
- Нельзя одной строкой залогировать экшен
- Есть два способа как описать computed atom

В беклог разработки реатома добавлено две задачи:
- Обновить документацию по пакету reatom/lens и четко описать в каких случаях нужно использовать именно его (уже в работе)
- Add update hook for core primitives

Как превратить набор вариантов в один объект с опциональными полями? Спрашивают в тви.

Я пол часа копался и пару раз воспользовался gpt-4. Одна из дополнительных сложностей - значение уникального параметра не достаточно проставить в undefined, а опциональные ключи просто не опишешь. Результат. Был бы рад увидеть решение попроще.

Хотите AMA через пару минут?