Исследование и выбор фреймворков для разработки веб-приложений

npm install -g @vue/cli

vue create vue-calendar

cd vue-calendar/

npm run serve

Файловая структура пустого проекта на React отображена на Рис. 17:

Рисунок 17 - Файловая структура пустого проекта на React

Файловая структура пустого проекта на Vue.js отображена на Рис. 18:

Рисунок 18 - Файловая структура пустого проекта на Vue.js



Файловая структура, в соответствии с предложенной во второй главе, для программного продукта “Календарь”, представлена на Рис. 19:

Рисунок 19 - Файловая структура проекта на примере React-приложения

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

Список компонентов и их описание:

1) Calendar - компонент, являющийся точкой входа программы для экрана пользователя. Он отрисовывает все компоненты с данными по умолчанию, перерисовывает дочерние компоненты компоненты с новыми данными, код данного компонента на примере React приведен в Приложении 1;

2) EventsList - компонент, отвечающий за вывод списка событий и удаление отдельного события из этого списка. Данный компонент, при желании, можно разбить: каждое событие вынести в отдельный компонент.

3) Year - компонент, который производит отрисовку года, передает данные от своего родителя (компонента Calendar) своему потомку (Month), является, по сути, презентационным компонентом, т.е. компонентов, отвечающим за отображение и передачу данных, но не логику[19].

4) Month - компонент, выводящий название и дни месяца. Данный компонент отвечает за вывод дат в соответствии с днями недели.

5) Day - компонент, позволяющий открыть окно формы добавления события, также с данным компонентом связан компонент списка событий (EventsList).

6) AddEventForm - компонент, добавляющий событие к выбранной дате. Отвечает за добавление события и его запись в хранилище.

К особенностям разработки на React можно отнести то, что при создании такого приложения придется активно использовать JavaScript, функции, обработчики событий, непосредственно создание разметки - всё крепко зависит от чистого JavaScript. Создание разметки в React предполагает использование не HTML, а нового синтаксиса JSX, который представляет собой смесь XML и JavaScript и позволяет писать сжатые структуры HTML (например, DOM подобные древовидные структуры) в файлы JavaScript[20]. Такой синтаксис предназначен для использования препроцессорами, чтобы преобразовать HTML-подобный текст, найденный в файлах JavaScript, в стандартные объекты JavaScript, которые будут анализировать движок JavaScript и, по сути, является синтаксическим сахаром, упрощающим восприятие кода React-компонентов и ускоряющим его написание.

Код React-компонента представляет собой монолитный файл на основе JSX, в который может быть подключен файл со стилями. Также стили можно описывать прямо в файле: либо инлайн-способом, либо с помощью дополнительного пакета, например, styled-components, реализующего технологию CSS-in-JS (привязка стилей к компоненту и их загрузка одновременно с кодом компонента)[21].

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

Шаблон, по сути, представляет собой HTML-разметку, что удобно для большинства разработчиков тем, что отпадает необходимость в изучении нового синтаксиса (JSX).

Vue-файл компонента с расширением *.vue содержит внутри три секции:

? <template></template> - описание разметки компонента;

? <script></script> - непосредственно код JavaScript;

? <style></style> - описание стилей компонента.

Данные в React хранятся в стейтах (state). «Состояние» контролируется и доступно только конкретному компоненту. Изменять состояние можно с помощью метода setState(), который планирует обновление объекта состояния компонента. Когда состояние изменяется, компонент отвечает перерисовкой.

Важно знать три детали о правильном применении setState():

? нельзя изменять состояние напрямую, вместо этого нужно использовать setState(). Напрямую присвоить значение this.state можно в одном единственном месте - в конструкторе;

? обновления состояния могут быть асинхронными, что означает, что иногда приходится прибегнуть к коллбеку внутри метода setState();

? обновления состояния объединяются.

Поток данных в React является однонаправленным: в иерархии компонентов, ни родительский, ни дочерние компоненты не знают, задано ли состояние другого компонента. Также не важно, как был создан определённый компонент -- с помощью функции или класса. Состояние часто называют «локальным», «внутренним» или инкапсулированным. Оно доступно только для самого компонента и скрыто от других. Компонент может передать своё состояние дочернему компоненту в виде пропсов (произвольные входные данные, которые можно читать, но нельзя перезаписывать). Однако, дочерний компонент своё состояние передать родительскому не может[22].

Во Vue.js существует несколько типов данных компонента:

? data - ?основные данные;

? props - ?данные, переданные из родительского компонента;

? computed - данные, которые могут быть вычислены на основе двух предыдущих.

Когда экземпляр Vue создан, он добавляет все свойства, найденные в опции data, в систему реактивности Vue. Поэтому представление будет «реагировать» на их изменения, обновляясь в соответствии с новыми значениями. Когда значения изменяются, представление будет перерисовано. Но важно понимать, что свойства в data будут реактивными, только если они существовали при создании экземпляра[23].

Также как и в React, поток данных во Vue.js является однонаправленным и данные родителя можно передать потомку, но не наоборот.

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

Сначала в проект добавляется библиотека Redux и подключается хранилище - Redux Store, представляющее собой дерево состояний.

Далее создаются reducers - это функции, которые принимают текущее состояние и действие и возвращают новое состояние.

После чего создаются “действия” - actions - функции, которые передают действие в хранилище (диспатчатся). В зависимости от действия вызывается соответствующий редьюсер и производится изменение состояния в Redux Store.

Подключение Redux Store, примеры кода reducers и actions приведены в Приложениях 2 - 4.

Фреймворки предоставляют разработчикам множество методов и «хуков», которые вызываются во время жизненного цикла компонента, они позволяют обновлять UI и состояние приложения. Когда необходимо использовать каждый из них, что необходимо делать и в каких методах, а от чего лучше отказаться, является ключевым моментом к пониманию как работать с фреймворками.

К методам жизненного цикла React-компонента относятся:

? shouldComponentUpdate(nextProps, nextState, nextContext) - по умолчанию, все компоненты будут перерисовывать себя всякий раз, когда их состояние изменяется, изменяется контекст или они принимают props от родителя;

? componentDidUpdate(prevProps, prevState, prevContext) - эта функция будет вызываться после того как отработала функция render, в каждом цикле перерисовки. Это означает, что вы можете быть уверены, что компонент и все его дочерние компоненты уже перерисовали себя;

? componentDidMount - эта функция будет вызвана лишь раз во всем жизненном цикле данного компонента и будет сигнализировать, что компонент и все его дочерние компоненты отрисовались без ошибок;

? componentWillUnmount - эта функция используется для «очистки» после компонента, если он использует таймеры (setTimeout, setInterval), открывает сокеты или производит любые операции, которые нуждаются в закрытии или удалении[24].

При разработке текущего React-приложения были использованы такие методы жизненного как componentDidMount, в котором производится получение свойств, пришедших в компонент и их запись в состояния для дальнейшей обработки, shouldComponentUpdate для перерисовки компонента при изменении его свойств.

Методы жизненного цикла Vue-компонента представлены в списке:

? beforeCreate выполняется прямо во время инициализации компонента. Данные ещё не стали реактивными, а события не настроены;

? created - получение доступа к реактивным данным и активным событиям. Шаблоны и виртуальный DOM ещё не встроены (mounted) и не отрисованы;

? beforeMount выполняется до первичной отрисовки, а также после компилирования шаблона или функций отрисовки;

? mounted - получение полного доступа к реактивному компоненту, шаблонам и отрисованному DOM;

? beforeUpdate выполняется после изменения данных в компоненте и начала цикла обновления, сразу перед патчингом и перерисовкой DOM. Этот хук позволяет получить новое состояние любых реактивных данных в компоненте, прежде чем он будет отрисован;

? updated вызывается после изменения данных в компоненте и перерисовки DOM. Если вам нужно получить доступ к DOM после изменения свойства, такой хук -- самое безопасное место для этого;

? destroyed - удаляет объект Vue из памяти[25].

При разработке текущего Vue-приложения были использованы такие методы жизненного как mounted() для прикрепления и дальнейшей работы с DOM и updated(), который вызывается после изменения данных в компоненте и перерисовки DOM.

Рендеринг компонентов производится в зависимости от их текущего состояния и в React представлен функцией render(), а в шаблонных компонентах Vue.js отрисовка производится без указания конкретной функции, т.е. достаточно написать разметку, или (в случае описания Vue-компонентов без шаблонов - на более низком уровне - также используется функция render()).

В приложениях, разработанных на базе React или Vue.js реализована технология виртуальный DOM (объектная модель документа, представленная деревом с узлами-HTML-тегами)[26].

Когда браузер обрабатывает код, он создаёт дерево «узлов DOM». Каждый элемент - тег - является узлом. Каждый фрагмент текста является узлом. Даже комментарии это узлы. Узел -- это всего лишь часть страницы. Каждый узел может иметь своих потомков.

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

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

Без технологии “virtual DOM” было бы невозможно производить обновление состояний компонентов без перезагрузки страницы.

Тестирование приложения производится на основе требований к приложению.

При загрузке приложения должен быть выведен текущий год, месяц и выбрана текущая дата. Если к текущей дате прикреплены события - справа должен быть выведен список событий.

После загрузки приложения, выбираем дату, кликаем на появившийся пункт меню “Добавить событие”, заполняем форму добавления события, кликаем “Сохранить”.

После клика “Сохранить”, если были введены корректные данные (не пустое поле) - в списке событий выбранной в прошлом пункте даты должно отобразиться добавленное событие.

При обновлении страницы на локальном компьютере также должны отображаться корректные данные по конкретным датам.

При удалении события из списка, список обновляется, данные заносятся в хранилище, при обновлении страницы или переходе между датами, последние изменения с удаленным событием должны сохраниться и отобразиться корректно.

Чек-лист для тестирования разрабатываемого веб-приложения состоит из следующих пунктов:

1) тестирование удобства использования - это метод тестирования, направленный на установление степени удобства использования, обучаемости, понятности и привлекательности для пользователей разрабатываемого продукта в контексте заданных условий;

2) функциональное тестирование основываются на функциях, выполняемых системой. Как правило, эти функции описываются в требованиях, функциональных спецификациях или в виде случаев использования системы (use cases);

3) тестирования совместимости - вид нефункционального тестирования, основной целью которого является проверка корректной работы продукта в определенном окружении. В данном конкретном случае под тестированием совместимости является проверка приложения на кроссбраузерность.

Результаты тестирования удобства использования приведены в Таблице 2.

Таблица 2 - Результаты тестирования удобства использования

Тест	Ожидаемый результат	Фактический результат
Содержание веб-страницы верное, без грамматических и орфографических ошибок	Успех	Успех
Все сообщения об ошибках верные	Успех	Успех
Подсказки существуют для всех полей	Успех	Успех
Подтверждающие сообщения должны отображаться для всех операций создания и удаления	Успех	Успех
Корректное отображение на всех основных браузерах	Успех	Успех

Результаты функционального тестирования приведены в Таблице 3.

Таблица 3 - Результаты функционального тестирования

Тест	Ожидаемый результат	Фактический результат
Валидация всех обязательных полей	Выводит ошибки при пустых значениях или некорректно введенных данных	Выводит ошибки при пустых значениях или некорректно введенных данных
Проверка на максимальную длину каждого поля	Данные не обрезаются, при вводе большего количества символов появляется читабельное сообщение об ошибке	Данные не обрезаются, при вводе большего количества символов появляется читабельное сообщение об ошибке
Подтверждающие сообщения должны отображаться для всех операций создания и удаления	Выводятся	Выводятся
Функциональность сортировки	Сортировка работает корректно	Сортировка работает корректно
Выполнение прямого назначения каждой кнопки	Выполняют соответствующую функцию	Выполняют соответствующую функцию
Валидация верстки	Верстка валидна	Верстка валидна
Создание события при корректно введенных данных	Событие создаётся	Событие создаётся
Удаление события из списка	Событие удаляется	Событие удаляется
Вывод списка событий даты	События выводятся	События выводятся

Результаты тестирования совместимости приведены в Таблице 4.

Таблица 4 - Результаты тестирования совместимости

Тест	Ожидаемый результат	Фактический результат
Корректное отображение разметки в разных браузерах	Успех	Успех
Корректная работа Javascript в разных браузерах	Успех	Успех
Корректное отображение шрифтов в разных браузерах и на разных ОС	Успех	Успех



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

Анализ полученных результатов

Разработка программного продукта “Календарь” производилась на базе фреймворков React и Vue.js. Разработанные продукты по интерфейсу различий не имеют, также и разбиение на компоненты, представленное на Рис. 11 и их описание из главы 3.

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

Различия в создании проекта с помощью утилиты CLI:

? при создании проекта на Vue.js, в отличие от React-проекта, есть возможность выбора дополнительных инструментов разработки, что представлено на Рис. 20;



Рисунок 20 - Выбор инструментов разработки при создании Vue проекта

? размер папки пустого проекта на Vue.js составляет 84.5 МБ;

? размер папки пустого проекта на React составляет 114 МБ;

? количество node-пакетов и скорость создания проекта на Vue.js: 1078 пакетов за 18.1 секунды;

? количество node-пакетов и скорость создания проекта на React: 1403 пакета за 62.2 секунды.

Маршрутизация внутри обоих представленных фреймворков реализована с помощью сторонних библиотек маршрутизации: react-router и vue-router, которые устанавливаются аналогично с помощью пакетного менеджера Node.js. Возможности библиотек роутинга, в принципе, не отличаются друг от друга и позволяют соотносить определенные компоненты с их маршрутами.

Задание и изменение данных внутри компонента в использованных фреймворках несколько отличается:

? в React-компонентах данные могут быть представлены двумя типами: неизменяемые props-свойства родительских компонентов (только для чтения) и локальные и изменяемые для каждого отдельного компонента state-состояния;

? во Vue-компонентах данные могут быть представлены тремя типами: неизменяемые props-свойства родительских компонентов (только для чтения), изменяемые локальные данные-data и вычисленные-computed данные (могут быть вычислены на основе двух предыдущих).

Данные типа props и типа state являются важными составляющими любого веб-приложения и без них не обходится написание практически ни одного компонента.

Передача данных между компонентами в общем одинакова, т.е. поток данных является однонаправленным от родителя к потомку отличается только написанием:

? для React:

_ передача state родителя в качестве props потомку:

class MonthItem extends Component {

state = {

selectedDayId: null

}

render() {

<Day selectedDay={this.state.selectedDayId} />

}

}

_ отображение данных, пришедшего от родителя props в потомке:

class Day extends Component {

render() {

return <div className="day-item" id={this.props.selectedDay}>{this.props.selectedDay}</div>

}

}

? для Vue:

_ передача data родителя в качестве props потомку:

<template>

<div class="month">

<Day v-for="(day, index) in days" :key="index" :day="day" />

</div>

</template>

<script>

import Day from './Day'

export default {

name: 'Month',

components: {

Day,

},

props: {

id: Number,

days: Array,

}

}

</script>

_ отображение данных, пришедших от родителя props в потомке:

<template>

<span class="day" :id="day.id">

{{ day.id }}

</span>

</template>

<script>

export default {

name: 'Day',

props: {

day: Object,

}

}

</script>

Написание кода компонентов сильно различается. Код React-компонента пишется в соответствующем файле монолитом: в основном методе render() описывается JSX-разметка, а функции и методы жизненного цикла выносятся из метода render(), но остаются внутри компонента. Стили либо встраиваются инлайном над кодом компонента, либо в файл компонента подключается соответствующий ему стилевой файл.

Тогда как в шаблонном Vue-компоненте состав файла делится на три четко описанные части: template - код разметки, script - код функций JavaScript и style - CSS-правила текущего компонента. К плюсам шаблонов Vue можно отнести то, что для многих разработчиков, которые работают с HTML, шаблоны просто более естественны для чтения и написания, также есть возможность использования HTML-препроцессоров, таких, например, как Pug.

Такая оценка, возможно, субъективна, однако, личное предпочтение автора - стиль написания React-компонентов, в которых стили вынесены в отдельный файл и подключены с помощью директивы import, так как к преимуществам такого стиля а, в частности, использования JSX можно отнести возможность использования линтеров, проверки типов, прямые ссылки на значения JavaScript в области видимость и проч.

Процесс рендеринга компонентов также не имеет особых отличий. Тогда как методы жизненного цикла все-таки различаются: основные методы монтирования и уничтожения компонента одинаковы, но у Vue-компонента методов жизненного цикла больше, что позволяет более точно производить изменения или ререндеринг компонента на определенных этапах жизненного цикла компонента.

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

В рамках разрабатываемых продуктов производилась постепенная (со всеми промежуточными версиями) миграция проекта с версии v2.6.1 на версию v2.6.10. В рамках данных миграций, при условии отсутствия в проекте готовых решений, проблем не возникало, миграции проходили быстро и безошибочно.

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

На основе анализа полученных результатов сделан вывод о том, что оба фреймворка отлично справляются с задачей создания приложения типа “Календарь”, у каждого из них есть свои особенности. Для выбора фреймворка для разработки проекта следует опираться на предпочтение разработчиков.



ЗАКЛЮЧЕНИЕ

В ходе выполнения диссертационной работы были решены следующие задачи:

1) исследование и выбор фреймворков для разработки веб-приложений;

2) исследование и выбор средств разработки;

3) разработка алгоритма сравнения программных продуктов;

4) разработка структуры приложения;

5) исследование полученных программных продуктов на основе алгоритма их сравнения.

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

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

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

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



СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Богданенко Д. А. Подходы к архитектурному проектированию веб-приложений / Богданенко Д. А. / Молодой ученый. -- 2018. -- №9. -- С. 24-29. -- Режим доступа: https://moluch.ru/archive/195/48609



ПРИЛОЖЕНИЕ 1

Код React-компонента Calendar

import React, { Component } from 'react'

import Year from '../year'

import EventsList from '../eventsList'

export default class Calendar extends Component {

state = {

year: new Date().getFullYear(),

month: new Date().getMonth()

}

render() {

let { year } = this.state

return (

<div className="calendar-wrapper">

<p className="title">{year} год</p>

<div className="calendar-months">

{this.monthsRenderHelper()}

<EventsList />

</div>

</div>

)

}

monthsRenderHelper = () => {

let { year, month } = this.state

return (

<div className="calendar-months__wrapper">

<div className="calendar-months__arrows">

<span onClick={this.prevMonthHandler}></span>

<span onClick={this.nextMonthHandler}></span>

</div>

<Year

year={year}

month={month}

/>

</div>

)

}

prevMonthHandler = (e) => {

e.preventDefault()

let month

if (this.state.month === 0) {

let year = this.state.year - 1

month = 11

this.setState({

year: year

})

} else {

month = this.state.month - 1

}

this.setState({

month: month

})

}

nextMonthHandler = (e) => {

e.preventDefault()

let month

if (this.state.month === 11) {

let year = this.state.year + 1

month = 0

this.setState({

year: year

})

} else {

month = this.state.month + 1

}

this.setState({

month: month

})

}

}



ПРИЛОЖЕНИЕ 2

Код Redux Store для приложений

import { createStore, compose, applyMiddleware } from 'redux';

import reducer from './reducers/reducer';

const middlewares = [];

const composeEnhancer =

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducer,

composeEnhancer(applyMiddleware(...middlewares)))

export default store;



ПРИЛОЖЕНИЕ 3

Код reducer для изменения данных компонента EventsList

import { NOTICE_LIST, ADD_TO_NOTICE_LIST, CHOSEN_DAY } from '../../constant'

const DefaultState = [];

export default function notice(state = DefaultState, action) {

switch (action.type) {

case ADD_TO_NOTICE_LIST:

return [action.notice, ...state]

case NOTICE_LIST:

return [action.list]

case CHOSEN_DAY:

return [action.notice, ...state]

default:

return state

}

}

ПРИЛОЖЕНИЕ 4

Код action для EventsList

import { NOTICE_LIST, ADD_TO_NOTICE_LIST, CHOSEN_DAY } from '../../constant'

export const getNoticeList = (list) => {

return {

type: NOTICE_LIST,

list: list

}

}

export const addToNoticeList = (notice) => {

return {

type: ADD_TO_NOTICE_LIST,

notice: notice

}

}

export const setChosenDay = (id) => {

return {

type: CHOSEN_DAY,

id: id

}

}

Размещено на Allbest.ru

...