Чем кроссплатформенные приложения отличаются от нативных. И какую разработку выбрать
Разбираем плюсы и минусы двух моделей разработки на примере популярных сервисов.
Кроссплатформенные приложения дешевле, работают сразу на двух платформах, а дизайн и разработка занимают меньше времени.
Нативные приложения дороже, зато обеспечивают лучший пользовательский опыт и подходят для крупных и долгосрочных проектов.
В статье разберем две модели разработки и расскажем, какую из них выбрать, чтобы приложение решало бизнес-задачи и нравилось пользователям.
Как устроены кроссплатформенные приложения
Разработчики кроссплатформенных приложений пишут один код сразу для iOS и Android. Для этого они используют программные платформы — кроссплатформенные фреймворки. Два самых популярных фреймворка — React Native и Flutter.
Кроме общей кодовой базы у кроссплатформенных приложений общий интерфейс. Это значит, что дизайнерам не нужно придерживаться двух разных гайдлайнов — Google Material Design System и Apple Human Interface Guidelines — а все элементы и компоненты интерфейсов будут выглядеть идентично на Android и iOS.
Например, кроссплатформенные приложения разработали eBay, Google Ads и AliExpress. А в России — сеть магазинов «Дикси» и аптека «Ригла». Разработчики написали единый код, протестировали, а затем опубликовали приложения в Google Play и App Store.
Плюс №1. Разработка кроссплатформенного приложения дешевле и быстрее
Например, у клиента своя служба доставки. Компания хочет оптимизировать и оцифровать работу курьеров: чтобы они отмечали смены, принимали и собирали заказы в приложении. Сотрудники пользуются смартфонами как на iOS, так и на Android, а разрабатывать приложение для двух платформ исключительно для внутреннего пользования — дорого.
Кроссплатформенный подход решит эти задачи. Компании не нужно нанимать две отдельные команды дизайнеров и разработчиков под каждую платформу, чтобы отрисовать интерфейсы и спроектировать приложения. Поддержка приложения минимальна — его не надо будет дорабатывать и добавлять сложную функциональность.
Плюс №2. Кроссплатформенные приложения подходят для стартапов и корпоративных проектов
Например, 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. Но они не всегда работают корректно.
Например, приложение «Дикси» на 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 создаем сервисы, которые решают задачи бизнеса и помогают компаниям конкурировать за внимание пользователей. Расскажите нам о своей задаче на сайте, мы проанализируем ваш проект и подскажем оптимальное решение.
Спасибо за внимание!
"Например, приложение «Дикси» на iOS не поддерживает навигационные жесты. Пользователь не может использовать свайп, чтобы пролистывать карточки и убирать уведомления." - чет переборщили.
Я не знаю на чем вы сделали, но если React-Native, то там в react-navigation v6 нативные навигаторы проброшены (в 5 они еще эмулировались), все должно быть ok
Если это Flutter - то это тут конечно вопрос, я менее компенентен, но у меня там сложилось впечатление что дело в том что там нужно 2 кода навигации писать (не уверен).
Я вот тоже думаю, что в 2022 году во флаттере не может НЕ быть свайпа. Если программисты дикси это не умеют, чем виноват флаттер?
Да саму статью писал не прогер, выстрадал текст
кроссплатформа говно, говорю как нативщик на опыте
Спасибо за ваше аргументированное мнение. Многие бросят кроссплатформу и перейдут на натив благодаря вашему комментарию.
для многих js после макдака достижение
Минут? Серьезно?
Уточните, пожалуйста, каким именно образом кроссплатформенность негативно влияет на сетевые запросы?
Есть ещё гибридный вариант, как к примеру делает запрещённая соцсеть: критовый для скорости работы компонент (лента постов) на нативе, развесистые экраны настройки - на React Native.
У вас какую-то соцсеть запретили?
Да, давайте в статье про кроссплатформу разберём кто где живет 😞
Писать свои комментарии в виде ребусов - неуважение к собеседникам. Как и демагогия, к слову, коей являются неумелые попытки перевести стрелки с конкретного уточняющего вопроса на оффтоп
Кто "мы" и кто "вы"?
Димитрий писал в свое время, что он не из РФ, вот я и пытаюсь понять, где там что запрещают
С учетом сколько ко мне сейчас в кадровое агентство приходит заявок на ReactNative и Flutter, то все идет к кроссплатформенности)
Как тут много спорных аргументов...
Во-первых, не вся кроссплатформа одинаковая. Flutter сильно отличается от всех. Большинство минусов к нему относятся. Нет свайпа вниз - виджет правильный надо использовать) Со скоростью сейчас все хорошо, интеграция нативных вещей не проблема, зато на всех версиях ОС Flutter выглядит одинаково, о чем нельзя говорить про натив. Из кроссплатформы смотрите только Flutter, остальное так себе...
https://docs.google.com/presentation/d/1L0cD_1pKux-T6yNdmGRhJ1kqOk1W0iMBbX1vlKB0Fog/edit?usp=sharing
Привет. А разрабатывать дизайн в Фигме и потом разрабатывать в Flutter уместно? Или там другая программа нужна?
уместно, все так и делают.
Есть всякие экспорты из figma для flutter, но по факту они не работают, так как responsive design он не сделает, стили твоего кода не учтет и верстает на stack+position :D
Эм. Тоесть все так делают но оно не работает?
Если конкретно, я разрабодчик любитель. Хочу разработать приложения для себя (ну и может кому-то они тоже пригодяться). Дизайн в принципе готов, прототип. Теперь хочу научиться программировать. Только вот не знаю какую платформу выбрать.
Приложения простые будут. Скажу честно, в одном из них, будет присловутый туду лист. Но однако, это не единственная фича, да и сам туду лист с уникальным дизайном. Короче, так как лично мне нужно, потому что не нашёл ничего для себя подходящего, а перепробовал я всё возможное.
Мне пливать на то, сколько времени займёт моя инди разработка с нуля. Мне важен конечный результат. К тому же, я планирую зарабатывать на этих приложухах только через донаты, потому что у меня у самого небыло в подростковом периоде возможности покупать себе что-либо в интернете, так как родители давали деньги только наличкой и не разрешали банковские карты иметь. Так что, для меня важно общедоступность. Эти приложения я хочу создать от чистого сердца и именно по этому повторюсь мне очень важно качество и пливать на время и усилия, которые потребуются.
Мне нельзя ошибиться с выбором платформы и языка. Если ответ будет в сторону натива как идеальный вариант. Чёрт. Я возьму да и выучу минимум два языка программирования, пусть это займёт лет пять или больше. Но я не откажусь и от халявы, если действительно можно будет создать качественный продукт на ВСЕ желательно платформы, но минимум на андроид и микрософт, так как я сам ими пользуюсь и приложения я создаю в том числе для себя.
Примеры Simplenote и Success Wiz
Идеально - как много в этом слове)
бери flutter) - Смотри - я делаю альтернативный плеер для apple music (meows.app) - один из столпов apple, который они сделали отлично во многих местах, но в некоторых - это полная параша, причем он же на нативе написан. :D Качество на данный момент больше упирается в то, как ты сделаешь, чем в натив или flutter, особенно для простых приложений) на нативе иногда так пишут... уууу, как и на flutter иногда -уууу)
про figma - обычно дизайн делает один человек, а реализует в коде другой. Можно сделать выгрузку и оно даже будет работать, но так себе - тогда уж проще прототип во FlutterFlow делать - но его развивать нереально. Зачастую в figma делают статический дизайн и не всегда все ситуации. Качественное приложение отличается от некачественного при просмотре на разных девайсах, в неожиданных ситуациях, обработки ошибок, пустые экраны, верстка под 5s. :D
Через 5 лет flutter будет вообще супер, так как каждый год скорость его работы растет)
А что за выгрузка? Вообще не понял. Допустим, у меня есть hifi прототип в Фигма. Так. Теперь надо добавить мышц к костям. Но как сделать так, чтобы прототип и готовый продукт были одинаковы? Или программисты просто срисовывают своим кодом дизайн и этот дизайн можно как-то через код в приложение собрать? Короче. Можно подробнее, как это работает? Я просто полный ноль в этом.
вообще просто пишут код руками :D
гугли:
- "figma to flutter"
- "figma developer mode flutter"
Честно говоря, большенство минусов притянуты, я бы сказал из прошлого, уже давно библиотеки кроссов хорошо адаптивны и на сегодня не уступают нативу. Как и по скорости.
Вырваны единичные проблемные случаи, так к примеру в инсте свайп работает корректно
классная разборка!
Мы вот хотим создать экосистему в одном приложении. В приложении будут такие направления как
Онлайн Банкинг
Покупка Авиабилетов
Оплата парковки
Бронь столиков и заказ еды доставкой
Заказ такси
Аренда велосипедов и авто
Что лучше натив или кроссплатформенность?