Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Питер
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Russisch
Vue.js – это популярная библиотека для создания пользовательских интерфейсов. В ней значительно переосмыслены реактивные идеи, впервые появившиеся в React.js. Книга «Vue.js в действии» рассказывает о создании быстрых и эластичных пользовательских интерфейсов для Интернета. Освоив ее, вы напишете полноценное приложение для интернет-магазина, где будут присутствовать списки товаров, админка, а также организован полноценный процесс онлайнового заказа.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 272
Veröffentlichungsjahr: 2024
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Переводчики С. Черников, С. Черников
Эрик Хэнчетт, Бенджамин Листуон
Vue.js в действии. — СПб.: Питер, 2024.
ISBN 978-5-4461-1098-8
© ООО Издательство "Питер", 2024
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Оглавление
Вступление
Клиентская веб-разработка стала на удивление сложной. Если вы никогда не имели дела с современными фреймворками для JavaScript, то можете потратить целую неделю на создание своей первой программы, которая всего лишь выводит приветствие! Это звучит нелепо, и здесь я с вами соглашусь. Проблема в том, что большинство фреймворков требуют навыков работы с терминалом, углубленного знания JavaScript, владения такими инструментами, как NPM (Node Package Manager — диспетчер пакетов Node), Babel, Webpack, — и часто это еще не полный список.
Однако к Vue все это не относится. Мы называем эту библиотеку прогрессивной, поскольку она масштабируется в обе стороны. Если приложение простое, используйте Vue по аналогии с JQuery, вставляя элемент script. Но с ростом требований и приобретением вами новых навыков работа с Vue станет все более разносторонней и продуктивной.
У Vue есть еще одна отличительная черта. Этот проект разрабатывается не только программистами, но и дизайнерами, преподавателями и специалистами других гуманитарных профессий. Благодаря этому наши документация, руководства и инструменты для разработки одни из лучших в мире. Ощущения от использования Vue имеют для нас такое же значение, как производительность, надежность и гибкость.
Эрику удалось сделать эту книгу ориентированной на обычных людей. Прежде всего она необыкновенно наглядная. Множество подробных иллюстраций и снимков экрана с примечаниями неразрывно связывают приведенные здесь примеры с реальным процессом разработки. В итоге, чтобы закрепить свои знания, вам придется научиться работать с браузером и инструментами для разработки Vue и, что важнее, овладеть методами отладки при возникновении проблем.
Для читателей, у которых нет существенного опыта клиентской разработки, написания программ на JavaScript или даже просто программирования, Эрик тщательно излагает фундаментальные концепции и объясняет принцип работы и назначение Vue. Добавьте к этому методологию описания новых возможностей в контексте реальных проектов — и вы получите идеальную книгу для относительно неопытных разработчиков, которые начинают знакомство с современными клиентскими фреймворками с Vue и хотят расширить свои знания в этой области.
Крис Фриц, член основной группы разработки Vue и куратор документации
Предисловие
Эту книгу мне предложили написать в начале 2017 года, после того, как по личным причинам от этой возможности вынужден был отказаться Бенджамин Листуон (Benjamin Listwon). Я как раз недавно получил диплом магистра делового администрирования университета Невады, а с момента публикации моей последней книги Ember.js Cookbook (Pact Publishing, 2016) прошел целый год. Я завел на YouTube канал Program with Erik («Программируем с Эриком»), и бо'льшая часть моего времени уходила на попытки записать как можно более качественные видеоуроки для небольшой, но растущей аудитории. Одновременно с этим я начал серию скринкастов, посвященных Vue.js, и получил положительные отзывы от зрителей. Это подтолкнуло меня к дальнейшему изучению Vue.
Я начал с прослушивания докладов Эвана Ю (Evan You), создателя Vue.js, и знакомства с планами развития этого фреймворка. Затем перешел к размещенным на YouTube бесчисленным руководствам и видеоурокам от других разработчиков. Начал заглядывать на форумы и в группы Facebook, чтобы узнать, о чем сейчас говорят. Куда бы я ни зашел, люди везде выражали свой восторг по поводу Vue.js и его будущего. Поэтому я и начал размышлять о возможности написания данной книги.
После долгих раздумий и разговора с женой я решил согласиться. К счастью, Бенджамин уже заложил отличный фундамент, поэтому я смог сразу приступить к работе. Следующие десять месяцев состояли из бесчисленных ночей и выходных, потраченных на исследования, тестирование и написание текста.
Не стану приукрашивать: книга далась мне нелегко. Скажем так, не все пошло по плану. Вдобавок к личным проблемам, пропущенным срокам и творческому кризису пришлось вносить существенные изменения после выхода новой версии Vue.js.
Но, несмотря на все это, я очень горжусь книгой. Каждая неудача заставляла меня работать с удвоенной энергией. Я решил закончить книгу и сделать ее максимально качественной. Надеюсь, это будет заметно при чтении.
Огромное спасибо читателям, которые купили эту книгу. Я очень надеюсь на то, что она поможет вам с изучением Vue.js. Пожалуйста, напишите мне о своих впечатлениях. Свяжитесь со мной через Twitter (@ErikCH), электронную почту ([email protected]) или список рассылки по адресу goo.gl/UmemSS. Еще раз спасибо!
Благодарности
Прежде всего я хотел бы поблагодарить свою жену Сьюзен, потому что без ее помощи эта книга никогда не была бы завершена. Спасибо сыну и дочке — Уайатту и Вивиан. Это ради них я так тяжело работаю. Спасибо всем рецензентам, членам форума Vue.js in Action и тем, кто прислал отзывы, — ваша помощь сделала эту книгу намного лучше. Благодарю также Криса Фрица (Chris Fritz) за прекрасное предисловие. Наконец, я хотел бы выразить безмерную и искреннюю признательность сообществу Vue.js, Эвану Ю и всем, кто внес свой вклад в этот замечательный фреймворк.
Эрик Ханчетт
В первую очередь я хотел бы выразить искреннюю благодарность своей жене Киффен за поддержку и поощрение — не только в то время, когда я участвовал в этом проекте, но и во всех аспектах нашей совместной жизни. Звездой и сердцем нашей семьи является сын Лео: спасибо тебе за неиссякаемые улыбки, объятия и радость. За одобрение, понимание и поддержку от всего сердца хотел бы поблагодарить редакцию издательства Manning. Я по-настоящему признателен Эрику, без которого эта книга никогда не увидела бы свет: желаю тебе всего наилучшего. Наконец, спасибо Эвану Ю и всем тем, кто помогает развитию Vue.js, — вы собрали воедино прекрасный программный продукт и еще более прекрасное сообщество, частью которого я имею честь быть.
Бенджамин Листуон
Выражаем совместную признательность техническому редактору Джею Келкару (Jay Kelkar), а также всем рецензентам, давшим на разных этапах свои отзывы. Среди них Алекс Миллер (Alex Miller), Алексей Галиуллин (Alexey Galiullin), Крис Коппенбаргер (Chris Coppenbarger), Клайв Харбер (Clive Harber), Дарко Божиновски (Darko Bozhinovski), Ферит Топцу (Ferit Topcu), Гарро Лиссенберг (Harro Lissenberg), Ян Петер Хервейер (Jan Pieter Herweijer), Джеспер Петерсен (Jesper Petersen), Лаура Стедмэн (Laura Steadman), Марко Летич (Marko Letic), Пауло Нуин (Paulo Nuin), Филиппе Шаррье (Philippe Charriere), Рохит Шарма (Rohit Sharma), Рональд Борман (Ronald Borman), Райан Гарви (Ryan Harvey), Райан Габер (Ryan Huber), Сандер Зегвельд (Sander Zegveld), Убалдо Пескаторе (Ubaldo Pescatore) и Витторио Марино (Vittorio Marino).
Об этой книге
Позвольте мне, прежде чем приступать к программированию на Vue.js, остановиться на нескольких моментах, о которых вы должны знать.
Здесь вы найдете все, что может понадобиться для овладения Vue.js. Цель этой книги — дать вам знания, с помощью которых вы без колебаний присоединитесь к любому проекту, использующему эту библиотеку.
Проводя исследования для этой книги, я неоднократно слышал, что лучший источник информации для изучения Vue.js — официальная документация. Действительно, на официальном сайте есть отличные руководства, и я настоятельно рекомендую вам с ними ознакомиться. Однако они неидеальны и не охватывают все темы, поэтому советую использовать их как дополнительные справочные материалы. Во время написания книги я задался целью не останавливаться на темах, рассмотренных в официальной документации. Я сделал примеры более понятными и наглядными, чтобы вам проще было применять описанные здесь концепции к собственным проектам. Темы, которые показались мне недостаточно важными или просто не вошли в книгу, даны в виде ссылок на официальные руководства.
Этой книгой можно пользоваться по-разному. Прочитав ее с начала до конца, вы получите полноценное представление о Vue.js. Или работайте с ней как со справочником, просматривая информацию о тех функциях, о которых вам хочется знать больше. Оба подхода допустимы.
Позже мы перейдем к созданию приложений на Vue.js с помощью системы сборки. Не волнуйтесь, инструкции по использованию соответствующего инструмента под названием Vue-CLI приведены в приложении А. Vue-CLI помогает создавать более сложные приложения, беря на себя сборку и преобразование исходного кода.
Лейтмотивом этой книги будет разработка на основе Vue.js приложения зоомагазина. В некоторых главах этот пример рассматривается чаще, в других — реже. Это было сделано специально, чтобы вы могли легко усвоить абстрактные концепции без связи с конкретным проектом. Вместе с тем мы не забываем и о читателях, которые предпочитают учиться на реальных примерах.
Целевая аудитория
Эта книга предназначена для всех, кто заинтересован в изучении Vue.js и имеет опыт работы с JavaScript, HTML и CSS. От вас не требуются глубокие знания этой области, но понимание основ, таких как массивы, переменные, циклы и HTML-элементы, не помешает. Что касается CSS, то мы будем задействовать библиотеку Bootstrap 3. При этом, чтобы выполнять упражнения, вам не обязательно о ней что-либо знать — она применяется лишь для визуального оформления.
В начале книги представлен код на языке ECMAScript 2015, известном также как ES6. Желательно ознакомиться с его спецификацией, прежде чем приступать к чтению. По большей части я использую всего несколько возможностей ES6, таких как стрелочные функции и импорт. Я дам знать, когда мы будем переходить на этот язык.
Структура книги
Книга разбита на три части. Часть I знакомит с Vue.js. В главах 1 и 2 вы создадите свое первое приложение, а также узнаете, что такое экземпляр Vue и как он относится к нашему коду.
В части II, а именно в главах 3–9, мы более подробно рассмотрим концепции представления (View) и модели-представления (ViewModel), а также самые «сочные» аспекты Vue.js. Можно сказать, что часть I — всего лишь затравка, а основной курс начинается с части II. Вы узнаете о сложностях, связанных с созданием программ на Vue.js. Мы начнем с изучения реактивной модели, а затем создадим приложение зоомагазина, которое будет использоваться в дальнейшем.
Мы также рассмотрим формы, поля ввода и привязку информации с помощью мощных директив, встроенных в Vue.js, после чего перейдем к условным выражениям и циклам.
Чрезвычайно важны главы 6 и 7. В них вы научитесь разбивать приложение Vue.js на несколько логических частей, используя компоненты, а также познакомитесь с инструментами сборки, которые понадобятся для построения программ.
Помимо прочего, в главе 7 затрагивается тема маршрутизации. До этого для навигации по приложению будем применять простые условные выражения. Благодаря маршрутизации мы сможем правильно переходить между компонентами и передавать информацию между маршрутами.
Глава 8 познакомит вас с гибкой анимацией и переходами, которые выполняются в Vue.js. Эти замечательные возможности, встроенные в язык, заслуживают вашего внимания.
В главе 9 вы научитесь расширять Vue с помощью примесей и пользовательских директив без дублирования кода.
Часть III посвящена моделированию данных, работе с API и тестированию. В главах 10 и 11 мы подробно рассмотрим систему управления состоянием в Vue под названием Vuex, а затем попробуем пообщаться с серверной стороной. Вы также познакомитесь с Nuxt.js — фреймворком для серверной отрисовки.
Тестирование рассматривается в главе 12. Мы обсудим базовые навыки, необходимые в любой профессиональной среде.
Исходный код
Эта книга содержит множество примеров исходного кода в виде пронумерованных листингов и элементов строк. Чтобы отличить их от обычного текста, используется моноширинныйшрифт. Иногда изменения, вносимые на следующем этапе, выделяются жирным шрифтом, например, когда к уже существующей строке кода добавляется что-то новое.
Во многих случаях оригинальный исходный код был переформатирован — я добавил переносы строк и убрал отступы, чтобы сэкономить место. Иногда даже этого оказывалось недостаточно и приходилось вставлять символы продолжения строки (). Кроме того, при описании исходного кода часто убирал из него комментарии. Во многих листингах есть примечания, которые выделяют важные моменты.
Исходный код для книги доступен для загрузки на сайте издательства (www.manning.com/books/vue-js-in-action) и в моем репозитории на GitHub (github.com/ErikCH/VuejsInActionCode). Дополнительные инструкции по загрузке исходного кода и настройке среды программирования можно найти в приложении А.
При чтении книги вы заметите, что я часто разбиваю листинги на отдельные файлы. В архиве для каждой главы код имеется как в виде единого файла, так и в виде нескольких модулей, чтобы было легче ориентироваться. Если вы найдете ошибку в коде, не стесняйтесь отправить мне письмо. Я буду поддерживать свой репозиторий на GitHub и комментировать любые обновления в файле README.
Требования к программному обеспечению
Чтобы вам было легче, весь код в этой книге адаптирован к работе в любом современном браузере. Я лично проверил его в Firefox 58, Chrome 65 и Microsoft Edge 15. Не рекомендую запускать представленные здесь примеры в более старых браузерах, так как вы неминуемо столкнетесь с какими-нибудь проблемами. Сама библиотека Vue.js не поддерживает IE8 и более старые версии. Совместимость с ECMAScript 5 обязательна.
В нескольких начальных главах я использую возможности языка ES6. Для выполнения этих примеров вам понадобится современный браузер.
Приложение зоомагазина, которое мы будем разрабатывать в этой книге, может работать в мобильном браузере. Но, поскольку оно для этого не оптимизировалось, советую запускать его на настольном компьютере.
Вам не нужно беспокоиться о выборе операционной системы — главное, чтобы работал браузер. Это фактически единственное требование.
Интернет-ресурсы
Как уже упоминалось, в ходе работы с примерами, представленными в книге, отличным подспорьем послужит официальное руководство Vue.js. Оно находится по адресу vuejs.org/v2/guide/ и постоянно обновляется.
Ведется также список избранных проектов, относящихся к Vue.js, который вы найдете на странице GitHub github.com/vuejs/awesome-vue. Там есть ссылки на подкасты, дополнительные ресурсы, сторонние библиотеки и даже компании, которые работают с Vue.js. Настоятельно рекомендую ознакомиться с ним.
У Vue.js огромное и активно растущее сообщество пользователей. Одно из лучших мест в Сети для общения с другими разработчиками на Vue.js — официальный форум проекта forum.vuejs.org/. Там вы сможете получить помощь и обсудить все, что касается этой библиотеки.
Если вы ищете видеоуроки, загляните на страницу моего канала на YouTube erik.video, который содержит множество материала по Vue.js и JavaScript в целом.
Дополнительная информация
В этой книге я раскрыл большое количество тем. Если вы застряли в каком-то месте или нуждаетесь в помощи, то всегда можете связаться непосредственно со мной. Если я не смогу вам помочь, то по крайней мере направлю в нужное русло. Не стесняйтесь. Члены сообщества Vue.js дружелюбны к новичкам.
В процессе чтения пытайтесь самостоятельно реализовывать изученные концепции. Практическое применение — один из лучших способов усвоения материала. Вместо зоомагазина попытайтесь создать собственную торговую площадку, используя эту книгу как руководство.
И последнее: подходите к работе творчески и создайте что-нибудь интересное. Если у вас получится, обязательно напишите мне в Twitter: @ErikCH!
Об авторе
Эрик Ханчетт занимается веб-разработкой на протяжении последних десяти лет. Он автор книги Ember.js Cookbook (Packt Publishing, 2016), канала YouTube erik.video и блога по адресу programwitherik.com. Кроме того, Эрик ведет список рассылки goo.gl/UmemSS, в котором делится секретами разработки на JavaScript. Свободное от работы или написания кода время он проводит со своими детьми Уайаттом и Вивиан и женой Сьюзен.
Об иллюстрации на обложке
Иллюстрация на обложке называется «Костюм молодой русской торговки с Охты в 1765 году»1 и позаимствована из четырехтомника Томаса Джеффериса (Thomas Jefferys) «Коллекция платья разных народов, стариного и современного»2, изданного в Лондоне в 1757–1772 годах. На титульном листе утверждается, что это гравюра ручной раскраски с применением гуммиарабика.
Томаса Джеффериса (1719–1771) называли географом при короле Георге III. Это английский картограф и ведущий поставщик карт своего времени. Он чертил и печатал карты для правительства и других государственных органов. На его счету целый ряд коммерческих карт и атласов, в основном Северной Америки. Занимаясь картографией в разных уголках мира, он проявлял интерес к местным традиционным нарядам, которые впоследствии были блестяще переданы в данной коллекции. В конце XVIII века заморские путешествия для собственного удовольствия были относительно новым явлением, поэтому подобные коллекции пользовались популярностью, позволяя получить представление о жителях других стран как настоящим туристам, так и «диванным» путешественникам.
Разнообразие иллюстраций в книгах Джеффериса — яркое свидетельство уникальности и оригинальности народов мира в то время. С тех пор тенденции в одежде сильно изменились, а региональные и национальные различия, которые были такими значимыми 200 лет назад, постепенно сошли на нет. В наши дни часто сложно отличить друг от друга жителей разных континентов. Оптимисты могут сказать, что взамен культурного и визуального многообразия мы получили более насыщенную и интересную личную жизнь (или, по крайней мере, ее интеллектуальную и техническую стороны).
В то время как большинство компьютерных изданий мало чем отличаются друг от друга, компания Manning выбирает для своих книг обложки, показывающие богатое региональное разнообразие, которое Джефферис воплотил в своих иллюстрациях два столетия назад. Это ода находчивости и инициативности современной компьютерной индустрии.
1Habit of a Young Market Woman of Octha in Russia in 1765.
2A Collection of the Dresses of Different Nations, Ancient and Modern.
Часть I. Знакомимся с Vue.js
Прежде чем переходить к изучению всех тех крутых возможностей, которые предлагает Vue, нужно поближе познакомиться с этой библиотекой. В первых двух главах мы рассмотрим философию, стоящую за Vue.js и шаблоном проектирования MVVM, а также сравним ее с аналогичными проектами.
Усвоив основы, на которые опирается Vue.js, мы подробно изучим корневой экземпляр Vue (сердце любого приложения) и его структуру. Затем вы узнаете, как привязать к нему программные данные.
Эти главы станут хорошим началом. Прочитав их, вы сможете создавать простые приложения и будете знать, как работает Vue.js.
1. Введение в Vue.js
В этой главе
• Шаблоны проектирования MVC и MVVM.
• Определение реактивного приложения.
• Описание жизненного цикла Vue.
• Оценка архитектуры Vue.js.
Мы уже давно привыкли к интерактивным сайтам. В середине 2000-х годов, на заре Web 2.0, интерактивность и вовлечение пользователей в процесс были в центре внимания. Именно в этот период появились компании Twitter, Facebook и YouTube. Благодаря бурному росту социальных сетей и пользовательского контента Интернет менялся в лучшую сторону.
Чтобы поспевать за этими изменениями и предоставлять бо'льшую интерактивность, разработчики начали создавать библиотеки и фреймворки, которые упрощали построение интерактивных сайтов. В 2006 году Джон Резиг (John Resig) выпустил jQuery, тем самым значительно облегчив написание клиентских скриптов внутри HTML. Со временем появились и другие подобные проекты. Сначала они были большими, монолитными и навязывали разработчикам свое видение. Теперь же произошел сдвиг в сторону компактных облегченных библиотек, которые очень просто добавить в любое приложение. Вот мы и подошли к Vue.js.
Vue.js — это библиотека, позволяющая внедрять интерактивное поведение и дополнительные возможности в любой контекст, в котором выполняется JavaScript. Vue можно использовать как на отдельных страницах, решая простые задачи, так и в качестве фундамента для полноценных промышленных приложений.
Примечание
В Интернете названия Vue и Vue.js практически взаимозаменяемы. В этой книге я чаще использую более простой вариант, Vue, оставляя Vue.js для тех случаев, когда речь идет непосредственно о коде или библиотеке.
Вы увидите, как Vue и вспомогательные библиотеки позволяют создавать полноценные сложные веб-приложения. Мы исследуем все, от интерфейса, с которым взаимодействуют посетители, до базы данных, снабжающей наш код информацией.
Увидим также, каким образом каждый из приводимых здесь примеров вписывается в общую картину, рассмотрим лучшие методики, которые предлагает индустрия веб-разработки, и научимся интегрировать представленный далее код в собственные проекты, как существующие, так и новые.
Эта книга рассчитана в основном на веб-разработчиков, у которых уже есть некоторый опыт работы с JavaScript и общее представление об HTML и CSS. Тем не менее благодаря универсальности своего программного интерфейса (application programming interface, API) Vue подходит для разработчиков всех мастей и проектов любой степени сложности. Она станет надежным подспорьем, даже если вам нужно создать лишь небольшой прототип или простую любительскую программу для личного пользования.
1.1. На плечах у гигантов
Прежде чем начинать писать код для нашего первого приложения или углубляться в недра Vue, следует обратиться к истории программного обеспечения. Лишь зная о проблемах и вызовах, с которыми сталкивался мир веб-разработки в прошлом, можно по достоинству оценить преимущества, которыми обладает эта библиотека.
1.1.1. Шаблон проектирования MVC
Клиентский шаблон проектирования «модель — представление — контроллер» (Model — View — Controller, MVC) лежит в основе множества современных фреймворков для разработки веб-приложений (если вы уже знакомы с MVC, можете пролистывать дальше).
Здесь следует упомянуть, что со временем концепция MVC претерпела некоторые изменения. В так называемой классической версии MVC был предусмотрен отдельный набор правил для того, каким образом должны взаимодействовать между собой представление, контроллер и модель. Мы же остановимся на упрощенной интерпретации этого клиентского шаблона проектирования, которая лучше подходит для современных реалий.
MVC применяется для разделения ответственности в приложении (рис. 1.1). Представление отвечает за вывод информации пользователю — это графический пользовательский интерфейс (graphical user interface, GUI). В центре находится контроллер. Он помогает передавать события из представления в модель, а данные — из модели в представление. Внизу мы видим модель, которая содержит бизнес-логику и может предоставлять некое хранилище данных.
Рис. 1.1. Взаимоотношения модели, представления и контроллера согласно MVC
Дополнительно
Если хотите узнать больше о шаблоне проектирования MVC, можете начать со статьи Мартина Фаулера (Martin Fowler), посвященной эволюции MVC: martinfowler.com/eaaDev/uiArchs.html.
Авторы веб-фреймворков любят этот шаблон проектирования за его надежную, проверенную временем архитектуру. Если вас интересует устройство современных веб-фреймворков, советую почитать книгу Эммитта А. Скотта-младшего (Emmitt A. Scott Jr.) SPA Design and Architecture (Manning, 2015).
В современной разработке MVC часто задействуется в рамках одного приложения, предоставляя отличный механизм для разделения программного кода на разные роли. В сайтах, основанных на MVC, каждый запрос инициирует передачу потока информации от клиента к серверу, от сервера к базе данных, а затем обратно. Этот процесс отнимает много времени и ресурсов, что сказывается на отзывчивости пользовательского интерфейса.
Со временем приложения, основанные на веб-технологиях, стали более интерактивными. Теперь они применяют асинхронные запросы и клиентскую архитектуру MVC, чтобы передача данных на сервер не блокировала выполнение и не требовала ожидания ответа. Веб-страницы все больше напоминают настольные программы, поэтому задержки, связанные с клиент-серверным взаимодействием, могут замедлить или даже нарушить работу приложения. И вот тут на выручку приходит следующий шаблон.
Несколько слов о бизнес-логике
Клиентский шаблон проектирования MVC отличается большой гибкостью при выборе места реализации бизнес-логики. На рис. 1.1 логика сконцентрирована в модели. Но это было сделано лишь для простоты, можно было выбрать для этого другие уровни приложения, включая контроллер. С тех пор как в 1979 году шаблон MVC был представлен Трюгве Ринскаугом (Trygve Reenskaug) для языка Smalltalk-76, он претерпел некоторые изменения.
Представьте процесс проверки почтового индекса, введенного пользователем.
Представление может содержать код на JavaScript, который проверяет почтовый индекс по мере ввода или перед отправкой.
Модель способна проверить почтовый индекс при создании объекта для хранения входящих данных.
База данных может накладывать ограничения на поле почтового индекса, то есть модель тоже применяет бизнес-логику. Некоторые разработчики считают это плохим тоном.
Иногда бывает сложно определить, что именно представляет собой бизнес-логика. Мы отдельно остановимся на том, как и где она должна реализовываться. Вы также узнаете, каким образом Vue и сопутствующие библиотеки помогают изолировать функциональность в строго заданных рамках.
1.1.2. Шаблон проектирования MVVM
Когда JavaScript-фреймворки начали поддерживать асинхронные методы программирования, исчезла необходимость в обновлении всей веб-страницы при каждом запросе. Частичное обновление представления позволяет сайтам и приложениям быстрее реагировать, но в определенной степени приводит к дублированию кода. Логика представления часто повторяет бизнес-логику.
Шаблон MVVM (Model — View — ViewModel — «модель — представление — модель представления») — это следующий этап в развитии MVC. Его отличительными чертами являются модель представления (ViewModel, VM) и связывание данных. MVVM обеспечивает основу для построения клиентских приложений, которые делают взаимодействие с пользователем и обратную связь более отзывчивыми, избегая при этом затратного дублирования кода в рамках всей архитектуры. Этот шаблон упрощает также модульное тестирование. Но имейте в виду, что для простых пользовательских интерфейсов он может оказаться избыточным.
MVVM позволяет создавать веб-приложения, которые мгновенно реагируют на действия пользователя и позволяют свободно переходить от одной задачи к другой. Модель представления тоже способна играть несколько ролей (рис. 1.2). Такая консолидация ответственности имеет одно фундаментальное последствие для представлений приложения: при изменении данных внутри VM автоматически обновляются все представления, связанные с этой моделью. Механизм связывания делает данные доступными и гарантирует, что любые их изменения будут отражены в представлении.
Рис. 1.2. Элементы шаблона проектирования MVVM
Дополнительно
Больше информации об MVVM можно найти в статье Мартина Фаулера (Martin Fowler), посвященной шаблону проектирования Presentation Model: martinfowler.com/eaaDev/PresentationModel.html.
1.1.3. Что такое реактивное приложение
Сама по себе парадигма реактивного программирования не нова. Однако в веб-приложениях ее начали использовать относительно недавно, в основном благодаря наличию фреймворков Vue, React и Angular.
В Интернете много информации о теории реактивности, но нас интересует более узкая тема. Чтобы веб-приложение можно было назвать реактивным, оно должно выполнять следующие функции:
• отслеживать изменения в своем состоянии;
• распространять уведомления об изменениях для всех своих компонентов;
• автоматически отрисовывать представления в ответ на изменения состояния;
• своевременно реагировать на действия пользователя.
Для достижения этих целей реактивные веб-приложения по возможности применяют принципы проектирования MVVM, асинхронные методики, позволяющие избежать блокирования взаимодействия с пользователем, и элементы функционального программирования.
Шаблон проектирования MVVM и реактивное программирование не имеют прямого отношения друг к другу, но у них общая направленность: обе концепции стремятся сделать приложение более отзывчивым и надежным с точки зрения пользователя.
Дополнительно
Если хотите узнать больше о реактивной парадигме программирования Vue, почитайте руководство «Подробно о реактивности» по адресу ru.vuejs.org/v2/guide/reactivity.html.
1.1.4. Калькулятор на JavaScript
Чтобы разобраться в понятиях реактивности и связывания данных, напишем калькулятор на чистом JavaScript (листинг 1.1).
Листинг 1.1. Калькулятор на JavaScript: chapter-01/calculator.html
Это калькулятор на языке ES5 JavaScript (более современной версией JavaScript, ES6/2015, воспользуемся позже). Мы задействуем выражение IIFE (немедленно вызываемая функция), которое запускает наш скрипт. Конструктор отвечает за хранение значений, а обработчик handleCalcEvent реагирует на событие keyup.
1.1.5. Калькулятор на Vue
Пока что не стоит обращать внимания на синтаксис Vue в этом примере. Мы не стремимся понять каждый фрагмент кода, а лишь пытаемся сравнить две реализации. Хотя, если вы хорошо понимаете пример с JavaScript, вам не составит большого труда разобраться со следующим кодом (листинг 1.2), по крайней мере на теоретическом уровне.
Листинг 1.2. Калькулятор на Vue: chapter-01/calculatorvue.html
1.1.6. Сравнение JavaScript и Vue
По большей части эти две реализации калькулятора имеют разный код. Оба скрипта, представленных на рис. 1.3, доступны в репозитории с кодом для этой главы. Вы можете запустить их по очереди и посмотреть, как они себя ведут.
Рис. 1.3. Сравнение версий реактивного калькулятора, написанных на чистом JavaScript (слева) и Vue (справа)
Ключевое различие между этими реализациями состоит в том, как инициируется обновление итоговых вычислений и как результаты попадают обратно на страницу. В примере с Vue все обновления и вычисления на странице берет на себя механизм связывания v-model. Когда мы создаем экземпляр программы с помощью выражения newVue({...}), Vue анализирует код и HTML-разметку, после чего создает все данные и обработчики событий, необходимые для работы приложения.
1.1.7. Как Vue использует MVVM и реактивность
Библиотеку Vue иногда называют прогрессивным фреймворком. В общем смысле это означает, что для выполнения простых задач ее можно встраивать в существующие веб-страницы, а еще она способна становиться основой для построения крупномасштабных веб-проектов.
Какой бы способ применения вы ни выбрали, любое Vue-приложение содержит как минимум один экземпляр Vue. Самые простые программы ограничиваются единственным экземпляром, который связывает заданную разметку и данные, хранящиеся в модели представления (рис. 1.4).
Рис. 1.4. Обычно экземпляр Vue связывает разметку с данными в модели представления
Отдельно взятый экземпляр Vue полностью основывается на веб-технологии и существует исключительно в рамках браузера. В сущности, это означает, что для обновления выводимых данных, выполнения бизнес-логики или любой другой задачи, входящей в область ответственности представления или модели представления, не нужно полагаться на генерацию страниц на сервере. Помня об этом, еще раз пройдемся по примеру с отправкой формы.
Наверное, самая поразительная особенность реактивного подхода по сравнению с клиентской архитектурой MVC — то, что на протяжении всего сеанса работы пользователь очень редко сталкивается с перезагрузкой страницы в браузере, если вообще сталкивается. Представление, модель представления и связывание данных реализованы в HTML и JavaScript, поэтому задачи, которые делегируются модели, могут быть асинхронными и не блокировать взаимодействие с пользователем. Когда модель возвращает новые данные, механизм связывания, встроенный в Vue, вносит в представление необходимые изменения.
Наверное, главная задача Vue — это обеспечение взаимодействия с пользователем путем установления и поддержания связи между представлениями, которые мы создаем, и данными в модели представления. Как вы вскоре увидите при написании нашего первого проекта, в этом смысле Vue обеспечивает надежный фундамент для любого реактивного веб-приложения.
1.2. Почему именно Vue.js
Начало нового проекта всегда связано с принятием тех или иных решений. Одним из ключевых является выбор фреймворка или библиотеки. Неважно, идет речь о компании или программисте-одиночке, подбор подходящего инструмента всегда имеет большое значение. К счастью, Vue.js — очень разносторонняя библиотека, способная справиться с разными задачами.
Далее перечислены несколько самых распространенных проблем, с которыми можно столкнуться при создании нового проекта, а также решения, которые предлагаются Vue или парадигмой реактивного программирования в целом.
•У нашей команды нет большого опыта работы с веб-фреймворками. Одно из важнейших преимуществ библиотеки Vue заключается в том, что она не требует никаких специальных знаний. Любое Vue-приложение пишется с помощью HTML, CSS и JavaScript — знакомых всем инструментов, которые сразу позволяют погрузиться в работу. Даже если вам не приходилось раньше заниматься клиентской разработкой, вы всегда сможете опереться на предыдущий опыт работы с шаблоном проектирования MVC, который во многом похож на MVVM.
• У нас уже есть наработки, от которых мы не хотим отказываться. Не волнуйтесь, вам не придется отказываться от бережно подобранных стилей или того крутого виджета, над которым вы корпели. Будь то существующий проект с множеством зависимостей или новое приложение, в котором вы хотите использовать знакомые библиотеки, — Vue не доставит вам никаких хлопот. Вы можете дальше работать с такими CSS-фреймворками, как Bootstrap или Bulma, оставить уже написанные компоненты для jQuery или Backbone, интегрировать полюбившуюся библиотеку для выполнения HTTP-запросов или работать с объектами Promise.
• Нам нужно быстро создать прототип и посмотреть на реакцию пользователей. Как мы уже видели в первом приложении, чтобы начать программировать с помощью Vue, достаточно подключить библиотеку Vue.js к любой отдельной веб-странице. Не нужно никаких сложных инструментов для сборки! Разработка прототипа от начала до конца занимает одну-две недели, что позволяет собирать отзывы пользователей как можно раньше и чаще.
• Наш продукт почти всегда применяется на мобильных устройствах. Минимизированный и сжатый файл Vue.js занимает примерно 24 Кбайт, что довольно скромно, как для клиентского фреймворка. Такую библиотеку легко загрузить через сотовое соединение. В Vue 2 появилась поддержка отрисовки на стороне сервера (server-side rendering, SSR). Эта стратегия позволяет минимизировать загружаемые данные на начальном этапе и запрашивать новые представления и ресурсы по мере необходимости. В сочетании с эффективным кешированием компонентов это позволяет еще сильнее снизить потребление трафика.
• Наш продукт обладает уникальными и нестандартными возможностями. Vue-приложения изначально проектируются модульными и расширяемыми. Их компоненты поддерживают многократное использование, наследование и добавление новых функций с помощью примесей. Расширяйте возможности Vue, работая с подключаемыми модулями и пользовательскими директивами.
• Мы имеем огромную аудиторию и волнуемся о производительности. Недавно библиотека Vue была переписана с прицелом на надежность, производительность и скорость и теперь задействует модель Virtual DOM. Это означает, что все операции сначала выполняются с представлением DOM, которое не привязано к браузеру, а затем внесенные изменения копируются на саму страницу. В результате Vue стабильно выигрывает в производительности у других клиентских библиотек. Но, поскольку обобщенные тесты часто оказываются слишком абстрактными, я всегда рекомендую заказчикам выбрать несколько типичных и экстремальных случаев, разработать тестовый сценарий и самостоятельно измерить результаты. Подробности о модели Virtual DOM и сравнение Vue с конкурентами можно найти на странице ru.vuejs.org/v2/guide/comparison.html.
• У нас уже есть готовый процесс сборки, тестирования и/или развертывания. Мы подробно рассмотрим эти темы в последующих главах, но если коротко, то Vue легко интегрируется с многими популярными фреймворками для сборки (Webpack, Browserify и т.д.) и тестирования (Karma, Jasmine и т.д.). Во многих случаях модульные тесты можно переносить без изменений, если они основаны на существующем фреймворке. Если же вы начинаете с нуля, но хотите использовать эти инструменты, Vue предоставляет шаблоны проектов, которые автоматически интегрируют их. Проще говоря, Vue легко адаптировать и добавить в существующие проекты.
• Что делать, если в ходе или после разработки нам понадобится помощь? Двумя бесценными преимуществами проекта Vue являются его сообщество и сопровождающая экосистема. Вам доступна отличная документация в виде отдельных справочных материалов и комментариев внутри кода, а основная команда разработки активна и отзывчива. Не менее, а может, и более важна помощь со стороны сообщества разработчиков. Gitter и форум Vue полны людей, всегда готовых помочь. Каждый день экосистема пополняется новыми подключаемыми модулями, интеграциями и библиотеками, которые делают доступным популярный сторонний код.
Я сам неоднократно задавал все эти вопросы и теперь почти во всех своих проектах рекомендую использовать Vue. Надеюсь, что эта книга вдохновит вас сделать то же самое в своем следующем проекте.
1.3. Мысли на будущее
Во вводной главе мы затронули довольно много тем. Если вы только начинаете заниматься веб-разработкой, это, вероятно, ваш первый контакт с архитектурой MVVM или реактивным программированием. Тем не менее вы уже могли убедиться в том, что процесс построения реактивных приложений не так сложен, как может показаться поначалу.
Наверное, самый полезный вывод, который можно сделать из этой главы, связан даже не с Vue, а с тем, насколько реактивный подход упрощает написание программ и работу ними. Приятно также, что уменьшается объем шаблонного кода, связанного с интерфейсом. Отсутствие необходимости кодировать все взаимодействия с пользователем позволяет нам сосредоточиться на моделировании данных и внешнем виде страницы, а также связывании этих двух аспектов, что благодаря Vue очень просто сделать.
Наверное, вы уже придумали миллион способов улучшить наше скромное приложение. И это замечательно: никогда не прекращайте экспериментировать и играть с кодом. Вот несколько мыслей, которые приходят мне в голову при взгляде на первый пример.
• Как избавиться от повторения одних и тех же текстовых строк в разных местах?
