Cross-Platform App: এটি কী, Flutter, React Native এবং KMP-এর তুলনা

Cross-Platform App কী?

Cross-Platform App (ক্রস-প্ল্যাটফর্ম অ্যাপ্লিকেশন) হল একটি সফটওয়্যার যা একক কোডবেস থেকে একাধিক মোবাইল অপারেটিং সিস্টেমে চলার জন্য তৈরি করা হয়েছে। নেটিভ ডেভেলপমেন্টের বিপরীতে, যেখানে iOS (Swift) এবং Android (Kotlin)-এর জন্য দুটি পৃথক প্রজেক্ট রক্ষণাবেক্ষণ করা হয়, ক্রস-প্ল্যাটফর্ম ডেভেলপমেন্ট বিজনেস লজিক, ইউজার ইন্টারফেস এবং ডেটা লেয়ারকে একটি প্রজেক্টে একত্রিত করে।

ক্রস-প্ল্যাটফর্ম ডেভেলপমেন্টের ধারণাটি 2009 সালে PhoneGap (পরবর্তীতে Apache Cordova)-এর সাথে উদ্ভূত হয়েছিল, যা একটি ওয়েব অ্যাপ্লিকেশনকে নেটিভ WebView-এ প্যাকেজ করত। আধুনিক ফ্রেমওয়ার্কগুলি অনেক দূর এগিয়েছে: Flutter Dart-এর মাধ্যমে নেটিভ ARM কোডে কম্পাইল হয়, React Native নেটিভ ব্রিজ-সহ JavaScript ইঞ্জিন ব্যবহার করে, এবং Kotlin Multiplatform শেয়ার্ড কোডকে প্ল্যাটফর্ম-নির্দিষ্ট বাইনারিতে কম্পাইল করে। 2026 সালের মধ্যে, 40% এরও বেশি নতুন মোবাইল অ্যাপ কমপক্ষে একটি ক্রস-প্ল্যাটফর্ম প্রযুক্তি ব্যবহার করে।

মূল মেট্রিক্স গ্রহণের: বাজারে 30–50% দ্রুত পৌঁছানো, দুটি নেটিভ টিমের তুলনায় 30–40% খরচ হ্রাস, উভয় প্ল্যাটফর্মে একটি ইউনিফাইড ফিচার সেটের সমর্থন। তবে, ক্রস-প্ল্যাটফর্ম অ্যাপগুলি এখনও চ্যালেঞ্জের মুখোমুখি হয় — প্ল্যাটফর্ম-নির্দিষ্ট UI সূক্ষ্মতা, হার্ডওয়্যার API অ্যাক্সেস এবং পারফরম্যান্স-সংবেদনশীল কার্যকারিতা যেমন অ্যানিমেশন এবং গেম।

Flutter: আর্কিটেকচার এবং পারফরম্যান্স

Flutter হল Dart ভাষাসহ Google-এর ওপেন-সোর্স UI ফ্রেমওয়ার্ক যার নিজস্ব Skia রেন্ডারিং ইঞ্জিন (সংস্করণ 4.x-এ Impeller) রয়েছে। নেটিভ প্ল্যাটফর্ম কম্পোনেন্ট ব্যবহার করে এমন ফ্রেমওয়ার্কের বিপরীতে, 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('ক্রস-প্ল্যাটফর্ম কাউন্টার')),
      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-কে পূর্বাভাসযোগ্য করে তোলে। Dart-এর AOT কম্পাইলেশনের জন্য ধন্যবাদ, Flutter অ্যাপগুলি 2 সেকেন্ডেরও কম সময়ে শুরু হয় এবং মিড-রেঞ্জ ডিভাইসেও 60 FPS বজায় রাখে। Impeller, নতুন রেন্ডারিং ইঞ্জিন, শ্যাডার কম্পাইলেশনের সময় ঝাঁকুনি দূর করেছে, যা Skia-র প্রধান সমস্যা ছিল।

React Native: JavaScript ব্রিজ এবং ইকোসিস্টেম

React Native হল JavaScript/TypeScript এবং React-এর সাথে মোবাইল অ্যাপ তৈরির জন্য Meta-র ক্রস-প্ল্যাটফর্ম ফ্রেমওয়ার্ক। Flutter-এর বিপরীতে, React Native JavaScript ব্রিজের মাধ্যমে প্ল্যাটফর্মের নেটিভ UI কম্পোনেন্ট (iOS-এ UIView, Android-এ View) ব্যবহার করে। বিজনেস লজিক 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-এর মতো লাইব্রেরিগুলি নেভিগেশন, জেসচার এবং অ্যানিমেশনের জন্য তৈরি সমাধান প্রদান করে। 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, KMP-র জন্য UI লেয়ার, 2025 সালে Android এবং Desktop-এর জন্য স্থিতিশীলতায় পৌঁছেছে, iOS সংস্করণ এখনও বিটা পরীক্ষায় রয়েছে।

ক্রস-প্ল্যাটফর্ম ফ্রেমওয়ার্কের তুলনা

পারফরম্যান্স পরিস্থিতি অনুযায়ী উল্লেখযোগ্যভাবে পরিবর্তিত হয়। Flutter-এর নিজস্ব রেন্ডারিং অ্যানিমেশন এবং ট্রানজিশনের জন্য স্থিতিশীল 60 FPS নিশ্চিত করে। React Native-এর ব্রিজ আর্কিটেকচার প্রতি নেটিভ কলের জন্য 2–5 ms লেটেন্সি যোগ করে, যদিও নতুন JSI (JavaScript Interface) স্তর এই ব্যবধান কমায়। KMP-তে শেয়ার্ড কোডের জন্য কোন ওভারহেড নেই কারণ এটি সরাসরি প্ল্যাটফর্ম বাইনারিতে কম্পাইল হয়। জটিল অ্যানিমেশন-সহ UI-নিবিড় অ্যাপের জন্য, পছন্দটি Flutter এবং নেটিভ ডেভেলপমেন্টের মধ্যে।

কিভাবে সঠিক ফ্রেমওয়ার্ক নির্বাচন করবেন

Flutter, React Native এবং KMP-এর মধ্যে নির্বাচন প্রজেক্টের অগ্রাধিকারের ওপর নির্ভর করে। যদি আপনার পিক্সেল-পারফেক্ট UI এবং সম্পূর্ণ অ্যানিমেশন নিয়ন্ত্রণের প্রয়োজন হয় — Flutter সবচেয়ে ধারাবাহিক ক্রস-প্ল্যাটফর্ম অভিজ্ঞতা প্রদান করে। যদি টিম JavaScript/React জানে এবং সবচেয়ে বড় থার্ড-পার্টি লাইব্রেরি ইকোসিস্টেমকে মূল্য দেয় — React Native ব্যবহারিক পছন্দ। যদি নেটিভ অ্যাপ আগে থেকে থাকে এবং আপনাকে বিজনেস লজিক ভাগ করতে হয় — KMP UI-তে আপোষ না করে মডিউল অনুযায়ী শেয়ার্ড কোড প্রবর্তনের অনুমতি দেয়।

MVP এবং স্টার্টআপের জন্য, Flutter বা React Native 80–100% শেয়ার্ড কোড-সহ বাজারের সবচেয়ে ছোট পথ প্রদান করে। বিদ্যমান নেটিভ বেস-সহ এন্টারপ্রাইজ অ্যাপ্লিকেশনের জন্য, KMP ক্রমিক মডিউল মাইগ্রেশনের অনুমতি দেয়। কাস্টম রেন্ডারিং-সহ গেম এবং মিডিয়া অ্যাপ্লিকেশন Flutter বা সম্পূর্ণ নেটিভ পদ্ধতি থেকে উপকৃত হয়। প্রতিটি ফ্রেমওয়ার্ক তার পরিপক্কতা প্রমাণ করেছে — Instagram (React Native), Google Pay (Flutter) এবং Netflix (KMP) ক্রস-প্ল্যাটফর্ম প্রযুক্তিতে চলে।

ট্রেন্ড: Flutter ইউনিফাইড কোডবেস-সহ ডেস্কটপ এবং ওয়েবে সম্প্রসারিত হচ্ছে। React Native তার নতুন আর্কিটেকচার (Fabric + TurboModules)-সহ ব্রিজ সম্পূর্ণরূপে দূর করছে। KMP Compose Multiplatform-সহ নেটিভ পারফরম্যান্স বজায় রেখে ইউনিফাইড UI লেয়ারের লক্ষ্য রাখে। 2027 সালের মধ্যে, ক্রস-প্ল্যাটফর্ম এবং নেটিভ ডেভেলপমেন্টের মধ্যে সীমানা সম্পূর্ণরূপে অস্পষ্ট হয়ে যাবে — ফ্রেমওয়ার্কগুলি প্ল্যাটফর্ম কম্পাইলেশন পাথে রূপান্তরিত হচ্ছে।