Cross-Platform App: что это, сравнение Flutter, React Native и KMM

Что такое Cross-Platform App?

Cross-Platform App (кроссплатформенное приложение) — программное обеспечение, разработанное для работы на нескольких мобильных операционных системах из единой кодовой базы. В отличие от нативной разработки, где под iOS (Swift) и Android (Kotlin) ведутся два отдельных проекта, кроссплатформенная разработка объединяет бизнес-логику, пользовательский интерфейс и слой данных в одном проекте.

Концепция кроссплатформенной разработки появилась в 2009 году с PhoneGap (позже Apache Cordova), который упаковывал веб-приложение в нативный WebView. Современные фреймворки ушли далеко вперёд: Flutter компилируется в нативный ARM-код через Dart, React Native использует JavaScript-движок с нативным мостом, а Kotlin Multiplatform компилирует общий код в платформенно-специфичные бинарные файлы. К 2026 году более 40% новых мобильных приложений используют хотя бы одну кроссплатформенную технологию.

Ключевые показатели внедрения: выход на рынок на 30–50% быстрее, снижение стоимости на 30–40% по сравнению с двумя нативными командами, поддержка единого набора функций на обеих платформах. Однако кроссплатформенные приложения всё ещё сталкиваются с вызовами — платформенные особенности UI, доступ к аппаратным API и критичная к производительности функциональность вроде анимаций и игр.

Flutter: архитектура и производительность

Flutter — открытый UI-фреймворк Google на языке Dart с собственным движком рендеринга Skia (Impeller в версии 4.x). В отличие от фреймворков, использующих нативные компоненты платформы, Flutter самостоятельно отрисовывает каждый пиксель, что даёт полный контроль над интерфейсом. Такой подход устраняет различия между платформами, но увеличивает размер приложения на 5–15 МБ.

// Flutter — простой счётчик
import 'package:flutter/material.dart';

void main() { runApp(const CounterApp()); }

class CounterApp extends StatelessWidget {
  const CounterApp({super.key});

  Widget build(BuildContext context) {
    return const MaterialApp(home: CounterScreen());
  }
}

class CounterScreen extends StatefulWidget {
  /* ... */
}

class _CounterScreenState extends State<CounterScreen> {
  int _count = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Кроссплатформенный счётчик')),
      body: Center(
        child: Column(
          children: [
            const Text('Вы нажали кнопку столько раз:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

В основе Flutter лежит виджет-архитектура: всё — от отступов и выравнивания до ограничений макета — является виджетом. Эта декларативная модель, унаследованная от React, делает UI предсказуемым. Благодаря AOT-компиляции Dart приложения Flutter запускаются менее чем за 2 секунды и поддерживают 60 FPS даже на устройствах среднего сегмента. Impeller — новый движок рендеринга — избавился от джиттера при компиляции шейдеров, что было главной проблемой Skia.

React Native: JavaScript-мост и экосистема

React Native — кроссплатформенный фреймворк Meta для создания мобильных приложений на JavaScript/TypeScript и React. В отличие от Flutter, React Native использует нативные UI-компоненты платформы (UIView на iOS, View на Android) через JavaScript-мост. Бизнес-логика выполняется в JavaScript-движке (Hermes или JSC), асинхронно взаимодействуя с нативными модулями.

// React Native — компонент с платформенным кодом
import React, { useState } from 'react';
import {
  View, Text, TouchableOpacity, Platform
} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  const greeting = Platform.select({
    ios: 'Привет с iOS',
    android: 'Привет с Android',
    default: 'Привет',
  });

  return (
    <View>
      <Text>{greeting}</Text>
      <Text>{count}</Text>
      <TouchableOpacity
        onPress={() => setCount(c => c + 1)}>
        <Text>+1</Text>
      </TouchableOpacity>
    </View>
  );
};

Крупнейшее преимущество React Native — экосистема. npm насчитывает более 2 миллионов пакетов, а библиотеки React Navigation, Expo и Reanimated предоставляют готовые решения для навигации, жестов и анимаций. Expo — управляемый рабочий процесс — упрощает сборку и публикацию с OTA-обновлениями и 50+ встроенными нативными модулями. На React Native работают Instagram, Shopify и Discord с суммарной аудиторией более 500 млн пользователей в месяц.

Kotlin Multiplatform: общая логика с нативным UI

Kotlin Multiplatform (KMP) — технология JetBrains, которая компилирует общий Kotlin-код в платформенно-специфичные бинарные файлы. В отличие от Flutter и React Native, KMP не предоставляет UI-фреймворка — его задача переиспользовать бизнес-логику, слой данных, сетевые запросы и валидацию, оставляя интерфейс полностью нативным. Netflix, McDonald's и VMware используют KMP в продакшене.

// Kotlin Multiplatform — общий репозиторий в commonMain
class UserRepository(
    private val api: KtorClient,
    private val db: Database
) {
    suspend fun getUsers(): Result<List<User>> {
        return try {
            val users = api.fetch<List<UserDto>>("/users")
            db.save(users.map { it.toDomain() })
            Result.success(db.getAll())
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
}

// expect/actual — форматирование даты под платформу
expect fun formatDate(timestamp: Long): String

Ключевой паттерн KMP — механизм expect/actual. В общем модуле (commonMain) объявляется expect-функция или класс, а в каждом платформенном наборе исходников (androidMain, iosMain) предоставляется actual-реализация. Это позволяет использовать платформенные API — SharedPreferences, NSUserDefaults, камеру, биометрию — сохраняя единый публичный интерфейс в общем коде. Compose Multiplatform — UI-слой для KMP — достиг стабильности для Android и Desktop в 2025 году, версия для iOS остаётся в бета-тестировании.

Сравнение кроссплатформенных фреймворков

Производительность существенно различается в зависимости от сценария. Собственный рендеринг Flutter обеспечивает стабильные 60 FPS для анимаций и переходов. Мостовая архитектура React Native добавляет 2–5 мс задержки на каждый нативный вызов, хотя новый слой JSI (JavaScript Interface) снижает это отставание. KMP имеет нулевые накладные расходы на shared-код, поскольку компилируется напрямую в платформенные бинарные файлы. Для UI-нагруженных приложений со сложной анимацией выбор стоит между Flutter и нативной разработкой.

Как выбрать подходящий фреймворк

Выбор между Flutter, React Native и KMP определяется приоритетами проекта. Если нужен пиксель-перфект UI и полный контроль анимации — Flutter обеспечивает наиболее консистентный кроссплатформенный опыт. Если команда владеет JavaScript/React и ценит крупнейшую экосистему сторонних библиотек — React Native становится прагматичным выбором. Если уже существуют нативные приложения и требуется разделить бизнес-логику — KMP позволяет внедрять общий код модуль за модулем без компромиссов в UI.

Для MVP и стартапов Flutter или React Native дают кратчайший путь к рынку с 80–100% общего кода. Для корпоративных приложений с существующей нативной базой KMP позволяет постепенно мигрировать модули. Игры и медиа-приложения с кастомным рендерингом выигрывают от Flutter или полностью нативного подхода. Каждый из фреймворков доказал свою зрелость — Instagram (React Native), Google Pay (Flutter) и Netflix (KMP) работают на кроссплатформенных технологиях.

Тренды: Flutter расширяется на десктоп и веб с единой кодовой базой. React Native с новой архитектурой (Fabric + TurboModules) полностью устраняет мост. KMP с Compose Multiplatform стремится к единому UI-слою при сохранении нативной производительности. К 2027 году граница между кроссплатформенной и нативной разработкой будет размыта окончательно — фреймворки переходят на платформенные пути компиляции.