Сравнительный анализ методов разработки мобильных приложений и фреймворков для кроссплатформенной разработки
Введение
Рынок мобильных устройств непрерывно растёт и развивается. Приблизительное число разработчиков мобильных приложений на сегодняшний день составляет 2,3 млн чел. Это означает, что каждый восьмой из всех разработчиков в мире создаёт мобильные приложения. В 2013 г. компания «Apple» вовремя World Wide Developer Conference объявила, что в AppStore опубликовано уже 1,25 млн приложений, которые пользователи скачали 50 млрд раз, а разработчики получили доход в 5 млрд долл. США. Растит потребность в разработке качественного и соответствующего современным тенденциям продукта. Рассматривая вопросы создания и реализации мобильных приложений, следует начать с выбора технологий и методов разработки.
Актуальность: на протяжении последних лет показатель, характеризующий уровень спроса на мобильные устройства, постоянно растёт. Такая статистика позволяет сделать вывод о том, что разработка мобильных приложений актуальна и целесообразна.
Проблема: неясность в выборе метода разработки мобильных приложений из-за множества вариантов на рынке.
Цель исследования: выбрать метод для разработки прототипа мобильного приложения Health Shop.
Гипотеза: предположим, что кроссплатформенные приложения сравнимы по производительности с нативными.
- Проанализировать кроссплатформенную и нативную разработки.
- Изучить наиболее востребованные кроссплатформенные фреймворки.
- Составить сравнительную таблицу методов разработки мобильных приложения.
- Разработать мобильно приложение используя полученные знания.
Объект исследования: мобильная разработка.
Предмет исследования: методы разработки мобильных приложений.
Методы исследования: классификация, индукция, статистический анализ, проведение тестирования.
1 Теоретическая часть
1.1 Методы разработки мобильных приложений
Мобильная разработка настолько популярна, что нередко приложения для мобильных устройств разрабатываются намного раньше, чем сами веб сайты. И по мере того, как мобильная связь становится все более доступной, способов разработки приложений для использования в абсолютно любых обстоятельствах становится все больше.
Прежде чем начать разработку нужно определить: какая цель, каковы основные функции, на какого пользователя, какой рынок и наконец кокой бюджет разработки приложения. Только после этого можно переходить к следующему этапу – выбор метода разработки. Существует 2 основных подхода создания приложений:
1.2 Что такое кроссплатформенная и наивная разработки
Нативная разработка – это создание продукта, который пишется на оригинальных языках программирования, созданных специально для выбранной платформы. Например, родным для Android является Java и Kotlin и среда разработки Android Studio, для iOS используется Xcode – Swift и Objective-C. Именно нативный способ разработки приложений решает самый широкий спектр задач, и позволяет разрабатывать наиболее качественные продукты.
Кроссплатформенные приложения могут работать сразу на нескольких операционных системах. Для этого используются специализированные кроссплатформенные фреймворки, например, Flutter, React-Native, Xamarin, Kotlin Multiplatform, PhoneGap.
1.3 Сравнительный анализ кроссплатформенной и наивной разработок
1.3.1 Нативный подход разработки
Разработка мобильного приложения на родных технологиях и языках имеет следующие преимущества:
- Гибкость реализации. Можно использовать все доступные технологии OS. Разработчик не ограничен в использовании сторонних библиотек.
- Производительность. Полная аппаратная поддержка мобильной платформы позволяет нативным приложениям работать быстро и бесперебойно. Возможность обработки значительного количества данных на стороне клиента.
- UI и UX. Поведенческие паттерны различны для, например, устройств iOS и Android. Пользователи зачастую находят реализации функций в нативных версиях более удобными.
- Доступность новейших технологий. Новый программный и аппаратный функционал, предоставленный компаниями-производителями устройства и операционной системы, становится доступен для реализации сразу после выпуска соответствующих обновлений.
- Безопасность. Для обеспечения надёжно защиты требуется использование аппаратных ресурсов.
- Лёгкость тестирования. В процессе разработки не сложно отследить, в какой момент приложение начинает требовать большего объёма памяти или ресурсов процессора, а также обнаружить тормозящие процессы и оптимизировать их.
- Полная поддержка магазинов приложений. Нативные приложения по умолчанию отвечают определённому числу требований магазинов, поэтому процесс публикации для них относительно прост.
Вместе с тем, стоит учитывать, что нативная разработка под несколько платформ приведёт к увеличению ресурсных затрат.
- Стоимость разработки. Для разработки придётся привлекать несколько команд разработчиков для каждой OS. Кроме того, подорожает поддержка приложения. После выхода на рынок необходимо обновлять функционал и исправлять баги на нескольких платформах, при этом на каждой из них возможно появление уникальных ошибок, что ведёт к ухудшению UX на одной или нескольких платформах.
- Сроки разработки. Реализация нескольких приложений затратна по времени, также стоит учитывать, что каждая команда имеет свой темп разработки.
- Охват рынка. Маленькие компании не могут нанять несколько команд разработчиков, что приводит к ухудшению UX на других платформах.
1.3.2 Кроссплатформенный подход разработки
Выбор в пользу кроссплатформенной разработки обеспечивает следующие преимущества.
- UI и UX. При разработке кроссплатформенных приложений различия в UI и UX между Android и iOS прорабатываются одной командой, что делает несогласованность дизайна и навигации менее вероятной.
- Поддержка продукта. Разработчикам необходимо поддерживать лишь одну версию приложения. А добавление функционала и исправление багов распространяется на все платформы сразу.
- Сроки разработки. Единая кодовая база легче тестируется и позволяет повторно использовать до 90% кода вместо написания полностью уникального под каждую платформу. В результате можно получить преимущество быстрого выхода на рынок (TTM).
- Стоимость разработки. Единая кодовая база позволяет инвестировать только один раз и только в одну команду, что значительно сокращает затраты на разработку.
- Единая логика приложения. На всех платформах используется единая логика, что позволяет избежать уникальных багов.
- Процедура обновления. Обновления выпускаются одновременно на все платформы соответственно UX не ухудшается.
Основные недостатки кроссплатформенной разработки.
- Производительность. Любое ответное действие со стороны приложения требует выполнения процессов сериализации и десериализации, что значительно влияет на производительность.
- UI и UX. Кроссплатформенные решения обрабатывают больше данных, поскольку включают дополнительный уровень абстракции, поэтому работают медленнее нативных при наличии многоэлементного интерфейса.
- Доступность последних технологий. Кроссплатформенные решения – стороннее ПО, поэтому они не могут обеспечить немедленную поддержку последних обновлений iOS и Android.
- Безопасность. Для обеспечения надёжной защиты требуется эффективное использование аппаратных ресурсов, с чем кроссплатформенные приложения справляются на порядок хуже нативных. А введение нового уровня поверх родной OS приносит ещё больше уязвимостей.
- Сложности при построении команды. Кроссплатформенная разработка требует от разработчиков глубокого понимания целевых OS, ведь не смотря на одну кодовую базу, им придётся разворачивать приложения и в Google Play и в App Store, а также писать дополнительные куски кода под каждую платформу и думать о том, как наиболее эффективно обработать различия операционных систем.
- Поддержка со стороны магазинов. Кроссплатформенные приложения зачастую не соответствуют всем требованиям магазинов или же имеют по некоторым пунктам низкие показатели. В результате чего, они редко попадают в Featured-разделы App Store и Google Play.
1.3.3 Когда стоит применять кроссплатформенную разработку, а когда нативную
Резюмируя вышеописанное, можно сделать вывод, что для серьёзных проектов нативный тип разработки будет самым верным. Нативная разработка позволяет добиться безупречного пользовательского опыта от конкретной платформы. Также в сторону нативного приложения склоняют требования к беспрепятственному использованию аппаратного обеспечения мобильного устройства или специфичных для платформы функций и высокой производительности. Кроме того, если планируется создать сложное и долгосрочное приложение с широким функционалом, многоэлементным интерфейсом или сложной анимацией, нативное приложение – единственный выбор. Об этом говорит опыт таких крупных компаний как Meta, Airbnb которые разработали кроссплатформенные приложения для своих целей, но в итоге вернулись к нативному способу разработки, так как кроссплатформенное приложение не удовлетворяло их требованиям, с трудом масштабировалось и не оправдывало ожидания пользователей.
Кроссплатформенный метод подходят лишь для разработки пилотного продукта (макета или прототипа) или разработки несложных и стандартизированных решений. Решений, на которые нет смысла тратить значительные средства и ждать несколько месяцев разработки нативным способом – гораздо более эффективно будет заказать проект, разработанный кроссплатформенным способом.
1.4 Сравнительный анализ фреймворков для кроссплатформенной разработки
React Native, Flutter, Ionic, PhoneGap и Xamarin занимают большую часть кроссплатформенного рынка. Каждый инструмент имеет свои особенности, и делать выбор следует исходя из конкретной задачи.
Инструмент от Meta. Его цель – сделать кроссплатформенные приложения такими же производительными, как нативные.
Языки программирования: JavaScript.
Кто использует: React Native достаточно популярен, поскольку его уже применяют технологические гиганты. Среди них Meta, Walmart, Tesla, Pinterest, UberEats и другие.
IDE и написание кода: с момента запуска React Native прошло около 5 лет, поэтому его поддерживают почти все ведущие IDE. Изучать React Native и писать код на нём довольно просто благодаря использованию распространённого JavaScript.
Архитектура и исполнение кода: Главный принцип React Native – “Learn once, write anywhere”, что можно трактовать как «научись один раз, используй везде», который подразумевает применение одного и того же кода для разных платформ. Также в Native есть функция Hot Reloading, позволяющая добавлять новый код и вносить правки прямо во время выполнения – это очень полезно, когда вы настраиваете пользовательский интерфейс. Благодаря обширной поддержке сообщества также есть богатый выбор сторонних библиотек.
Производительность: так как React Native нацелен на результат, сопоставимый с нативной разработкой, в погоне за производительностью чаще всего отдают предпочтение именно этому фреймворку.
Flutter – продукт Google, уже завоевавшее хорошую репутацию в кроссплатформенной разработке. Его принцип – создание приложений с единой кодовой базой для мобильных платформ, веба и десктопа.
Кто использует: Flutter появился на рынке не так давно, но его популярность выросла за очень короткое время. Приложения на нём можно увидеть у Alibaba, Hamilton Musical, Greentea, Google Ads.
IDE и написание кода: Flutter поддерживается Android Studio, IntelliJ и Visual Studio Code.
Архитектура и исполнение кода: Flutter использует один и тот же код для всех платформ. На нём легко создавать красивые интерфейсы. Но если вам нужны разные стили для разныхOS, придётся немного поработать, поскольку автоматическая адаптация для этих целей не предусмотрена. Это связано с тем, что вместо нативных компонентов Flutter применяет свой графический движок. Однако он не отстаёт от React Native и также предлагает функцию Hot Reloading (добавление нового кода без повторной сборки) и большой набор готовых виджетов. Зато с Flutter можно выпускать приложения для разных версий Android и iOS: программы спокойно запускаются даже на таких старых версиях, как Android, Jelly Bean и iOS 8.
Производительность: при прочих равных можно сказать, что Flutter превосходит конкурентов и демонстрирует самую высокую производительность благодаря современному языку Dart и собственному движку рендеринга.
С Ionic можно создавать кроссплатформенные гибридные приложения. Он тесно взаимодействует с фреймворком Apache Cordova, который преобразовывает веб-приложения в мобильные программы.
Язык программирования: JavaScript, HTML, CSS.
Кто использует: MarketWatch, Pacifica, Sworkit, Nationwide.
IDE и написание кода: Ionic завоевал признание среди разработчиков мобильных приложений, потому что с ним просто работать. Фреймворк построен на ECMAScript 6 и TypeScript, поэтому его можно использовать в любой IDE, поддерживающей эти языки, например в Visual Studio Code, Atom или Angular IDE.
Архитектура и исполнение кода: Ionic, как и React Native и Flutter, предлагает концепцию единого кода для разных платформ, но на новом уровне. Все его компоненты автоматически адаптируются к платформе, на которой запускается приложение – а значит, разработка становится быстрее. Также с Ionic вы можете свободно использовать JavaScript, Angular, React или Vue.
Производительность: а вот здесь Ionic проигрывает и сильно отстаёт от React Native и Flutter, поскольку для визуализации приложений он использует веб-технологии и совсем не применяет нативные компоненты. Такой подход значительно снижает скорость. Но со стороны разработки есть и плюсы: Ionic позволяет проводить быстрое тестирование, которое можно запустить прямо в браузере.
Как и Ionic, PhoneGap позволяет использовать веб-технологии в мобильной разработке. Он является дистрибутивом Apache Cordova.
Язык программирования: JavaScript, HTML, CSS.
Кто использует: Logitech Squeezebox Controller, Localeur, Untappd, HealthTap.
IDE и написание кода: для более комфортной кроссплатформенной разработки и тестирования можно использовать Adobe Dreamweaver (версии 5.5 и выше), MyEclipse 2013, Tiggzi, ApplicationCraft. Разработка на JavaScript не должна вызывать затруднений, особенно если раньше вы уже писали на нём.
Архитектура и исполнение кода: приложение PhoneGap, по сути, представляет собой набор HTML-страниц, обёрнутых в нативную оболочку. Страницы хранятся в локальном каталоге или в облаке, а во время запуска на смартфоне они получают доступ к функциям устройства через плагины. Это делает приложения PhoneGap довольно лёгкими, но они выглядят менее естественно, а качество пользовательского интерфейса будет в большей степени зависеть от веб-представления конкретной OS.
Производительность: PhoneGap отличается невысокой производительностью по сравнению с нативными инструментами – и в этом снова виноваты веб-технологии.
Xamarin – платформа для создания мобильных приложений от Microsoft, которая также поддерживает разработку для Windows.
Кто использует: Olo, The World Bank, Storyo и другие.
IDE и написание кода: в качестве IDE можно использовать, например, Visual Studio 2019 или Rider. C# достаточно распространён, поэтому с написанием кода и освоением Xamarin проблем возникать не должно.
Архитектура и исполнение кода: у Xamarin есть два основных инструмента: Xamarin.Android/iOS и Xamarin.Forms. По части кроссплатформенной разработки Xamarin предлагает использовать единый API Xamarin.Essentials. Xamarin.Android и Xamarin.iOS наделяют приложение теми же возможностями и интерфейсом, которые есть у нативных решений. В случае Xamarin.iOS программа компилируется непосредственно в машинный код (AOT-компиляция), тогда как в Xamarin.Android сначала происходит компиляция в байт-код, который затем интерпретируется виртуальной машиной (JIT-компиляция).
Если же нужно ускорить процесс написания кода, лучше использовать Xamarin.Forms – более простой инструмент, в котором почти все элементы полностью совместимы с любыми платформами.
Производительность: производительность Xamarin также считается близкой к нативной, но зависит от того, используете вы Xamarin.Android, Xamarin.iOS или Xamarin.Forms. У Xamarin.Android/iOS хорошая оптимизация благодаря нативным компонентам. Xamarin.Forms же основан на 100% совместном использовании кода, что в целом снижает его производительность по сравнению с Xamarin.Android/iOS.
Каждый инструмент имеет свои особенности, и делать выбор следует исходя из конкретной задачи.
- Если вы знаете Dart и хотите получить высокую производительность, выбирайте Flutter.
- Используйте React Native, если вам важна поддержка зрелого сообщества, разработка на JavaScript и проверенное временем решение.
- Выбирайте Ionic, когда вам требуется ускорить цикл разработки и тестирования приложения за счёт полной кроссплатформенной адаптации.
- Для создания небольших и простых приложений с помощью веб-технологий применяйте PhoneGap.
- Xamarin подойдёт тем, кто хочет писать на C#, получить хорошую производительность.
1.5 Этапы разработки мобильных приложений
Любой проект важно начинать с детального планирования, изучения собственного рынка, аудитории и конкурентов. Чем качественнее будут исследования, тем меньше проблем и доработок будет в дальнейшем.
1.5.2 Составление технического задания
Задача этапа – подготовить технические требования к мобильному приложению, необходимые для разработчиков. Для этого разрабатываются спецификация и вайрфреймы приложения.
Cоставляется подробное описание функциональности и дизайна будущего приложения. Определяется персонажи пользователей, описываются User Story и формируются технические требования к сервису.
Такое техническое задание даёт чёткое понимание что требуется от каждого члена команды.
- Перечень функций, которые должны быть в приложении.
- Требования к интерфейсу, ролям пользователя, безопасности, производительности и другие нефункциональные требования.
- Описание того, как будут реализованы все эти требования.
Проектирование нужно не каждому приложению. Простое приложение не требует проведения работ по проектированию. Проектирования требуют приложения с уникальным, заведомо новым функционалом, интегрирующие в себе множество функций и систем, предполагающие неоднозначность возможных решений.
Далее разрабатывают UI-кит: кнопки, поля, формы. Повторное использование готовых элементов позволяет ускорить создание дизайна. Затем прорабатывают все экраны приложения, включая различные состояния: например, при наличии или отсутствии данных. Финальным этапом добавляется анимации интерфейса для взаимодействия с пользователями и «оживления» приложения.
Задача этапа – реализовать продукт. При этом важно учесть будущие потребности. Например, заложить архитектуру системы под дальнейшее масштабирование продукта или высокую загруженность.
Тестирование предполагает проверку качества системы специалистом, который не участвовал в непосредственной разработке приложения, что повышает вероятность обнаружения дефектов ещё в процессе разработки.
1.5.8 Публикация в магазинах приложений
Готовый проект загружается в магазин приложений AppStore и Google Play для соответствующих платформ.
Прежде чем приложение станет доступным для пользователей, оно проходит модерацию. Длительность проверки зависит от многих факторов: категории приложения, его истории, разработчика и загрузки команды модерации.
Разработка мобильного приложения не заканчивается на публикации в магазине приложений. Нужно следить за тем, чтобы все корректно работало: устранять баги, следить за отзывами и пожеланиями пользователей.
Вместе с тем нужно думать о развитии. По мере того, как пользователи будут скачивать и использовать ваше приложение, вы будете получать отзывы и на основе них дорабатывать приложение. Также через некоторое время наверняка захотите добавить новые функции.
2 Практическая часть
2.1 Обоснование выбора метода разработки прототипа
Выбор метода разработки на прямую зависит от цели проекта. Так как мне нужно было создать прототип приложения для представления проекта, я выбрал кроссплатформенный метод на фреймворке Xamarin.Forms из-за минимальных сроков разработки и знания C#.
2.2 Этапы создания приложения
При разработке прототипа многие этапы разработки упраздняются. Например, тестированию, дизайну не придаётся особое значение, не говоря уже о публикации в магазинах приложений, поддержке и развитии.
Есть несколько способов получить информацию о продукте:
- Запросить базу данных продуктов у торговой сети (Магнит, Пятёрочка)
- Найти информацию в открытых источниках (GoodsMatrix, Национальный каталог продуктов)
Я выбрал второй вариант так как доступ к базам данных компаний получить сложно, а в открытых источниках есть достаточно информации для реализации прототипа. Данные я буду парсить с сайта национальный-каталог.рф, посредствам HtmlAgilityPack – это анализатор HTML, написанный на C# для чтения и записи DOM.
После парсинга сайта заполняются поля с названием и составом продукта (Рисунок 1). Из состава продукта с помощью регулярного выражения [Ee]\d{3,4} получаем коды пищевых добавок. Затем из словаря с информацией о пищевых добавках создаются карточки с краткой информацией о пищевой добавке: код добавка, название, опасность и категория. При нажатии на карточку открывается подробная информация о пищевой добавке:
- Код добавки
- Название
- Другие названия
- Опасность
- Происхождение
- Категория
- Общая информация
- Основные параметры
- Влияние на организм
- Использование
- Законодательство
Заключение
В первой главе был произведён анализ методов разработки приложений и кроссплатформенных фреймворков, проанализированы функциональные требования к интерфейсу, по которым был создан прототип пользовательского интерфейса. С помощью, которого в дальнейшем производилась разработка минимальной версии мобильного приложения для Android с использованием фреймворка Xamarin.Forms. Проблема данной темы решена. Гипотеза не подтвердилась, так как приложение работает медленнее по сравнению с более сложными проектами (YouTube) использующими нативный подход.
Для того чтобы определить какой тип мобильного приложения подойдёт для разработки, можно руководствоваться таким правилом: если для работы приложения необходимо использовать мощности устройства, или для его работы очень важна скорость обработки информации (игры, социальные сети, геолокационные сервисы, сервисы обмена фотографиями и т. д.), то необходимо использовать нативный подход. Если скорость работы не так важна, то лучше разрабатывать кроссплатформенное приложение.
В рамках работы было создано мобильное приложение для Android. Для достижения данной цели были решены следующие задачи:
- Изучены современные средства разработки мобильных приложений.
- Определены требования к приложению.
- Спроектировано, реализовано и протестировано мобильное приложение.
Разработанное приложение имеет перспективы дальнейшего развития:
- Размещение в магазинах Google Play и App Store.
- Сотрудничество с торговыми сетями (Магнит, Пятёрочка, Монетка, Лента)
Источники
- Этапы разработки мобильных приложений – https://sibdev.pro/blog/articles/etapy-razrabotki-mobilnyh-prilozhenij
- Сравнение фреймворков для кроссплатформенной мобильной разработки: React Native, Flutter, Ionic, Xamarin, PhoneGap – https://tproger.ru/translations/cross-platform-frameworks-for-mobile-development
- Сравнение фреймворков для кроссплатформенной мобильной разработки: React Native, Flutter, Ionic, Xamarin – https://blog.sibirix.ru/crossplatform-frameworks
- Методы разработки мобильных приложений – https://issoft.by/blog/kakoj-metod-razrabotki-mobilnyx-prilozhenij-vam-podxodit
- Документация библиотеки HtmlAgilityPack – https://html-agility-pack.net/documentation
Приложение
