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

Кроссплатформенная разработка конкурирует с нативными решениями по популярности и в некоторых аспектах превосходит их. Этот подход обеспечивает высокую производительность без ущерба для гибкости и кастомизации проекта. Исследование JetBrains показывает, что к кроссплатформенной мобильной разработке прибегает половина разработчиков в своих проектах. В статье разберём подробно, каким проектам подойдёт кроссплатформенный подход, а каким лучше разрабатывать продукт на нативных технологиях.

Четыре способа создать мобильное приложение

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

№1. Конструктор или коробочный продукт. С помощью набора стандартных функций можно создать минимально рабочий прототип (MVP). Такой вариант разработки подойдёт для стартапов или тестирования продуктовых гипотез, но не будет гибким и его нельзя кастомизировать под потребности конкретной компании.

№2. PWA. Progressive Web App или прогрессивное веб-приложение повторяет функциональность мобильного приложения, но его ядром является веб-сайт. Для создания используют фреймворки React и Angular. PWA-приложение может стать выходом, если ваше приложение удалили из сторов. Такой опцией воспользовались некоторые наши клиенты-банки.

№3. Нативная разработка для Android и iOS. В этом случае нужно писать две кодовые базы для двух операционных систем. Для Android — на языке программирования Kotlin, для iOS — на Swift.

№4. Кроссплатформенная мобильная разработка — это создание приложения на единой кодовой базе сразу для двух операционных систем, с помощью готовых библиотек и компонентов. Для такой разработки используются универсальные фреймворки: Flutter, React Native, Apache Cordova, Ionic и другие.

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

Кроссплатформенную разработку ценят владельцы бизнеса, потому что за счёт создания единой кодовой базы сразу для iOS и Android можно сэкономить до 40% бюджета.

В каких случаях нужен кроссплатформенный подход

Разработка на кроссплатформе подойдёт для проектов, для которых важно:

• Высокое качество по приемлемой цене. В среднем, для создания нативного приложения требуется 8–9 специалистов, в то время как для реализации аналогичного проекта на Flutter достаточно 5–6 человек. Так проект сэкономит около 40% бюджета в сравнении с нативной разработкой.
• Прозрачное управление командой. Работать с одной кроссплатформенной командой разработки проще, чем переключаться между программистами для двух разных ОС. Менеджеру не нужно синхронизировать несколько команд и переживать, что часть информации может быть утеряна при дискоммуникации.
• Высокая производительность и продуманный UI. Кроссплатформенные приложения меньше нагружают систему, в отличие от нативных. Так, кроссплатформенная технология Flutter поддерживает частотность воспроизведения видео до 120 кадров в секунду, что устраняет торможение и потерю кадров.

Пример кроссплатформенного приложения для банка

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

За 9 месяцев мы разработали новое кроссплатформенное банковское приложение. Уложиться в сжатые сроки помогли автотесты Flutter, которые покрыли 65% кода. Пользователи оценили приложение за современный дизайн и удобную навигацию. Сейчас развитие проекта продолжается: в период санкций мы предложили быстрое решение, чтобы вернуть приложение в сторы: перевели проект в формат PWA — и тоже с помощью Flutter. На базе исходного кода приложения мы также реализовали приложение для Мособлбанка, входящего в группу компаний СМП Банка.

Пример кроссплатформенного приложения для видеостриминговой платформы

В приложении для The Hole, видеостриминговой платформы Medium Quality, было крайне важно добиться плавной анимации перехода между экранами и отзывчивый пользовательский интерфейс. Для создания фронтенда мы приняли решение использовать Flutter, а для бэкенда: Kotlin, Spring Boot и Kubernetes. 

Работа над первой версией приложения заняла 4 месяца, а результат оправдал выбор кросс-платформы. Flutter отлично справился с задачей создания видеоплеера — российского аналога YouTube, а кроссплатформенное приложение The Hole заняло первую строчку в категории «Развлечения» в App Store.

Пример кроссплатформенных приложений для аптечной сети

С помощью Flutter мы создали для крупнейшей сети аптек в России одно кроссплатформенное приложение вместо шести нативных, которое стало стать новым каналом продаж. Кроссплатформа Flutter оказалась наилучшим решением для этой задачи. Весь проект был реализован за пять месяцев, а переиспользование кода сэкономило около 40% от изначального бюджета, который был заложен на разработку шести приложений. 

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

Инструменты для кроссплатформенной разработки

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

Какую кроссплатформу выбрать

Чтобы определиться с кроссплатформенным фреймворком, ответьте на следующие вопросы:

• Какими функциями и возможностями должно обладать будущее приложение.
• Для каких устройств оно будет доступно — десктоп, смартфоны на iOS и Android.
• Какое приложение должно быть по объёму занимаемой памяти.

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

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

Разработка на Flutter позволяет:

• Запустить сразу три канала продаж: десктоп, мобильную и веб-версию продукта на единой кодовой базе.
• Создать любой дизайн в сжатые сроки с помощью набора кастомизируемых виджетов.
• Сделать плавные анимации и переходы между экранами за счёт мощного графического движка.
• Ускорить процесс кроссплатформенной разработки, благодаря Hot Reload — функции обновления приложения после внесения правок в код без его полной перезагрузки.

Мы в Surf более 13 лет создаём мобильные приложения для различных отраслей бизнеса. Flutter зарекомендовал себя как надёжный инструмент для реализации любой функциональности. С его помощью мы создаём мобильные интернет-магазины, решения для банков, и даже мультимедийные проекты, например, высоконагруженную видеостриминговую платформу.

React Native, чтобы получить нативную производительность

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

Apache Cordova, чтобы сделать веб-приложение с гибкой настройкой визуального стиля

Один из старейших кроссплатформенных фреймворков, созданный в 2009 году. По сути, это среда разработки с открытым исходным кодом, работающая на стандартных веб-технологиях. Мобильное приложение, созданное на Cordova, представляет собой несколько HTML-страниц в «оболочке» платформы и использует специальный виджет, который выполняет все действия. Так, приложение становится максимально похожим на нативное. Эта технология подойдёт, если вам в короткие сроки нужно создать прототип. Однако, если вашему приложению важна требуется хорошая производительность из-за обилия графики и анимаций, лучше присмотреться к более современной кроссплатформе, например, Flutter. Читайтесь больше о различиях Flutter и Apache Cordova для разработки мобильного приложения.

Xamarin для отличной интеграции в .NET экосистему

Кроссплатформенный фреймворк Xamarin разработан в 2011 году. Xamarin позволяет разрабатывать приложения для iOS, Android и Windows, используя C# и .NET Framework. Он предоставляет доступ к нативным API платформ, что позволяет создавать приложения с высокой производительностью. Xamarin.Forms, часть экосистемы Xamarin, позволяет разрабатывать пользовательский интерфейс, который может быть общим для всех платформ, что значительно ускоряет процесс разработки.

При этом, в отличие от Flutter, Xamarin не является бесплатным для коммерческого использования. Учитывая проработанную интеграцию с Visual Studio, активное сообщество и богатую библиотеку плагинов, Xamarin может быть оптимальной технологией для кроссплатформенной разработки для тех, кто уже работает в экосистеме Microsoft, или когда большая часть технологического стека написана на языках семейства .NET. Читайте подробнее о том, как выбрать Flutter или Xamarin для кроссплатформенной разработки.

Где узнать больше о кроссплатформенной разработке

Наши разработчики развивают кроссплатформенные технологии. В открытом репозитории на GitHub мы регулярно обновляем базы готовых решений для Flutter. Кроме того, мы публикуем технические кейсы и статьи на Хабре, записываем подкасты и ведём собственное YouTube-шоу. Мы создали первый банк в Европе на кроссплатформенном фреймворке и являемся сооснователями первого в России официального сообщества экспертов по разработке на Flutter.