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




Наша компания разрабатывает десятки продуктов. Ряд продуктов работает на 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)
          );
        }
      );
    }
  }
}

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

react-avatar in angular
react-avatar in angular

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

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

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

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

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

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

Заключение

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

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




Комментарии (18):