Cross-Platform App: bu nədir, Flutter, React Native və KMP müqayisəsi

Cross-Platform App nədir?

Cross-Platform App (platformalararası tətbiq) — vahid kod bazasından bir neçə mobil əməliyyat sistemində işləmək üçün hazırlanmış proqram təminatı. iOS (Swift) və Android (Kotlin) üçün iki ayrı layihənin aparıldığı nativ inkişafdan fərqli olaraq, platformalararası inkişaf biznes məntiqini, istifadəçi interfeysini və məlumat qatını bir layihədə birləşdirir.

Platformalararası inkişaf konsepsiyası 2009-cu ildə veb tətbiqi nativ WebView-ə yerləşdirən PhoneGap (sonra Apache Cordova) ilə ortaya çıxdı. Müasir çərçivələr çox irəli getdi: Flutter Dart vasitəsilə nativ ARM koduna kompilyasiya olunur, React Native nativ körpü ilə JavaScript mühərrikindən istifadə edir, Kotlin Multiplatform isə ortaq kodu platformaya uyğun ikili fayllara kompilyasiya edir. 2026-cı ilə qədər yeni mobil tətbiqlərin 40%-dən çoxu ən azı bir platformalararası texnologiyadan istifadə edir.

Əsas göstəricilər: bazara çıxış 30–50% daha sürətli, iki nativ komanda ilə müqayisədə xərclərin 30–40% azalması, hər iki platformada vahid funksiya dəstəyinin dəstəklənməsi. Bununla belə, platformalararası tətbiqlər hələ də çağırışlarla üzləşir — platformaya xas UI xüsusiyyətləri, aparat API-lərinə giriş və animasiya və oyunlar kimi performansa kritik funksionallıq.

Flutter: arxitektura və performans

Flutter — Dart dilində Google-ın açıq mənbə UI çərçivəsi, öz Skia (4.x versiyasında Impeller) render mühərriki ilə. Platformanın nativ komponentlərindən istifadə edən çərçivələrdən fərqli olaraq, Flutter hər pikseli müstəqil şəkildə göstərir ki, bu da interfeys üzərində tam nəzarət verir. Bu yanaşma platformalar arasındakı fərqləri aradan qaldırır, lakin tətbiq ölçüsünü 5–15 MB artırır.

// Flutter — sadə sayğac
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('Platformalararası sayğac')),
      body: Center(
        child: Column(
          children: [
            const Text('Düyməni bu qədər dəfə basdınız:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Flutter-in əsasında vidjet arxitekturası dayanır: boşluqlar və düzləşdirmədən tutmuş layout məhdudiyyətlərinə qədər hər şey vidjetdir. React-dən miras qalmış bu deklarativ model UI-ı proqnozlaşdırıla bilən edir. Dart-ın AOT kompilyasiyası sayəsində Flutter tətbiqləri 2 saniyədən az müddətdə işə düşür və orta səviyyəli cihazlarda belə 60 FPS təmin edir. Impeller — yeni render mühərriki — Skia-nın əsas problemi olan şader kompilyasiyasında titrəməni aradan qaldırdı.

React Native: JavaScript körpüsü və ekosistem

React Native — JavaScript/TypeScript və React ilə mobil tətbiqlər yaratmaq üçün Meta-nın platformalararası çərçivəsi. Flutter-dən fərqli olaraq, React Native JavaScript körpüsü vasitəsilə platformanın nativ UI komponentlərindən (iOS-da UIView, Android-də View) istifadə edir. Biznes məntiqi JavaScript mühərrikində (Hermes və ya JSC) icra olunur, nativ modullarla asinxron qarşılıqlı əlaqədə olur.

// React Native — platforma kodu olan komponent
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-da salam',
    android: 'Android-də salam',
    default: 'Salam',
  });

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

React Native-in ən böyük üstünlüyü ekosistemdir. npm 2 milyondan çox paketə malikdir, React Navigation, Expo və Reanimated kitabxanaları naviqasiya, jestlər və animasiyalar üçün hazır həllər təqdim edir. Expo — idarə olunan iş axını — OTA yeniləmələri və 50+ daxili nativ modulla qurma və nəşri sadələşdirir. Aylıq 500 milyondan çox istifadəçisi olan Instagram, Shopify və Discord React Native üzərində işləyir.

Kotlin Multiplatform: nativ UI ilə ortaq məntiq

Kotlin Multiplatform (KMP) — ortaq Kotlin kodunu platformaya uyğun ikili fayllara kompilyasiya edən JetBrains texnologiyası. Flutter və React Native-dən fərqli olaraq, KMP UI çərçivəsi təmin etmir — onun vəzifəsi biznes məntiqini, məlumat qatını, şəbəkə sorğularını və doğrulamanı təkrar istifadə etmək, interfeysi tam nativ buraxmaqdır. Netflix, McDonald's və VMware KMP-dən istehsalatda istifadə edir.

// Kotlin Multiplatform — commonMain-də ortaq repozitori
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 — platforma üçün tarix formatlaşdırılması
expect fun formatDate(timestamp: Long): String

KMP-nin əsas nümunəsi expect/actual mexanizmidir. Ortaq modulda (commonMain) expect-funksiya və ya sinif elan edilir, hər platforma mənbə dəstində (androidMain, iosMain) isə actual-tətbiq təmin edilir. Bu, ortaq kodda vahid ictimai interfeysi qoruyarkən platforma API-lərindən — SharedPreferences, NSUserDefaults, kamera, biometriyadan istifadə etməyə imkan verir. KMP üçün UI qatı olan Compose Multiplatform 2025-ci ildə Android və Desktop üçün sabitliyə çatdı, iOS versiyası beta mərhələsində qalır.

Platformalararası çərçivələrin müqayisəsi

Performans ssenaridən asılı olaraq əhəmiyyətli dərəcədə fərqlənir. Flutter-in öz renderi animasiyalar və keçidlər üçün sabit 60 FPS təmin edir. React Native-in körpü arxitekturası hər nativ çağırışa 2–5 ms gecikmə əlavə edir, baxmayaraq ki, yeni JSI (JavaScript Interface) qatı bu fərqi azaldır. KMP ortaq kod üçün sıfır əlavə yükə malikdir, çünki birbaşa platforma ikili fayllarına kompilyasiya olunur. Mürəkkəb animasiyalı UI-a yüklənmiş tətbiqlər üçün seçim Flutter və nativ inkişaf arasındadır.

Uyğun çərçivəni necə seçmək

Flutter, React Native və KMP arasında seçim layihənin prioritetləri ilə müəyyən edilir. Pixel-perfect UI və animasiya üzərində tam nəzarət lazımdırsa — Flutter ən ardıcıl platformalararası təcrübə təmin edir. Komanda JavaScript/React bilir və üçüncü tərəf kitabxanalarının ən böyük ekosistemini qiymətləndirirsə — React Native praqmatik seçimdir. Əgər nativ tətbiqlər artıq mövcuddursa və biznes məntiqini bölüşmək tələb olunursa — KMP UI-da güzəştə getmədən modul-modul ortaq kod tətbiq etməyə imkan verir.

MVP və startaplar üçün Flutter və ya React Native 80–100% ortaq kodla bazara ən qısa yol verir. Korporativ tətbiqlər üçün mövcud nativ baza ilə KMP modulları tədricən miqrasiya etməyə imkan verir. Oyunlar və media tətbiqləri xüsusi renderlə Flutter və ya tam nativ yanaşmadan faydalanır. Çərçivələrin hər biri yetkinliyini sübut etdi — Instagram (React Native), Google Pay (Flutter) və Netflix (KMP) platformalararası texnologiyalarla işləyir.

Trendlər: Flutter vahid kod bazası ilə desktop və vebə genişlənir. React Native yeni arxitektura (Fabric + TurboModules) ilə körpünü tamamilə aradan qaldırır. KMP Compose Multiplatform ilə nativ performansı qoruyarkən vahid UI qatına can atır. 2027-ci ilə qədər platformalararası və nativ inkişaf arasındakı sərhəd tamamilə silinəcək — çərçivələr platforma kompilyasiya yollarına keçir.