Назад в раздел «Научные труды»

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

Прокопенко Е.В. Павлыш Э.В. Калмыков Д.Е. Исследование современных методов создания пользовательских интерфейсов. Материалы VIII Всероссийской научно-технической конференции. СОВРЕМЕННЫЕ ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ В ОБРАЗОВАНИИ И НАУЧНЫХ ИССЛЕДОВАНИЯХ.

Прокопенко Е.В.(1) Павлыш Э.В.(2) Калмыков Д.Е(1)
(1)ФГБОУ ВО «Донецкий национальный технический университет» (г. Донецк)
кафедра «Прикладная математика и искусственный интеллект»
(2)УО «Витебский государственный университет имени П.М. Машерова» (г. Витебск, РБ)
кафедра «Информационных технологий и управления бизнесом»
E-mail: prokopenko1515@rambler.ru , korovi03@gmail.com

Аннотация

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

Ключевые слова: интерфейс, веб-сайт, фреймворк, бандлеры, трафик.

Введение

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

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

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

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

Постановка задачи

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

jQuery

jQuery – это Framework JavaScript, который привлекает своей простотой в понимании и удобством использования. Он представляет собой быструю, легкую и многофункциональную JavaScript библиотеку, основанную на принципе «пишите меньше, делайте больше».

Эту библиотеку разработал Джон Резиг в начале 2006 года. В настоящее время jQuery продолжает развиваться и поддерживаться распределенной группой разработчиков, как проект с открытым исходным кодом

Преимущества и недостатки jQuery

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

К недостаткам jQuery можно отнести то, что она может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ), а также немного снижать производительность выполнения кода, чем если он был бы написан на чистом JavaScript.

VUEJS

Vue.js – это современный JavaScript фреймворк, который широко используется для разработки пользовательских интерфейсов. В данном разделе статьи мы рассмотрим преимущества и недостатки использования Vue.js в создании интерфейсов.

Преимущества React:

Недостатки

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

WEBPACK

При создании приложений разработчики делят код на части (модули), подключают дополнительные обработчики кода, настраивают приложения для различных окружений (development и production). Чтобы это было возможным, а нам не пришлось вручную подключать модули в HTML-файле в нужном порядке и следить за изменениями, в приложениях используются сборщики модулей (бандлеры).

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

Webpack – один из самых популярных сборщиков модулей. Это помощник разработчиков, несмотря на то, что по началу он может показаться достаточно сложным. Его гибкость позволяет настроить сборку с использованием огромного множества плагинов и загрузчиков (пре- и постпроцессоров CSS и HTML, Babel и др.), оптимизировать ресурсы, быстро подгружать изменения в процессе разработки с помощью hot module replacement, и многое другое.

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

Преимущества: он отлично подходит для работы с одностраничными приложениями. Также вебпак может осуществлять продвинутое разделение кода. Из-за этих и других преимуществ он является одним из наиболее популярных инструментов JS-разработки на данный момент.

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

AJAX

AJAX – это сокращение от Asynchronous Javascript and XML и представляет собой комбинацию уже давно существующих технологий, таких как Javascript и XML. Хотя AJAX не является новой технологией сам по себе, он часто связывается с понятием Web 2.0 и рекламируется как новейшее веб-приложение.

Основная преимущество использования AJAX заключается в том, что не требуется обновлять всю страницу при каждом обновлении, а только нужную ее часть. Это делает использование более удобным, так как пользователю не приходится долго ждать, и экономичным, так как не все люди имеют неограниченный доступ к Интернету. Однако в этом случае разработчику необходимо обеспечить уведомление пользователя о состоянии страницы. Для этого можно использовать индикаторы загрузки и текстовые сообщения о процессе обмена данными с сервером. Также важно помнить, что не все браузеры поддерживают AJAX (особенно старые версии и текстовые браузеры), и пользователь может отключить поддержку JavaScript. Поэтому не рекомендуется злоупотреблять использованием технологии и лучше прибегать к альтернативным методам представления информации на веб-сайте.

Обобщим достоинства AJAX:

AJAX использует два метода работы с веб-страницей: изменение Web-страницы не перезагружая её, и динамическое обращение к серверу. Второе может осуществляться несколькими способами, в частности, XMLHttpRequest, о чем мы и будем говорить, и использование техники скрытого фрейма. Выделим достоинства и недостатки данной технологии:

Плюсы использования:

Экономичность. Ввиду того, что при запросе AJAX-страницы серверу нет необходимости заново «перегружать» весь контент и повторно генерировать всю страницу, а только часть ее (ту, которая изменяется/подгружается AJAX-скриптом), происходит значительная экономия Web-трафика и снижается количество запросов-обращений на сервер.

Снижение серверной нагрузки. Данное преимущество вытекает из первого, когда за счет снижения количества запросов, посылаемых на сервер, снижается и нагрузка. Это особенно актуально на крупных сайтах, где количество генерируемых запросов пользователями может стать серьезной проблемой, ставящей под угрозу работоспособность.

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

В то же время AJAX может в буквальном смысле «похоронить» всю работу SEOспециалиста при некорректном использовании. Поэтому о минусах использования данной технологии говорят обычно именно оптимизаторы.

Плюсы использования:

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

Искажение данных статистики. Так как поисковые системы перестают «видеть» AJAX-страницы, данные от счетчиков, установленных на них, передаются некорректно. Для крупных ресурсов, особенно работающих в нише e-commerce, это такая же большая потеря, как и исчезновение посадочных страниц из выдачи.

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

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

Выводы

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

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

Литература

  1. Тузовский, А. Ф. Проектирование и разработка web-приложений : учебное по собие / А. Ф. Тузовский. — Томск : Томский политехнический университет, 2014. — 219 c. — Текст : электронный // Электронно-библиотечная система IPR BOOKS : [сайт]. — URL: https://www.iprbookshop.ru/34702.html — Режим доступа: для авторизир. Пользователей.
  2. Лучанинов, Д. В. Основы разработки web-сайтов образовательного назначения : учебное пособие / Д. В. Лучанинов. — Саратов : Ай Пи Эр Медиа, 2018. — 105 c. — ISBN 978-5-4486-0174-3. — Текст : электронный // Электронно-библиотечная система IPR BOOKS : [сайт]. — URL: https://www.iprbookshop.ru/70775.html. — Режим доступа: для авторизир. пользователей. - DOI: https://doi.org/10.23682/70775.
  3. Сычев, А. В. Web-технологии / А. В. Сычев. — Москва : ИнтернетУниверситет Информационных Технологий (ИНТУИТ), 2016. — 184 c. — ISBN 2227-8397. — Текст : электронный // Электронно-библиотечная система IPR BOOKS : [сайт]. — URL: http://www.iprbookshop.ru/56344.html. — Режим доступа: для авторизир. Пользователей.

Аннотация

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

Ключевые слова: интерфейс, веб-сайт, фреймворк, бандлеры, трафик.

Prokopenko E.V., Pavlysh Е.V., Kalmykov D.E. Research of modern methods of creating user interfaces. The possibilities of studying modern development tools used in creating a user interface, developing the architecture of websites, highlighting the advantages and disadvantages of the presented tools are considered.

Keywords: interface, website, framework, bundles, traffic.