[Перевод] React или Vue? Выбираем библиотеку для фронтенд-разработки03.03.2017 15:18

На чём делать фронтенд? Самый верный способ найти ответ — попробовать лучшие библиотеки самостоятельно. В идеале, хорошо бы начать с самого простого и понять, как таинственные для непосвящённого конструкции превращаются в готовые к выводу страницы. Дальше же, вооружившись пониманием основ, можно осмысленно читать документацию и усложнять собственные эксперименты до тех пор, пока ответ не покажется очевидным.

Сегодня мы поговорим о React.js и Vue.js. Это — одни из самых популярных JavaScript-библиотек в мире. Взгляните на этот список, посмотрите их репозитории на GitHub. И та, и другая обладают впечатляющими возможностями и служат для создания пользовательских интерфейсов. Работать с ними довольно просто, главное — сразу понять, что к чему, сделать правильный первый шаг. Собственно говоря, этому вот первому шагу в разработке с использованием React и Vue и посвящён данный материал.

На первый взгляд, эти библиотеки очень похожи. Действительно, они служат для одной и той же цели. Сходства этим не ограничиваются. В частности, в документации к Vue.js есть раздел, посвящённый сравнению с другими фреймворками. Особое место, именно по причине множества общих черт, в нём занимает сравнение с React. Однако, нас больше интересуют различия, причём, касающиеся практических аспектов работы. А именно, речь идёт о том, как именно с использованием этих библиотек описывают пользовательский интерфейс приложения.

Позволим себе процитировать документацию к Vue, которая, кстати, была подготовлена при участии сообщества React: «В React все компоненты описывают свой UI посредством render-функций, используя JSX — декларативный XML-подобный синтаксис, работающий внутри JavaScript.» Фактически, речь идёт о том, что механизмы React помогают внедрять HTML-разметку прямо в код на JavaScript. В Vue же, в основном, применяется другой подход. Здесь используются шаблоны, которые и располагаются в HTML-файлах, и похожи на обычную HTML-разметку. В то же время, JSX-описания на веб-страницы не попадают.

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

HTML и больше ничего

Наша задача заключается в том, чтобы вывести на веб-страницу (добавить в DOM) список имён недавно принятых на работу сотрудников некоей компании.

Если делать это, используя исключительно HTML, то сначала надо создать обычный HTML-файл (назовём его index.html), в котором, помимо служебных тегов, будет такая вот конструкция:


   John 
   Sarah 
   Kevin 
   Alice

Тут нет ничего примечательного, это — обычный HTML-список. До тех пор, пока в нём всего несколько элементов, ручная правка кода труда не составит. Но что, если речь идёт о списке в несколько сотен или тысяч элементов, даже не учитывая то, что такой список может нуждаться, например, в динамическом обновлении? Без специализированных инструментов, таких, как React и Vue, справиться с таким объёмом данных очень непросто.

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

React JSX

Итак, выводим список средствами React.

Первый шаг — создание другого файла index.html. Но в него, вместо тегов, формирующих список, добавим обычный элемент div. Он будет служить контейнером, в который выведется то, что будет сформировано средствами React.

У этого элемента должен быть уникальный ID для того, чтобы React смог его найти и работать с ним. В Facebook (если кто не знает — React родом именно оттуда) для идентификаторов подобных элементов обычно используют ключевое слово «root», поэтому мы поступим так же.

Переходим к самому важному. Создадим JavaScript-файл, который будет содержать весь код React. Назовём его app.js. В нём и напишем то, что позволит вывести список новых сотрудников в DOM с использованием JSX.

Сначала надо создать массив с именами сотрудников.

const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];

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

const displayNewHires = (
  
    {names.map(name => {name} )}
  
);

Самое важное, на что надо обратить внимание, это то, что не нужно самостоятельно создавать отдельные элементы

. Достаточно описать то, как они должны выглядеть, a React сделает всё остальное. Это — весьма мощный механизм, который отлично подходит для решения вышеупомянутой проблемы «многотысячного списка». С ростом объёма данных преимущества React перед ручной вёрсткой становятся совершенно очевидными. Особенно — если элементы

устроены сложнее, чем те, которые мы использовали здесь. Последний фрагмент кода, который необходим для вывода данных на экран — это функция ReactDom.render.

ReactDOM.render(
  displayNewHires,
  document.getElementById(‘root’)
);

Здесь мы сообщаем React о том, что надо вывести содержимое displayNewHires в элемент div с идентификатором root.

const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];
const displayNewHires = (
  
    {names.map(name => {name} )}
  
);
ReactDOM.render(
  displayNewHires,
  document.getElementById(‘root’)
);

Тут важно не забывать о том, перед нами — код React. То есть, перед исполнением, всё это будет скомпилировано в обыкновенный JavaScript.

 ‘use strict’;
var names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];
var displayNewHires = React.createElement(
  ‘ul’,
  null,
  names.map(function (name) {
    return React.createElement(
      ‘li’,
      null,
      name
    );
  })
);
ReactDOM.render(displayNewHires, document.getElementById(‘root’));

Вот, собственно, и всё. Получилось React-приложение, которое выводит список имён сотрудников из массива. Ничего особенного, но этот простой пример должен дать вам представление о том, что умеет React. А как сделать то же самое средствами Vue?

Шаблоны Vue

Здесь, как и в прошлый раз, напишем приложение, которое позволяет сформировать веб-страницу со списком имён.

Создадим ещё один index.html. Внутри файла разместим пустой элемент div с идентификатором root. Тут стоит отметить, что идентификатор элементу можно назначить какой угодно, особой роли это не играет. Главное — чтобы этот ID совпадал с тем, который будет использоваться в коде.

Элемент div будет играть ту же роль, что и в React-приложении. Он сообщит JS-библиотеке, на этот раз Vue, к какой именно части DOM обратиться, когда начнётся вывод данных на страницу.

После того, как HTML-файл готов, пришло время создать JavaScript-файл, который будет содержать код Vue. Назовём его, как и раньше, app.js.

Теперь настало время поговорить о том, как именно Vue выводит данные на страницы.

Vue, когда дело доходит до манипуляций с DOM, использует подход с применением шаблонов. Это означает, что в HTML-файле элемент div не будет совершенно пустым, как это было в случае с React. На самом деле, в HTML-файл будет вынесена немалая часть кода.

Для того, чтобы лучше в этом разобраться, давайте вспомним о том, как создать список имён с использованием обычного HTML.

Список представлен тегом

. В Vue нужно сделать почти то же самое, но с некоторыми изменениями. Итак, создадим элемент
- .
```
  
  
```
  Пока всё вполне привычно. Отредактируем
- , добавив к нему директиву Vue, которая выглядят как атрибут тега.
```
  
  
```
  Собственные директивы — это подход, который используется в Vue для добавления JavaScript-функциональности непосредственно в HTML. В начале директив располагаются символы v-, за ними следует описательное имя, которое позволяет понять роли директив. В данном случае перед нами цикл for. Для каждого имени из listOfNames мы хотим скопировать элемент
- и заменить его новым элементом
- , содержащим это имя.
  Теперь, для того, чтобы сделать код работоспособным, осталась лишь самая малость. А именно, то, что уже написано, позволит сформировать элемент
- для каждого имени в списке. Но мы пока не сообщили системе о том, что в этом элементе должно содержаться имя из списка. Для того, чтобы это исправить, надо добавить в элемент
- конструкцию, синтаксис которой похож на шаблоны Mustache. Возможно, вы такое уже видели в других JS-библиотеках.
```
  
    {{name}}
  
```
  Элемент
- готов к работе. Теперь каждый из элементов списка, сформированного средствами Vue, будет выводить имя из listOfNames. Стоит помнить, что слово «name» в данном случае выбрано произвольно. С тем же успехом можно использовать любое другое, скажем, «item». Всё, что делает ключевое слово — это служит полем для подстановки, которое будет использоваться при обработке списка имён.
  Осталось лишь создать набор данных и инициализировать Vue в приложении. Для этого надо создать новый экземпляр Vue. Назначим его переменной app.
```
let app = new Vue({
});
```
  Объект Vue принимает несколько параметров. Первый, и, пожалуй, самый важный, это el (то есть, элемент). Он сообщает Vue о том, где именно в DOM находится место, куда надо добавлять новые элементы. Это очень похоже на то, как работает React.
```
let app = new Vue({
  el:’#root’,
});
```
  Последний шаг — добавление в приложение Vue данных. В этой библиотеке передача данных приложению выполняется через параметр экземпляра Vue. Кроме того, у каждого экземпляра Vue может быть только один параметр каждого вида. Хотя параметров довольно много, в нашем примере основное внимание можно уделить лишь двум — это вышеописанный el, и параметр data.
```
let app = new Vue({
  el:’#root’,
  data: {
    listOfNames: [‘Kevin’, ‘John’, ‘Sarah’, ‘Alice’]
  }
});
```
  Объект data теперь содержит массив listOfNames. А когда понадобится использовать этот набор данных в приложении, его нужно будет лишь вызвать, используя директиву. Всё довольно просто. Вот как выглядит готовое приложение.
  HTML:
```
  
    
      {{name}}
    
  
```
  JavaScript:
```
new Vue({
  el:"#root",
  data: {
    listOfNames: [‘Kevin’, ‘John’, ‘Sarah’, ‘Alice’]
  }
});
```
  Заключение
  
  Теперь вы знаете, как создавать простые приложения с использованием React и Vue. Надеемся, вы, с помощью наших простых примеров, сделали первые шаги в областях разработки с использованием React и Vue, и готовы двигаться дальше в поисках «своей» фронтенд-библиотеки.
  В итоге хочется сказать, что обе библиотеки предлагают отличный набор возможностей. Обычно, хотя это, вероятно, вопрос привычки, Vue несколько проще в использовании. Стоит отметить, что Vue поддерживает JSX, но подобный подход к созданию Vue-приложений используют нечасто.
  В любом случае, и React, и Vue — это мощные инструменты, любой из которых позволяет создавать отличные веб-приложения, и, что бы вы ни выбрали — точно не прогадаете.
  Уважаемые читатели! А чем вы пользуетесь для фронтенд-разработки?

Комментарии (14)

bjornd

3 марта 2017 в 14:08

+1

↑

↓

Это — одни из самых популярных JavaScript-библиотек в мире. Взгляните на этот список, посмотрите их репозитории на GitHub.

Я бы рекомендовал смотреть на более объективные источники, например реальные опросы большого количества людей
- ainu
  
  3 марта 2017 в 14:34
  
  0
  
  ↑
  
  ↓
  
  Вот спасибо большое.
- idze
  
  3 марта 2017 в 15:12
  
  0
  
  ↑
  
  ↓
  
  «Есть три вида лжи: ложь, наглая ложь и статистика» — Бенджамин Дизраэли
Stronix

3 марта 2017 в 14:15

0

↑

↓

А как обстоят дела с индексацией поисковиками этих «реактивных» SPA?
- ainu
  
  3 марта 2017 в 14:22
  
  0
  
  ↑
  
  ↓
  
  Реакт можно компилировать на сервере и отдавать HTML.
  - impwx
    
    3 марта 2017 в 14:25
    
    0
    
    ↑
    
    ↓
    
    Да и Vue умеет это делать ничуть не хуже.
  - nckma
    
    3 марта 2017 в 15:12
    
    0
    
    ↑
    
    ↓
    
    А кто компилирует такое? Это какие-то php скрипты или что?
    Я честно говоря не программирую веб, вот такие статьи читаю и пытаюсь понять что это вообще такое.
    Такое впечатление, что чистого языка мало и придумывают язык в языке, как какое-то мета-программирование…
    Но в чем смысл? Почему не написать просто на JS? Это что сильно труднее?
- j_wayne
  
  3 марта 2017 в 14:30 (комментарий был изменён)
  
  0
  
  ↑
  
  ↓
  
  --deleted--
- Yozi
  
  3 марта 2017 в 14:30
  
  0
  
  ↑
  
  ↓
  
  Оба поддерживают server-side rendering (самый настоящий). Немножко про варианты решения проблемы с индексацией можно прочитать тут http://vuejs.org/v2/guide/ssr.html
  - Stronix
    
    3 марта 2017 в 15:02
    
    0
    
    ↑
    
    ↓
    
    Но тогда теряется преимущество рендеринга на стороне клиента — вместо передачи по сети только лишь данных, мы опять начинаем гонять странички.
    - oxidmod
      
      3 марта 2017 в 15:12
      
      0
      
      ↑
      
      ↓
      
      хтмл отдают поисковику, а не клиентам)
myrkoxx

3 марта 2017 в 14:31

0

↑

↓

Сейчас — Ember.js, еще Angular2 выглядит неплохо (сужу по опробованых мной туториалах). Как для бекендщика лучше на фронт нету (чисто мое ИМХО)
- psFitz
  
  3 марта 2017 в 15:11
  
  0
  
  ↑
  
  ↓
  
  Angular 2 действительно хорош, особенно на фоне первого
RouR

3 марта 2017 в 15:05

0

↑

↓

В наших проектах в основном нужен viewmodel-databinding. В старом проекте используется knockout, в новом попробовал angularlight

[Перевод] React или Vue? Выбираем библиотеку для фронтенд-разработки03.03.2017 15:18

HTML и больше ничего

React JSX

Шаблоны Vue

Заключение

Комментарии (14)