NEW BOT Телеграм, страница

Одна из ключевых особенностей

tramvai

- Dependency Injection.
Встроенный механизм внедрения зависимостей позволяет собирать приложений из модулей как конструктор из кубиков, и при хорошем проектировании модулей, открывает потрясающие возможности для расширения или замены возможностей в нашем приложении.

Dependency Injection все активнее используется в мире фронтенда, но как мне кажется, ассоциируется только с Angular или Nest.js.
При этом увидеть использование DI контейнеров в React приложениях можно гораздо реже.
Учитывая активное развитие SSR приложений, меня даже немного удивляет, что этот паттерн не получил широкое распространение, далее постараюсь объяснить почему.

Несколько лет назад я занимался разработкой базовой инфраструктуры для миграции PHP приложения (с классической связкой - шаблонизатор на сервере и React на клиенте) на универсальное React приложения (SSR на NodeJS), в онлайн кинотеатре ivi.ru.
Начиная запускать код существующего клиентского JS приложения на сервере, сталкиваешься с рядом проблем, основная из которых - "универсальность" кода, т.е. насколько код сильно завязан на окружение, в котором будет выполняться.
Т.е. все обращения к

location

, работа с

localStorage

, чтение

cookies

, не должны происходить на сервере, либо должны содержать проверки на окружение, и например читать куки не из

document.cookies

, а из

req.cookies

, если мы используем

express

на сервере.

Как раз в это время я читал замечательную книгу "Шаблоны проектирования Node.JS", в которой познакомился с Dependency Injection и его реализациями в виде DI container или Service Locator. К слову, раньше мне очень трудно давалось понимание этого паттерна)
В какой-то момент в голове сложились все паззлы, и пришло понимание что DI дает нам очень удобную абстракцию для универсального кода, и лучше всего рассмотреть это на примере работы с

cookies

.

Для начала, пример итогового использования сервиса:


// создадим общий контейнер зависимостей 
const di = createContainer(); 
 
// опишем интерфейс сервиса для работы с куками 
interface CookieService { 
  get(key): string; 
  set(key, value, options): void; 
} 
 
// React компонент, который завязан только на интерфейс, но не на реализацию 
const Component = ({ cookieKey }) => { 
  // не важно, на сервере или на клиенте будет отрендерен компонент, 
  // главное что бы в di была подходящая реализация сервиса 
 const cookieService = useDI<CookieService>('cookie service'); 
 
 const cookieValue = cookieService.get(cookieKey); 
 
  return ...; 
}

Далее, напишем реализации интерфейса CookieService:


// серверная реализация, работает с объектом Request 
class ServerCookieService implements CookieService { 
 constructor(request: Request) {} 
 get(key) { ... } 
 set(key, value, options) { ... } 
} 
 
// серверная реализация, работает с document.cookie 
class ClientCookieService implements CookieService { 
 constructor() {} 
 get(key) { ... } 
 set(key, value, options) { ... } 
}

И остается только зарегистрировать нужные реализации в подходящем окружении:


// server.js 
// получаем зависимость 
const request = di.get('request'); 
// регистрируем зависимость на сервере 
di.provide('cookie service', new ServerCookieService(request)); 
 
// client.js 
// регистрируем зависимость на клиенте 
di.provide('cookie service', new ClientCookieService());

Таким образом мы можем практически полностью избавиться от постоянных проверок в коде на текущее окружение.
Также, мы можем изолировать DI на разные запросы в приложение, и использовать уникальные Request и Response, создавая отдельный DI контейнер на каждый запрос.

Другая фича, которую дает DI, и которая реализована в Angular, Nest.js и tramvai - это возможность расширения приложения отдельными модулями, дополняющими приложение конкретным функционалом с помощью набора токенов и провайдеров (интерфейсы и реализации зависимостей).
Если посмотреть на другие фронтенд фреймворки, можно увидеть разные механизмы для расширения кода - системы плагинов, огромные файлы конфигураци, или паттерн middleware.

336 viewsedited 19:59