Розкажіть про патерни Observer, Pub / Sub. Яка між ними різниця? Наведіть приклади реалізації цих патернів у відомих фреймворках / бібліотеках / браузерних API.

Повне пояснення

Що це і навіщо Observer дозволяє створити односторонню залежність: коли subject змінюється, всі observers отримують оновлення. Pub/Sub розділяє підписників і видавця через broker, що забезпечує анонімність та масштабованість.

Ключові принципи/терміни

• Subject / Observable – об’єкт, що генерує події.
• Observer / Subscriber – отримувачі оновлень.
• EventEmitter / Broker – механізм доставки повідомлень.

Як це працює

1. Підписник реєструється у subject (Observer) або в broker (Pub/Sub).
2. Після зміни стану subject викликає колбек або публікує повідомлення.
3. Підписники отримують оновлення і виконують логіку.

Практика та реалізація

• React Context: const ThemeContext = React.createContext(); – підписники читають контекст.
• Redux: store.subscribe(listener) – Observer‑подібний підписник.
• RxJS: const obs = new Subject(); – Observable‑публікація.
• EventTarget API: element.addEventListener('click', fn) – вбудований Observer.

Тестування

• Jest + jest.fn() для моків колбеків.
• Vitest з vi.spyOn для спостереження за викликами.

Дизайн‑рішення та моделі даних

• У Pub/Sub часто використовується topic (стрічка), що дозволяє фільтрувати повідомлення.
• У Observer‑патерні підписники отримують повний об’єкт, що змінюється.

Производительность і масштабування

• Pub/Sub з брокером (наприклад, Redis Streams) дозволяє розподіляти навантаження між серверами.
• Observer‑патерн в браузері обмежений однопотоковим виконанням, тому важливо не блокувати UI.

Безпека і приватність

• Публікація через брокер може включати аутентифікацію та авторизацію.
• У браузері EventTarget не передає приватні дані, якщо вони не вказані явно.

Особливості у контексті фреймворків

• Angular: EventEmitter у компонентах.
• NestJS: @Injectable() з RxJS Observable для сервісів.
• Next.js: useEffect + EventSource для SSE (Server‑Sent Events).

Оптимізація, типові помилки та edge cases

• Не забувайте видаляти підписки (unsubscribe) у componentWillUnmount або useEffect cleanup.
• У Pub/Sub перевіряйте, що брокер підтримує потрібний рівень доставки (at‑least‑once vs. exactly‑once).

Диагностика і отладка

• Перевірте, що підписник реєструється до моменту публікації.
• Використовуйте console.log або DevTools для відстеження подій.

Альтернативи, порівняння

• Observer vs. Pub/Sub: Observer – пряме спостереження, Pub/Sub – розподілене повідомлення.
• EventEmitter vs. RxJS: EventEmitter простий, RxJS надає оператори для складної обробки.

Крайні випадки і часті помилки

1. Підписник не видаляється → memory leak.
2. Брокер недоступний → повідомлення втрачаються.
3. Підписник отримує старі дані → кешування без очищення.
4. Перевантаження підписників → throttling або debounce потрібні.
5. Несинхронність між видавцем і підписником → використання async/await.
6. Підписник отримує помилку → обробка через catch у RxJS.
7. Підписник отримує duplicate → використання distinctUntilChanged.
8. Публікація в циклі → перевірка на рекурсію.