Найкращі практики: побудова кутових сервісів за допомогою шаблону дизайну фасадів для складних систем

Кутові послуги

Концепція кутових послуг завжди плутає новачків із сервісами REST на стороні сервера. Якщо ви все ще не впевнені, що це таке, я порекомендую вам прочитати документацію Angular

Кутові служби несуть відповідальність за надання даних про додатки / логіку бізнесу компонентам. Компоненти повинні приймати / надавати дані для обслуговування та функціонувати як клей між поданням та службою. Це служба, яка може вирішити, чи надавати макетні дані або перейти на сервер та отримати дані з бази даних / файлів / іншої послуги тощо.

В ідеалі послуги повинні бути орієнтовані на особливості. У вас є вибір створити гігантський сервісний клас або колекції мікропослуг. При першому підході має бути лише одна послуга, яка містить всю ділову логіку і надається за допомогою кутового введення залежності у всіх компонентах системи. Проблема при такому підході полягає в тому, що гігантський клас обслуговування в кінцевому підсумку стане роздутим провідним питанням ефективності. Кожен компонент повинен отримувати послуги та функціональні можливості, які зовсім не потрібні споживчому компоненту. Ви вважаєте, що це добре?

При другому підході (дотримується широко), будується особлива функція мікро-сервісу. Наприклад, якщо у вашій системі є компоненти Login, SignUp, Dashboard, ви повинні побудувати LoginService, SignUpService, DashboardService тощо. Кожна служба повинна містити функціональні можливості, необхідні для конкретного цільового компонента. Тепер ця конструкція виглядає добре, чи не так?

Проблема?

Під час створення великих та складних додатків для однієї сторінки за допомогою Angular ви незабаром закінчите сотні та тисячі класів компонентів. Сказавши це, у вас буде введена аналогічна кількість послуг Angular. У чому тут проблема?

Незалежно від того, наскільки добре домовленості ви дотримуєтесь для складання компонентів та служб, потрібен час, щоб визначити конкретну назву послуги для конкретного класу. Крім того, ви можете записати дублікат сервісного класу з дещо іншою назвою для того ж компонента, ніж інша команда. Якщо ви працюєте в моделі екстремального програмування, ваші розробники інтерфейсів повинні продовжувати перемикатися між модулями / компонентами / функціями. Їм не потрібно забирати багато часу, щоб з'ясувати пов’язані компоненти та послуги.

Рішення

Ми можемо вирішити цю проблему за допомогою шаблону дизайну фасадів.

Шаблон дизайну фасаду

Фасад обговорює інкапсуляцію складної підсистеми в межах одного інтерфейсного об'єкта. Це зменшує криву навчання, необхідну для успішного використання підсистеми. Він також сприяє від'єднанню підсистеми від потенційно багатьох клієнтів.

Об'єкт "Фасад" повинен бути досить простим адвокатом чи фасилітатором. Він не повинен ставати всезнаючим оракулом чи «богом» об’єктом.

Ось хороше прочитання деталей для дизайну фасадів у деталях

Шаблон дизайну фасаду

Фасад в дії з кутовими сервісами

Я рекомендую виконати наступні кроки для створення кутових служб за допомогою фасадної схеми:

Визначте всі свої послуги Angular відповідно до вимог вашого бізнесу та / або продовжуйте додавати більше, якщо потрібно.

Створіть послугу під назвою «FacadeService» (сміливо використовуйте тут будь-яке інше ім’я)

Створіть загальний NgModule та надайте всі послуги Angular

Реалізація послуги фасаду

Наша основна дискусія стосуватиметься лише послуги «FacadeService».

Ми обговорили два підходи до гігантського сервісу проти мікросервісу. Ми бачили їх плюси і мінуси. Найкращим рішенням є об'єднання обох для створення сервісного фасаду. Тепер клас FacadeService буде класом God, але він не матиме фактичної функціональності, а не обгортку над фактичними послугами.

FacadeService об'єднує всі послуги Angular у межах зазначеної системи. Один простий підхід - ввести всі конструктори всередині FacadeService в конструктор. Але якщо ми це зробимо, ми закінчимось подібною проблемою, як і у гігантського сервісного класу.

Розумнішим способом було б об'єднати всі кутові сервіси всередині FacadeService та вирішити їх екземпляри з кутового DI всередині доступу "власності".

Давайте обговоримо використання AccountService.

У нас є властивість, яка називається accountService всередині FacadeService. getOrderList () і getAddress () функції FacadeService працюють як обгортки для фактичних методів accountService.

Кожен раз, коли доступ до учасника accountService має бути виконаний, його блок властивостей get буде виконуватися. Всередині блоку отримання, ми перевіряємо, чи є резервне поле _accountService екземпляром. Якщо ні, ми просимо інжектор кутових залежностей вирішити екземпляр для нас.

Щоб отримати доступ до двигуна Angular DI, нам потрібно ввести вбудований сервіс Inejctor Angular всередині конструктора FacadeService. injector.get () запитує механізм DI Angular, щоб вирішити запитуваний екземпляр служби, якщо він надається. (Пам'ятаєте SharedModule, де ми надавали всі послуги?)

Якщо ви уважно спостерігали, ми впровадили схему дизайну Singleton, а також всередині отримайте розділ властивостей властивості accountService.

Споживання фасадуПослуга всередині компонентів

У нас є агрегація AccountService всередині FacadeService, і вона готова до споживання всередині OrderComponent та AddressComponent.

Оздоблення системи, що залишилася

На аналогічній примітці щодо використання accountService ви можете закінчити реалізацію інших кутових послуг всередині FacadeService.

Реалізація схеми дизайну фасаду в кутових сервісах

Демонстраційна демонстрація:

Репозиторій GitHub:

Підсумок

Шаблон дизайну фасаду допомагає нам будувати складні програми Angular, забезпечуючи спрощений доступ до багатьох складних кутових мікро-сервісів.

Ура!