Cross-Platform App: шта је то, поређење Flutter, React Native и KMP

Шта је Cross-Platform App?

Cross-Platform App (вишeплатформска апликација) — софтвер дизајниран да ради на више мобилних оперативних система из јединствене кодне базе. За разлику од изворног развоја где се за iOS (Swift) и Android (Kotlin) воде два одвојена пројекта, вишeплатформски развој обједињује пословну логику, кориснички интерфејс и слој података у једном пројекту.

Концепт вишeплатформског развоја појавио се 2009. године са PhoneGap (касније Apache Cordova), који је паковао веб апликацију у изворни WebView. Модерни фрејмворци су отишли далеко напред: Flutter компајлира у изворни ARM кôд кроз Dart, React Native користи JavaScript погон са изворним мостом, а Kotlin Multiplatform компајлира заједнички кôд у бинарне датотеке специфичне за платформу. До 2026. године, преко 40% нових мобилних апликација користи бар једну вишeплатформску технологију.

Кључни показатељи имплементације: излазак на тржиште 30–50% бржи, смањење трошкова за 30–40% у поређењу са два изворна тима, подршка за јединствени скуп функција на обе платформе. Међутим, вишeплатформске апликације се још увек суочавају са изазовима — платформске карактеристике UI, приступ хардверским API-јима и функционалности критичне за перформансе попут анимација и игара.

Flutter: архитектура и перформансе

Flutter — отворени UI фрејмворк компаније Google у језику Dart са сопственим погоном за рендеровање Skia (Impeller у верзији 4.x). За разлику од фрејмворка који користе изворне компоненте платформе, Flutter самостално рендерује сваки пиксел, што даје потпуну контролу над интерфејсом. Овај приступ елиминише разлике између платформи, али повећава величину апликације за 5–15 MB.

// 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('Вишeплатформски бројач')),
      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 — вишeплатформски фрејмворк компаније 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 пружају готовa решења за навигацију, гестове и анимације. Expo — управљани радни ток — поједностављује изградњу и објављивање са OTA ажурирањима и преко 50 уграђених изворних модула. Instagram, Shopify и Discord са укупном публиком од преко 500 милиона корисника месечно раде на React Native-у.

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 остаје у бета тестирању.

Поређење вишeплатформских фрејмворка

Перформансе се значајно разликују у зависности од сценарија. Сопствено рендеровање Flutter-а обезбеђује стабилних 60 FPS за анимације и прелазе. Мост архитектура React Native-а додаје 2–5 ms кашњења на сваки изворни позив, иако нови JSI (JavaScript Interface) слој смањује ово заостајање. KMP има нулто додатно оптерећење на дељени кôд, јер компајлира директно у платформске бинарне датотеке. За UI-интензивне апликације са сложеним анимацијама, избор је између Flutter-а и изворног развоја.

Како одабрати одговарајући фрејмворк

Избор између Flutter, React Native и KMP одређен је приоритетима пројекта. Ако је потребан pixel-perfect UI и потпуна контрола анимације — Flutter пружа најдоследније вишeплатформско искуство. Ако тим познаје JavaScript/React и цени највећи екосистем библиотека трећих страна — React Native је прагматичан избор. Ако већ постоје изворне апликације и потребно је делити пословну логику — KMP омогућава имплементацију заједничког кода модул по модул без компромиса у UI.

За MVP и стартапове Flutter или React Native дају најкраћи пут до тржишта са 80–100% заједничког кода. За корпоративне апликације са постојећом изворном базом KMP омогућава постепену миграцију модула. Игре и медијске апликације са прилагођеним рендеровањем имају користи од Flutter-а или потпуно изворног приступа. Сваки од фрејмворка је доказао своју зрелост — Instagram (React Native), Google Pay (Flutter) и Netflix (KMP) раде на вишeплатформским технологијама.

Трендови: Flutter се шири на десктоп и веб са јединственом кодном базом. React Native са новом архитектуром (Fabric + TurboModules) потпуно елиминише мост. KMP са Compose Multiplatform тежи јединственом UI слоју уз задржавање изворних перформанси. До 2027. године граница између вишeплатформског и изворног развоја биће потпуно замагљена — фрејмворци прелазе на платформске путеве компајлације.