Привет, я Михаил.
Работаю веб-разработчиком и занимаюсь интернет-проектами: от сайтов и интерфейсов до систем автоматизации.
Отправить мне сообщение

Vue.js в продакшене, сравнение с React

Привет.

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

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

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

  • Интерес к новой для себя технологии.
  • Сбор объективных аргументов за и против.

Последний аргумент связан с тем, что в погоне за хайпом некоторые люди загорелись желанием переписать существующую систему с React на Vue. Естественно, большинство разработчиков было против, так как простое переписывание не только не принесёт существующей пользы бизнесу, но и наоборот — потратит его ресурсы. Советую почитать про кривую Гартнера.

Итак, мне дали свободу действий, и за пару недель я написал интерфейс на Vue. Всё, что здесь описано далее, я постарался сделать максимально объективным. К тому же, моё мнение основывается лишь на одном конкретном приложении. Если где-то читателю покажется, что сравнение по какому-либо критерию натянутое, то уточню, что оно основано лишь на одном конкретном проекте и том, как бы оно было реализовано на React.

Преимущества Vue перед React

Размер бандла

Если не исхищряться, то при прочих равных условиях размер бандла у Vue-приложения получается меньше, чем при использовании React: 140 киб против ~400.

Нативная реактивность

Мне понравилось, что компонент реагировал на простое изменение переменной, хотя в React для этого приходилось использовать setState. Код выглядит лаконичнее.

Двунаправленное связывание данных

Во Vue можно запросто связать переменную компонента с полем формы. При изменении переменной поле формы обновится, а при пользовательском изменении поля формы изменится переменная компонента. 

Это гораздо проще, чем писать обработчики событий, как принято в React.

classnames из коробки

Когда список классов элемента зависит от некоторых условий, в React приходится либо писать велосипед, либо использовать classnames. Во Vue.js для этого есть встроенные средства. 

Кэширование computed

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

Хотя для React/Redux тоже есть выход — библиотека reselect.

Prop-types из коробки

Описание входных параметров компонента с указанием их типа и во Vue, и в React очень простое. Но для React почему-то приходится отдельно устанавливать нужный пакет.

Недостатки Vue

Синонимы

Вместо :v-bind и v-on можно использовать более короткие : и @, но об этом читателю рассказывается только спустя несколько разделов документации. По-моему, стоит придерживаться консистенции и писать всё в сокращённом варианте или хотя бы рассказывать о синонимах в самом начале.

Также меня смутило, что для директив вроде v-model и пр. нет синонима. 

Декларативность v-if, v-else-if, v-else

Странно, что в декларативные шаблоны добавили императивные операторы из языков программирования. По-моему, достаточно было реализовать условный рендеринг с помощью v-if, по аналогии с React. А с новыми директивами приходится следить не только за вызовом компонента, но и за соседними и их порядком вызова.

Приоритет директив

Во Vue у разных директив разный приоритет (например, v-if и v-for), что тоже не всегда делает код очевидным для понимания.

Вывод

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

Когда я прошу кого-то рассказать о преимуществах Vue, обычно всё сводится к заезженным аргументам, которые невозможно воспринимать серьёзно:

  • Низкий порог вхождения. 
  • Простота.
  • Популярность.

Порог вхождения сложно оценить объективно, потому что он зависит от опыта использования других библиотек (React, Backbone, Angular, JSVN и т. д.). Простота изучения так же субъективна. О популярности и говорить нечего: js-библиотеки и фреймворки рождаются так же быстро, как умирают. Это и плюс, и минус. Но в продуктах с длительным сроком поддержки стоит относиться к этому ответственнее.