[Перевод] В чём разница между React и Vue?
Однажды мы уже публиковали материал, посвящённый сравнению React и Vue. Это был практический пример, на котором можно было увидеть сходства и различия этих фреймворков в довольно-таки мелких деталях. Сегодня мы хотим поделиться с вами переводом статьи, автор которой, Джон Ханна, рассматривает React и Vue в более крупном масштабе. Он говорит о том, что в сегодняшнем мире веб-разработки можно видеть, во-первых, господство React, а во-вторых — взрывной рост популярности Vue. Если существующие тренды продолжатся, весьма вероятно, что к концу 2018-го года Vue обойдёт Angular и займёт второе место в рейтинге самых используемых веб-инструментов.
По словам Джона, последние три года он занимается коммерческой разработкой на React. Он говорит, что когда в компанию, где он работает, приходят клиенты, чаще всего они заявляют о том, что хотят, чтобы их проект был создан с использованием React. Однако, судя по всему, через некоторое время похожим уровнем внимания будет пользоваться и Vue. В этом материале он анализирует React и Vue для того, чтобы лучше понять разницу между этими двумя библиотеками? и говорит о том, что то, чему посвящена эта статья, поможет ему в работе с клиентами. Он полагает, что даже хотя работает с React уже несколько лет, и ему нравится то, что он делает, неплохо будет подготовиться к будущему, так как при работе с Vue могут возникнуть неожиданные ситуации, в которых его опыт ему не поможет.
Начнём с конца
Я хочу начать мой рассказ о React и Vue, как ни странно, с выводов. Эти два фреймворка похожи, хотя между ними имеются некоторые важные различия, о которых я кратко расскажу. Зачем их сравнивать? Одна из причин заключается в том, что для Эвана Ю, разработчика Vue, React был одним из источников вдохновения. Эти фреймворки гораздо сильнее похожи друг на друга, чем они же, скажем, похожи на Angular или Ember. Из документации Vue можно узнать, что оба фреймворка, о которых мы сегодня говорим, обладают следующими особенностями:
- Использование Virtual DOM.
- Реактивная и компонентная структура.
- Основное внимание уделяется главной библиотеке. Дополнительные задачи, вроде маршрутизации и управления глобальным состоянием приложения, решают вспомогательные средства.
Если рассматривать готовые проекты, построенные на базе этих библиотек, не думаю, что между теми из них, которые сделаны на Vue, и теми, которые построены на React, можно увидеть серьёзные различия. А именно, React и Vue похожи в плане производительности, оба фреймворка подходят для создания проектов самых разных масштабов.
Если вы разрабатываете приложение, рассчитанное на разные платформы, например — на традиционный веб и на мобильные устройства, преимущество оказывается у React благодаря замечательному React Native. Мои коллеги, кроме того, использовали React для создания встраиваемых приложений для телевизоров. Это — интересный пример экзотической платформы, на которой можно использовать React. Однако, возможности разработки приложений под мобильные платформы есть и у Vue, благодаря Weex, поэтому, вполне возможно, что для некоего мобильного проекта предпочтительным окажется именно этот фреймворк.
Нужно отметить, что экосистема React гораздо больше, чем у Vue, что вполне может способствовать успешности и скорости разработки. Если для того, чтобы React-приложение состоялось, нужен некий важный функционал, велики шансы того, что нечто подобное уже реализовано. На самом деле, весьма вероятно то, что для множества проблем в сфере React можно будет найти даже несколько вариантов решений.
Ещё одно важное соображение для того типа клиентов, с которыми работает моя компания, это возможность найти разработчиков, которые хорошо разбираются в библиотеке или фреймворке, на который эти клиенты делают ставку. Тут у React тоже есть преимущество, хотя я полагаю, что оно, скорее всего, временное.
Другие различия, в основном, относятся к тонкостям разработки и к техническим деталям. Например, они касаются парадигм программирования, которым свойственны определённые особенности, какие-то компромиссы, и я не могу выделить ни в одной из них чётких сильных или слабых сторон. Это мы ещё обсудим.
В итоге можно сказать, что если имеется команда, которая уже знакома с React, переход на Vue особых преимуществ ей не даст (о минусах поговорим ниже). Если ваша команда только начинает заниматься разработкой фронтенда веб-приложений, или подумывает о том, чтобы перейти на что-то новое с фреймворков вроде Backbone или AngularJS, тогда вам стоит посмотреть в сторону Vue, хотя вышеозначенные сильные стороны React никуда не деваются. Другие факторы, опять же, касаются технических деталей, о которых мы сейчас поговорим.
Различия React и Vue
Пожалуй, лучше всего, сравнивая React и Vue, обратиться к документации по Vue (весьма качественной), в которой их сходства и различия раскрыты очень хорошо. Эта документация особенно полезна, так как она была написана Эваном Ю вместе с Дэном Абрамовым, членом команды React. Кроме того, если я буду относиться к чему-то предвзято, выдержки из документации помогут трезво взглянуть на положение дел.
▍Производительность
В плане производительности Vue и React очень похожи. В документации Vue сказано, что у Vue, в большинстве случаев, есть небольшое преимущество, однако, свежие бенчмарки показывают, что React 16 быстрее чем Vue 2.5. Некоторые различия в работе с фреймворками наблюдаются и при оптимизации производительности.
В React, когда изменяется состояние компонента, это вызывает повторный рендеринг всего поддерева компонента, начиная с него самого. Он выступает в роли корневого компонента. Для того, чтобы избежать ненужного повторного рендеринга дочерних компонентов, нужно либо использовать PureComponent, либо реализовать, везде, где это возможно, shouldComponentUpdate.
В Vue зависимости компонента автоматически отслеживаются при его рендеринге, поэтому система точно знает, какие компоненты нужно повторно отрендерить при изменении состояния. Каждый компонент можно считать имеющим нечто вроде автоматически реализованного метода shouldComponentUpdate, без ограничений, которые могут вызывать вложенные компоненты. Такой подход устраняет необходимость в целом классе оптимизаций производительности, и позволяет разработчикам заниматься созданием и развитием основного функционала приложений, а не решением вспомогательных задач.
Тут мне хотелось бы отметить, что 19-го декабря 2017-го, после того, как я, вникая в тонкости вопросов производительности веб-фреймворков, опубликовал свежую статью, я понял, что мои выводы о производительности фреймворков стоит уточнить. Vue немного быстрее, но результат зависит от того, что именно измеряют.
▍Шаблонизация и JSX
Ещё одно серьёзное различие между рассматриваемыми фреймворками заключается в том, что в Vue используются шаблоны, а в React — JSX. Многим программистам не нравится язык шаблонов. Вот что об этом говорит документация Vue:
Некоторые утверждают, что для того, чтобы писать шаблоны, нужно изучить дополнительный специализированный язык. Мы считаем поверхностным такой подход при сравнении Vue и React. Во-первых, использование JSX не означает, что программисту не нужно изучать ничего нового, так как перед нами — дополнительные конструкции, построенные на обычном JavaScript. В результате JSX легко освоить тому, кто знаком с JS, но говорить, что для использования JSX не нужно прилагать вообще никаких усилий — это уже чересчур. Аналогично, шаблоны — это расширение обычного HTML, и, таким образом, те, кто знаком с HTML, могут освоить их без особых проблем. Благодаря особенностям шаблонов, мы, кроме того, можем помочь программисту добиться большего, написав меньше кода (например, с использованием модификаторов v-on). Для решения тех же задач может понадобиться гораздо больше кода при использовании обычного JSX или рендер-функций.
Меня беспокоит ситуация, когда при разработке приложения смешивают JSX и язык шаблонов. Это усложняет проект. Проще придерживаться какого-то одного подхода, иначе неизбежна трата сил на «переключение контекста», на переход из одной среды в другую. Однако, могут найтись те, кто с этой идеей не согласится.
▍CSS
В Vue очень приятно работать с CSS. В документации Vue, где этот фреймворк сравнивают с React, определённое внимание уделено и CSS. В React, в частности, весьма популярно использовать так называемый CSS-in-JS. Взглянем в документацию:
Если вы — фанат подхода CSS-in-JS, знайте, что он доступен и в Vue, благодаря многим популярным библиотекам, например, таким, как styled-components-vue и vue-emotion. Главное различие между React и Vue в этой области заключается в том, что в Vue для стилизации по умолчанию применяются теги style в однофайловых компонентах.
Мне нравятся однофайловые компоненты, которые включают в себя CSS. На рисунке ниже показан пример компонента из документации. Обратите внимание на тег