В 2016 году React укрепил свои позиции в качестве короля веб-фреймворков JavaScript. В этом году произошел быстрый рост как веб-сайтов, так и нативных мобильных библиотек, а также уверенное опережение своего основного конкурента Angular.
Но 2016 год был столь же впечатляющим для Vue. Выпуск его версии 2 произвел огромное впечатление на сообщество JavaScript, о чем свидетельствуют 25 000 дополнительных звезд Github, которые он получил в этом году.
Область применения React и Vue, несомненно, схожа: обе они представляют собой легкие библиотеки на основе компонентов для создания пользовательских интерфейсов, ориентированных только на уровень представления. Оба могут быть использованы в простом проекте, или могут быть расширены до сложного приложения с использованием передовых инструментов.
В результате многие веб-разработчики задаются вопросом, какой из них следует использовать. Одно явно превосходит другое? Есть ли у них конкретные плюсы и минусы, о которых нужно знать? Или они в основном одинаковые?
Две структуры, два защитника
В этой статье я хочу ответить на эти вопросы путем тщательного и справедливого сравнения. Единственная проблема: я бессовестный фанат Vue и полностью предвзят. Я активно использовал Vue в своих проектах и даже выпустил онлайн-курс, курс для разработчиков Ultimate Vue.js.
Чтобы выровнять мою предвзятую позицию, я пригласил моего друга Алексиса Мангина, который является и отличным разработчиком JavaScript, и большим поклонником React. Он так же погружен в React, часто используя его как в веб, так и в мобильных проектах.
Алексис спросила меня однажды: «Почему ты так увлекаешься Vue, а не React?» Поскольку я плохо знал React, я не мог дать хороший ответ. Поэтому я предложил ему, чтобы мы однажды сели с ноутбуками и показали друг другу, что должна предложить наша выбранная библиотека.
Энтони (слева) и Алексис (справа) сравнивают 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 раз. Сравнение приведено ниже.
Тесты, опубликованные на 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 в месяц.
Популярность — это не просто мелкая выгода. Это означает, что есть еще статьи, учебники и ответы на переполнение стека. Это означает, что в проекте есть больше инструментов и надстроек, позволяющих разработчикам самим создавать все.
Обе библиотеки имеют открытый исходный код, но 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.