Использование наработок и компонентов между Angular и React: Как объединить два мира

Современная разработка фронтенда редко бывает полностью однородной. Реальные проекты зачастую тянут за собой технический «шлейф» из различных технологий: где-то старые модули написаны на AngularJS, где-то — новая часть построена на React, а кое-где приходится поддерживать и то, и другое. Особенно это актуально для крупных компаний и продуктов, эволюционирующих годами.

В таких условиях логично задаться вопросом: можно ли переиспользовать компоненты, стили и наработки между Angular и React? Ответ: частично — да. При правильной архитектуре и умеренной абстракции можно добиться неплохой степени переиспользования.

Причины, по которым возникает необходимость совмещения

1. Плавный переход от одного фреймворка к другому Например, переписываем старый Angular (v1 или даже v2+) проект на React — не можем сразу всё заменить.
2. Разные команды/продукты в компании используют разные технологии, но при этом хотят использовать общий дизайн-систему или UI-библиотеку.
3. Переиспользование бизнес-логики — формы, валидации, утилиты, API-слои.

Что можно переиспользовать между Angular и React

✅ 1. CSS/SCSS/Design Tokens

Стилевые решения — это первое, что можно и нужно выносить в общие слои:

• CSS-модули или SCSS-переменные с токенами (цвета, отступы, брейкпоинты)
• Общие mixin'ы, переменные тем и сеток
• Подключение общего style-пакета через NPM (@company/ui-theme)

📌 Важно: Оба фреймворка позволяют импортировать CSS-файлы и использовать предсобранные стили, поэтому здесь переиспользование работает почти "из коробки".

✅ 2. Утилиты и бизнес-логика (JS/TS)

Функции валидации, преобразования данных, работы с датами, парсеры, API-обёртки и т.д. легко выносятся в отдельные пакеты:

• @company/utils
• @company/api-client
• @company/forms

Такие библиотеки пишутся на чистом TypeScript/JavaScript и могут быть переиспользованы в любом окружении: Angular, React, Node.js, etc.

⚠️ 3. Компоненты UI

Здесь всё сложнее. React и Angular используют разные модели рендеринга и жизненного цикла, но всё же есть несколько подходов.

Подход 1: Web Components (Custom Elements)

React и Angular поддерживают стандарт Web Components, что даёт способ создавать фреймворк-независимые компоненты.

Пример:

• Создаём компонент с помощью Angular Elements или Stencil.js
• Получаем <my-button></my-button> — нативный тег
• Используем его в React, как обычный DOM-элемент

Плюсы:

• Высокая степень изоляции
• Поддержка нативными API

Минусы:

• Не всегда тривиальная интеграция со стилями и событиями
• Проблемы с SSR и hydration в React

Подход 2: Инкапсуляция React внутри Angular и наоборот

Можно внедрить React-компонент в Angular через react2angular или Angular в React через angular2react.

Пример использования:

import { react2angular } from 'react2angular';
import MyReactComponent from './MyReactComponent';

angular.module('app').component('myReactWrapper', react2angular(MyReactComponent, ['prop1']));

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

Как организовать общую дизайн-систему

1. Выносим тему и стили в отдельный UI-kit Например, @company/ui-core, где: SCSS токены UI-иконки (например, через react-icons и @angular/material/icon) Стилевые гайды и документация
2. Разделяем UI-слой и логику от реализации компонентов

Идеально — разработка одинаковых по API компонентов в разных реализациях:

• Button на React
• Button на Angular Обе используют одни и те же токены, переменные, стили и иконки.

1. Storybook/Styleguidist/Docs — создаём общую документацию, показываем реализацию компонентов в двух фреймворках.

Практика: единая структура репозитория

Чтобы добиться максимального переиспользования, можно организовать проект как monorepo с помощью инструментов:

• Nx — поддерживает и React, и Angular
• Turborepo
• Lerna

Структура может выглядеть так:

/packages 
/ui-core - CSS/SCSS токены 
/utils - общие утилиты 
/api-client - SDK 
/react-ui - компоненты React 
/angular-ui - компоненты Angular 
/apps 
/admin-react 
/dashboard-angular

Реальные кейсы

1. Design System — компания создала UI-кит на Web Components с использованием Stencil. Компоненты используются как в Angular-приложениях, так и в React-платформах, полностью совместимы и стилизуемы.
2. Переход с Angular на React — крупный enterprise-продукт инкапсулировал старые Angular-компоненты и постепенно заменяет их на React, при этом общие стили и утилиты уже вынесены в пакеты.
3. Универсальный форм-движок — разработка бизнес-форм на JSON-описаниях, где рендер зависит от платформы: одна и та же схема используется и в Angular, и в React UI, благодаря универсальной логике.

Вывод

Полная совместимость Angular и React невозможна из-за фундаментальных различий в архитектуре. Однако при правильной модульности, разделении слоёв и использовании современных инструментов, можно добиться высокой степени переиспользования:

• Стили и темы — легко
• Утилиты и логика — просто
• Компоненты — возможно, но с ограничениями

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