Что выбрать бизнесу для разработки: React или Vue

Выбор подходящих технологий для проекта – важная составляющая его успешной реализации. Обычно это зона ответственности архитектора или техлида. Владельцу продукта и руководителям всех уровней также важно понимать, как выбор стека может зависеть от характеристик проекта и на что нужно обратить внимание. Об этом в статье и пойдёт речь.

Меня зовут Никита, я frontend-разработчик с опытом 3+ лет и успел поработать как с React, так и с Vue. Именно поэтому в материале не разбираю Angular – пишу о том, с чем сам имел дело на практике. Да и React c Vue уже значительно обходят Angular по популярности (график по количеству загруженных пакетов можно посмотреть здесь, по количеству звёзд – здесь, по количеству разработчиков, которые продолжат использовать фреймворк/библиотеку – здесь).

Некоторые приложения требуют молниеносного запуска на рынок (time-to-market), в то время как другие необходимо сделать масштабируемыми в долгосрочной перспективе. Что выбрать для вашего проекта? Давайте разбираться! 

Мы не будем углубляться в технические подробности. Вместо этого покажем разницу в характеристиках, важных для бизнеса. А также приведём примеры, как это работает на практике. В конце – краткое сравнение в таблице.

На какие критерии опираться при выборе

React и Vue во многом схожи – это популярные лёгкие стеки с высокой производительностью и компонент-ориентированной архитектурой. Среди актуальных (не легаси) технологий в принципе нет плохих или хороших, поэтому нет строго правильного и неправильного выбора. Главное – если у вас уже есть сработанная команда frontend-специалистов и вы уверены в ней, не стоит менять стек. 

А от чего отталкиваться, если вы создаёте проект с нуля или переходите с легаси? – Рассказываем.

Средний уровень команды на старте

Я не сторонник категоричного заявления, что «на Vue писать легче, чем на React». При этом на старте проекта зачастую нужен стандартный функционал – для реализации таких задач Vue, действительно, легче. 

• Во-первых, в экосистеме Vue много хорошо интегрированных инструментов прямо в «коробке».

• Во-вторых, богатый набор директив – определённых правил – значительно упрощают процесс разработки. Это можно сравнить с вымощенной дорогой в каком-нибудь заповеднике – она не позволяет тебе свернуть не туда.

• В-третьих, в мире frontend каждый слышал о документации Vue – она образцово-показательная и покрывает множество рабочих кейсов.

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

В гибком React разработчики могут свободно выбирать инструменты для управления состоянием и другими частями приложения. Такая свобода требует и ответственности: хорошего опыта разработки и знаний нативного JS и архитектурных паттернов. Иначе высока вероятность появления «грязного», нерелевантного кода.

Например. Во Vue оптимизация повторной отрисовки интерфейса реализована из коробки: Vue сам понимает, где изменились данные и где конкретно нужно сделать ререндеринг (второй и последующие рендеринги компонента). То есть он сам справляется с этой частью работы.

В React же нужно выстроить изначально правильную архитектуру или точечно настраивать условия ререндеринга вручную, чтобы оптимизировать процессы и не обновлялись лишние компоненты. Для новичка это влечёт за собой риск ошибиться: например, вызывать перерисовку всей страницы вместо одного компонента.

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

• в вашей команде раньше не использовались фреймворки, а например, простой JavaScript или JQuery,

• ваша команда состоит из fullstack-программистов.

В таких случаях Vue будет лучшим выбором за счёт привычного HTML-шаблонизатора и CSS, а также интуитивно понятного синтаксиса. Напомним, что React в противовес имеет более сложный вход в разработку за счёт непривычного на старте JSX (во Vue его можно использовать, а в React нужно). Ещё, например, React не имеет собственного подхода к стилизации в отличие от Vue. Подобная гибкость React и вызывает затруднения на старте, поскольку заставляет разработчика самостоятельно выбирать подход.

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

Скорость разработки MVP и стоимость разработки на старте

Компактный синтаксис Vue и поддерживаемый набор библиотек в коробке делают написание кода интуитивным и быстрым. Когда я перешёл с React на Vue, я заметил, что для решения задач во Vue и правда нужно меньше кода. Высокая скорость разработки ускоряет time-to-market. Именно поэтому Vue подходит для средних приложений и MVP – их можно сделать за короткие сроки. 

Стоимость старта на этом фреймворке ниже, чем у React также за счёт удобного CLI. CLI – это инструмент командной строки, который помогает разработчикам. Он автоматизирует некоторые рутинные задачи, такие как установка зависимостей, создание файловой структуры проекта и настройка компиляции кода. Опять же это ускоряет и упрощает процесс разработки Vue-приложений.

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

Планы по масштабируемости продукта

Согласитесь, предусмотреть всё невозможно, поэтому насколько бы широким ни был встроенный набор инструментов во Vue, он не сможет покрыть все кейсы. И чем сложнее и масштабнее продукт, а бизнес-процессы специфичнее, тем больше будет таких кейсов. А строгая регламентация будет создавать дополнительные ограничения. Чтобы их преодолеть, Vue-разработчики используют дополнительные инструменты, например, mixins для повторного использования кода. А в React тем временем не потребуется заниматься «изобретательством» – в нём уже есть возможности организовать подходящую структуру.

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

Если хотите к тому же создавать кроссплатформенное мобильное приложение, можно переиспользовать код React, использовав React Native. 

Это не означает, что «потолок» Vue – средние приложения. Богатая экосистема дополнительных инструментов помогает закрывать разработчикам сложные бизнес-потребности. И вот это обхождение стандартов может представлять собой определённую трудность. Именно поэтому при реализации масштабных проектов на Vue особенно важен высокий уровень опыта и профессионализма разработчика. 

Погружаемся в контекст выбора на примерах: реальные кейсы

Проект №1. Административная панель для внутренней системы банка на Vue

Мы разрабатывали панель для немецкого банка. С её помощью администраторы получали быстрый доступ к различным таблицам с большим объёмом данных, отчётам по операциям и другой структурированной информацией.

Заказчик в этом проекте отдал предпочтение Vue, руководствуясь для себя такими факторами:

• Возможность гибко распределить загрузку команды: задействовать как мидлов, так и джунов для отдельных задач. С низким порогом входа Vue даже новички могут быть подключены к решению бизнес-задач. Например, как для React-специалиста, переход на Vue для меня был плавным процессом. В фреймворке простые и интуитивные инструменты – так что я быстро смог приступить к его использованию на практике. А так как логика продукта была несложной, заказчик не хотел переплачивать, нанимая специалистов только высокого уровня.

• Быстрый старт и лёгкая поддержка. Заказчик знал, что Vue с его набором директив, значительно упрощает процесс разработки и при этом делает код легко читаемым даже для непогружённых специалистов. При этом панель нужна была как рабочий корпоративный инструмент для ограниченного количества пользователей, не нужно было «наводить красоту» и закладывать архитектуру на расширение. Мы сделали MVP, а инхаус-специалисты дальше занимались поддержкой наряду с другими внутренними продуктами. 

• Реализация проекта силами «коробки». «Чистый» Vue отлично подходил под требования проекта. Например, для административной панели требуется эффективное управление данными и состоянием приложения – во Vue уже интегрирован необходимый стейт-менеджер Pinia. 

P.S. Хочу отметить, что переход с Vue 2 на Vue 3 ограничивает доступность некоторых инструментов, так как после обновления версии произошли существенные изменения внутри архитектуры и API самого фреймворка.

Например, у меня стояла задача – изменить DateTimePicker (раскрывающийся календарь). На Vue 2 было несколько пикеров, которые подходили по дизайну и функционалу. А вот на нужном нам Vue 3 пикеры от тех же разработчиков не поддерживались больше года. Наверное, в силу непопулярности. Я уже говорил, что пока немногие команды спешат перевести свои проекты со 2 на 3 версию Vue – значит, и большой потребности в адаптации инструментов (тех же пикеров) нет.

Остальные пикеры на Vue 3 были странными по дизайну. В итоге я писал кастомный инструмент, который соответствовал всем требованиям проекта. Эти ограничения могут замедлить разработку, так как приходится искать замены или создавать собственные решения.

Проект №2. Финтех-решение на React

Второй проект – финтех-сервис с многофункциональным личным кабинетом. Приложение включает в себя ряд финансовых и технологических аспектов: от предоставления клиентам доступа к данным (например, история заказов), до обеспечения безопасности финансовых операций.

В этом проекте заказчик сделал выбор в пользу React по двум основным причинам:

• Старый легаси-проект был написан на React. Когда я пришёл на проект, у меня были такие глобальные задачи:

• разработать сервис для оплаты без комиссии,

• переписать легаси-сервис для обычной оплаты с комиссией (у этих продуктов разные User Flow – пользовательские пути, но похожий дизайн),

• сделать общий личный кабинет для двух сервисов (B2B),

• создать UI-библиотеку для всех продуктов.

Старый проект был на React – хоть его и надо было переписывать, какие-то части кода или их логику можно было переиспользовать для того же дизайна, если оставить для новых проектов тот же стек. Да и потом надо было интегрировать оба сервиса в личный кабинет – если бы выбрали Vue (или тот же Angular), то пришлось бы повозиться. А написанные на одной библиотеке (или фреймворке) проекты легче соединять между собой. 

Если бы я переписывал старый сервис на Vue – ушло бы больше времени просто потому, что сами компоненты отличаются синтаксически. 

• На проекте требовалась сложная модульная архитектура. Нужно было, чтобы каждая компонента была разделена по логической нагрузке: со своей ролью, задачами и зонами ответственности. Со свободой в React продумать реализацию было проще.

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

Тут у вас может возникнуть возражение, что Vue также поддерживает TypeScript, и будете правы. Но важно отметить, что TypeScript отлично совместим только с Vue 3. А сейчас Vue 2 всё ещё остаётся более популярным вариантом для многих проектов, так как команды предпочитают оставаться на проверенной и знакомой версии фреймворка. Так что зачем накладывать на себя дополнительные ограничения, если с React давно «дружит» с TypeScript.

Подводим итоги

У Vue и React больше сходств, чем различий: и с помощью того, и с помощью другого можно реализовать полноценный frontend. Так что если у вас уже есть проверенные разработчики на каком-то стеке, нет большого смысла пересобирать команду с нуля. 

Итак, несколько нюансов, которые могут иметь значение, если вы создаёте новый продукт.

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

Ещё больше реализованных frontend-кейсов смотрите здесь. 

P.S. То, что мы использовали примеры только из финтеха – совпадение :) На самом деле Vue и React подходят для любой отрасли. В выборе предлагаем отталкиваться от критериев, которые резюмировали в таблице.