Построение библиотек компонентов и их организация. Или как извлечь максимальную пользу для бизнеса c React и Angular

Наша компания разрабатывает десятки продуктов. Ряд продуктов работает на Angular, ряд на React. Пользователи систем в зависимости от этапа бизнес-процесса и роли взаимодействует с определенным приложением. Часто, в рамках бизнеса мы должны показывать одни и те же данные в разных местах. Эти данные отображаются в виде UI компонентов.

В этой статье мы узнаем как можно организовать библиотеки компонентов для решения задач бизнеса. Научимся переиспользовать и запускать React компоненты внутри Angular. Таким способом мы сможем решать задачи бизнеса гибко и эффективно.

Допустим у нас есть 10 приложений. 3 на React, 7 на Angular. Мы выводим на экран информацию о пользователе в красивом компоненте:

• ФИО

• Контактный телефон

• Почта

• Число сделок

• Список меток (новый пользователь, частый клиент)

Через месяц приходит бизнес и ставит задачу добавить еще 1 поле в компонент.

Первый сценарий развития (да, такое бывает — дикий запад)

Команды разрознены. Каждая из них разрабатывает свое приложение и держит компоненты прямо в проекте. Что происходит при доработках:

• Заходим в каждый проект в отдельности и дорабатываем компоненты

Получается достаточно накладно по времени. Совершить одни и те же действия N раз.

Второй сценарий развития (частый сценарий)

Деление на React и Angular пакетную базу. Это более позитивный сценарий. В этом случае есть некий UIKit для двух фронтенд инструментов. Работа будет сводиться к следующим действиям:

• Дорабатываем компонент на React

• Публикуем React пакет

• Обновляем зависимость в React приложениях

• Дорабатываем компонент на Angular

• Публикуем пакет на Angular

• Обновляем зависимость в Anguar приложениях

Действий уже меньше, но приходится делать 2 реализации одного компонента, плюс поддержка разных репозиториев.

Третий подход о котором я расскажу: основной пакет — много приложений

Его подход заключается в следующем:

• Пишем компонент на React

• Добавляем Angular прослойку для React компонента (прокидываем props через Input декораторы) — проект library.

• Одной командой публикуем 2 пакета

• Обновляем приложения

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

Код компонента Angular использующий React:

При использовании сторонних библиотек, как в этом подходе, важно запускать их через runOutsideAngular, чтобы сократить число вызовов обнаружения изменений при работе с React компонентом.

import { AfterViewInit, Component, Input, NgZone, OnChanges, OnInit } from '@angular/core'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import Avatar, { ReactAvatarProps } from 'react-avatar';  @Component({   selector: 'app-ng-avatar',   templateUrl: './ng-avatar.component.html' }) export class NgAvatarComponent implements OnChanges, AfterViewInit { containerId: string = 'avatar-xxxxxxxx'.replace(/[x]/g, c => (Math.random() * 16 | 0).toString(16));      @Input()   name: string = '';   @Input()   round: string = '';   @Input()   color?: string = undefined;    constructor(private _ngZone: NgZone) { }    ngOnInit() {   }   ngAfterViewInit() {     this.render();   }    ngOnChanges() {       this.render();   }    render = () => {     const props: ReactAvatarProps = {       name: this.name,       round: this.round,       color: this.color     };      if (document.getElementById(this.containerId)) {       this._ngZone.runOutsideAngular(       () => {           ReactDOM.render(React.createElement(Avatar, props),             document.getElementById(this.containerId)           );         }       );     }   } } 

Результат работы:

Плюсы для бизнеса

• Более быстрое получение UI фичи

• Меньше времени на синхронизацию команд

• Единый стиль в продуктах

Плюсы для команд

• Экспертиза в разных инструментах

Заключение

Теперь у вас есть один из интересных подходов в организации библиотек. Такой вариант организации прекрасно подходит компаниям, которые знают, что их продукты работают и развиваются в долгосрочной перспективе.

Ссылка на Githib с примером
Ссылка на статью — создание библиотеки компонентов на примере иконок