1 Мар 2017

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 раз. Ниже показаны результаты теста.

Vue React
Fastest 23ms 63ms
Median 42ms 81ms
Average 51ms 94ms
95th Perc. 73ms 164ms
Slowest 343ms 453ms

С прагматической точки зрения, этот вид теста имеет значение только в крайних случаях. Большинству приложений такие тесты обычно не нужны, поэтому нет необходимости считать его основополагающим.
Хотя размер библиотеки имеет отношение ко всем проектам и в этом случае Vue занимает лидирующие позиции. Данный релиз библиотеки Vue минимизирован до размера всего в 25.6 Кб.
Чтобы получить все инструменты React вам понадобится React DOM (37.4 Кб), а также сама библиотека React (11.4 Кб), это уже 48.8 Кб, что почти в два раза больше чем Vue. Будучи откровенным вы получите больше API с React, но вы не получите в два раза больше функциональности.

4. Если вы планируете создавать более масштабное приложение – выбирайте React.

Сравнивая простые приложения созданные на React и Vue, опытный разработчик конечно же отдаст предпочтение Vue. Все потому что приложения, созданные с помощью шаблонов легче понимать и проще создавать.
Но эти преимущества могут замедлить разработку, если приложение будет увеличиваться в размерах. Шаблонность приложения подвержена ошибкам во время выполнения определенных задач, сложно тестировать и совсем нелегко поддается реструктуризации и разбивке на компоненты.
Напротив, Javascript-шаблоны легко организовать в компоненты и они имеют более чистый, предназначенный для многоразового использования код, а также его легче тестировать.
У Vue также имеется компонентная система и рендеринга функций. Rendering система Vue более гибкая, также она имеет функции поверхностного рендеринга, что позволяет более гибко настраивать приложение и легче сопровождать код в будущем.
В то же время невозможность так просто переписать значение данных, используя библиотеку React дает преимущества в больших приложениях когда читаемость и и возможность тестировать код становится критически важным.

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

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


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

Очень важно то, что разработчик может строить приложение для веб или мобильные версии без дополнительных знаний и инструментов. Изучение React дает вам неоспоримое преимущество если вы планируете разрабатывать как веб так и мобильные приложения.
Alibaba Weex еще одна кросс-платформенная UI библиотека. В настоящее время, воодушевленные библиотекой Vue, используя их синтаксис, они планируют полностью интегрировать Vue в свою библиотеку в будущем. Но дата и особенности этой интеграции еще не известны.
Поскольку Vue используют атрибуты HTML как основу своего дизайна и не имеют собственного представления, очень мало верится что “двойник” Vue.js будет таким же лаконичным и сжатым как React и React Native.

6. Если вам нужен супер большой механизм – вам по пути с React.

Безоговорочно сегодня React более популярная библиотека с 2.5 млн. скачиваний в месяц по сравнению с 225 тыс. скачиваний Vue.

downloads

Популярность это не просто мелкое преимущество. Это значит больше статей, руководств и обсуждений библиотеки. Это значит больше дополнений для внедрения в проект, что тем самым экономит время и силы разработчика, дает возможность использовать уже готовое решение, а не разрабатывать все самому.
Обе библиотеки это open source продукт, но React был рожден командой Facebook и в этом его преимущество. Компании и разработчики, отдающие предпочтение React могут быть уверенны в долгосрочной технической поддержке библиотеки.
А Vue был создан одним разработчиком Evan You, который и осуществляет техническую поддержку библиотеки. Хотя у Vue и существует корпоративное спонсорство, но это не в таких масштабах как Facebook или Google.
Не смотря на все вышеуказанные моменты в жизни Vue – это не стало недостатком библиотеки. Библиотека Vue регулярно релизится, и что более поразительно так это 54 открытых issues на Github и 3456 уже решенных по сравнению с 530 открытыми для React и 3447 закрытых.

Если вы удачно используете одну из библиотек, нет смысла менять ее.

Чтобы подытожить наши исследования, сильные стороны Vue в следующем:

Гибкость при создании шаблонов и рендеринга;

Простота синтаксиса и создания проекта;

Маленький размер библиотеки и более быстрое внедрение.

Сильные стороны React:

Лучше при разработке больших приложений, легче в изучении и тестировании;

Подходит для кросс-платформенной разработки;

Имеет более развитую систему дополнений и инструментов.

Но все-таки React и Vue – это исключительные UI-библиотеки, у которых больше сходства, чем различий. Вот наилучшие из их качеств:

Быстрое взаимодействие с виртуальным DOM;

Легковесность;

Быстро реагирующие компоненты;

Возможность использовать на стороне сервера;

Простая синхронизация с маршрутизатором, простой менеджмент состояний;

Прекрасная поддержка и большое сообщество.

Если вы считаете что мы что-то упустили, пожалуйста, оставляйте ваши комментарии.