Построение Библиотек Компонентов И Их Организация. Или Как Получить Максимальную Отдачу От Вашего Бизнеса С Помощью React И Angular

Наша компания разрабатывает десятки продуктов.

Ряд продуктов работает на Angular, некоторые — на React. Пользователи системы в зависимости от стадии бизнес-процесса и роли взаимодействуют с конкретным приложением.

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

Эти данные отображаются как компоненты пользовательского интерфейса.

В этой статье мы узнаем, как организовать библиотеки компонентов для решения бизнес-задач.

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

Допустим, у нас есть 10 приложений.

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

• Полное имя
• Контактный номер
• Почта
• Количество транзакций
• Список тегов (новый пользователь, постоянный клиент)

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

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

Что происходит во время модификаций:

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

Выполните те же действия N раз.

Второй сценарий развития (частый сценарий) Разделение на пакетную базу React и Angular. Это более позитивный сценарий.

В данном случае имеется некоторый UIKit для двух инструментов внешнего интерфейса.

Работа будет сводиться к следующим действиям:

• Доработка компонента в React
• Публикация пакета React
• Обновление зависимостей в приложениях React
• Дорабатываем компонент в Angular
• Публикация пакета в Angular
• Обновление зависимостей в приложениях Anguar

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

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

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

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

При использовании сторонних библиотек, как и в этом подходе, важно запускать их через запуститьOutsideAngular чтобы уменьшить количество вызовов обнаружения изменений при работе с компонентом 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 {
 

   

• Управление Репутацией В Интернете С Помощью Агентства Интерактивного Маркетинга

  19 Oct, 24

• Домен Рф – Всероссийская Истерия, Регистратор Ликует

  19 Oct, 24

• 23 Лазерных Реинкарнации, Которые Окружают Нас В Повседневной Жизни

  19 Oct, 24

• Университет Или Техникум: Куда Поступить, Чтобы Успешно Найти Работу И Хорошо Зарабатывать?

  19 Oct, 24

• Суперкомпьютер За $1256

  19 Oct, 24

• Anonymous Начали Мстить Megaupload

  19 Oct, 24

• Атака На Твиттер: Шаг За Шагом

  19 Oct, 24

• Нигерийский «Принц» Заработал На Доверчивых Минчанах

  19 Oct, 24

• Линкбилдинг Для Bing – Отличие От Google И Важные Нюансы

  19 Oct, 24

• Bit.ly Продолжает Расти

  19 Oct, 24