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.

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

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

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

Google Trends — статистика поисковых запросов довольно точно показывает интерес разработчиков к различным технологиям.

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

Stack Overflow Developer Survey — ежегодно самый популярный форум программистов проводит собственное исследование, в котором могут принять участие все желающие.

Если обратить внимание на результаты опроса 2020 года на тему самого любимого веб-фреймворка, то здесь разрыв между React и Vue.js составляет чуть меньше 3%. Теперь ситуация не выглядит такой однозначной, как после первого графика.

Github Stars — по количеству звезд у репозитория можно с легкостью сказать о популярности чего-либо среди разработчиков.

На текущий момент у React 157 тысяч звезд, в то время как у Vue.js — 174 тысячи. Если смотреть только на эти данные, то Vue явно лидирует, а значит, нет никакого смысла тратить время на React. Но, как я упоминал выше, необходимо всегда обращаться к нескольким ресурсам, чтобы получить полную картину.

The State of JavaScript — опрос, посвященный исключительно JavaScript. Где, как не здесь, можно выявить настоящее отношение разработчиков к используемым инструментам.

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

npm trends — простой, но информативный инструмент, который позволяет сравнить количество загрузок пакетов.

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

Количество вакансий — пожалуй, самый важный показатель. Если все предыдущие графики представляли непосредственно мнение разработчиков, то эти данные отображают потребности бизнеса. Чем больше опубликованных объявлений, тем больше шансов получить работу за меньшее количество времени.

По состоянию на 21.10.2020
ТехнологииLinkedInIndeedDjinniDOU
React15139001023434
Vue.js281148216139

Как видно из графика, React не оставляет никаких шансов Vue.js.

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

Как бы много не шутили о том, что программисты занимаются только копированием кода со 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.

Похожие статьи:
В январе вышла моя статья про типы машинного обучения и способы их применения для повседневных задач. Спасибо всем за фидбэк...
На DOU не было еще интервью с Юрием Антонюком, главой EPAM Украина, поэтому мы решили заполнить этот пробел. Тем более в этом...
Согласно опросам DOU, каждый третий айтишник с удовольствием играет в компьютерные игры в свободное время....
Южнокорейская компания LG Electronics объявила о достижении в прошедшем четвертом квартале 2015 года операционной...
Кожні пів року ми збираємо анонімні дані про зарплати українських IT-спеціалістів і готуємо дослідження....
Яндекс.Метрика