Cross-Platform App: bu nima, Flutter, React Native va KMP solishtiruvi

Cross-Platform App nima?

Cross-Platform App (platformalararo ilova) — bir nechta mobil operatsion tizimlarda yagona kod bazasidan ishlash uchun yaratilgan dasturiy ta'minot. iOS (Swift) va Android (Kotlin) uchun ikkita alohida loyiha olib boriladigan nativ ishlanmadan farqli o'laroq, platformalararo ishlanma biznes mantiq, foydalanuvchi interfeysi va ma'lumot qatlamini bitta loyihada birlashtiradi.

Platformalararo ishlanma kontseptsiyasi 2009-yilda veb-ilovani nativ WebView-ga joylashtirgan PhoneGap (keyin Apache Cordova) bilan paydo bo'ldi. Zamonaviy freymvorklar ancha oldinga ketdi: Flutter Dart orqali nativ ARM kodiga kompilyatsiya qilinadi, React Native nativ ko'prik bilan JavaScript dvigatelidan foydalanadi, Kotlin Multiplatform esa umumiy kodni platformaga xos ikkilik fayllarga kompilyatsiya qiladi. 2026-yilga kelib, yangi mobil ilovalarning 40% dan ortig'i kamida bitta platformalararo texnologiyadan foydalanadi.

Asosiy ko'rsatkichlar: bozorga chiqish 30–50% tezroq, ikkita nativ jamoa bilan solishtirganda xarajatlarning 30–40% kamayishi, ikkala platformada yagona funksiyalar to'plamini qo'llab-quvvatlash. Biroq, platformalararo ilovalar hali ham qiyinchiliklarga duch keladi — platformaga xos UI xususiyatlari, apparat API-lariga kirish va animatsiyalar va o'yinlar kabi ishlash unumdorligi uchun muhim funksionallik.

Flutter: arxitektura va ishlash unumdorligi

Flutter — Dart tilidagi Google-ning ochiq manbali UI freymvorki, o'zining Skia (4.x versiyasida Impeller) renderlash dvigateli bilan. Platformaning nativ komponentlaridan foydalanadigan freymvorklardan farqli o'laroq, Flutter har bir pikselni mustaqil ravishda renderlaydi, bu interfeys ustidan to'liq nazorat beradi. Bunday yondashuv platformalar o'rtasidagi farqlarni bartaraf qiladi, lekin ilova hajmini 5–15 MB ga oshiradi.

// Flutter — oddiy hisoblagich
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('Platformalararo hisoblagich')),
      body: Center(
        child: Column(
          children: [
            const Text('Tugmani shuncha marta bosdingiz:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Flutter asosida vidjet arxitekturasi yotadi: bo'shliqlar va tekislashdan tortib layout cheklovlarigacha hamma narsa vidjetdir. React-dan meros bo'lgan bu deklarativ model UI-ni bashorat qilish mumkin qiladi. Dart-ning AOT kompilyatsiyasi tufayli Flutter ilovalari 2 soniyadan kam vaqt ichida ishga tushadi va hatto o'rta sinf qurilmalarda ham 60 FPS ni ushlab turadi. Impeller — yangi renderlash dvigateli — Skia-ning asosiy muammosi bo'lgan shader kompilyatsiyasida tebranishni bartaraf qildi.

React Native: JavaScript ko'prigi va ekotizim

React Native — JavaScript/TypeScript va React bilan mobil ilovalar yaratish uchun Meta-ning platformalararo freymvorki. Flutter-dan farqli o'laroq, React Native JavaScript ko'prigi orqali platformaning nativ UI komponentlaridan (iOS da UIView, Android da View) foydalanadi. Biznes mantiq JavaScript dvigatelida (Hermes yoki JSC) bajariladi, nativ modullar bilan asinxron aloqada bo'ladi.

// React Native — platforma kodiga ega 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 salom',
    android: 'Android da salom',
    default: 'Salom',
  });

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

React Native-ning eng katta afzalligi ekotizimdir. npm 2 milliondan ortiq paketga ega, React Navigation, Expo va Reanimated kutubxonalari navigatsiya, imo-ishoralar va animatsiyalar uchun tayyor yechimlarni taqdim etadi. Expo — boshqariladigan ish oqimi — OTA yangilanishlari va 50+ o'rnatilgan nativ modul bilan qurish va nashr etishni soddalashtiradi. Oyiga 500 milliondan ortiq foydalanuvchiga ega Instagram, Shopify va Discord React Native da ishlaydi.

Kotlin Multiplatform: nativ UI bilan umumiy mantiq

Kotlin Multiplatform (KMP) — umumiy Kotlin kodini platformaga xos ikkilik fayllarga kompilyatsiya qiladigan JetBrains texnologiyasi. Flutter va React Native-dan farqli o'laroq, KMP UI freymvorkini taqdim etmaydi — uning vazifasi biznes mantiq, ma'lumot qatlami, tarmoq so'rovlari va validatsiyani qayta ishlatish, interfeysni to'liq nativ qoldirishdir. Netflix, McDonald's va VMware KMP dan ishlab chiqarishda foydalanadi.

// Kotlin Multiplatform — commonMain da umumiy 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 uchun sana formatlash
expect fun formatDate(timestamp: Long): String

KMP ning asosiy namunasi expect/actual mexanizmidir. Umumiy modulda (commonMain) expect-funksiya yoki sinf e'lon qilinadi, har bir platforma manba to'plamida (androidMain, iosMain) esa actual-tatbiq ta'minlanadi. Bu umumiy kodda yagona ommaviy interfeysni saqlab, platforma API-laridan — SharedPreferences, NSUserDefaults, kamera, biometriyadan foydalanish imkonini beradi. KMP uchun UI qatlami bo'lgan Compose Multiplatform 2025-yilda Android va Desktop uchun barqarorlikka erishdi, iOS versiyasi beta sinovda qolmoqda.

Platformalararo freymvorklarni solishtirish

Ishlash unumdorligi stsenariyga qarab sezilarli darajada farqlanadi. Flutter-ning o'z renderi animatsiyalar va o'tishlar uchun barqaror 60 FPS ni ta'minlaydi. React Native-ning ko'prik arxitekturasi har bir nativ chaqiruvga 2–5 ms kechikish qo'shadi, yangi JSI (JavaScript Interface) qatlami bu farqni kamaytiradi. KMP umumiy kod uchun nol qo'shimcha yukga ega, chunki to'g'ridan-to'g'ri platforma ikkilik fayllariga kompilyatsiya qilinadi. Murakkab animatsiyali UI-ga boy ilovalar uchun tanlov Flutter va nativ ishlanma o'rtasida.

Mos freymvorkni qanday tanlash

Flutter, React Native va KMP o'rtasidagi tanlov loyihaning ustuvorliklari bilan belgilanadi. Agar pixel-perfect UI va animatsiya ustidan to'liq nazorat kerak bo'lsa — Flutter eng izchil platformalararo tajribani ta'minlaydi. Agar jamoa JavaScript/React ni biladi va uchinchi tomon kutubxonalarining eng yirik ekotizimini qadrlasa — React Native pragmatik tanlovdir. Agar nativ ilovalar allaqachon mavjud bo'lsa va biznes mantiqni ulashish kerak bo'lsa — KMP UI da murosasiz modul-modul umumiy kodni joriy etish imkonini beradi.

MVP va startaplar uchun Flutter yoki React Native 80–100% umumiy kod bilan bozorga eng qisqa yo'lni beradi. Korporativ ilovalar uchun mavjud nativ baza bilan KMP modullarni bosqichma-bosqich migratsiya qilish imkonini beradi. O'yinlar va media ilovalari maxsus render bilan Flutter yoki to'liq nativ yondashuvdan foyda ko'radi. Freymvorklarning har biri o'zining etukligini isbotladi — Instagram (React Native), Google Pay (Flutter) va Netflix (KMP) platformalararo texnologiyalarda ishlaydi.

Trendlar: Flutter yagona kod bazasi bilan desktop va vebga kengaymoqda. React Native yangi arxitektura (Fabric + TurboModules) bilan ko'prikni butunlay yo'q qiladi. KMP Compose Multiplatform bilan nativ ishlash unumdorligini saqlab, yagona UI qatlamiga intiladi. 2027-yilga kelib platformalararo va nativ ishlanma o'rtasidagi chegara butunlay yo'qoladi — freymvorklar platforma kompilyatsiya yo'llariga o'tmoqda.