жтож, первое уведомление о начале стрима!
Начинаю через 20 мин. Залетаем -> twitch

Сегодня будет проходить трансляция MoscowJS. Думаю попробовать глянуть на стриме, если ютуб конечно позволит. Начало в 19:00. Всем рад)

UPD: ребята подготовили трансляцию и в вк. Это мы смотрим!

Twitch

Завалил все дедлайны по покупке билетов на IT пикник и попасть на мероприятие не получилось. А это значит, что сегодня стрим будет. Начнем как обычно, часов в 10. Будем делать mvp маркетплейса!

Twitch

Сегодня на стриме сначала глянем трансляцию MoscowCSS, а потом продолжим делать mvp маркетплейса на ангуляре. Начнем в 19:00.

Twitch

Через пару часов думаю запустить стримчанский. Будем работать с мультиязычным приложением конечно же на angular.

Twitch

Случился перерыв в стримах, но сегодня точно все будет. Стрим в 19:00. Погнали!

Twitch

Убил свой режим, восстановить пока не получается. Пошел постримлю

Twitch

Сегодня буду делать mvp маркетплейса. Запускаю стрим!

Twitch

Стрим райт нау

Twitch

Стрим, буду копаться с динамическими фильтрами

Twitch

Стрим! Сначала глянем Q/A сессию от команды ангуляра, а потом покопаемся с кодом для динамических фильтров

Twitch

Жтож, всем привет! Давно меня не было онлайн, пора вырываться из осенней хандры. Сегодня отличный повод, вышел новый 19 angular. Бегу смотреть!

Twitch

Сегодня вышли свежие доклады HolyJS, а на той неделе прошел MoscowJS. Смотрим!

Twitch

Есть идея постить в этот канал не только посты с анонсами стримов, но и какой-то более менее полезный контент. Тадаам, встречаем первый такой пост)

RxJS без боли: интерактивные ресурсы для изучения потоков и операторов

RxJS — библиотека, которая разделяет жизнь фронтендера на "до" и "после". Когда в голове укладывается реактивная парадигма программирования, обратного пути уже нет. Логика приложения превращается в реактивные потоки, ты жонглируешь операторами и создаешь код, который кажется почти магией.

RxJS открывает перед разработчиком невероятные возможности, но требует времени на освоение. Новая ментальная модель и разнообразие операторов могут сначала показаться сложными. Но стоит приложить усилия, как ты начнёшь писать действительно крутой декларативный код — и результат того стоит!

Занимаясь менторингом и обучая реактивному программированию, я заметил, что самый эффективный подход — это не просто объяснять, но и показывать наглядно. Поэтому я собрал для вас подборку сайтов, которые визуализируют потоки.


🔗 RxMarbles / RxMarbles(updated)

🔍 Что это?
Визуальная энциклопедия операторов RxJS.

📚 Что даёт?
Наглядно показывает, как операторы преобразуют потоки. Например, как работает mergeMap или concat.

🎯 Почему полезно?
Если ты не понимаешь, как работает конкретный оператор, просто посмотри, как он обрабатывает "шарики" данных.


🔗 RxViz

🔍 Что это?
Интерактивный playground для написания и визуализации RxJS-кода.

📚 Что даёт?
Позволяет создавать цепочки операторов и тут же видеть, как они преобразуют данные.

🎯 Почему полезно?
Прямо в браузере ты можешь протестировать идею и быстро отладить цепочку операторов.


🔗 ThinkRx

🔍 Что это?
Ещё один интерактивный playground для изучения и визуализации RxJS-кода.

📚 Что даёт?
Позволяет экспериментировать с реактивным кодом, создавать марбл-диаграммы и сохранять их как изображения.

🎯 Почему полезно?
Включает множество примеров реактивного кода и визуальных сравнений похожих операторов, таких как switchMap, mergeMap и concatMap.


🔗 Higher-Order Observables Operators Playground

🔍 Что это?
Обзор higher-order observables операторов с визуальными примерами.

📚 Что даёт?
Позволяет выбрать оператор, посмотреть код и графики потоков, а также ставить потоки на паузу для изучения текущего состояния.

🎯 Почему полезно?
Это идеальный ресурс для тех, кто хочет углубиться в работу операторов вроде switchMap или exhaustMap.


🔗 SoftwareMill RxJS Playground

🔍 Что это?
Интерактивный набор 3D демо-проектов для изучения концепций RxJS. Потоки изображены в виде конвейеров, а данные — в виде двигающихся фигур.

📚 Что даёт?
Содержит готовые примеры с объяснениями. Можно создавать свои конвейеры и добавлять к ним различные операторы.

🎯 Почему полезно?
Максимально визуализирует движение данных в реактивных потоках, делая абстрактные концепции более понятными.

Эти ресурсы помогут не просто выучить RxJS, но и понять его философию. Переходи по ссылкам и практикуйся!

@summon_the_coder

#RxJS #Angular #ReactiveProgramming

Музыкальный RxJS или как обрабатывать события правильно

Higher-order observables — тема безумно интересная и глубокая, но в то же время вызывающая наибольшее непонимание у разработчиков, которые только изучают RxJS. Существует множество способов объяснить, как работают операторы switchMap, concatMap, mergeMap и exhaustMap: можно сравнивать их с потоками воды, конвейерами, очередями заказов и многими другими вещами. Но, на мой взгляд, лучшая аналогия была приведена в телеграм группе по RxJS. Я немного доработал её и вот как она звучит.

Представьте, что у вас есть приложение с «реактивным» музыкальным плеером, и по клику на кнопки можно переключать музыку. Каждая кнопка — это отдельный higher-order observable оператор. Как же будет происходить переключение музыки при клике на эти кнопки?

🎶 switchMap

Если поступает новый клик, текущий трек немедленно останавливается, и начинается новый. Этот оператор повторяет поведение настоящего музыкального плеера, где треки сменяются сразу по нажатию кнопки.

Реальные примеры:
- Когда пользователь вводит текст в строку поиска, приложение отправляет запрос на сервер. Если пользователь продолжает вводить текст, предыдущие запросы отменяются, чтобы не загружать неактуальные данные.

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

🎶 mergeMap

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

Реальные примеры:
- Получение уведомлений одновременно из нескольких источников (например, чата и системы оповещений).

- Загрузка данных пользователя и связанных с ним заказов одновременно, чтобы быстрее отобразить информацию.

🎶 concatMap

Этот оператор идеален для терпеливых слушателей. При новом клике он дождется, пока текущая песня доиграет до конца, и только потом включит следующую.

Реальные примеры:
- Отправка формы, а затем запуск загрузки данных, связанных с результатом её обработки.

- Обработка очереди задач (например, отправка файлов) и показ уведомлений о завершении каждой задачи.

🎶 exhaustMap

Оператор идеально подходит для строгого контроля воспроизведения. Если трек уже играет, любые новые клики полностью игнорируются до тех пор, пока текущий трек не закончится. Это как если бы плеер говорил: «Подожди, я занят. Дождись окончания трека, и только потом я приму новую команду».

Реальные примеры:
- Когда пользователь отправляет форму, и нужно игнорировать повторные нажатия кнопки, пока форма не будет отправлена.

- Пользователь вводит одноразовый код, и пока сервер его проверяет, новые попытки игнорируются.

Итак, какой оператор выбрать?

mergeMap - если операции могут выполняться одновременно.

switchMap - для отмены предыдущих действий при новом событии.

concatMap - когда нужно выполнять операции строго по порядку.

exhaustMap - для защиты от лишних запусков во время выполнения.

@summon_the_coder

#RxJS #Angular #ReactiveProgramming

RxJS: Отписки? А точно надо?

Кажется, тема отписок от потоков уже давно закрыта, но снова и снова встречаю обсуждения нужности отписки от потоков, поэтому решил собрать информацию в одном месте и разложить все по своим местам. Давайте сначала разберемся с терминами.

Unsubscribe - отписка от потока. Сообщаем источнику значений, что текущий подписчик больше не хочет получать новые значения. Если у потока остались другие подписчики, то они продолжат получать новые значения.

Complete - завершение потока. Завершенный поток перестает уведомлять всех подписчиков о новых значениях.

Finalization - освобождение ресурсов, занятых потоком. Данный процесс происходит всегда при ошибке, завершении потока, отписке.

Для чего мы отписываемся или завершаем потоки:
- Избежание сайд-эффектов. При активной подписке могут выполнятся колбэк или цепочка операторов, которые необходимо запускать только если компонент инициализирован.

- Освобождение ресурсов памяти и борьба с неконтролируемыми утечками памяти.

А теперь самое интересное, ситуации, когда отписка не требуется (если поток простой и содержит только одну из описанных ниже сущностей):
- Потоки, которые в конечном итоге завершаются (of, from, timer(1000), first итд).

- Использование сервиса ActivatedRoute. Данный сервис и его потоки изолированы от Router сервиса. Router уничтожает маршрутизируемый компонент, когда он больше не нужен вместе со всеми зависимостями.

- Использование сервиса HttpClient (создает потоки, которые в конечном итоге завершаются).

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

Подготовил список из проверенных практик для управления подписками:
- Используйте линтер: добавьте eslint-plugin-rxjs и eslint-plugin-rxjs-angular для автоматической проверки отписок или полного запрета ручных подписок.

- Избегайте ручных подписок: комбинируйте потоки через merge, zip или combineLatest, чтобы привязать их к шаблону с автоотпиской.

- Async pipe: используйте в шаблонах, чтобы автоматически управлять подписками.

- Операторы takeUntil или takeUntilDestroyed: используйте эти операторы последними в цепочке операторов для автоматического завершения подписки при уничтожении компонента.

- toSignal (доступно с Angular 16 в статусе dev preview): конвертируйте потоки в сигналы с автоматическим управлением подписками.

- Higher-order observables: избавляйтесь от "подписок внутри подписок", чтобы избежать утечек памяти.

- Библиотеки: если вы используете Angular ниже 16 версии, попробуйте @ngneat/until-destroy или напишите кастомное решение.

Отписка — это не лишняя работа, а гарантия стабильности и удобства сопровождения вашего кода. И ответ на вопрос из заголовка - отписывайтесь всегда.

Ну и напоследок я собрал всевозможные актуальные способы отписок в одном Stackblitz. Получился своеобразный справочник по отпискам — каждый способ сопровожден комментариями с пояснениями. Делитесь этим проектом с начинающими разработчиками и теми, кто только открывает для себя красоту реактивного программирования!

@summon_the_coder

#RxJS #Angular #ReactiveProgramming

Сегодня в 19:30 буду стримить! Как всегда сначала что-нибудь глянем, а потом покопаемся с ssr в последнем ангуляре.

Twitch

Жтож, запрыгиваю в последний вагон. Все подводят итоги, и я тоже хочу поделиться своими.
Самым большим и важным достижением уходящего года для меня стал, так сказать, "выход в свет". Я невероятно долго собирался сделать этот шаг, и наконец, решился. Начал стримить (хоть и с перерывами), а ещё завёл этот канал и стал писать посты.
Отдельное спасибо @iCherniakov, который вдохновил меня на эту идею. И, конечно, огромное спасибо всем вам — за ваши подписки и реакции. Это действительно очень важно для меня.
В следующем году планирую не останавливаться и брать новые вершины.
С наступающим! До встречи в новом году!❤️