Чем кроссплатформенные приложения отличаются от нативных. И какую разработку выбрать

Разбираем плюсы и минусы двух моделей разработки на примере популярных сервисов.

🖐🏻 Это блог студии Heads and Hands

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

👉🏻 Вступайте, чтобы быть в курсе

👉🏻 Заглядывайте к нам в Telegram

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

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

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

Как устроены кроссплатформенные приложения

Разработчики кроссплатформенных приложений пишут один код сразу для iOS и Android. Для этого они используют программные платформы — кроссплатформенные фреймворки. Два самых популярных фреймворка — React Native и Flutter.

Кроме общей кодовой базы у кроссплатформенных приложений общий интерфейс. Это значит, что дизайнерам не нужно придерживаться двух разных гайдлайнов — Google Material Design System и Apple Human Interface Guidelines — а все элементы и компоненты интерфейсов будут выглядеть идентично на Android и iOS.

Например, кроссплатформенные приложения разработали eBay, Google Ads и AliExpress. А в России — сеть магазинов «Дикси» и аптека «Ригла». Разработчики написали единый код, протестировали, а затем опубликовали приложения в Google Play и App Store.

Плюс №1. Разработка кроссплатформенного приложения дешевле и быстрее

«Общая кодовая база и единый интерфейс сокращают сроки разработки и удешевляют проект. Кроссплатформенное приложение обойдется заказчику на 20-30% дешевле, чем нативное»

Аккаунт-менеджер Heads and Hands Анастасия Овсянникова.

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

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

Плюс №2. Кроссплатформенные приложения подходят для стартапов и корпоративных проектов

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

СТО Heads and Hands Антон Максимов.

Например, Ozon разработал на Flutter приложение для пунктов выдачи заказов. С его помощью сотрудники ПВЗ выдают посылки, ищут заказы по номеру или штрихкоду, перемещают товары на полках, принимают возвраты.

Ozon выбрал кроссплатформу, потому что Flutter производительный фреймворк, с открытым исходным кодом, его можно использовать сразу на двух платформах и при необходимости интегрировать нативные элементы. Разработчики выпустили MVP c минимальной функциональностью и протестировали гипотезы. Но проект быстро вырос из стартапа с документооборотом. Тогда Ozon, чтобы продолжить его развивать, перешел на нативную разработку.

Минус №1. Кроссплатформенные приложения сложно поддерживать

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

Например, сервис бронирования Airbnb в 2016 году перешел на кроссплатформенную разработку. Но привычные для нативной разработки функции было сложно реализовать в React Native. А решение проблемы могло занять несколько дней. Кроме того, компании было сложно интегрировать нативную и кроссплатформенную часть приложений и пришлось самостоятельно создавать большую часть инфраструктуры. В результате два года спустя команда вернулась на нативный код.

Минус №2. Кроссплатформенные приложения предлагают пользователям непривычный интерфейс

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

Например, у Android есть встроенная панель навигации, а в iOS нет стандартного навигационного меню. У Android есть кнопка «Назад», а iOS рекомендует использовать жестовое управление. У Android кнопки с острыми углами, а у iPhone — со скругленными. Пользователь привык, что все элементы интерфейса выглядят и работают одинаково.

Кроссплатформенный фреймворк эмулирует интерфейс и элементы iOS и Android. Но они не всегда работают корректно.

«C точки зрения стандартных элементов или стандартного поведения все работает также, как и в нативе. Но Flutter — программный продукт и в нем бывают баги. Поэтому поведение элементов в некоторых нюансах может отличаться от нативных».

Веб-разработчик Heads and Hands Александр Фоминов.

Например, приложение «Дикси» на iOS не поддерживает навигационные жесты. Пользователь не может использовать свайп, чтобы пролистывать карточки и убирать уведомления.

Минус №3. Приложение работает медленнее

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

Как устроены нативные приложения

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

Дизайнеры мобильных приложений используют гайдлайны Apple и Google. Это набор рекомендованных параметров, которые помогают делать интерфейсы в едином ключе. Руководства по оформлению экономят время дизайнеров — в гайдлайнах прописаны рекомендации по цветам, верстке и анимации. Приложения, соответствующие гайдлайнам, быстрее проходят модерацию в сторах. Стандартный интерфейс и навигация интуитивно понятны пользователю, который привык к определенной платформе.

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

Плюс №1. Приложения напрямую используют программное обеспечение смартфона

Нативные приложения напрямую используют программное обеспечение смартфона: камеру, геолокацию, микрофон, список контактов. Например, приложению Shazam нужен доступ к микрофону, чтобы распознавать музыку. А приложению «Сбербанк Онлайн» доступ к адресной книге, чтобы пользователь мог переводить деньги людям из списка контактов.

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

Плюс №2. Привычный и удобный интерфейс

Нативное приложение спроектировано под привычные паттерны пользователей. Например, у Android есть стандартное навигационное меню — Android Navigation Bar. У iOS его нет, поэтому нижняя часть приложения совпадает с кромкой смартфона.

У Android основная панель вкладок располагается в верхней части экрана, у iOS — в нижней. Android использует меню-гамбургер, iOS рекомендует дизайнерам использовать жестовое управление.

В iOS ключевые кнопки должны располагаться вверху страницы: действия ― в правом углу, а отмены ― в левом углу. В Android основная кнопка действия страницы отображается в правом нижнем углу либо плавает. Если есть другие важные действия, то их надо расположить в верхней части экрана.

Отличается шрифт и иконки. Например, у Android системный шрифт Roboto или Noto. У iOS — гротеск San Francisco или New York. У Android иконка должна быть квадратной с прямыми углами и без подложек. У Apple у иконок скругленные углы и непрозрачный фон.

Плюс №3. Можно интегрировать сложные технологии

Дополненную или виртуальную реальность на кроссплатформе можно реализовать только на базовом уровне. А на нативной доступна вся функциональность.

Плюс №4. Подходит для крупных и долгосрочных проектов

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

Минус №1. Дороже

Если приложение должно работать на двух ОС, то компании потребуется нанимать отдельные команды разработчиков: под iOS и под Android. Соответственно, стоимость проекта будет дороже, потому что понадобится разрабатывать две кодовые базы.

Минус №2. Дольше разрабатывать

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

Какую разработку выбрать

Быстро разработать MVP и протестировать гипотезу можно как нативе, так и на кроссплатформе. В приложение нужно интегрировать сложные технологии: например, дополненную реальность или AI, тогда подойдет только натив. Нужен прямой доступ к программному обеспечению смартфона — тоже натив. Если стоит цель оптимизировать бюджет, то возможна как кроссплатформа, так и натив.

Какой вид разработки выбрать зависит от бизнес-задачи. Мы в Heads and Hands создаем сервисы, которые решают задачи бизнеса и помогают компаниям конкурировать за внимание пользователей. Расскажите нам о своей задаче на сайте, мы проанализируем ваш проект и подскажем оптимальное решение.

Спасибо за внимание!

0
24 комментария
Написать комментарий...
Георгий Хромченко

"Например, приложение «Дикси» на iOS не поддерживает навигационные жесты. Пользователь не может использовать свайп, чтобы пролистывать карточки и убирать уведомления." - чет переборщили.

Я не знаю на чем вы сделали, но если React-Native, то там в react-navigation v6 нативные навигаторы проброшены (в 5 они еще эмулировались), все должно быть ok

Если это Flutter - то это тут конечно вопрос, я менее компенентен, но у меня там сложилось впечатление что дело в том что там нужно 2 кода навигации писать (не уверен).

Ответить
Развернуть ветку
К М

Я вот тоже думаю, что в 2022 году во флаттере не может НЕ быть свайпа. Если программисты дикси это не умеют, чем виноват флаттер?

Ответить
Развернуть ветку
Евгений Осипов

Да саму статью писал не прогер, выстрадал текст

Ответить
Развернуть ветку
Igor Popov

кроссплатформа говно, говорю как нативщик на опыте

Ответить
Развернуть ветку
Василий Петров

Спасибо за ваше аргументированное мнение. Многие бросят кроссплатформу и перейдут на натив благодаря вашему комментарию.

Ответить
Развернуть ветку
Igor Popov

для многих js после макдака достижение

Ответить
Развернуть ветку
Zoibana
Пользователю нужно ждать несколько минут, пока прогрузятся товарные карточки

Минут? Серьезно?
Уточните, пожалуйста, каким именно образом кроссплатформенность негативно влияет на сетевые запросы?

Ответить
Развернуть ветку
Dimitry

Есть ещё гибридный вариант, как к примеру делает запрещённая соцсеть: критовый для скорости работы компонент (лента постов) на нативе, развесистые экраны настройки - на React Native.

Ответить
Развернуть ветку
A.K.

У вас какую-то соцсеть запретили?

Ответить
Развернуть ветку
Dimitry

Да, давайте в статье про кроссплатформу разберём кто где живет 😞

Ответить
Развернуть ветку
A.K.

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

Ответить
Развернуть ветку
К М

Кто "мы" и кто "вы"?

Ответить
Развернуть ветку
A.K.

Димитрий писал в свое время, что он не из РФ, вот я и пытаюсь понять, где там что запрещают

Ответить
Развернуть ветку
Майя Литвина

С учетом сколько ко мне сейчас в кадровое агентство приходит заявок на ReactNative и Flutter, то все идет к кроссплатформенности)

Ответить
Развернуть ветку
Игорь Кравченко

Как тут много спорных аргументов...
Во-первых, не вся кроссплатформа одинаковая. Flutter сильно отличается от всех. Большинство минусов к нему относятся. Нет свайпа вниз - виджет правильный надо использовать) Со скоростью сейчас все хорошо, интеграция нативных вещей не проблема, зато на всех версиях ОС Flutter выглядит одинаково, о чем нельзя говорить про натив. Из кроссплатформы смотрите только Flutter, остальное так себе...
https://docs.google.com/presentation/d/1L0cD_1pKux-T6yNdmGRhJ1kqOk1W0iMBbX1vlKB0Fog/edit?usp=sharing

Ответить
Развернуть ветку
Alexander Malyshkov

Привет. А разрабатывать дизайн в Фигме и потом разрабатывать в Flutter уместно? Или там другая программа нужна?

Ответить
Развернуть ветку
Игорь Кравченко

уместно, все так и делают.
Есть всякие экспорты из figma для flutter, но по факту они не работают, так как responsive design он не сделает, стили твоего кода не учтет и верстает на stack+position :D

Ответить
Развернуть ветку
Alexander Malyshkov

Эм. Тоесть все так делают но оно не работает?

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

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

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

Мне нельзя ошибиться с выбором платформы и языка. Если ответ будет в сторону натива как идеальный вариант. Чёрт. Я возьму да и выучу минимум два языка программирования, пусть это займёт лет пять или больше. Но я не откажусь и от халявы, если действительно можно будет создать качественный продукт на ВСЕ желательно платформы, но минимум на андроид и микрософт, так как я сам ими пользуюсь и приложения я создаю в том числе для себя.

Примеры Simplenote и Success Wiz

Ответить
Развернуть ветку
Игорь Кравченко

Идеально - как много в этом слове)
бери flutter) - Смотри - я делаю альтернативный плеер для apple music (meows.app) - один из столпов apple, который они сделали отлично во многих местах, но в некоторых - это полная параша, причем он же на нативе написан. :D Качество на данный момент больше упирается в то, как ты сделаешь, чем в натив или flutter, особенно для простых приложений) на нативе иногда так пишут... уууу, как и на flutter иногда -уууу)
про figma - обычно дизайн делает один человек, а реализует в коде другой. Можно сделать выгрузку и оно даже будет работать, но так себе - тогда уж проще прототип во FlutterFlow делать - но его развивать нереально. Зачастую в figma делают статический дизайн и не всегда все ситуации. Качественное приложение отличается от некачественного при просмотре на разных девайсах, в неожиданных ситуациях, обработки ошибок, пустые экраны, верстка под 5s. :D
Через 5 лет flutter будет вообще супер, так как каждый год скорость его работы растет)

Ответить
Развернуть ветку
Alexander Malyshkov

А что за выгрузка? Вообще не понял. Допустим, у меня есть hifi прототип в Фигма. Так. Теперь надо добавить мышц к костям. Но как сделать так, чтобы прототип и готовый продукт были одинаковы? Или программисты просто срисовывают своим кодом дизайн и этот дизайн можно как-то через код в приложение собрать? Короче. Можно подробнее, как это работает? Я просто полный ноль в этом.

Ответить
Развернуть ветку
Игорь Кравченко

вообще просто пишут код руками :D
гугли:
- "figma to flutter"
- "figma developer mode flutter"

Ответить
Развернуть ветку
mr.biscuit.eater

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

Ответить
Развернуть ветку
Marat Salakhetdinov

классная разборка!

Ответить
Развернуть ветку
Bezhan Nazaralizoda

Мы вот хотим создать экосистему в одном приложении. В приложении будут такие направления как
Онлайн Банкинг
Покупка Авиабилетов
Оплата парковки
Бронь столиков и заказ еды доставкой
Заказ такси
Аренда велосипедов и авто
Что лучше натив или кроссплатформенность?

Ответить
Развернуть ветку
21 комментарий
Раскрывать всегда