Change Detection в Angular — тригери, OnPush, Signals і Zoneless

✅Запрошуємо на курс 👉Angular. Подробиці та реєстрація - https://edu.cbsystematics.com/ua/cour... «Change Detection — це серце Angular. Без нього фреймворк втрачає сенс». Дмитро Охріменко Change Detection відповідає за автоматичну синхронізацію стану компонентів із DOM, щоб інтерфейс завжди відображав актуальні дані без ручного керування оновленнями. Без розуміння цього механізму складно свідомо вирішувати проблеми з продуктивністю та неочікуваною поведінкою UI. На вебінарі ми розберемо, як працює Change Detection в Angular і чому його розуміння критично важливе для стабільної та продуктивної роботи застосунків. Почнемо з базової логіки синхронізації компонентів із DOM, щоб сформувати чітку ментальну модель того, як Angular знаходить і оновлює зміни. Розглянемо основні тригери детекції змін — DOM-події, асинхронні операції та роль Zone.js. З’ясуємо, чому Change Detection інколи запускається занадто часто і як це впливає на продуктивність. Також поговоримо про стратегію OnPush і сучасний підхід Angular 18+ — zoneless та local change detection. Наприкінці сформуємо набір практичних рекомендацій для побудови ефективних застосунків і визначимо роль signals та інших сучасних інструментів у роботі з Angular. Спікер: Дмитро Охріменко — co-founder CyberBionic Systematics / ITVDN, Microsoft Certified Trainer, автор відеокурсів ITVDN. План вебінару Вступ: навіщо взагалі розуміти Change Detection Як Angular синхронізує компоненти та DOM Тригери детекції змін і як вони спрацьовують Стратегія OnPush Zoneless та Local Change Detection Куди рухається Angular Практичні рекомендації Для кого цей вебінар Frontend-розробників, які працюють з Angular Angular-розробників рівня Junior+/Middle, що хочуть краще розуміти внутрішню кухню фреймворку Тих, хто стикався з проблемами продуктивності або «дивною» поведінкою UI Розробників, які хочуть освоїти сучасні підходи: OnPush, signals, zoneless Усіх, хто прагне писати швидші та стабільніші Angular-застосунки Матеріали доступні за посиланням👉 https://t.me/cbs_events_bot?start=69a... Вступ та теоретичні основи 00:00:05 — Вітання, перевірка зв'язку та знайомство з автором (Дмитро Охріменко). 00:03:28 — План вебінару: від Zone.js до Zoneless та сигналів. 00:06:28 — Що таке Change Detection: загальний опис механізму синхронізації стану та UI. 00:10:06 — Алгоритм обходу дерева компонентів Angular. 00:22:52 — Роль Zone.js: як бібліотека відстежує асинхронні операції через "monkey patching". Практика: Робота з Change Detection 00:12:59 — Створення тестового проекту на Angular 20 для демонстрації стандартної поведінки. 00:17:45 — Огляд інструменту Angular Dev Tools: використання профайлера для відстеження запусків пошуку змін. 00:20:34 — Чому Change Detection запускається занадто часто (приклади з setInterval). 00:27:47 — Аналіз структури коду демонстраційного застосунку з таблицею даних. Оптимізація та стратегія OnPush 00:36:16 — Основні проблеми продуктивності та шляхи їх вирішення. 00:38:36 — Стратегія OnPush: як вона працює та чому стає стандартом в Angular 21. 00:39:50 — 5 критеріїв перевірки OnPush-компоненту (Immutable bindings, DOM events, markForCheck, AsyncPipe, Signals). 00:45:55 — Проблема мутації даних: чому OnPush не бачить змін всередині об'єктів. 00:56:37 — Використання ChangeDetectorRef.markForCheck() для ручного керування. 00:52:43 — Переваги AsyncPipe для автоматичного тригеру оновлень. Новітні підходи: Signals та Zoneless 00:56:03 — Angular Signals: створення сигналу та зміна його стану через set()/update(). 01:04:02 — Концепція Zoneless Angular: відмова від Zone.js для підвищення продуктивності. 01:06:26 — Налаштування provideZonelessChangeDetection() в Angular конфігурації. 01:09:51 — Local Change Detection: як оновлювати лише один компонент без обходу всього дерева. 01:16:18 — Огляд нового Signal Components API: input(), output(), model(), effect(). Питання та відповіді 01:18:53 — Поетапна міграція на OnPush та Angular 21. 01:19:33 — Різниця між markForCheck() та detectChanges(). 01:21:49 — Про інтерцептори та обробку помилок. 01:24:41 — Коли використовувати runOutsideAngular() для оптимізації важких подій. 01:26:53 — Чому в Zoneless-режимі не потрібен runOutsideAngular. Цей вебінар допоможе вам зрозуміти еволюцію механізмів відстеження змін в Angular та підготуватися до використання сучасних інструментів, таких як сигнали та zoneless-режим.