С React на Angular: как я перестраивал мышление и что из этого вышло
Обычно все пишут гайды про переход с Angular на React. Обратный путь почти никто не описывает, хотя он существует. Автор этой истории попал на проект, где система была слишком сложной для React, а Angular со строгой архитектурой подходил куда лучше. Так и начался переход, о котором он честно рассказывает.
Главный сдвиг в голове — перестать думать компонентами. В React каждый кусок интерфейса это функция с пропсами, вся логика и разметка лежат в одном файле. В Angular всё разложено по полочкам: отдельный HTML-шаблон, стили и TypeScript-класс, связанные декораторами. Поначалу это раздражает — даже маленькую SVG-иконку приходится разносить на три файла. Зато когда шаблон разрастается, работать с ним как с отдельным документом оказывается по-настоящему удобно.
Проект в Angular живёт по строгой иерархии: сначала библиотеки, внутри них фичи, и только внутри фич — компоненты. Вместо кастомных хуков для переиспользования логики здесь классическое наследование классов. Обновил базовый класс — изменения разошлись по всей иерархии дочерних сущностей.
Больше всего пугает RxJS. Вместо «запросил и получил» приходится подписываться на поток и реагировать на каждое изменение. Операторов там около полусотни, и чтобы читать чужой код, нужно знать хотя бы десяток-полтора. Сначала лезешь в документацию за каждым switchMap, потом появляется инстинкт — как с иностранным языком: сначала переводишь каждое слово, а потом начинаешь думать на нём.
Зато после принятия начинаешь замечать вещи, ради которых Angular стоит любить. Формы встроены в фреймворк — не нужно каждый проект выбирать между Formik и React Hook Form. CLI одной командой создаёт компонент и сам раскладывает файлы по проекту. А декоратор @HostBinding добавляет CSS-класс на хост-элемент одной строчкой вместо логики в JSX.
Самая противная часть — циклические зависимости. Сервис А тянет Сервис Б, тот ссылается обратно, и фреймворк указывает на совсем не ту причину. Можно убить полдня на поиск такого бага. Спасает Nx: команда nx dep-graph рисует карту связей проекта и подсвечивает закольцованные места красным.
Вывод у автора простой. React объективно удобнее для MVP, стартапов и лендингов — меньше формальностей, ниже порог входа. А вот для долгоживущей системы с крупной командой Angular практичнее: через год работы видно, сколько рутины он забирает на себя. Плюс понимание классов и dependency injection отлично переносится на бэкенд — тот же Spring Boot после Angular читается почти без акцента.
Обратный переход — редкая тема, про такое почти никто не пишет, так что за честный разбор спасибо. Но как скептик спрошу: что в итоге измеримо выиграли от строгой иерархии и наследования вместо хуков — скорость разработки, стабильность, онбординг? И отдельно про RxJS: полсотни операторов, из которых в реальности нужен десяток, — это же требование ко всей команде, а не только к автору.
Интересно, а как быстро привыкаешь к тому, что одна маленькая деталь разложена на три файла? Я как раз прицениваюсь к Angular после React, и этот момент пугает больше всего.
@Анна, к трём файлам привыкаешь быстрее, чем кажется — через пару недель перестаёшь замечать разбивку. Меня при переходе больше напрягал RxJS: в React-проектах мы обходились промисами, а тут потоки нужно собирать и не забывать про отписки. Зато когда шаблон начинает жить как отдельный документ, как описано в статье, возвращаться к JSX с вложенными тернарниками уже не хочется.
@Павел, а как у вас с типизацией в связке с RxJS? У нас на реактивных потоках чаще всего спотыкается вся команда — данные по цепочке операторов меняют форму, и вывод типов разъезжается. Или в Angular это решается нормально?
@Алексей, у нас вывод типов по цепочкам switchMap разъезжается редко, но пару раз ловили. Спасает, когда операторы выносишь в отдельные функции с явным типом возврата, плюс держим строгий режим в tsconfig. В остальном Angular с актуальным TypeScript тянет такие связки нормально, хотя типы в combineLatest иногда приходится прописывать руками.
@Анна, у нас на проекте тоже переходили на Angular, и к трём файлам привыкаешь где-то за месяц. Зато потом искать нужный кусок кода проще, чем в одной простыне из JSX.
А новичку такое осилить реально?
Интересно, а сколько времени ушло на то, чтобы привыкнуть к такому порядку? Мне со стороны три файла на одну иконку кажутся перебором, но если шаблон потом действительно удобнее читать, то, наверное, оно того стоит. А RxJS в итоге так и остался самым сложным местом?