{"id":13588,"url":"\/distributions\/13588\/click?bit=1&hash=c4e99935d6b377960319c62e0c7dc30b541ffc5c218860b8308fee5adbfdcd9f","title":"\u0418\u043d\u0444\u0435\u0441\u0442\u0441\u043e\u0432\u0435\u0442 \u2116134 \u2014 \u043a\u0443\u043f\u0438\u0442\u044c \u0434\u043e\u043b\u044e \u0432 \u0442\u043e\u0440\u0433\u043e\u0432\u043e\u043c \u0446\u0435\u043d\u0442\u0440\u0435","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"48b43026-aa57-59b3-94fc-8d140389b616","isPaidAndBannersEnabled":false}
Сервисы
Heads and Hands

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

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

🖐🏻 Это блог студии 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
18 комментариев
Написать комментарий...
Igor Popov

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

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

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

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

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

Ответить
Развернуть ветку
Георгий Хромченко

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответить
Развернуть ветку
Читать все 18 комментариев
null