React или Vue: какую Javascript библиотеку использовать?

Источник статьи
В 2016 году React занял лидирующие позиции среди библиотек Javascript. В этом году был замечен стремительное развитие веб и мобильной версии библиотеки и заметное преимущество над главным соперником – Angular.
Но 2016 год был благоприятным и для Vue. Выход в свет второй версии Vue произвело огромное впечатление на Javascript сообщество, подтверждение этому дополнительные 25 тыс. звездочек которые Vue получил на Github в этом году.
Особенности обеих библиотек неоспоримо очень похожи: легковесные компоненты библиотек, которые разработаны для создания пользовательского интерфейса на разных уровнях. Обе библиотеки могут быть использованы в простых проектах, а также в более масштабных и сложных приложениях с использованием современных инструментов разработки.
Как результат, многие разработчики задают вопрос – какую библиотеку использовать? Какая из них лучшая? Имеют ли они конкретные плюсы и минусы о которых нужно знать? Или они практически одинаковы?

Два фреймворка. Два мнения.

В этой статье я хочу подробно ответить на выше заданные вопросы, сравнивая возможности библиотек. Единственная проблема в том, что я предвзятый сторонник Vue. Я активно использовал Vue в своих проектах весь этот год, воспевал его на MEDIUM и Udemy course.
В преимуществах Vue я почти убедил своего друга – Алекса Мангина, который является прекрасным Javascript девелопером, а также большим фанатом библиотеки React. Он также поглощен Reactом, как и я Vue.
Алекс однажды меня спросил: «Почему ты такой фанат Vue, а не React?» Так как я не очень знаком с React я не мог дать исчерпывающий ответ. Поэтому я ему предложил, почему бы нам не показать друг другу свою библиотеку – плюсы каждой из них?
После долгих дискуссий и обсуждений, мы сделали следующие выводы.

1. Если Вы хотите создавать приложения с шаблонами (или иметь такую возможность) используйте Vue.

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

// HTML

<div id="app">

  <p>{{ message }}</p>

  <button v-on:click="reverseMessage">Reverse Message</button>

</div>

// JS

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>

// JS (pre-transpilation)

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 и на особенности ES.
Простота Vue больше исходит от его дизайна. Давайте сравним, как две библиотеки обрабатывают данные приложения (например “значение”).
Значения в React неизменны поэтому вы не сможете его изменить напрямую. Для этого вам понадобится метод setState:

this.setState({

  message: this.state.message.split('').reverse().join('')

});

Сравнивая настоящее и предыдущее значение – это и дает возможность React понимать что и когда добавлять в DOM, следовательно это и есть причиной невозможности изменить значение напрямую.
В Vue все наоборот данные просто изменяются. Данные могут быть изменены более простым способом:

// Note that data properties are available as properties of

// the Vue instance

this.message = this.message.split('').reverse().join('');

Прежде чем делать выводы, что процессу рендеринга Vue не хватает эффективности React давайте посмотрим, что же происходит за кулисами во время изменения значения данных: добавляя новые объекты к данным, Vue будет проходить через все значения и сравнивать, что было и что должно быть. Vue постоянно наблюдает за состоянием DOM и автоматически меняет значения, как только оно было изменено.
Весь этот процесс в Vue не только более емкий, но и более быстрый и эффективный по сравнению с React.
Но у Vue есть и недостатки. Например, он не может отслеживать редактирование значений, их удаления и другие изменения массива. Эти недостатки можно доработать на с помощью set-методов React.

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

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

// JS

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);