Кроссплатформна розробка в мобільних додатках: що це, які фреймворки та як працює

Кроссплатформна розробка: Flutter Platform Channel та Method Channel

Flutter — фреймворк Google для створення нативних додатків з єдиної кодової бази на Dart. Для взаємодії з платформенним кодом (Kotlin, Swift) Flutter використовує Platform Channel. Це міст, через який Dart-код викликає нативні функції та отримує результат. Кроссплатформна розробка мобільних додатків на Flutter — найбільш швидкозростаючий сегмент мобільної розробки в 2025–2026 роках.

Platform Channel (Method Channel)

Method Channel — основний канал зв'язку Flutter <-> Native. На Dart-стороні: MethodChannel('com.example/channel').invokeMethod('getBatteryLevel'). Повідомлення кодується в StandardMethodCodec (binary). На нативній стороні реєструється MethodChannel і обробляє виклик. MethodChannel асинхронний — результат повертається через Future. Альтернатива: EventChannel для потоку подій (stream).

BasicMessageChannel — більш низькорівневий канал для передачі рядків/байтів без структури "метод-аргументи". Використовується для кастомних протоколів. Все Platform Channel API проходить через Flutter Engine, який серіалізує/десеріалізує повідомлення.

FFI, Skia та Impeller

dart:ffi (Foreign Function Interface) — прямий виклик C-функцій з Dart без платформенних каналів. FFI швидший за Method Channel (0 накладних витрат на серіалізацію). Використовується для продуктивних операцій: обробка звуку, криптографія, графічні двигуни. Skia — рендер-двигун Flutter (2D графіка). Impeller — новий рендер-двигун Flutter, який замінює Skia. Impeller компілює шейдери заздалегідь (Ahead-of-Time), що усуває jank (зависання кадрів) на перших запусках. В IT Sectr ми перейшли на Impeller у 2025 — різниця в плавності анімацій помітна одразу.

Кроссплатформна розробка на React Native: Bridge, Fabric, Hermes, JSI

React Native — фреймворк Meta для кроссплатформної розробки мобільних додатків на JavaScript/TypeScript. React Native рендерить компоненти в нативні UI-елементи. Архітектура пройшла еволюцію: старий Bridge → новий Fabric з JSI.

Fabric vs Bridge

Bridge — стара архітектура React Native. JS-потік серіалізує повідомлення в JSON і відправляє через асинхронну чергу в нативний потік. Це створює затримки (bridge round-trip ~1 мс). Fabric — нова архітектура, де JS- та нативний UI-потоки спілкуються синхронно через JSI (JavaScript Interface). Fabric впроваджує нативні представлення безпосередньо, без мосту. Fabric — ключовий етап кроссплатформної розробки, що прискорює рендеринг до 2x.

JSI (JavaScript Interface) — C++ API, який дозволяє JavaScript безпосередньо викликати нативні функції та розділяти пам'ять. JSI замінив JSON-серіалізацію Bridge. Нова архітектура на JSI — найважливіше досягнення кроссплатформної розробки, що визначає продуктивність мобільних додатків. Turbo Module — новий спосіб написання нативних модулів для React Native. На відміну від старих Native Modules, Turbo Module завантажується ліниво та використовує JSI.

Hermes та Codegen

Hermes — JavaScript-двигун від Meta, оптимізований для React Native. Hermes компілює JS-код у байткод на етапі збірки, що прискорює запуск мобільних додатків та знижує споживання пам'яті при кроссплатформній розробці. Codegen — генератор нативного коду за типами TypeScript. Codegen автоматично створює нативні модулі та JSI-зв'язки, зменшуючи ручну роботу.

Flutter малює все сам через Skia/Impeller — це дає єдиний UI на обох платформах. React Native використовує нативні UI-компоненти — це виглядає як нативний додаток. KMP не займається UI — він розділяє тільки бізнес-логіку, UI залишається нативним. Вибір залежить від пріоритету: єдиний UI (Flutter) або максимальна нативність (React Native/KMP).

Кроссплатформна розробка на Kotlin Multiplatform: expect/actual, Kotlin/Native

Kotlin Multiplatform (KMP) — технологія JetBrains для shared-коду між Android та iOS. На відміну від Flutter та React Native, KMP — альтернативний підхід до кроссплатформної розробки: він не замінює UI, а розділяє бізнес-логіку, мережеві запити, моделі даних та репозиторії. UI залишається нативним: Jetpack Compose для Android, SwiftUI для iOS.

expect/actual

expect — оголошення функції або класу в загальному модулі (commonMain), який має платформену реалізацію. Кроссплатформна розробка на KMP використовує expect/actual: actual — конкретна реалізація для кожної платформи (androidMain, iosMain). Приклад: expect fun getDeviceId(): String — на Android actual використовує Settings.Secure, на iOS — UIDevice.current.identifierForVendor.

Kotlin/Native

Kotlin/Native — компілятор Kotlin у нативний бінарник (iOS framework). Він дозволяє запускати Kotlin-код на iOS без JVM. Kotlin/Native використовує LLVM для компіляції, що дає продуктивність, близьку до Swift. Kotlin/JS — компіляція Kotlin в JavaScript для веб- та React Native-проектів.

Інструменти збірки: Gradle KTS, CocoaPods Plugin, XCFramework

Інструменти збірки кроссплатформної розробки мобільних додатків — міст між кодом та кінцевим бінарником. Gradle KTS керує Android-частиною, CocoaPods Plugin — iOS-залежностями KMP, XCFramework — розповсюдженням нативних бібліотек.

Gradle KTS

Gradle KTS — конфігурація Gradle на Kotlin DSL замість Groovy. KTS підтримує автодоповнення в Android Studio, перевірку типів та безпеку рефакторингу. Приклад: plugins { id("com.android.application") } замість apply plugin: 'com.android.application'. Рекомендується для всіх нових проектів.

CocoaPods Plugin та XCFramework

CocoaPods Plugin — Gradle-плагін для KMP, який публікує shared-модуль як CocoaPods pod. iOS-розробник підключає його через Podfile. XCFramework — формат розповсюдження бінарних бібліотек Apple. XCFramework містить бінарники для декількох архітектур (arm64, x86_64) та платформ (iOS, macOS, watchOS). В KMP shared-модуль експортується як XCFramework для iOS.