Cross-Platform App: چیست، مقایسه Flutter، React Native و KMP

Cross-Platform App چیست؟

Cross-Platform App (برنامه چندسکویی) — نرم‌افزاری است که برای کار روی چندین سیستم‌عامل موبایل از یک پایگاه کد واحد طراحی شده است. بر خلاف توسعه بومی که در آن دو پروژه جداگانه برای iOS (Swift) و Android (Kotlin) انجام می‌شود، توسعه چندسکویی منطق کسب‌وکار، رابط کاربری و لایه داده را در یک پروژه ترکیب می‌کند.

مفهوم توسعه چندسکویی در سال ۲۰۰۹ با PhoneGap (بعداً Apache Cordova) ظهور کرد که برنامه وب را در یک WebView بومی بسته‌بندی می‌کرد. فریم‌ورک‌های مدرن بسیار پیشرفته‌تر شده‌اند: Flutter از طریق Dart به کد ARM بومی کامپایل می‌شود، React Native از موتور جاوااسکریپت با پل بومی استفاده می‌کند، و Kotlin Multiplatform کد مشترک را به فایل‌های باینری مختص سکو کامپایل می‌کند. تا سال ۲۰۲۶، بیش از ۴۰٪ از برنامه‌های موبایل جدید حداقل از یک فناوری چندسکویی استفاده می‌کنند.

شاخص‌های کلیدی پیاده‌سازی: ورود به بازار ۳۰–۵۰٪ سریع‌تر، کاهش هزینه ۳۰–۴۰٪ در مقایسه با دو تیم بومی، پشتیبانی از مجموعه یکپارچه قابلیت‌ها در هر دو سکو. با این حال، برنامه‌های چندسکویی همچنان با چالش‌هایی روبرو هستند — ویژگی‌های UI مختص سکو، دسترسی به APIهای سخت‌افزاری و قابلیت‌های حساس به عملکرد مانند انیمیشن‌ها و بازی‌ها.

Flutter: معماری و عملکرد

Flutter — فریم‌ورک متن‌باز UI گوگل به زبان Dart با موتور رندرینگ اختصاصی Skia (Impeller در نسخه ۴.x). بر خلاف فریم‌ورک‌هایی که از کامپوننت‌های بومی سکو استفاده می‌کنند، Flutter هر پیکسل را به طور مستقل رندر می‌کند که کنترل کامل روی رابط را فراهم می‌آورد. این رویکرد تفاوت‌های بین سکوها را از بین می‌برد، اما اندازه برنامه را ۵–۱۵ مگابایت افزایش می‌دهد.

// 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 دارت، برنامه‌های Flutter در کمتر از ۲ ثانیه راه‌اندازی می‌شوند و حتی روی دستگاه‌های میان‌رده ۶۰ FPS را حفظ می‌کنند. Impeller — موتور رندرینگ جدید — لرزش حین کامپایل شیدرها را که مشکل اصلی Skia بود برطرف کرده است.

React Native: پل جاوااسکریپت و اکوسیستم

React Native — فریم‌ورک چندسکویی متا برای ساخت برنامه‌های موبایل با JavaScript/TypeScript و React. بر خلاف Flutter، React Native از کامپوننت‌های بومی UI سکو (UIView در iOS، View در Android) از طریق پل جاوااسکریپت استفاده می‌کند. منطق کسب‌وکار در موتور جاوااسکریپت (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 بیش از ۲ میلیون بسته دارد و کتابخانه‌های React Navigation، Expo و Reanimated راه‌حل‌های آماده‌ای برای ناوبری، ژست‌ها و انیمیشن‌ها فراهم می‌کنند. Expo — یک جریان کاری مدیریت‌شده — ساخت و انتشار را با به‌روزرسانی‌های OTA و بیش از ۵۰ ماژول بومی داخلی ساده می‌کند. Instagram، Shopify و Discord با مجموع بیش از ۵۰۰ میلیون کاربر ماهانه روی 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 به پایداری رسید، نسخه iOS همچنان در مرحله بتا باقی مانده است.

مقایسه فریم‌ورک‌های چندسکویی

عملکرد بسته به سناریو تفاوت قابل توجهی دارد. رندرینگ اختصاصی Flutter انیمیشن‌ها و انتقال‌ها را با ۶۰ FPS پایدار تضمین می‌کند. معماری پل React Native ۲–۵ میلی‌ثانیه تأخیر به هر فراخوانی بومی اضافه می‌کند، هرچند لایه جدید JSI (JavaScript Interface) این شکاف را کاهش می‌دهد. KMP سربار صفر روی کد اشتراکی دارد، زیرا مستقیماً به فایل‌های باینری سکو کامپایل می‌شود. برای برنامه‌های با UI سنگین و انیمیشن‌های پیچیده، انتخاب بین Flutter و توسعه بومی است.

چگونه فریم‌ورک مناسب را انتخاب کنیم

انتخاب بین Flutter، React Native و KMP با اولویت‌های پروژه تعیین می‌شود. اگر به UI پیکسل‌کامل و کنترل کامل انیمیشن نیاز دارید — Flutter سازگارترین تجربه چندسکویی را ارائه می‌دهد. اگر تیم JavaScript/React را می‌شناسد و بزرگترین اکوسیستم کتابخانه‌های شخص ثالث را ارزشمند می‌داند — React Native انتخاب عمل‌گرایانه است. اگر برنامه‌های بومی از قبل وجود دارند و نیاز به اشتراک‌گذاری منطق کسب‌وکار است — KMP امکان پیاده‌سازی کد مشترک را ماژول به ماژول بدون مصالحه در UI فراهم می‌کند.

برای MVP و استارتاپ‌ها Flutter یا React Native با ۸۰–۱۰۰٪ کد مشترک کوتاه‌ترین مسیر را به بازار می‌دهند. برای برنامه‌های سازمانی با پایگاه بومی موجود، KMP امکان مهاجرت تدریجی ماژول‌ها را فراهم می‌کند. بازی‌ها و برنامه‌های رسانه‌ای با رندرینگ سفارشی از Flutter یا رویکرد کاملاً بومی بهره می‌برند. هر یک از فریم‌ورک‌ها بلوغ خود را ثابت کرده‌اند — Instagram (React Native)، Google Pay (Flutter) و Netflix (KMP) روی فناوری‌های چندسکویی کار می‌کنند.

روندها: Flutter با یک پایگاه کد واحد به دسکتاپ و وب گسترش می‌یابد. React Native با معماری جدید (Fabric + TurboModules) پل را کاملاً حذف می‌کند. KMP با Compose Multiplatform به دنبال لایه UI یکپارچه با حفظ عملکرد بومی است. تا سال ۲۰۲۷، مرز بین توسعه چندسکویی و بومی کاملاً محو خواهد شد — فریم‌ورک‌ها به مسیرهای کامپایل سکو منتقل می‌شوند.