Нояб. 26

React vs Vue.js: что изучать в 2021 году

Всем привет! Меня зовут Владислав Василенко, работаю на должности Software Engineer в компании Dev.Pro. В повседневных задачах я использую Angular, поэтому все последующие рассуждения построены на опыте изучения данных инструментов и использования в различных pet projects.

Бесконечно можно смотреть на три вещи: горящий огонь, бегущую воду и то, как разработчики спорят о лучшем фреймворке для JavaScript. Кстати, в присутствии приверженцев React лучше не называть его фреймворком, ведь это библиотека. Кому-то может показаться, что это шутка, но при мне пару раз поправляли людей, которые так говорили.

Данная статья не призвана стать началом очередного холивара на тему, что лучше. Рассуждений об этом и так хватает в сети. Главной целью материала является желание помочь выбрать технологию для изучения в 2021 году. Это актуальный вопрос как для начинающих программистов, так и для более опытных, которые думают о том, чтобы переключиться на что-то новое.

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

История

Когда только появился интернет и статистические сайты, никто не задумывался об оптимизации скорости загрузки и масштабируемости веб-приложений. Тогда цели и задачи, стоящие перед разработчиками, сильно отличались от нынешних. Но с развитием веб-технологий и повсеместного распространения интернета появилась такая необходимость. Довольно быстро число библиотек и фреймворков, нацеленных на решение этих задач, стало расти. Я не буду рассматривать их все, остановимся конкретно на двух.

React — JavaScript-библиотека с открытым исходным кодом, созданная Джорданом Валке из Facebook. Перед компанией стояла задача улучшить процессы создания и рендеринга интерфейсов, ведь Facebook необходимо было разрабатывать и поддерживать. Уже на тот момент это был огромный проект, а существующих технологий не хватало. Впервые React использовался в новостной ленте Facebook в 2011 году и позже в ленте Instagram в 2012-ом. Но лишь в 2013 году сообществу разработчиков на конференции JSConf US был представлен исходный код. Прошло уже много времени, вышли сотни апдейтов, фиксов и дополнений функционала, но с тех самых пор React остается самым популярным среди 3 гигантов.

На сегодня версия 16.14.0 от 14 октября 2020 года является самой актуальной. За счет своей популярности и удобства многие крупные компании используют эту библиотеку для разработки своих продуктов. Среди них Facebook, Netflix, Yandex и многие другие.

Vue.js — JavaScript-фреймворк, созданный в 2014 году Эваном Ю, бывшим сотрудником Google, хотя разработку он начинал еще в стенах компании. Факт того, что полноценный фреймворк был создан одним программистом, — одно из главных отличий Vue, ведь за остальными стоят технические гиганты. На начальном этапе Эван полностью занимался написанием кода, обновлением документации, исправлением багов и продвижением своего детища.

С момента появления Vue прошло 6 лет, и уже сейчас он сравнялся по популярности с Angular от такого гиганта, как Google. Самый свежий релиз Vue 2.6.11 был представлен 13 декабря 2019 года. Но 18 сентября 2020 года была показана версия 3.0, которая уже в скором времени станет основной. Смешение возможностей других успешных JavaScript-фреймворков, одна из лучших документаций (лучшая на китайском) и легкость начала работы делает его таким популярным. Среди крупных компаний, которые пользуются всеми преимуществами Vue, отмечу Zoom, GitLab, Behance, Font Awesome.

Поддержка, комьюнити, документация

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

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

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

Глядя на Stack Overflow, который содержит более 255 тысяч вопросов по #reactjs, также появляются некоторые мысли. С одной стороны, можно не беспокоиться за отсутствие ответа на интересующий вопрос, а с другой — усомниться в качестве библиотеки. Ведь если что-то работает хорошо, то должны ли возникать вопросы? Еще одно большое преимущество React — огромное количество обучающих материалов.

Vue.js — истинный король документации, которая по праву считается его визитной карточкой. На сайте фреймворка можно найти подробное и качественное описание и на английском, и на русском языке. Отдельного внимания заслуживает китайская версия документации, которая не только считается самой лучшей, но и была написана самим создателем фреймворка. Кстати, это сыграло немаловажную роль в популяризации Vue. По данным за 2018 год, половина респондентов из Китая использует этот фреймворк.

И хоть Vue.js стремительно развивается, но комьюнити по-прежнему не достигло размеров React. Это влечет за собой как меньшее количество обучающих материалов, так и трудности в поиске ответов на интересующие вопросы. На данный момент на Stack Overflow присутствует более 66 тысяч вопросов по #vuejs. Можно ли считать это хорошим результатом за 6 лет? Такая же двузначная ситуация, как и с React. Это может говорить как о качестве фреймворка, так и о слабом комьюнити.

Сравнение React и Vue.js

В этом разделе поговорим о схожих чертах, преимуществах и недостатках. Начнем с общего, которого много. Это неудивительно, ведь Эван Ю использовал React в качестве вдохновения для написания собственного фреймворка. Из общего эти инструменты имеют:

Virtual DOM (реализация во Vue.js значительно производительнее и стабильнее);
реактивность и компонентная структура;
использование дополнительных библиотек для внедрения роутинга, управления глобальным состоянием и прочего;
поддержка PWA;
поддержка TypeScript;
обратная совместимость, простая миграция версий.

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

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

React можно считать хулиганом из мира веб-фреймворков. Он нарушает все правила, так называемые best practices. Если все время до этого считалось необходимым разносить разметку, стили и JavaScript по отдельным файлам, то с появлением JSX, где все может находиться в одном месте, мнения разработчиков разделились. Одни считают, что это упрощает разработку, позволяет сразу находить ошибку, так как React не скомпилируется, если чего-то не хватает или, наоборот, присутствует что-то лишнее. А другие говорят, что это только сбивает с толку и усложняет весь процесс. Чтобы было понятнее, я приведу отрывок, который содержит в себе разметку со стилями:

import React from 'react';
import './Homework.css';
export const Homework = (props) => {
     return (
          <div className="homeworkTasks" color='blue'>
               <p className="homeworkDescription">
                    {props.description}
               </p>
               <div className="homeworkDone" onClick={props.done}>
                         x
               </div>
          </div>
     );
};

Сперва такой синтаксис сильно сбивает, но потом, написав какое-то количество строк, вы перестанете обращать внимание на HTML и CSS внутри JavaScript.

В свою очередь, Vue.js предлагает подход с использованием шаблонов, которые выглядят более привычными. CSS и JS находятся в отдельных файлах, что также кажется более знакомым и удобным для тех, кто впервые попробует данный фреймворк.

<template>
     <div class="homeworkTasks">
          <p class="homeworkDescription">{{homework.description}}</p>
          <div class="homeworkDone" @click="done(homework)">
               х
          </div>
     </div>
</template>

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

Каждый подход имеет свои преимущества и недостатки. Для использования React необходимо освоить JSX, чтобы писать шаблоны — разобраться с DSL. Но если абстрагироваться от всего этого, то можно сделать вывод, что подход Vue.js более прост в освоении, а также позволяет сделать больше с меньшим количеством кода (например, с v-on модификаторами). Но не будем на этом останавливаться и перейдем к следующему различию.

Разобравшись с синтаксисом JSX и шаблонов, скорее всего, вы перейдете к теме управления данными в приложении. Ведь без state management будет, по сути, тот же статистический сайт, а вы точно решили изучать фреймворк не для этого.

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

единственный источник правды;
состояние только для чтения;
изменения вносятся с помощью чистых функций.

Для простоты понимания работы ниже приведена схема Redux-flow.

Вообще связка слов React-Redux настолько тесна, что многие забывают о том, что Redux — это отдельная библиотека, которая может использоваться даже с обычным JavaScript или Vue.js.

Как я упоминал раньше, Эван Ю вдохновлялся React и брал оттуда самое лучшее. Так как встроенного решения по управлению данными в библиотеке не было, он решил создать собственный модуль для Vue.js под названием Vuex.

Как видно из схемы, флоу очень похож на подход Redux, поэтому часто переход от одной библиотеки к другой проходит безболезненно. Однако есть и отличия. Во-первых, здесь компонент может отправлять action. Обычно это делается для получения данных через асинхронный запрос. Во-вторых, action может изменять данные как самостоятельно, так и через специальную функцию (что-то вроде местного reducer).

Хоть я и говорил, что Redux и Vuex похожи, но в этом и лежит основное различие между React и Vue.js. Vuex меняет состояние сразу, а не делает его иммутабельным, чтобы затем полностью заменить на новое, как это происходит в Redux.

Что же учить

И React, и Vue.js имеют свои преимущества и недостатки, чем-то они похожи, а чем-то различаются. Можно сделать следующие выводы:

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

Исходя из всего написанного выше, в 2021 году для изучения я бы выбрал React. Он признан международными компаниями, удерживает лидерские позиции на рынке, для него существует обилие обучающих материалов. А если вдруг не согласны, то я всегда рад выслушать противоположную точку зрения, которой вы можете поделиться в комментариях!

Чтобы не пропустить новые статьи Владислава Василенко — подпишитесь на него в телеграм-боте Ленты DOU.

По состоянию на 21.10.2020
Технологии	LinkedIn	Indeed	Djinni	DOU
React	1513	900	1023	434
Vue.js	281	148	216	139

История

Популярность

Поддержка, комьюнити, документация

Сравнение React и Vue.js

Что же учить