АНАЛИЗ ОСОБЕННОСТЕЙ ПРИМЕНЕНИЯ ФРЕЙМВОРКА VUE.JS В ВЕБ-ПРИЛОЖЕНИЯХ

Обозначения и сокращения:

MVVM – шаблон проектирования архитектуры приложения Model-View-ViewModel.

Интерфейс – «общая граница» между отдельными системами, через которую они взаимодействуют между собой.

Модель (Model) – представляет собой логику работы с данными и описание фундаментальных данных, необходимых для работы приложения.

Представление (View) – графический интерфейс (окна, списки, кнопки и т. п.). Выступает подписчиком на событие изменения значений свойств или команд, предоставляемых Моделью Представления

Модель Представления (View Model) – с одной стороны, абстракция Представления, а с другой — обёртка данных из Модели, подлежащие связыванию. То есть, она содержит Модель, преобразованную к Представлению, а также команды, которыми может пользоваться Представление, чтобы влиять на Модель.

Фреймворк (Framework) – набор библиотек и компонентов для упрощения разработки. Как правило, представляет собой базовый каркас продукта.

Каскадные таблицы стилей (CSS) – формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

DOM - объектная модель документа

Прогрессивное веб-приложение, — подход к разработке веб-приложений, сочетающий преимущества обычных сайтов и веб-приложений: быстрая загрузка, установка в ОС, работа в офлайне, пуш-уведомления, доступ к системным API. Информация для установки описывается в веб-манифесте. Прогрессивность подхода в том, что в обычном браузере — это просто сайт, а в поддерживающих браузерах и ОС — приложение.

Введение:

Сейчас, все уже давно адаптировались к веб-сайтам в сети интернет. В середине двухтысячных годов, на расцвете интернета, интерактивность и вовлечение пользователей в процесс были в центре внимания. Именно в этот период появились такие известные компании как Google, Facebook и Twitter.

Благодаря быстрому развитию технологий и того, что предлагалось пользователям в сети, интернет менялся в лучшую сторону.

Чтобы поспевать за всеми изменениями и предоставлять интерактивность, веб-разработчики начали создавать различные фреймворки, которые упрощали построение веб-сайтов. Со временем появилось множество различные javascript фреймворков, которые сначала были большими, монолитными и навязывали разработчикам свое видение, но теперь наблюдается тенденция компактных и облегченных библиотек, которые очень просто добавить в любое приложение, коем является фреймворк Vue.js.

Фреймворк представляет набор JS скриптов, интерфейсов и множество различных стилей для использования их как единого шаблона при разработке приложений, использующих такой шаблон проектирования как MVVM.

В октябре 2015 года была выпущена версия 1.0 библиотеки, в сентябре 2016 года — версия 2.0, но разработчики веб-приложений всё еще боятся применять данный фреймворк в своих проектах, поэтому стоит внимательно рассмотрим основные моменты данного решения и сравнить его с аналогами.

Основная часть:

Vue.js обычно используется как промежуточное ПО, этому данный фреймворк легко интегрировать с различными библиотеками и проектами. Фреймворк имеет огромный набор компонентов на различных уровнях представлений, а значит он может быть использован как инструмент для разработки прогрессивных веб-приложений.

Отличительные особенности фреймворка:

• Обработка DOM используя декларативный подход;
• Связывание данных;
• Логика шаблонов;
• Обработка событий;
• Встроенная анимация с использованием каскадных таблиц стилей;
• Слабая связанность компонентов;
• Реактивный подход;
• Фильтрация данных.

Использовать данный продукт можно как для небольших проектов, которые нацелены на реактивный подход, представить форму с помощью асинхронной загрузки, показывать интерактивные подсказки в полях ввода, автоматизация действий и другие похожие задачи, так же, как и для объемных проектов, поэтому данный фреймворк называют прогрессивным.

Благодаря своим основным компонентам, таким как «роутинг» библиотека Vue подходит для большинства приложений, использующих SPA подход. Сам фреймворк подходит наилучшим образом для разработки различных проектов благодаря широкому набору интерфейсов предлагаемыми сообществом разработчиков для создания приложений. Так же есть возможность имплементации серверных приложений, которые используют внешние интерфейсы для обработки различных обновляемых данных (Как пример – карта осадков или отображения курса биржевых валют).

Рассмотрим отличительные особенности Vue от других решений.

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

Для работы с описанными фреймворками выше необходимо все лишь добавить библиотеку Javascript в исходный код веб-приложения. Это такой подход невозможен если вы используете Angular, так как он предназначен для более сложных задач. Когда же речь идет о микросервисах то Vue и React дают в разы больше контроля над приложением, позволяя использовать только те модули и компоненты, которые необходимы в данном случае. К тому же, эти компоненты имеют большую гибкость для перехода от одностраничных приложений к микросервисам, что даёт возможность переиспользования частей ранее имплементированных приложений. А Angular, благодаря своему широкому функционалу, лучше подходит для разработки веб-приложений, использующих SPA подход, нежели разбитых на самостоятельные микросервисы.

Выводы

В качестве вывода необходимо отметить, что основной ключевой составляющей фреймворка Vue JS является его простота. Можно выбрать это решение в замену сложных и объёмных библиотек для создания типового веб-приложения, как в случае с представленными в сравнении фреймворками. Исходя из этого, можно сказать что Vue JS это решение для построения высокопроизводительный веб-приложения с легко читаемым кодом с нуля.

Исходя из всего вышеперечисленного, использование прогрессивных фреймворков, таких как Vue.js - позволяют вывести разработку веб-приложений на абсолютно новый уровень.

Список литературы:

1. “Vue.js в действии” Хэнчетт Э., Листуон Б. Издательство: Питер, 2019 г. [Печатное издание].
2. Microsoft Developer Network [Электронный ресурс]. URL: https://blogs.msdn.microsoft.com/johngossman/2005/10/08/introduction-to-modelviewviewmodel-pattern-for-building-wpf-apps/ (дата обращения 14.05.2019)
3. Model-View-ViewModel, Материал из Википедии [Электронный ресурс]. URL: https://ru.wikipedia.org/wiki/Model-View-ViewModel (дата обращения 14.05.2019)