Исследование технологии кроссплатформенной разработки приложения с адаптивным пользовательским интерфейсом | Статья в журнале «Молодой ученый»

Отправьте статью сегодня! Журнал выйдет 11 мая, печатный экземпляр отправим 15 мая.

Опубликовать статью в журнале

Автор:

Рубрика: Информационные технологии

Опубликовано в Молодой учёный №45 (440) ноябрь 2022 г.

Дата публикации: 10.11.2022

Статья просмотрена: 161 раз

Библиографическое описание:

Бобров, А. В. Исследование технологии кроссплатформенной разработки приложения с адаптивным пользовательским интерфейсом / А. В. Бобров. — Текст : непосредственный // Молодой ученый. — 2022. — № 45 (440). — С. 5-8. — URL: https://moluch.ru/archive/440/96176/ (дата обращения: 02.05.2024).



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

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

This article provides an analysis of the technology of cross-platform software development that creates a window interface for user interaction. It allows for an easy and convenient way to change all interface elements during execution by configuring the finished product. The research is aimed at identifying the best current trends and existing ways to implement them in this area. The article discusses the technological aspects of solving the issues of interaction performance and simplifying the interface development stage in terms of maximizing the use of a single program code executed on different platforms. The conclusion is made about the positive effect of the studied technology.

Keywords: adaptive interface, native, cross-platform .

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

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

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

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

Нативные приложения — это прикладные программы, разработанные для определённой платформы или определённого устройства.

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

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

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

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

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

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

Такой подход набирает популярность, потому что так называемые гибридные приложения — это профессиональное решение, которое обеспечивает высокую скорость разработки и позволяет создавать идеальные решения. Однако, разрабатывать гибридное приложение на одном только нативном языке программирования невозможно. Потребуется интегрировать фреймворки[2] для гибридной разработки.

Один из них использует библиотеку Qt [2], которая открывает возможность создания приложений и пользовательских интерфейсов для настольных, встроенных и мобильных операционных систем. Приложения могут разрабатываться с использованием языков программирования C++ и QML, похожего на JavaScript. Для многих языков программирования существуют библиотеки, позволяющие использовать преимущества Qt.

Со времени своего появления в 1995 году библиотека легла в основу многих программных проектов. Она включает в себя все основные классы, которые могут потребоваться при разработке прикладного программного обеспечения. Начиная с элементов графического интерфейса и заканчивая классами для работы с сетью, базами данных и XML[3]. Кроме того, Qt является фундаментом популярной рабочей среды KDE, входящей в состав многих дистрибутивов операционной системы Linux.

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

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

Другая популярная платформа — это.NET [3] от Microsoft по-настоящему универсальный инструмент, с помощью которого можно решать широчайший круг задач, включая разработку прикладных приложений для операционных систем Windows, Linux, MacOS, Android и iOS.

Для формирования программных окон на основании XAML[4]-файлов используется стандартная технология Xamarin [4], предоставляющая отдельную библиотеку для каждой платформы. Существуют кроссплатформенные, но из-за применения совместимости их производительность ниже. Учитывая, что указанная технология на данный момент не представляет полноценного и единого кроссплатформенного решения для создания графических интерфейсов, возникает необходимость использовать сторонние фреймворки, например SpaceVIL [5] или AvaloniaUI [6].

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

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

Разработчики, использующие AvaloniaUI, пишут на языке C# и диалекте XAML, что удобно для тех, кто создавал приложения аналогичные приложения для Windows. Еще имеются стили, подобные CSS[5]. Благодаря всем этим особенностям AvaloniaUI позволяет создавать гибкие и стилизованные интерфейсы как для мобильных устройств и Windows, так и для Linux и MacOS. Очень важной особенностью этого фреймворк — это поддержка шаблона проектирования MVVM [7].

Архитектура MVVM предполагает разделение ответственности между тремя программными слоями приложения: модель (Model), представление (View) и модель представления (ViewModel). Слой модели представляет собой доменные сервисы, объекты передачи данных, сущности баз данных, репозитории и бизнес-логику программы. Представление отвечает за отображение элементов пользовательского интерфейса на экран и зависит от конкретной операционной системы, а модель представления позволяет двум описанным выше слоям взаимодействовать, адаптируя слой модели для взаимодействия с пользователем. Эти слои выполняются в виде отдельных сборок, чтобы использовать в новом проекте. В типичной модели представления каждое публичное свойство должно уметь отправлять уведомления пользовательскому интерфейсу, когда его значение изменяется. Свойства и команды могут быть привязаны элементы разметки модели представления с помощью классического метода, так использование библиотеки ReactiveUI [8], предоставляющей классы-обёртки, ответственные за отправку уведомлений пользовательскому интерфейсу, или с пакетом Fody [9].

При сравнении производительности необходимо учитывать скорость работы: кроссплатформенной части; нативной части и модуля их взаимодействия. С учетом удобства, скорости разработки и масштаба распространения кроссплатформенности определены лучшие фреймворки: Qt, AvaloniaUI, JavaFX, React Native и Flutter.

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

Однако, только решение с AvaloniaUI обеспечивает стандартизированный и проверенный подход с шаблоном проектирования MVVM и библиотеками ReactiveUI и Fody, которые предоставляют возможность упростить и ускорить процесс разработки.

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

Альтернативный метод реализуют все представленные в этой статье фреймворки. Он более простой — все настройки и параметры элементов окна сохранены в конфигурации программы, а не в ее коде. После выполнения изменения конфигурации потребуется только перезапустить программу.

Литература:

  1. Купер А., Рейман Р., Кронин Д. Алан Купер об интерфейсе. Основы проектирования взаимодействия; Пер. с англ. – СПб.: Символ'Плюс, 2009. – 688 с.
  2. Шлее М. Qt 5. Профессиональное программирование на C++. – СПб.: БХВ-Петербург, 2018 – 1072 с; ил.
  3. Официальный сайт разработчика .NET [Электронный ресурс]. – Режим доступа:dotnet.microsoft.com.
  4. Официальный сайт документации разработчика Xamarin [Электронный ресурс]. – Режим доступа: docs.microsoft.com/ru-ru/xamarin.
  5. Официальный сайт разработчика SpaceVIL [Электронный ресурс]. – Режим доступа: spvessel.com.
  6. Официальный сайт разработчика AvaloniaUI [Электронный ресурс]. – Режим доступа: docs.avaloniaui.net.
  7. Официальный сайт разработчика AvaloniaUI/ MVVM Architecture [Электронный ресурс]. – Режим доступа: docs.avaloniaui.net/guides/basics/mvvm.
  8. Официальный сайт разработчика AvaloniaUI/ ReactiveUI [Электронный ресурс]. – Режим доступа: docs.avaloniaui.net/guides/deep-dives/reactiveui.
  9. Официальный сайт разработчика AvaloniaUI/ ReactiveUI [Электронный ресурс]. – Режим доступа: githubplus.com/Fody.

[1] Слово «нативный» происходит от английского native – родной или естественный.

[2] Фреймворк – программная платформа, определяющая структуру программной системы или программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.

[3] XML – расширяемый язык разметки.

[4] XAML–расширяемый язык разметки для приложений, основанный на XML язык разметки для декларативного программирования приложений, разработанный Microsoft.

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

Основные термины (генерируются автоматически): MVVM, приложение, операционная система, пользовательский интерфейс, исходный код, нативная часть, нативное приложение, программное обеспечение, программный код, программный продукт.


Ключевые слова

адаптивный интерфейс, нативный, кроссплатформенный

Похожие статьи

Принципы и правила проектирования пользовательского...

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

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

Проектирование мобильных приложений и облачных сервисов

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

CSS стили; JAVASCRIPT коды; флеш приложения. Разработка мобильного приложения для таксатора.

Разработка мобильных приложений с использованием облачных...

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

Обзор методов интеграции информационных систем, их...

...распределённых программных приложений, реализованных разными разработчиками в разное время, в подобие единой системы.

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

Подходы к архитектурному проектированию веб-приложений

Далее приведён пример кода простого приложения с монолитной архитектурой, который располагается на сервере, который выводит ту или иную страницу в зависимости от пришедшего на сервер запроса. require_once("./utils/get_server_params.php")

Пользовательский интерфейс — комплекс программных...

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

Headless-архитектура информационной системы предприятия

информационная система, пользовательский интерфейс, программное обеспечение, данные, подсистема, часть системы, система управления, мастер цеха, баз знаний, XML, SQL, JSON, HTML, API, сеть. Интеграция информационных систем на основе стандартов XML...

Разработка приложения для организации учебной деятельности...

Программное приложение для операционной системы Android состоит из набора активностей, каждой из которых соответствует экран приложения. Разработка программного модуля навигации внутри зданий...

Разработка учебного курса по программированию под мобильную...

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

Похожие статьи

Принципы и правила проектирования пользовательского...

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

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

Проектирование мобильных приложений и облачных сервисов

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

CSS стили; JAVASCRIPT коды; флеш приложения. Разработка мобильного приложения для таксатора.

Разработка мобильных приложений с использованием облачных...

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

Обзор методов интеграции информационных систем, их...

...распределённых программных приложений, реализованных разными разработчиками в разное время, в подобие единой системы.

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

Подходы к архитектурному проектированию веб-приложений

Далее приведён пример кода простого приложения с монолитной архитектурой, который располагается на сервере, который выводит ту или иную страницу в зависимости от пришедшего на сервер запроса. require_once("./utils/get_server_params.php")

Пользовательский интерфейс — комплекс программных...

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

Headless-архитектура информационной системы предприятия

информационная система, пользовательский интерфейс, программное обеспечение, данные, подсистема, часть системы, система управления, мастер цеха, баз знаний, XML, SQL, JSON, HTML, API, сеть. Интеграция информационных систем на основе стандартов XML...

Разработка приложения для организации учебной деятельности...

Программное приложение для операционной системы Android состоит из набора активностей, каждой из которых соответствует экран приложения. Разработка программного модуля навигации внутри зданий...

Разработка учебного курса по программированию под мобильную...

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

Задать вопрос