Статьи

Реагируйте или Vue: какую библиотеку JavaScript UI вы должны использовать?

В 2016 году React укрепил свои позиции в качестве короля веб-фреймворков JavaScript. В этом году произошел быстрый рост как веб-сайтов, так и нативных мобильных библиотек, а также уверенное опережение своего основного конкурента Angular.

Но 2016 год был столь же впечатляющим для Vue. Выпуск его версии 2 произвел огромное впечатление на сообщество JavaScript, о чем свидетельствуют 25 000 дополнительных звезд Github, которые он получил в этом году.

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

В результате многие веб-разработчики задаются вопросом, какой из них следует использовать. Одно явно превосходит другое? Есть ли у них конкретные плюсы и минусы, о которых нужно знать? Или они в основном одинаковые?

Две структуры, два защитника

В этой статье я хочу ответить на эти вопросы путем тщательного и справедливого сравнения. Единственная проблема: я бессовестный фанат Vue и полностью предвзят. Я активно использовал Vue в своих проектах и ​​даже выпустил онлайн-курс, курс для разработчиков Ultimate Vue.js.

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

Алексис спросила меня однажды: «Почему ты так увлекаешься Vue, а не React?» Поскольку я плохо знал React, я не мог дать хороший ответ. Поэтому я предложил ему, чтобы мы однажды сели с ноутбуками и показали друг другу, что должна предложить наша выбранная библиотека.

1-0_PABYfDH4JN8GDzg2rgvA.jpeg

Энтони (слева) и Алексис (справа) сравнивают React и Vue в кафе Bull and Bear в Чиангмае, Таиланд

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

Если вам нравится создавать приложения с помощью шаблонов (или вы хотите вариант), переходите с Vue

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

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

Напротив, приложения React избегают шаблонов и требуют, чтобы разработчик создал свой DOM на JavaScript, обычно с помощью JSX. Ниже приведено то же простое приложение, реализованное с помощью React:

<div id="app"></div>
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello React.js!'
    };
  }
  reverseMessage() {
    this.setState({ 
      message: this.state.message.split('').reverse().join('') 
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={() => this.reverseMessage()}>
          Reverse Message
        </button>
      </div>
    )
  }
}
ReactDOM.render(App, document.getElementById('app'));

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

Но шаблоны стоят за счет изучения всего расширенного синтаксиса HTML, в то время как функции визуализации требуют знания только стандартных HTML и JavaScript. Функции рендеринга также выигрывают от упрощения отладки и тестирования.

В этом случае, однако, вы не ошибетесь с Vue, поскольку в версии 2 появилась возможность использовать либо шаблоны, либо функции визуализации.

Если вам нравится простота и вещи, которые «просто работают», идите с Vue

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

Хотя это технически возможно и с React, типичный код React в большей степени опирается на JSX и на функции ES6, такие как классы и методы неизменяемого массива. Но простота Vue более глубока в его дизайне. Давайте сравним, как две библиотеки обрабатывают данные приложения (т.е. «состояние»).

Состояние в React является неизменным, поэтому вы не можете напрямую изменить его. Вам нужно использовать setStateметод API:

this.setState({ 
    message: this.state.message.split('').reverse().join('') 
});

Различия между текущим и предыдущим состоянием — это то, как React знает, когда и что нужно перерисовывать в DOM, отсюда и необходимость неизменного состояния.

Напротив, данные просто видоизменяются в Vue. Одно и то же свойство данных можно изменить гораздо менее подробно в Vue:

// Note that data properties are available as properties of 
// the Vue instance
this.message = this.message.split('').reverse().join('');

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

Впечатляет, что изменение состояния в Vue не только более лаконично, но и его система повторного рендеринга на самом деле быстрее и эффективнее, чем React.

У системы реактивности Вью есть свои предостережения. Например, он не может обнаружить добавление или удаление свойства и некоторые изменения массива. Эти случаи можно обойти с помощью React-подобного setметода из Vue API.

Если вам нужно, чтобы ваше приложение было как можно более маленьким и быстрым, переходите на Vue

React и Vue создадут виртуальный DOM и синхронизируют реальный DOM при изменении состояния приложения. У обоих есть свои способы оптимизации этого процесса. Разработчики ядра Vue предложили контрольный тест, который показывает, что система рендеринга Vue работает быстрее, чем React. В этом тесте список из 10000 элементов отображается 100 раз. Сравнение приведено ниже.

1-xy2KzzZrqP0mdLUbIdC-xA.png

Тесты, опубликованные на vuejs.org

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

Размер страницы, тем не менее, имеет отношение ко всем проектам, и снова Vue имеет преимущество. Сокращенный, текущий выпуск библиотеки Vue — только 25.6 КБ.

Чтобы получить аналогичный набор функций в React, вам понадобится React DOM (37,4 КБ) и библиотека React с аддонами (11,4 КБ), общий объем которой составляет 48,8 КБ, что почти вдвое превышает размер Vue. Честно говоря, вы получите больший API с React, но вы не получите вдвое больше функциональности.

Если вы планируете создать крупномасштабное приложение, идите с React

Сравнение простого приложения, реализованного в Vue и React, как в начале этой статьи, может изначально сместить разработчика в пользу Vue. Это связано с тем, что приложения на основе шаблонов проще понять с первого взгляда и быстрее начать работу с ними.

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

Напротив, созданные на JavaScript шаблоны могут быть организованы в компоненты с хорошо разложенным и DRY-кодом, который более пригоден для повторного использования и тестирования.

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

Между тем, неизменяемые данные приложения React могут быть не такими краткими, но они светятся в более крупном приложении, когда прозрачность и тестируемость становятся критическими.

Если вам нужна библиотека, которая может быть адаптирована как для веб-приложений, так и для собственных приложений, используйте React

React Native — это библиотека для создания собственных мобильных приложений с JavaScript. Это то же самое, что React.js, только вместо использования веб-компонентов, он использует нативные компоненты. Если вы изучили React.js, вы очень легко сможете выбрать React Native, и наоборот.

import React, { Component } from 'react'; 
import { AppRegistry, Text, View } from 'react-native';  
class HelloWorld extends Component {   
  render() {     
    return (       
      <View>         
        <Text>Hello, React Native!</Text>
      </View>
    );   
  }
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

Значение заключается в том, что разработчик может создать приложение либо в Интернете, либо на собственном мобильном устройстве, не требуя другого набора знаний и инструментов. Learning React дает вам огромный выигрыш, если вы собираетесь разрабатывать как для Интернета, так и для мобильных устройств.

Weex от Alibaba — еще один кроссплатформенный проект пользовательского интерфейса. В настоящее время он считает Vue «источником вдохновения» и использует практически тот же синтаксис с планами полной интеграции Vue. Тем не менее, сроки и особенности этой интеграции все еще неясны.

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

Если вы хотите самую большую экосистему, идите с React

Нет сомнений в том, что React в настоящее время является более популярной библиотекой с загрузкой ~ 2,5 млн. NPM в месяц, а не Vue ~ 225K в месяц.

1-YTD_ZbHE77GWKzYJVGh_Fw.png

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

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

Напротив, Vue был создан одним разработчиком, Evan You, и Вы в настоящее время являетесь единственным постоянным сопровождающим Vue. У Vue есть корпоративное спонсорство, но не в масштабах Facebook или Google.

К чести команды Vue, ее небольшой размер и независимость не стали недостатком. У Vue есть регулярный цикл выпуска, и что еще более впечатляюще, у Vue всего 54 открытых вопроса на Github по сравнению с 3456 закрытыми, в то время как у React гораздо больше 530 открытых проблем по сравнению с 3447 закрытыми.

Если вы уже довольны тем или иным, переключаться не нужно

Напомним, наши выводы, сильные стороны Vue являются:

  • Гибкие параметры для шаблонов или функций рендеринга.
  • Простота в синтаксисе и настройке проекта.
  • Более быстрый рендеринг и меньший размер.

Реагировать на сильные стороны:

  • Лучше в масштабе, крепче и проверяемее.
  • Веб и нативные приложения.
  • Большая экосистема с большей поддержкой и доступными инструментами.

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

  • Быстрый рендеринг с виртуальным DOM.
  • Легкий.
  • Реактивные компоненты.
  • Рендеринг на стороне сервера.
  • Простая интеграция с роутером, компоновщиком и управлением состоянием.
  • Отличная поддержка и сообщество.

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


Об авторах

Я разработчик JavaScript и преподаватель онлайн-курса. Я веду блог разработчиков Vue.js и являюсь автором курса Ultimate Vue.js для разработчиков.

Алексис Мангин

Алексис помог мне написать эту статью с его исключительным знанием веб-разработки. Вы должны следовать за ним на Medium, поскольку он пишет свои собственные великолепные учебники по React.