CodeFest 2018. James Akwuh (Adform) — DI: DIY

Посмотрите выступление James: https://2018.codefest.ru/lecture/1272/

В сообществе JS редко обсуждают паттерн Dependency Injection, хотя он является одним из самых важных блоков в построении архитектуры большого приложения. Я всегда восхищался реализацией DI в Java-фреймворке Spring, и последние два года неоднократно пытался реализовать аналогичный подход. Наконец, получилось.

В докладе мы рассмотрим следующие вещи:
— Что такое DI и какое место он занимает в архитектуре приложения?
— Как правильно использовать DI?
— Насколько простым может быть DI в JS?
— Чего можно добиться с помощью Decorators Metadata в TS?— Примеры.

Transcript

1. DI: DIY DI: DIY James Akwuh, Team Lead @ Adform 1
2. Часть 1. Проблема Часть 1. Проблема 2
3. Задача: Задача: Сделать страницу для Сделать страницу для отображения оффера отображения оффера 3
4. class OfferController { showOffersPage() { fetchOffer(id).then(offer => { const offerView = new OfferView({ model: offer, user: this.appUser }) this.layout.getRegion('main').show(offerView) }); } // ... } 4
5. class OfferComponent extends React.Component { componentDidMount() { const {dispatch, query: {offerId}} = this.props dispatch(fetchOffer(offerId)) } // ... } 5
6. class OfferComponent extends React.Component { static async getInitialProps({ req }) { return fetchOffer(req.query.id).then(offer => { return {offer} }) } // ... } 6
8. Задача: Задача: Добавить информацию о Добавить информацию о реферальной программе реферальной программе 8
9. static async getInitialProps({ req }) { const offerPromise = fetchOffer(req.query.id) const programPromise = fetchUser() .then(user => fetchReferralProgram(user)) return Promise.all([offerPromise, programPromise]) .then(([offer, program]) => { return {offer, program} }) } 9
10. static async getInitialProps({ req }) { const user = await fetchUser() const offerPromise = fetchOffer(req.query.id, user) const programPromise = fetchReferralProgram(user) return Promise.all([offerPromise, programPromise]) .then(([offer, program]) => { return {offer, program} }) } 10
12. Задача: Задача: Показать уведомление Показать уведомление при нажатии на кнопку при нажатии на кнопку 12
13. import {Notifications} from ‘Notifications’ // ... showNotification() { let notifications = Notifications.getInstance() // ... } 13
14. Недостатки Недостатки Размытая логика Плохая модульность Необходимость управлять жизненным циклом 14
16. NodeJS? NodeJS? 16
17. class NotificationSender { constructor() { this.mailsender = new MailSender(globalConfig) } } 17
18. class NotificationSender { async constructAsyncDependencies() { this.mailsender = await MailSender.asyncFactory(globalConfig) } } 18
19. И так сойдет И так сойдет 19
20. Часть 2. Решение Часть 2. Решение 20
21. IoC IoC is for is for Vendetta Vendetta Vendetta Vendetta Inversion of Control Inversion of Control 21
22. class OfferComponent extends React.Component { static async getInitialProps({ req }) { return fetchOffer(req.query.id).then(offer => { return {offer} }) } // ... } 22
23. Service Locator Service Locator 23
24. import Database from 'interfaces' class UserRepository { constructor(locator) { this.database = locator.get(Database) // ... } } 24
25. import Database from 'interfaces' import DatabaseSymbol from 'symbols' locator.set(MongoDB, MongoDB.factory) locator.set(Database, MongoDB.factory) locator.set('database', MongoDB.factory) locator.set(DatabaseSymbol, MongoDB.factory) 25
26. ✅ Легко реализовать ✅ Легко реализовать 26
27. class ServiceLocator { factories = new Map() // Usage: locator.set(Database, MongoDB.factory) set(token, factory) { this.factories.set(token, factory) } // Usage: locator.get(Database) get(token) { return this.factories.get(token)(this) } } 27
28. ✅ Отложенная ✅ Отложенная инициализация инициализация 28
29. class UserRepository { constructor(locator) { this.locator = locator } findAll() { if (!this.database) { this.database = this.locator.get(Database) } // ... } 29
30. ✅ Учитывает контекст ✅ Учитывает контекст 30
31. locator.set(Database, MySqlDB.factory) locator.context(Logger).set(Database, MongoDB.factory) // locator.get(Logger) << MongoDB 31
32. ✅ Удобно тестировать ✅ Удобно тестировать 32
33. // UserRepository.spec.js locator.set(Database, () => mockDatabase) const repository = locator.get(UserRepository) repository.findAll().then(() => { expect(mockDatabase.lastQuery) .toEqual('select * from ...') }) 33
34. Провоцирует нарушать закон Деметры Не обеспечивает полную модульность Недостатки Недостатки 34
35. Dependency Injection Dependency Injection 35
36. class UserRepository { constructor(database) { this.database = database // ... } } 36
37. ✅ Плюсы ✅ Плюсы Помогает соблюдать закон Деметры Обеспечивает полную модульность Делает модуль самодокументируемым 37
38. Конфигурация? Конфигурация? 38
39. Часть 3. История Часть 3. История 39
40. ftdebugger/di.js ftdebugger/di.js 40
41. { "UserRepository": { "id": "UserRepository", "factory": "factory" "update": "updateDependencies" "dependencies": { "database": "MongoDB.factory" } }, // ... 41
42. Недостатки Недостатки Монолитный конфигурационный файл Строки в качестве токенов Запрет на коллизии в именах классов 42
43. @Component public class Company { private Employee employee; @Autowired public Company(Employee employee) { this.employee = employee; } } 43
44. jakwuh/babel-plugin- jakwuh/babel-plugin- extract-dependency- extract-dependency- definitions definitions 44
45. @AutoInject() class UserRepository { updateDependencies({Database: database}) { } } 45
46. Object.defineProperty(exports, "__diDefinitions", { value: { "UserRepository": {"database": "Database"}, // ... } }) 46
47. Недостатки Недостатки По-прежнему строки По-прежнему коллизии Требует настройки вебпака 47
48. И так сойдет И так сойдет 48
49. typestack ♥ typestack ♥ 49
50. ⬇ typestack ⬇ typestack routing-controllers class-validator typedi 50
51. export class ZoneCreateParams { @Length(1, 250) name: string } export class ZoneController { @Inject() public zoneRepository: ZoneRepository; @Post('/zones') @Authorized() async create(@Body() body: ZoneCreateParams, @CurrentUser({required: true}) currentUser: User) return this.zoneRepository.createZone(body, currentUser) } 51
52. typedi typedi 52
53. @Component public class Company { private Employee employee; @Autowired public Company(Employee employee) { this.employee = employee; } } 53
54. @Service() class Company { constructor(private employee: Employee) { } } 54
55. @Service({factory: Employee.factory}) class Employee { static factory(): Employee { // ... } } 55
56. Асинхронные фабрики? Асинхронные фабрики? 56
57. { emitDecoratorMetadata: true // ... } Size: + 3% 57
58. UserRepository = __decorate([ Decorate(), Reflect.metadata("design:paramtypes", [Database]) ], UserRepository); @Decorate() class UserRepository { constructor(database: Database) { } } 58
59. class UserRepository { @Decorate() method(database: Database) { } } __decorate([ Decorate(), Reflect.metadata("design:type", Function), Reflect.metadata("design:paramtypes", [Database]), Reflect.metadata("design:returntype", void 0) ], UserRepository.prototype, "method"); 59
60. // container.get(UserRepository) const neededTokens = Reflect.getMetadata('design:paramtypes', UserRepository) const args = neededTokens.map(token => container.get(token)) return new UserRepository(...args) 60
61. jakwuh/typedi jakwuh/typedi 61
62. // container.get(UserRepository) const neededTokens = Reflect.getMetadata('design:paramtypes', UserRepository) const args = await Promise.all( neededTokens.map(token => container.get(token))) return new UserRepository(...args) 62
63. Часть 4. Итог Часть 4. Итог 63
64. DI DI 64
65. Зачем? Зачем? 65
66. class Props { @Inject() currentUser: CurrentUser; @Inject(() => AbstractRouter) router: AbstractRouter; @Inject() zones: CurrentZones; } export class HomeContainer extends React.Component<Props> { constructor(props: Props) { // ... 66
67. Как? Как? 67
68. 1. github.com/typestack/typedi 2. github.com/jakwuh/typedi 3. Profit 4. DM me for demo 68
69. И так сойдет И так сойдет 69
70. Вопросы? Вопросы? jakwuh jakwuh jakwuh slides.com/jakwuh/di-diy 70