Cross-Platform App: що це, порівняння Flutter, React Native та KMP

Що таке 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 року межа між кроссплатформною та нативною розробкою буде розмита остаточно — фреймворки переходять на платформні шляхи компіляції.