На чём делать фронтенд? Самый верный способ найти ответ – попробовать лучшие библиотеки самостоятельно. В идеале, хорошо бы начать с самого простого и понять, как таинственные для непосвящённого конструкции превращаются в готовые к выводу страницы. Дальше же, вооружившись пониманием основ, можно осмысленно читать документацию и усложнять собственные эксперименты до тех пор, пока ответ не покажется очевидным.
Сегодня мы поговорим о 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 – это мощные инструменты, любой из которых позволяет создавать отличные веб-приложения, и, что бы вы ни выбрали – точно не прогадаете.
Уважаемые читатели! А чем вы пользуетесь для фронтенд-разработки?
Автор: RUVDS.com
