Освоение React в дополнение к Vue

Дисклеймер.

Сразу уточню, что я не преследую цели сравнивать все плюсы и минусы Vue и React и выяснять какой из этих фреймворков ультимативно лучше. Они оба хороши и каждый из них имеет свои сильные стороны, поэтому нет смысла разводить холивары. Старайтесь подбирать инструмент под задачу, а не задачу под инструмент.

Так получилось, что Vue я уже давно использую в работе и мне он вполне нравится, но со временем у меня появилось несколько причин которые побудили меня более пристально обратить внимание еще и на React.

У Vue при всех его плюсах естественно есть и свои недостатки. Иногда совокупная масса этих недостатков в определенном проекте начинает приводить к вопросу, а подходящий ли фреймворк был выбран под конкретную задачу. По этой причине ранее я уже начал успешно применять в работе AlpineJS и именно по этой же причине я начал осваивать еще и React, благо после Vue это оказалось не трудно.

Добавлю также, что Angular (как и любой другой фреймворк) я тут не рассматриваю, поскольку я малознаком с ним на практике. Я с ним экспериментировал еще на заре его первой версии (и даже какую-то небольшую рабочую задачку на нем делал), когда он еще назывался AngularJS. В дальнейшем мне не приходилось с ним где-либо сталкиваться и поэтому тут в статье я его и не упоминаю, но кто знает, может когда-то в будущем придется и с ним поработать.

Какие я вижу для себя положительные стороны React

На первый взгляд, после Vue, я смог выделить несколько положительных сторон у React, которые для меня сразу оказались заметными.

Более широкая поддержка от сторонних разработчиков.

Я лично считаю, что у Vue вполне качественная экосистема (Vue, Pinia и пр.), но поддержка от сторонних разработчиков откровенно говоря нередко оставляет желать лучшего.

Возьмем например, популярную библиотеку Floating-UI (бывшая PopperJS), которая используется для создания различных всплывающих подсказок. В старом PopperJS из фреймворков официально поддерживался только React через react-popper, а вот в новом Floating UI уже есть поддержка и Vue. Вроде бы все замечательно, но вот если посмотреть на документацию, то для Vue уделена всего одна страница, а вот для React документация намного более подробная, многостраничная и с подробными примерами. Для общих случаев документации для Vue хватает, но когда случаются нестандартные ситуации, то становится очень грустно.
Или вот еще один пример. Некоторое время назад, я делал веб-версию своего перевода Google TypeScript Style Guide с использованием неплохого фреймворка Primer CSS. Ранее это был чисто CSS-фреймворк, но с недавних пор разработчики фреймворка кардинально перешли именно на React и тем самым Primer стал уже комплексным UI-фреймворком, да еще и документацию к нему сделали неплохую, со Storybook и примерами. Т.е. это один из примеров того, что в большинстве случаев, основным поддерживаемым фреймворком в сторонних тулкитах является именно React, а остальные фреймворки поддерживаются по остатку.

Более лучшая поддержка TypeScript

Безусловно во Vue3 ощутимо улучшили поддержку TypeScript по сравнению с Vue2, да и Pinia в качестве менеджера состояний, тоже отлично поддерживает TypeScript (в отличии от Vuex). В этом вопросе к самому Vue нет претензий. Но как и в прошлом пункте, есть претензия ко всему стороннему ПО для разработки, связанному с одновременной работой Vue и TypeScript. То линтеры, то форматтеры, то подсветка синтаксиса, то статическая проверка TS не работают корректно и все время с чем-то приходится бороться, что несколько раздражает.

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

Легкость передачи компонентов

Легкая возможность передавать в функцию или из функции JSX-элементы как значения (для какой-то сложной обработки) или например в качестве аргументов другому компоненту.

Например если необходимо сформировать фабрику компонентов (параметры которых могут сильно отличаться), то благодаря тому, что в JS коде JSX-компоненты передаются как обычные объекты, их легко можно создавать внутри других функций, передавать в качестве параметров, возвращать в качестве результата функции и пр. Плюс опять же TypeScript легко во все это интегрируется и работает. Во Vue в этом плане всё сложнее и можно это реализовать через динамические компоненты, но тогда появляются проблемы TypeScript.

React Native

Неплохую роль играет и React Native, который расширяет область применения React. Нередко в вакансиях можно встретить умение работать с React Native, что опять же говорит о том, что к этому инструменту есть спрос.

Есть конечно еще и NativeScript, но от тех, кто его пробовал использовать в реальной коммерческой работе, я слышал немало нелестных отзывов. Сам я пока еще не пробовал, поэтому сказать ничего точно не могу.

Количество работы

Если смотреть рынок, то конечно намного больше работы под React. Я подразумеваю не только вакансии, но и клиентские заказы, различные фриланс-задачи и пр. сторонние подработки. Плюс к этому добавляются задачи связанные с вышеупомянутым React Native.

Ну и конечно же на React, в силу его популярности, уже понаписано куча кода который так или иначе надо поддерживать. Конечно поддерживать старое легаси не всегда приятно, но тем не менее это лучше чем ничего.

JSX

Но есть и те вещи, которые мне в React не очень нравятся. Одной из таких вещей является использование JSX в качестве глобальных или просто больших шаблонов. Я конечно понимаю, что это не совсем камень в огород самого React, но честно говоря редко когда React используется без JSX, поэтому нет смысла их рассматривать раздельно.

В свое время синтаксис JSX отторгнул меня от React. Я понимаю что без него там неудобно, ибо это фактически интегрированный инструмент декларативного описания элементов интерфейса и это куда лучше чем ручное объявление элементов (тут меня поймут люди, которые в браузерных скриптах использовали строчный HTML с innerHTML, вместо кучи document.createElement(), setAttribute(), appendChild() и пр.).

Со временем я стал больше понимать суть JSX и видеть его положительные качества. Например JSX оказался вполне удобен для декларативного объявления отдельных элементов внутри JS/TS кода, особенно когда есть какая-то сложная логика формирования элементов с определенными атрибутами. Во Vue же в таких случаях шаблоны неприлично разрастаются благодаря огромному количеству v-if и v-else-if.

И тем не менее для использования в больших шаблонах JSX не очень удобен, особенно при работе с вложенными циклами и условиями. По мне в таких случаях шаблоны во Vue (с его атрибутами v-if, v-for и т.д.) выглядят куда более лаконично. Можно даже сказать, что чем сильнее проект дробится на мелкие компоненты тем удобней использовать JSX, и наоборот, чем более крупные компоненты формируются тем JSX менее удобен. Этот фактор кстати вполне может повлиять на итоговый выбор конкретного фреймворка под определенный проект.

Кстати, во Vue тоже можно использовать JSX, но я откровенно говоря не сталкивался с такими случаями на практике и поэтому не могу сказать, насколько хорошо работает эта связка.

А вообще в React честно говоря местами режет глаз явное смешивание логики и представления. Поскольку я когда-то давно начинал программировать еще на PHP, то я как-то привык явно разделять логику и представление. В этом плане мне конечно более по душе Vue, где в однофайловых компонентах четко разделены логика, шаблон и его стилизация.

Заключение

По факту для меня все эти фреймворки являются всего лишь инструментами решения задач. И если где-то более оптимально использовать Vue, я буду использовать Vue, а если где-то React, то соответственно буду использовать React. По большей части я стараюсь смотреть на проекты более глобально и стараюсь учиться правильно определять наиболее оптимальный инструментарий для решения конкретной задачи, конечно же с учетом всех факторов.

Добавляя в копилку своих знаний еще и React, я не перестаю применять в работе Vue (и его превосходный минианалог AlpineJS) там, где он оптимальней. У Vue немало своих сильных сторон, таких как документация, неплохая обратная совместимость, стабильность и пр. Да и вообще все что входит в основную экосистему Vue сделано достаточно качественно. И если проект вполне умещается в эти рамки, то это прям супер.

Да и вообще, в изменчивом и стремительно деградирующем развивающемся мире IT-разработки я не хочу привязываться намертво к какому-то конкретному фреймворку (вспоминаем проблему "Золотого Молотка") и поэтому стараюсь осваивать смежные технологии, чего и вам советую.