React или Vue? Выбираем библиотеку для фронтенд-разработки

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



Сегодня мы поговорим о 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), в котором, помимо служебных тегов, будет такая вот конструкция:

<ul>
  <li> John </li>
  <li> Sarah </li>
  <li> Kevin </li>
  <li> Alice </li>
<ul>

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

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

React JSX

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

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

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

<div id=’root’></div>

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

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

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

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

const displayNewHires = (
  <ul>
    {names.map(name => <li>{name}</li> )}
  </ul>
);

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

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

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

const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];
const displayNewHires = (
  <ul>
    {names.map(name => <li>{name}</li> )}
  </ul>
);
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.

Список представлен тегом <ul>, содержащим некоторое количество элементов <li>. В Vue нужно сделать почти то же самое, но с некоторыми изменениями. Итак, создадим элемент <ul>.

<ul>
</ul>

Теперь, внутри этого элемента, создадим один пустой <li>.

<ul>
  <li>
  </li>
</ul>

Пока всё вполне привычно. Отредактируем <li>, добавив к нему директиву Vue, которая выглядят как атрибут тега.

<ul>
  <li v-for=’name in listOfNames’>
  </li>
</ul>

Собственные директивы – это подход, который используется в Vue для добавления JavaScript-функциональности непосредственно в HTML. В начале директив располагаются символы v-, за ними следует описательное имя, которое позволяет понять роли директив. В данном случае перед нами цикл for. Для каждого имени из listOfNames мы хотим скопировать элемент <li> и заменить его новым элементом <li>, содержащим это имя.

Теперь, для того, чтобы сделать код работоспособным, осталась лишь самая малость. А именно, то, что уже написано, позволит сформировать элемент <li> для каждого имени в списке. Но мы пока не сообщили системе о том, что в этом элементе должно содержаться имя из списка. Для того, чтобы это исправить, надо добавить в элемент <li> конструкцию, синтаксис которой похож на шаблоны Mustache. Возможно, вы такое уже видели в других JS-библиотеках.

<ul>
  <li v-for=’name in listOfNames’>
    {{name}}
  </li>
</ul>

Элемент <li> готов к работе. Теперь каждый из элементов списка, сформированного средствами 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:

<div id="root">
  <ul>
    <li v-for=’name in listOfNames’>
      {{name}}
    </li>
  </ul>
</div>

JavaScript:

new Vue({
  el:"#root",
  data: {
    listOfNames: [‘Kevin’, ‘John’, ‘Sarah’, ‘Alice’]
  }
});

Заключение

Теперь вы знаете, как создавать простые приложения с использованием React и Vue. Надеемся, вы, с помощью наших простых примеров, сделали первые шаги в областях разработки с использованием React и Vue, и готовы двигаться дальше в поисках «своей» фронтенд-библиотеки.

В итоге хочется сказать, что обе библиотеки предлагают отличный набор возможностей. Обычно, хотя это, вероятно, вопрос привычки, Vue несколько проще в использовании. Стоит отметить, что Vue поддерживает JSX, но подобный подход к созданию Vue-приложений используют нечасто.

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

Уважаемые читатели! А чем вы пользуетесь для фронтенд-разработки?