Кроссплатформенная разработка мобильных приложений: технологии, плюсы, минусы, отличия от нативной
Сегодня существует множество устройств и операционных систем. Windows, macOS, Android, iOS, о которых вы слышали — только верхушка айсберга. Есть и более нишевые: различные дистрибутивы Linux, включая Ubuntu, Arch и даже отечественная «Заря».
Раньше под каждую систему приходилось писать отдельное приложение. Это было дорого, долго и неудобно.
Чтобы решить эту проблему, придумали кроссплатформенную разработку. О ней и поговорим в сегодняшней статье.
Вы узнаете:
- что из себя представляет кроссплатформенная разработка;
- в чём преимущества и недостатки кроссплатформенного подхода;
- какие в ней используются инструменты и чем они отличаются;
- как осознанно выбрать технологию под ваш проект.
Поехали!
Что такое кроссплатформенная разработка
Кроссплатформенная разработка — подход, при котором мы пишем код один раз, а потом компилируем его для нужного нам устройства и ОС (операционной системы).
В результате кроссплатформенное приложение запустится и в браузере, и на iOS и на Android.
Для этого разработчики используют универсальные инструменты и фреймворки. Самые популярные:
- React Native от Facebook;
- Flutter от Google;
- Ionic от Drifty.
У каждого инструмента — свой набор плюсов и минусов. Ниже в статье мы разберем, чем они друг от друга отличаются и как взвешенно выбрать подходящий под ваш проект. Но перед этим ответим на частый вопрос всех, кто выбирает технологию под разработку приложения для своего проекта:
В чём отличие кроссплатформенной разработки от нативной?
В отличие от кроссплатформенного подхода, предполагающего адаптацию кода под все платформы сразу, нативная разработка — значит, что мы пишем код под каждое устройство отдельно, на его «родном» языке.
| Платформа | «Родные» языки |
| Веб | JavaScript |
| iOS | Swift, Objective-C |
| Android | Kotlin, Java |
Так, приложение, написанное на Swift, не запустится на Android-устройстве, а приложение на Kotlin не запустится на айфоне.
Кажется, зачем писать под каждую платформу отдельно, когда можно проделать работу один раз и запустить приложение везде?
Дело в том, что у нативных приложений есть плюсы, которые делают их более подходящими для сложных, масштабных проектов — например, приложений для заказа такси.
Среди таких преимуществ:
- нативные приложения более производительные — анимации в них не дергаются, страницы открываются и наполняются контентом без долгой прогрузки;
- работают стабильнее — пользователь реже сталкивается с «крашами» и зависаниями интерфейса;
- они основаны на языках, которые разрабатывают создатели самих операционных систем — Google и Apple. Это значит, что вы не попадёте в ситуацию, когда разработчик решил прекратить поддержку фреймворка, оставив вас с устаревшим приложением, которое надо переписывать. Такая история случилась с популярным кроссплатформенным решением Xamarin, который закрыл проект в мае 2024;
- в них легче реализовать доступ к аппаратным функциям устройства.
Последний пункт особенно важен, если коренная функциональность проекта задействует микрофон, камеру, GPS, акселерометр или Lidar-сенсор.
Например, приложение Voice2Med Mobile, которое мы разработали, широко использует микрофон — без не не работала бы коренная функциональность проекта.
В приложении врачи надиктовывают результаты обследования, а система распознавания речи в реальном времени преобразует аудиопоток в текст. Это потребляет много аппаратных ресурсов.
Из общения с заказчиком мы знали наперед, что приложение будет запускаться только на Android-устройствах, причем иногда простейших моделях. Поэтому кроссплатформенность отступила на второй план перед производительностью и стабильностью — особенно важной в медицинской сфере, где недопустимы сбои, ошибки, «зависания», и низкая скорость работы.
В результате для проекта мы выбрали нативный подход и «родные» технологии для операционной системы Android: язык Kotlin и Android SDK. Подробнее о том, как проходила разработка, рассказали в кейсе.
А ниже — про преимущества и недостатки кроссплатформенного подхода.
Преимущества и недостатки кроссплатформенной разработки
Давайте разберемся, в чём силы и слабости кроссплатформы.
Преимущества
Вместо нескольких команд разработчиков под каждую платформу вам хватит одной. Это значит, что вы потратите на 40%+ меньше денег и времени на проект.
Вы сможете быстрее вывести приложение на рынок. Простой кроссплатформенный проект делается за 3 месяца для двух операционных систем, а нативный — примерно за 4–6 месяцев, если приложение нужно под две операционные системы и 2–3 месяца — если под одну.
Ваше приложение сразу доступно пользователям Android, iOS, Windows, macOS и Linux. Вы сможете охватить весь рынок смартфонов и настольных ПК, сделав одно приложение и частично адаптировав код под разные операционные системы.
Сколько бы не было версий — их просто поддерживать и обновлять. Работа ведется в единой кодовой базе. То есть любое изменение при релизе нового функционала выкатывается сразу на все платформы.
Недостатки
Как отмечали ранее, кроссплатформенные приложения уступают нативным в производительности. Они работают медленнее и потребляют больше ресурсов устройства — это критично для игр и сложных вычислений.
Доступ к специфическим функциям устройства ограничен. Могут возникнуть сложности с реализацией, если ваше приложение сильно завязано на работу с GPS, NFC или другими аппаратными функциями.
Сложнее создать «нативный» интерфейс. У каждой платформы есть своя дизайн-система (Material Design у Android и Human Interface Guidelines у iOS).
Она отрисовывается встроенным в ОС механизмами рендеринга, которые стандартизируются и автоматически обновляются с новыми версиями системы.
В большинстве кроссплатформенных фреймворков рендеринг осуществляется за счет собственного движка, в котором разработчики воспроизводят нативные компоненты руками.
У такого подхода несколько минусов:
- иногда разработчики фреймворка не совсем верно воссоздают компоненты. Возникают различия в цвете, размере теней или толщине границ. Конечно, всё это можно исправить в разработке, но такая лишняя работа съедает время вашей команды;
- дизайн компонентов не обновляется автоматически, когда выходит новая версия системы. Например, Android 12 перешел новый дизайн-язык — Material You, который очень сильно отличается от дизайна Android 11.
Из-за этого некоторые компоненты могут ощущаться чужеродными на смартфоне.
Хорошая новость в том, что этой проблемы нет на React Native и Flutter — эти фреймворки умеют работать с нативным движком.
Фреймворки для кроссплатформенной разработки
Существует множество фреймворков, но большая часть из них — нишевые или ещё не обзавелись достаточной поддержкой разработчиков. Ниже мы разобрали 4 самые популярные технологии.
React Native
React Native — фреймворк от Facebook, вышедший в 2015 году, одна из самых популярных платформ для разработки кроссплатформенных приложений.
Одно из главных преимуществ React Native в том, что код пишется на JavaScript и React — технологии, которой владеют почти все веб-разработчики. Тем самым упрощается подбор кадров — вы сможете быстро укомплектовать команду или, при надобности, найти замену ушедшему человеку.
Хотя код пишется на веб-языке, фреймворк задействует движок отрисовки, встроенный в ОС. Так обеспечивается полное соответствие нативному дизайну и высокая производительность.
React Native используется в популярных мобильных приложениях и подходит для проектов любого масштаба.
Известные приложения, написанные на React Native: Facebook, Skype, Instagram, Pinterest, Discord, SalesForce.
Преимущества:
- на рынке много хороших специалистов;
- основан на веб-технологиях — почти во всех командах есть опытные разработчики, которые быстро освоят фреймворк;
- если вы начали проект с веб-версии, можно реализовать приложения на тех же языках и тем самым упростить поддержку и развитие проекта;
- существует большая экосистема библиотек — инструментов, расширяющих базовый функционал фреймворка и упрощающих типовые задачи;
Недостатки:
- производительность уступает нативным приложениям — особенно заметно при работе со сложной анимацией или в ресурсоемких задачах;
- часть функций реализуются через npm-пакеты, которые могут иметь баги или перестать поддерживаться.
Подойдет когда:
Вам нужно быстро вывести на рынок MVP продукта. У вас в фокусе гибкость и стремительное итерирование.
Flutter
Flutter — фреймворк от Google. Он использует язык программирования Dart. Это объектно-ориентированный язык с быстрой компиляцией кода.
Ключевая особенность Flutter — его подход к рендерингу через собственный движок. Из-за этого производительность, почти наравне с нативной разработкой — даже самый сложный интерфейс, созданный на этом фреймворке, работает плавно и отзывчиво.
Известные приложения, написанные на Flutter: Google Pay, Google Earth, Wolt, Alibaba, eBay, BWM.
Преимущества:
- высокая производительность — почти наравне с нативными приложениями;
- богатый выбор виджетов, позволяющий быстро создавать красивые интерфейсы.
Недостатки:
- дороговизна из-за высокого оклада разработчиков;
- меньше специалистов на рынке по сравнению с React Native;
- увеличивает сложность вашего проекта за счет внедрения новой технологии;
- крутая кривая обучения для новых разработчиков.
Подойдет когда:
Вам нужно реализовать очень сложный дизайн и частоту обновления экрана выше 60 кадров в секунду, при этом нативную разработку рассматривать не готовы.
Ionic
Ionic под капотом использует Angular — популярный фреймворк для веб-разработки. В сущности, Ionic — набор инструментов для создания мобильных приложений на Angular.
Когда-то Angular был самой популярной веб-технологией, но в гонке фреймворков его обогнал React — более удобный инструмент от Facebook. Сегодня Angular занимает пятое место по популярности — его используют 17% веб-разработчиков .
У Angular и React похожие задачи, но разные подходы к их решению. Angular предлагает более жесткую структуру приложения, а React — больше свободы. В большом проекте неопытная команда может нелогично спроектировать архитектуру приложения. Это усложнит поддержку приложения и онбординг новых специалистов, которые будут теряться в дереве папок.
Известные приложения, написанные на Ionic: Sworkit, Untappd, MarketWatch, Shipt, Sanvello.
Преимущества:
- низкий порог входа для веб-разработчиков из-за использования HTML, CSS и JavaScript;
- можно использовать весь инструментарий Angular;
- больший размер приложения по сравнению из-за которого возникает долгая загрузка.
Недостатки:
Низкая производительность. Приложение на Ionic по сути — веб-сайт, запущенный внутри нативной оболочки. Оно работает заметно медленнее нативных аналогов, особенно на слабых устройствах.
Подойдет когда:
У вас в команде есть Angular-разработчики — они смогут сделать мобильное приложение почти без переобучения.
В таблице ниже — сравнение самых популярных фреймворков и ориентировочная стоимость разработки на каждом.
| Фреймворк | Плюсы | Минусы |
| React Native | — Большое количество специалистов на рынке и крупнейшее сообщество разработчиков — Обширная экосистема библиотек — Быстрый рендеринг нативных компонентов — Подходит как для MVP, так и для крупных проектов | Производительность ниже, чем при нативной разработке |
| Flutter | — Высокая производительность — Богатый выбор виджетов для создания UI | — Меньше специалистов на рынке по сравнению с React Native — Разработка обходится значительно дороже |
| Ionic | Жесткая структура проекта бережет от архитектурных ошибок | Использует непопулярный инструмент — Angular |
Как выбрать правильный инструмент кроссплатформенной разработки
Давайте подробно разберем, какие аспекты могут повлиять на выбор технологии.
Тип приложения
Тип приложения — его категория: приложения бывают для доставки продуктов, вызова такси, общения, учёта времени. От этого зависит выбор технологии. Для большей части проектов мы рекомендуем React Native — он обеспечивает баланс между скоростью, стоимостью и производительностью.
Для приложений с насыщенной графикой или сложными вычислениями лучше обратить внимание на Flutter или даже на нативную разработку — это гарантирует высокую производительность и плавность анимаций.
Ionic — достаточно узконаправленный. К ним стоит присмотрется, если у вас в команде уже есть специалисты, знакомые с этими технологиями или когда требуется плотная интеграция с экосистемой Microsoft.
Навыки команды разработчиков
Если вы планируете делать проект инхаус и в вашей команде уже имеется экспертиза — отталкиваетесь в выборе от неё. Экспертиза конвертируется в выбор технологии вот так:
- JavaScript/React → React Native
- Dart → Flutter
- TypeScript/Angular → Ionic
Также учитывайте ситуацию на рынке труда.
React Native — самый популярный фреймворк, поэтому найти разработчиков проще и дешевле. Это поможет вам быстро масштабировать проект.
Flutter набирает популярность, но опытных специалистов в РФ пока меньше, а их оклад — выше. Поэтому разработка обойдётся дороже.
Популярность и поддержка фреймворка
Если у технологии есть активное сообщество — это ускорит решение возникающих по ходу кодинга сложностей.
Например, если разработчик пишет код на React Native, столкнувшись с какой-то непонятной ему задачей, он сможет быстро найти помощь и её решить: изучит пример на GitHub или задаст вопрос на Stack Overflow. Для бизнеса это выливается в гладкий процесс разработки.
Требования к производительности
Оцените, насколько вам критична производительность. Тут играет роль специфика проекта.
Для большинства бизнес-задач вполне хватит React Native. Но если вы делаете приложение со сложными вычислениями или вам необходим интерфейс, который будет «летать» — выбирайте Flutter или нативную разработку. И чем сложнее проект, чем больше у вас планов по его масштабированию, тем скорее стоит присмотреться к нативной.
Например, когда мы выбирали стек для корпоративного мессенджера, мы остановились на Android SDK и Kotlin.
Вот почему мы выбрали нативную разработку:
- Мессенджер — основной инструмент для общения и обмена файлами для 1000+ сотрудников клиента. Было недопустимо, чтобы интерфейс «лагал» при загрузке и открытии тяжелых файлов.
- Нативный код обеспечивает максимальную безопасность — в нём меньше внешних зависимостей и меньше кода, написанного третьей стороной.
Затраты и лицензии
Есть две основные статьи расходов — лицензия и оклад разработчиков.
React Native и Flutter бесплатны и имеют открытый исходный код. Это значит, что вам не требуется покупать лицензию. Кроме того, при необходимости вы сможете модифицировать сам фреймворк под ваши нужды.
А вот Ionic требуют платной лицензии. Стоимость лицензии Ionic начинается от $4199 в месяц.
Также стоит оценить долгосрочные затраты на проект. Например, приложение на React Native обойдется дешевле, чем на Flutter из-за более низкого оклада разработчиков.
Коротко о главном
- Кроссплатформенная разработка — это подход, при котором мы пишем код один раз, а потом запускаем его на разных устройствах: смартфонах, планшетах, компьютерах. Для этого используют специальные инструменты: React Native, Flutter, Ionic.
- У кроссплатформенной разработки есть свои плюсы и минусы. Главное преимущество — скорость и низкая стоимость: вместо нескольких команд под разные платформы вам хватит одной. Но есть и недостатки: производительность ниже, чем у нативных приложений, а доступ к некоторым функциям устройства может быть ограничен.
- При выборе инструмента для разработки учитывайте тип вашего приложения, навыки команды и требования к производительности. Для большинства проектов подойдет React Native. Если нужна высокая производительность — присмотритесь к Flutter, а лучше — к нативной разработке, о которой мы подробно рассказали в ещё одной статье.
Нужна помощь с выбором технологии или оценка проекта? Пишите нам! Поможем выбрать оптимальное решение и составим для вас коммерческое предложение в течение двух рабочих дней.
