Модуль 3 · урок 11 з 11

Практика модуля

Практика модуля: каркас із модуля 2 перетворюється на справжній дашборд. Даних усе ще немає — вони прийдуть у модулі 4, — тому працюємо на кількох захардкоджених масивах. Мета не в наповненні, а в структурі й у тому, щоб усе було швидким.

КРОК 1Оболонка на 100dvh

Перероби кореневий шаблон на сітку з областями header / aside / main висотою 100dvh. Рядок і колонка з контентом — minmax(0, 1fr). Сторінка не має скролитись узагалі: перевір це, накидавши тимчасово багато вмісту.

КРОК 2Три панелі

Зроби компонент app-pane зі слотами: шапка, тіло, підвал. Тіло — з власним overflow-y: auto. Збери з нього екран дашборду: зведення, список, деталі. Заголовки панелей однакової висоти через змінну.

КРОК 3OnPush скрізь

Постав ChangeDetectionStrategy.OnPush усім компонентам і явну ViewEncapsulation. Перевір, що ESLint-правило з модуля 2 нічого не знаходить. Там, де щось перестало оновлюватись, шукай мутацію — не додавай detectChanges.

КРОК 4Розділити ролі

На екрані списку має бути рівно один container: він інʼєктує сервіс, тримає фільтри в сигналах і рахує похідні через computed. Усі інші компоненти екрана — presentation: лише input() і output(), жодного inject сервісів. Масиви приймай як readonly.

КРОК 5Незмінні оновлення

Усі дії — додати, змінити статус, видалити — реалізуй через створення нових масивів. Перевір найважливіше: після зміни одного елемента решта обʼєктів мають лишитись тими самими (порівняй посилання в консолі). Це і є те, що робить таблицю швидкою.

КРОК 6Токени й тема

Розклади змінні на три рівні: примітиви, семантичні, компонентні. Жоден компонент не повинен містити конкретного кольору. Перемикач теми з модуля 1 має працювати без жодних змін у компонентах. Хоча б один компонент зроби налаштовуваним ззовні через власну CSS-змінну.

КРОК 7Виміряти

Постав Angular DevTools. Запиши профіль під час руху миші над списком. Тимчасово прибери OnPush з одного компонента, запиши ще раз — і порівняй. Збережи обидва скріншоти: це найкращий доказ на демо.

Модуль зараховано, якщо

Дашборд із кількох панелей, сторінка не скролиться — скролиться вміст панелей.
Усі компоненти на OnPush, ViewEncapsulation вказана явно.
На екрані рівно один container, решта — presentation без інʼєкцій.
Усі оновлення незмінні; незмінені елементи зберігають посилання.
Жодного кольору в компонентах — тільки токени; тема перемикається.
Нуль ::ng-deep і нуль detectChanges().
Є профіль до й після — з різницею, яку видно.

Що сказати ліду на демо

«Оболонка — grid на 100dvh з minmax(0, 1fr), тому скрол локальний у кожній панелі, а не в сторінки. Усі компоненти на OnPush: на екрані один container, який тримає стан у сигналах, решта — presentation з readonly input. Оновлення незмінні, тож при зміні одного рядка перемальовується саме він — ось профіль до і після. Стилі повністю на токенах, ::ng-deep немає ніде.»

Далі — модуль 4, найбільший у плані. Там застосунок нарешті отримає дані: сервіси з моками за контрактом, RxJS, стан на Subject'ах і відписки без витоків. Перед тим варто закрити цю практику: у модулі 4 буде важко, якщо структура компонентів іще не влаштована.

≈ 240 хв · +25 XP за урок