Преимущества и недостатки Vue.js: хороший, неоднозначный и злой

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

Мой медовый месяц длится долго. Примерно через 2 года почти ежедневного использования Vue я, наконец, могу написать об этом, имея определенную точку зрения. Рассмотрим свойственные Vue js преимущества, не забудем и про недостатки. ОСТОРОЖНО: Личное мнение.

Хороший

Реактивность

Привязывание данных — это отличная вещь в мире интерфейсов. Вместо микроменеджмента DOM, как мы это делали с jQuery, теперь мы фокусируемся на данных. Vue обрабатывает их аккуратно с помощью двухсторонней реактивной системы привязки данных.

Чтобы достичь этой реактивности, Vue добавляет несколько геттеров и сеттеров к каждой переменной в состоянии, чтобы она могла отслеживать изменения и автоматически обновлять DOM (кхе-кхе, this.setState()). Этот подход не является совершенным, как мы увидим позже.

Батареи прилагаются

С Vue нам нет необходимости прибегать к неофициальным пакетам, таким как MobX или React Router, для критических частей приложения. Vue предоставляет Vue Router и Vuex, Redux-подобный реактивный инструмент для управления состояниями. Это отличные библиотеки сами по себе, но тот факт, что они были специально разработаны для Vue, делает их еще лучше.

Скорость

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

HTML-шаблоны

Это одна из тем, вызывающих разногласия среди разработчиков JavaScript. Независимо от ваших предпочтений, HTML-шаблоны были проверены в течении десятилетий использования во многих языках и являются основным выбором для написания динамической разметки во Vue.

Но эй, Vue поддерживает также и JSX.

Другие приятные вещи:

Неоднозначный

Шаблон компонентов

Переход от React к Vue выглядит как глоток свежего воздуха. Больше не существует привязки (this) или setState(). Ура! Но через некоторое время вы начнете подвергать сомнению правильность синтаксиса компонентов Vue. Компоненты Vue создаются с помощью объектов, и вот пример определения функции компонента:

export default { methods: { increment () { this.count++; } }
}

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

class { increment() { this.state.count++; }
}

Сейчас я говорю не об использовании или не использовании классов, а о том, что Vue использует произвольные структуры объектов вместо языковых функций.

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

Чат-сообщество

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

Чаты грязные, но главная проблема заключается в том, что содержимое чата не может быть проиндексировано поисковыми системами. Те же вопросы (и связанные с ним обсуждения) обречены повторяться снова и снова, и снова.

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

Не такой волшебный

Пока вы не сходите с проторенного пути, все будет хорошо, но через некоторое время вы, вероятно, найдете много маленьких если и но, связанных с Vue. Некоторые примеры:

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

Злой

Нечеткие архитектурные шаблоны

Вот пример: что лучше — обрабатывать запросы API в компонентах или во Vuex? В документации приведены примеры того, как обрабатывать API-логику во Vuex. Есть даже красивая и красочная диаграмма:

Означает ли это, что логика аутентификации также входит во Vuex? Будет ли менеджер состояний начинать перехватывать всю логику приложения?

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

Отвечая на первоначальный вопрос: логика API не должна писаться ни во Vuex, ни в компонентах. Существует даже хороший пример того, как это делается в официальных примерах кода.

Заключение

Все больше людей переходят на Vue, и я сомневаюсь, что эта тенденция скоро прекратится. Он все еще далеко не настолько принят, как React (по крайней мере, за пределами Китая), и постоянно борется за второе место с Angular.

В прошлом я утверждал, что Vue — это прагматичная библиотека, в отличие от React, которая кажется более идеалистической («Мы чистый JavaScript!»). Я все еще думаю, что это хорошая метафора. С другой стороны, теперь я чувствую, что прагматизм-для-всего от Vue нуждается в гораздо большей доводке, элегантности и простоте на уровне пользователя.

За 2 года мой опыт работы с Vue был положительным. Я все еще уверен, что это было хорошим решением перевести мою команду с React на Vue. Не потому, что Vue лучше, а потому, что он лучше подходит для нас.

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

Автор: Pier Bover

Источник: https://medium.com/

Редакция: Команда webformyself.