Сегодняшняя всемирная паутина сильно изменилась с тех пор, когда Интернет представлял собой просто набор связанных страниц для академических и научных целей. По мере развития технологий и повышения мощности машин к более ранним протоколам добавлялось все больше и больше функций, а новые методы и технологии конкурировали, пока, наконец, не были приняты стандарты. Дополнительная функциональность появилась в виде плагинов для браузера и встроенного контента. Java-апплеты, Flash, Macromedia, Quicktime и другие плагины были обычным явлением. Именно с появлением HTML5 большинство из них, если не все, постепенно были заменены стандартами.
Сегодня существует четкое различие между структурой, стилем и поведением. Язык гипертекстовой разметки (HTML) определяет структурные элементы, составляющие веб-страницу. Каскадные таблицы стилей (CSS) предоставляют правила, которые изменяют внешний вид элементов HTML, включая даже анимацию и преобразования. И, наконец, JavaScript — это язык программирования, который обеспечивает поведение и может получать доступ к HTML и CSS и изменять их. Такое большое количество различных возможностей также привело к высокому уровню сложности и несовместимости между браузерами. Именно здесь родились библиотеки и фреймворки, сначала для решения проблем несовместимости и стандартизации внешнего вида, но вскоре они развились и включили в себя другие парадигмы программирования, выходящие за рамки простого манипулирования HTML и CSS.
Некоторые из самых популярных библиотек и фреймворков сегодня используют реактивную парадигму. Они ловко вносят изменения в JavaScript, чтобы автоматически отразить их в HTML/CSS. Vue 3 — это последняя версия прогрессивного фреймворка, в котором активно используется концепция реактивности. Он также реализует другие парадигмы и шаблоны проектирования программного обеспечения, которые позволяют создавать что угодно: от простых взаимодействий на статической веб-странице до сложных приложений, которые можно даже устанавливать локально и конкурировать с собственными настольными приложениями.
В этой книге мы изучим среду Vue 3 и изучим различные шаблоны проектирования, которые помогут нам создавать первоклассные приложения: от простых веб-страниц до мощных прогрессивных веб-приложений (PWA). Попутно мы рассмотрим лучшие практики и хорошо зарекомендовавшие себя шаблоны в разработке программного обеспечения.
В этой главе рассматриваются следующие темы:
• Прогрессивная система
• Однофайловые компоненты
• Различные варианты синтаксиса для записи компонентов.
К концу этой главы вы получите базовое представление о том, какое место Vue 3 занимает в JavaScript.
Ландшафт и какие функции он предоставляет. Для пользователей Vue 2 к этой книге есть приложение с
изменения, которые необходимо учитывать при миграции приложения. По ходу книги мы будем строить знания поверх этих понятий.
Прогрессивная основа
Прежде чем мы опишем, что такое Vue, нам нужно провести различие между библиотекой терминов и
рамки. Они часто используются как взаимозаменяемые, но разница есть, и хороший разработчик должен
помните об этом, выбирая тот или иной вариант для создания веб-приложения.
Давайте посмотрим на определения этих терминов:
• Библиотека — это набор многократно используемого кода в виде функций, классов и т. д., который имеет
был разработан кем-то другим и может быть легко импортирован в вашу программу. Это не
предписывают, как и где его использовать, но обычно они предоставляют документацию о том, как использовать
их. Программист должен решить, когда и как их реализовать. Эта концепция
существует в большинстве языков разработки, вплоть до того, что некоторые из них полностью основаны на
идея импорта библиотек для обеспечения функциональности.
• Фреймворк также содержит наборы классов и функций для вашего использования, но предписывает спецификации.
которые определяют, как программа работает и должна быть построена, с какой архитектурой и условиями.
где и как можно использовать ваш код. Ключевым атрибутом, который следует учитывать здесь, является то, что структура
инвертирование управления в приложении, чтобы оно определяло поток программы и данных. При выполнении
таким образом, он подчеркивает структуры или стандарты, которые должен соблюдать программист.
Разделив понятия, теперь возникает вопрос, когда использовать библиотеку, а когда использовать
рамки. Прежде чем ответить на этот вопрос, давайте проясним, что между этими двумя понятиями существует огромная серая зона.
при создании реальных приложений. Теоретически вы можете создать одно и то же приложение, используя любой из них.
Как всегда в разработке программного обеспечения, это вопрос выбора компромиссов для каждого подхода.
Итак, отнеситесь к тому, что будет дальше, с щепоткой соли; это не закон, высеченный в камне:
• Возможно, вам захочется использовать библиотеку при создании приложений малого и среднего размера или при
необходимо добавить в ваше приложение дополнительную функциональность (в общем, вы можете использовать доп.
библиотеки внутри фреймворков). Существуют также исключения из правила «размера». Например,
React — это библиотека, но на ее основе созданы огромные приложения, такие как Facebook. Компромисс
следует учитывать, что использование только библиотек без фреймворка потребует установления общего подходы и большую координацию внутри команды, чтобы усилия по управлению и руководству могли
значительно вырасти. С другой стороны, библиотека, используемая в простом программировании на JavaScript, может
предлагают некоторые важные улучшения производительности и дают вам значительную гибкость.
• Возможно, вам захочется использовать платформу при создании приложений среднего и большого размера, когда
вам нужна структура, которая поможет вам координировать разработку или когда вы хотите иметь
быстрый старт минуя «азы» разработки общего функционала с нуля. Есть
фреймворки, построенные поверх других фреймворков, например, Nuxt построен поверх
Вю. Компромисс, который следует учитывать, заключается в том, что вам прописана архитектурная модель для построения
приложение, которое часто следует определенному подходу и образу мышления. Вы и ваша команда
придется узнать о рамках и их пределах и жить в этих границах. Есть
всегда есть вероятность, что ваше приложение может перерасти фреймворк в будущем. В то же
некоторые из преимуществ заключаются в следующем: более легкая координация работы, значительные выгоды от
фора, общие проблемы решены верно и проверено, сосредоточены на ситуациях (подумайте о покупках
приложения по сравнению с социальными сетями, например) и многое другое. В зависимости от структуры,
однако вы можете столкнуться с небольшой потерей производительности из-за дополнительной обработки или
трудности с масштабированием. Вам предстоит взвесить компромиссы для каждого случая.