Протягом червня автор цього матеріалу разом з Waterplea щодня публікували корисні рекомендації для Angular-розробників. Спільнота активно відреагувала на такий челендж, тому публікуємо найпопулярніші поради за версією ком'юніті.
Створюйте токени для глобальних об'єктів
Найбільш популярна рекомендація стосувалась DI-токенів та глобальних об'єктів.
Фронтенд розробники звикли мати справу з глобальними об'єктами, доступними в будь-якій зоні видимості. Це всім відомі window, document, location, метод fetch тощо. Ми знаємо, що можемо звернутись до них будь-де.
Але ми забуваємо про середовища без браузера. Наприклад, в середовищах тестування Universal або Jest для Angular немає window чи DOM. Якщо у вас є токени для таких глобальних об'єктів, ви легко можете замінити їх для іншого середовища — і без проблем виконувати код.
Токенізуйте глобальні об'єкти та використовуйте їх з механізмом впровадження залежностей (пер. dependency injection). Сутності у вашому коді стануть більш абстрактними, їх буде простіше протестувати та замінити.
Базові токени для ваших застосунків за посиланням.
Якщо ви хотіли б поглибити власні знання про механізм впровадження залежностей в Angular, можете ознайомитись з матеріалом за посиланням.
Розширюйте Observable чи Subject
Автор бачив багато кодових баз, де сервіси чудово справлялись з однією функцією. Якщо ви використовуєте RxJS, сервіс може мати один Observable або один Subject і робити всю обробку даних для нього.
Ви можете спростити такий підхід, наслідуючи класи Observable або Subject:
Не забувайте, що сервіси Angular можуть наслідувати Observable. Адже це просто клас. Більше деталей про використання такого механізму в Web API для Angular за посиланням. У фрагменті коду вище наведена реалізація сервісу геолокації.
Контролюйте значення як ReplaySubject
Бувають ситуації, коли необхідно підписатися на оновлення valueChanges та контролювати це значення. Тут не потрібно винаходити велосипед — просто використайте таку обгортку:
Ви можете перетворити valueChanges у ReplaySubject за допомогою обгортки.
Зробіть ваш застосунок адаптивним для екранів з високим значенням DPI
Ви знаєте, що можна відстежити, чи екрани ваших користувачів мають високе значення DPI? Така інформація потрібна, щоб покращувати інтерфейс застосунку. А зробити це можна за допомогою нативних медіатегів:
Створіть структурну директиву в Angular для контролю контенту на екранах з високим DPI. Вона особливо зручна для відео або картинок.
Не забувайте про пайпи
Пайпи (канали або pipes) — дуже потужний декларативний інструмент для обробки значень всередині шаблона компонента. Не бійтесь створювати власні пайпи, адже з ними ви зможете зробити майже будь-які перетворення даних.
Приклад універсального пайпа:
Розглянемо пайп, який прийматиме чисту функцію, що перетворюватиме значення шаблону відповідно до користувацької логіки. Вище наведена можлива реалізація. Там Angular починає відстежувати зміни, лише коли змінюються параметри. Демо за посиланням.
Banana in a box
Надзвичайно корисний та зручний механізм в Angular, насамперед при роботі з ngModel. Як реалізувати його у власному компоненті?
Чи знаєте ви, як використати синтаксис «banana in the box» у вашому Angular-компоненті? Просто додайте Change в кінці output-змінної.
RxJS — незвіданий світ
Намагайтеся перевіряти всі параметри операторів RxJS, коли використовуєте їх. Існує багато можливостей зробити ваші потоки швидшими та більш потужними.
Не всі оператори популярні, але часто саме невідомі оператори можуть розв'язати вашу задачу одним рядком.
Для автора був знахідкою ось цей оператор:
RxJS має більше корисних інструментів, ніж вам здається. Не забувайте цікавитись всіма параметрами операторів. Вони можуть суттєво покращити ваш код. Наприклад, чи знали ви, що можна використати власну функцію compare в операторі distinctUntilChanged?
Ще один популярний твіт про RxJS. Невеликий трюк, щоб зробити ваші компоненти більш розширюваними.
Гарною практикою вважається робити приватними суб'єкти у публічних API, а також давати доступ користувачам класу до observable. Ви можете використовувати .pipe() замість .asObservable(). На виході отримаєте той самий результат, однак реалізацію з .pipe() простіше розширювати в майбутньому.
І ще трохи про RxJS: оператор, який допоможе створити невеликий .pipe() з надзвичайно потужним функціоналом.
Чи чули ви щось про оператор defaultEmpty? Він повертає автоматичне значення, якщо джерело потоку не повернуло жодного значення.
Користувацький ngFor
В Angular є спеціальний синтаксис для директив, подібних до for … of …. З ним ви можете створити ngFor для власних потреб.
Це може бути, наприклад, ngFor для ітерування словником. Або простий for для ітерації числами.
Ви можете зробити власну директиву, подібну до ngFor, і при цьому не використовувати масив. З нею можна створювати календарі, робити пагінацію або будь-що, де є повторювання певних чисел. Повний код за посиланням.
Ще немає коментарів