Кроссплатформенная разработка приложений

Подробно

Кроссплатформенная разработка - это создание приложения, которое из одной кодовой базы работает на iOS и Android. Мы пишем такие приложения на Flutter, React Native и Kotlin Multiplatform, проектируем дизайн, собираем серверную часть и публикуем результат в сторах. Для заказчика это одна команда, один список задач и синхронный выход новых функций на двух платформах.

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

Мультиплатформенная разработка: React Native, Flutter и Kotlin Multiplatform

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

• Flutter. Код пишут на языке Dart, интерфейс рисует собственный движок фреймворка. Внешний вид совпадает на Android и iOS, анимации плавные, единая кодовая база покрывает почти все приложение.
• React Native. Код на JavaScript или TypeScript, а на экран выводятся нативные компоненты каждой платформы. Удобно, если у компании есть веб-команда на React: часть логики и подходов переиспользуется.
• Kotlin Multiplatform. Общей делают бизнес-логику, работу с сетью и данными, а интерфейс можно оставить нативным: SwiftUI на iOS, Jetpack Compose на Android. С Compose Multiplatform общим становится и интерфейс. Подходит, когда уже есть Android-приложение на Kotlin и нужно выйти на вторую платформу.

Выбор между React Native, Flutter и Kotlin Multiplatform делаем по трем вопросам: какие функции устройства нужны, какой опыт у команды заказчика, если она будет развивать продукт сама, и насколько важно, чтобы приложение выглядело привычно для пользователей каждой платформы. Для iOS Kotlin Multiplatform собирает общий модуль в фреймворк, который подключается к проекту в Xcode, поэтому iOS-разработчик работает в привычной среде.

Что значит кроссплатформенная разработка?

Кроссплатформенная разработка значит, что один и тот же код запускается на разных платформах. Отличие от нативной разработки в том, что нативное приложение пишут отдельно под каждую систему: на Swift для iOS и на Kotlin для Android, с двумя кодовыми базами и часто с двумя командами. Кроссплатформенное приложение делает одна команда, а различия платформ прячутся внутри фреймворка.

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

Разработка мультиплатформенного приложения в студии

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

Первое касается дизайна. Рисуем одну дизайн-систему, но отмечаем, где платформы требуют разного поведения: жест назад на Android, системные диалоги, запрос разрешений. Второе - тестирование. Общий код не отменяет проверку на разных устройствах, поэтому сборки гоняем на iPhone и Android-смартфонах разных производителей и размеров. Третье - публикация: одна версия выходит в App Store и RuStore одновременно, но модерация и требования к описанию у сторов разные.

По деньгам и срокам показателен пример e-commerce на двух платформах: натив стоит 6-8 млн руб. и занимает 6-8 месяцев, Flutter - 3,5-5 млн руб. и 4-5 месяцев.

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

Как сделать мультиплатформенное приложение?

Создание мобильного приложения на общем коде у нас проходит так:

1. Вы описываете задачу: кто пользователи, какие функции нужны в первой версии, какие системы уже есть в компании.
2. Мы проводим анализ и составляем список функций устройства: камера, геолокация, платежи, Bluetooth, фоновая работа. По этому списку выбираем фреймворк.
3. Собираем прототип и дизайн, согласуем их с вами.
4. Пишем общий код, нативные компоненты и модули подключаем там, где без них не обойтись.
5. Тестируем на разных устройствах и публикуем в сторах.
6. Поддерживаем: обновляем фреймворк и зависимости, добавляем функции сразу на обе платформы.

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

Разработка гибридных приложений

Гибридными называют приложения, в которых интерфейс сделан на веб-технологиях и показывается внутри нативной оболочки через WebView (встроенный браузер). Так работают Ionic и Cordova. На старте подход дешевый, особенно если у компании уже есть сайт, но у него есть предел: анимации и прокрутка медленнее, доступ к функциям устройства идет через плагины, а внешний вид выдает сайт.

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