Oops... your message was not sent

Your message has been successfully sent

тематические истории, основанные на опыте компании JetRuby
Веб-разработка

Выбираем фронтенд фреймворк: React и Vue.JS

С каждым годом количество JavaScript библиотек и фреймворков растет. Даже самые матерые фронтендщики уже давно сбились со счета. Большой выбор — это одновременно преимущество и недостаток. Почему недостаток? Потому что каждый раз, начиная новый проект, мы становимся перед дилеммой. Стоит ли попробовать что-то новенькое или пойти по накатанной дорожке?

Второй вариант экономит время — опыт использования и освоенная документация делают свое дело. Однако излишняя консервативность препятствует прогрессу. Что же выбрать? В этой статье мы кратко осветим общее положение дел на рынке JavaScript фреймворков. И остановимся на сравнении освоенных нами технологий.

Немного статистики

react_vue.js-1

На представленном графике мы видим, что React нравится подавляющему большинству разработчиков. Причем, как из числа тех, кто его уже опробовал, так и среди желающих к ним присоединиться. С Angular.JS не все так радужно. Чуть больше половины опрошенных разработчиков не желает к нему возвращаться.

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

react_vue.js-2.png

Не стоит забывать и о том, что далеко не всегда программисты имеют такую роскошь, как выбор. Например, когда в их руки попадает легаси-проект. В таком случае приходится довольствоваться тем, что есть.

Еще один момент — огромное количество сайтов использует jQuery (см. картинку). И это не плохо! Сложно переоценить своевременный вклад jQuery в развитие веб-разработки. Однако некоторые задачи реализуются на jQuery через боль и страдания. Вполне очевидно, что лучше бы было реализовать их с помощью других инструментов, которые не задействовались изначально в силу возраста проекта или в силу невозможности применить их командой разработчиков.

Давайте посмотрим на статистику с GitHub по самым популярным фреймворкам или библиотекам для фронтенда.

react_vue.js-3

Vue.JS стремительно набирает популярность, несмотря на “молодость” и еще неокрепшее комьюнити. Лайки лайками, а реальный вклад в проект — это уже совсем другая история. Отсюда следует вывод, что чем сложнее приложение, тем труднее найти под него готовое решение. В перспективе это может замедлить скорость разработки проекта.

Для нашей команды уже больше года основным фреймворком является React.JS. Мы используем его на большинстве проектов и вполне довольны своим выбором. Но, кажется, у этой технологии появился реальный конкурент в борьбе за наши предпочтения. А именно — Vue.JS. Vue набирает обороты, и за последнее время неоднократно использовался нашими разработчиками.

Далее мы будем сравнивать именно эти фреймворки React.JS и Vue.JS. В качестве примеров будут использоваться кейсы из собственной практики. Изучаем, разбираемся, выделяем преимущества и недостатки.

Если вам нравится использовать шаблоны...

В таком случае оптимальный выбор — это Vue.JS. Определение разметки в HTML является базовым функционалом для Vue. Аналогично Ангуляру, двойные фигурные скобки используются для выражений дата-биндинга, в то время как директивы (специальные html атрибуты) применяются для добавления функционала в шаблон. Такие шаблоны значительно легче для понимания.

Давайте посмотрим на простой пример. Нам нужно, чтобы значение в поле ввода хранилось в state.

React.js:

react_vue.js-4

Vue.js:

react_vue.js-5

Очевидно, что код на Vue.JS проще и понятнее. Как минимум для тех, кто не сталкивался с React.JS и Vue.JS. Кроме того, пример кода на Vue.js это ES5 и он прекрасно работает без “babel” в отличии от кода на на React.JS, в котором используется ES6.

react_vue.js-6

График с сайта — https://npm-stat.com/

Если вам нужна большая экосистема…

Здесь все просто — React и никаких гвоздей. Ведь речь идет о самой популярной библиотеке. А популярность дает неиллюзорные преимущества. Это значит больше статей, больше туториалов и ответов на Stack Overflow. Это значит наличие большого количество расширений и инструментов, которые могут значительно сэкономить ресурсы проекта и разработчика.

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

Проект Malta

react_vue.js-7

Перед нами стояла задача создать страницу с картой и фильтрами. На первый взгляд — ничего сложного. При этом у нас была сама карта с маркерами, набор фильтров (очень богатый набор) и область вывода результатов фильтрации. Казалось бы, довольно скромный функционал. Однако масса пересекающихся взаимодействий, (прежде всего — огромное количество фильтров — их набор изменялся в зависимости от нескольких факторов), существенно усложнила работу. И реализация такого функционала на jQuery оказалась, мягко говоря, очень сложной.

В сложившейся ситуации явно напрашивался декларативный подход: “чтобы оно там само все делало, считало и т.д.”. А раз у нас тут такой сложный интерфейс, почему бы не использовать React.JS? И вот здесь началось самое интересное. Во-первых, React не так просто подключить на проект в середине разработки. Во-вторых, компонентный подход не давал особых преимуществ. Ведь у нас не так много элементов, которые можно логически грамотно поделить на компоненты. А логики на странице довольно много. И в итоге бы мы просто получили один большой компонент “контейнер”.

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

В результате мы применили стандартный для Vue.JS подход с data-binding и шаблоном. Такое решение обеспечило нам возможность спокойно пользоваться привычным haml и даже применять Ruby методы для рендеринга фильтров.

С помощью Vue атрибутов v-show и v-model контролируется отображение и значения полей. После применения фильтра и получения результата нам не нужно переживать за отображение полученных данных — реактивность все делала самостоятельно. Мы лишь привязали темплейт для рендеринга элементов к массиву данных через v-for. Вот и все.

Хендлить ивенты также очень удобно. От нас требовалось лишь декларативно определять поведение приложения, а обработкой событий изменять соответствующие данные. Безусловно, на странице было очень много логики. И обратка подобного интерфейса в одном Vue контроллере под конец стала вызывать определенный дискомфорт. Но это определенно лучше, чем мучаться с полотнищем jQuery. В целом, на проекте Malta Vue.JS показался нам крайне дружелюбным, понятным и логичным.

Pyro

react_vue.js-8

И еще один пример, когда наш выбор пал на Vue.JS это Pyro — легаси проект на RoR с большим количеством jQuery.

Изначально нам понадобилось только подключить ruby gem vue. Однако представленная страница содержит одну небольшую тонкость. А именно динамически изменяющийся набор полей выбора, который приходит с запросом в зависимости от текущего состояния выбора фильтра. С каждым нажатием на чекбокс делается запрос и общее состояние фильтров обновляется. И хендлить все это через v-model получилось просто отлично. В итоге мы прекрасно встроили спа в монолитный проект.

Вывод

Скажем сразу (простите за банальность): идеальной технологии  не существует. Да и вряд ли появится. Решить абсолютно все проблемы разом и удовлетворить абсолютно всех разработчиков невозможно от слова “совсем”. Поэтому важнейшим моментом является понимание проекта и его требований. Оцените сложность интерфейса, соотнесите его с квалификацией своей команды и выберите оптимальную технологию здесь и сейчас.

А теперь мы поделимся выводами сравнения Vue.JS и React.JS.

Преимущества Vue.JS:

  1. Гибкость в работе с шаблонами;
  2. Простота синтаксиса и низкий порог вхождения.
  3. Быстрый рендеринг и меньший размер.

Преимущества React.JS:

  1. Лучше подходит для масштабируемых приложений, лучше поддерживается и тестируется.
  2. Может использоваться для нативных и веб приложений.
  3. Большая экосистема.
  4. Больший выбор инструментов.

И все же сходств больше, чем различий:

  1. Быстрый рендеринг с использованием Virtual DOM.
  2. Небольшой размер.
  3. Реактивные компоненты.
  4. Возможность легкой интеграции с роутерами, сборщиками и менеджерами состояний.
  5. Отличная поддержка.

В нашем случае из “двух зол” оба лучше. Выбирайте то, что вам больше нравится. Но не забывайте — каждый фреймворк: и React и Vue.JS заточен под определенный круг задач и проявляет себя наилучшим образом именно в своей “вотчине”.

department
Статью подготовил
Отдел веб-разработки
Профессиональная разработка сайтов и приложений на стороне сервера и клиента. Проектирование дизайна, верстка страниц и техническое обслуживание реализованных проектов.
New Articles