Cross-Platform App: nó là gì, so sánh Flutter, React Native và KMP

Cross-Platform App là gì?

Cross-Platform App (ứng dụng đa nền tảng) là phần mềm được phát triển để chạy trên nhiều hệ điều hành di động từ một cơ sở mã duy nhất. Không giống như phát triển native, nơi hai dự án riêng biệt được duy trì cho iOS (Swift) và Android (Kotlin), phát triển đa nền tảng kết hợp logic kinh doanh, giao diện người dùng và lớp dữ liệu trong một dự án.

Khái niệm phát triển đa nền tảng xuất hiện vào năm 2009 với PhoneGap (sau này là Apache Cordova), đóng gói ứng dụng web vào một WebView native. Các framework hiện đại đã tiến xa: Flutter biên dịch sang mã ARM native thông qua Dart, React Native sử dụng công cụ JavaScript với cầu nối native, và Kotlin Multiplatform biên dịch mã chia sẻ thành các tệp nhị phân dành riêng cho nền tảng. Đến năm 2026, hơn 40% ứng dụng di động mới sử dụng ít nhất một công nghệ đa nền tảng.

Các chỉ số chính về áp dụng: ra thị trường nhanh hơn 30–50%, giảm chi phí 30–40% so với hai nhóm native, hỗ trợ bộ tính năng thống nhất trên cả hai nền tảng. Tuy nhiên, ứng dụng đa nền tảng vẫn phải đối mặt với thách thức — sự khác biệt UI dành riêng cho nền tảng, truy cập API phần cứng và chức năng quan trọng về hiệu suất như hoạt ảnh và trò chơi.

Flutter: Kiến trúc và Hiệu suất

Flutter là framework UI mã nguồn mở của Google với ngôn ngữ Dart và công cụ kết xuất Skia riêng (Impeller trong phiên bản 4.x). Không giống như các framework sử dụng thành phần native của nền tảng, Flutter tự kết xuất từng pixel, mang lại toàn quyền kiểm soát giao diện. Cách tiếp cận này loại bỏ sự khác biệt giữa các nền tảng nhưng tăng kích thước ứng dụng thêm 5–15 MB.

// Flutter — bộ đếm đơn giản
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('Bộ đếm đa nền tảng')),
      body: Center(
        child: Column(
          children: [
            const Text('Bạn đã nhấn nút số lần này:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Cốt lõi của Flutter là kiến trúc widget: mọi thứ — từ đệm và căn chỉnh đến ràng buộc bố cục — đều là widget. Mô hình khai báo này, kế thừa từ React, làm cho UI có thể dự đoán được. Nhờ biên dịch AOT của Dart, ứng dụng Flutter khởi động trong vòng chưa đầy 2 giây và duy trì 60 FPS ngay cả trên các thiết bị tầm trung. Impeller, công cụ kết xuất mới, đã loại bỏ hiện tượng giật trong quá trình biên dịch shader, vốn là vấn đề chính của Skia.

React Native: Cầu JavaScript và Hệ sinh thái

React Native là framework đa nền tảng của Meta để tạo ứng dụng di động với JavaScript/TypeScript và React. Không giống như Flutter, React Native sử dụng các thành phần UI native của nền tảng (UIView trên iOS, View trên Android) thông qua cầu nối JavaScript. Logic kinh doanh chạy trong công cụ JavaScript (Hermes hoặc JSC), tương tác không đồng bộ với các mô-đun native.

// React Native — thành phần với mã nền tảng
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: 'Xin chào từ iOS',
    android: 'Xin chào từ Android',
    default: 'Xin chào',
  });

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

Lợi thế lớn nhất của React Native là hệ sinh thái của nó. npm lưu trữ hơn 2 triệu gói và các thư viện như React Navigation, Expo và Reanimated cung cấp các giải pháp có sẵn cho điều hướng, cử chỉ và hoạt ảnh. Expo, một quy trình làm việc được quản lý, đơn giản hóa việc xây dựng và xuất bản với các bản cập nhật OTA và hơn 50 mô-đun native tích hợp sẵn. Instagram, Shopify và Discord chạy trên React Native với tổng số hơn 500 triệu người dùng hoạt động hàng tháng.

Kotlin Multiplatform: Logic chia sẻ với UI Native

Kotlin Multiplatform (KMP) là công nghệ của JetBrains biên dịch mã Kotlin chia sẻ thành các tệp nhị phân dành riêng cho nền tảng. Không giống như Flutter và React Native, KMP không cung cấp framework UI — mục đích của nó là tái sử dụng logic kinh doanh, lớp dữ liệu, yêu cầu mạng và xác thực, trong khi giữ giao diện hoàn toàn native. Netflix, McDonald's và VMware sử dụng KMP trong sản xuất.

// Kotlin Multiplatform — kho lưu trữ chia sẻ trong 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 — định dạng ngày cho nền tảng
expect fun formatDate(timestamp: Long): String

Mô hình chính của KMP là cơ chế expect/actual. Trong mô-đun chia sẻ (commonMain), một hàm hoặc lớp expect được khai báo và trong mỗi tập hợp nguồn dành riêng cho nền tảng (androidMain, iosMain), triển khai actual được cung cấp. Điều này cho phép sử dụng API nền tảng — SharedPreferences, NSUserDefaults, camera, sinh trắc học — trong khi vẫn duy trì giao diện công khai thống nhất trong mã chia sẻ. Compose Multiplatform, lớp UI cho KMP, đã đạt được sự ổn định cho Android và Desktop vào năm 2025, phiên bản iOS vẫn đang trong giai đoạn thử nghiệm beta.

So sánh các Framework Đa nền tảng

Hiệu suất khác biệt đáng kể tùy theo kịch bản. Kết xuất riêng của Flutter đảm bảo 60 FPS ổn định cho hoạt ảnh và chuyển tiếp. Kiến trúc cầu nối của React Native thêm 2–5 ms độ trễ cho mỗi lần gọi native, mặc dù lớp JSI (JavaScript Interface) mới giảm khoảng cách này. KMP không có chi phí cho mã chia sẻ vì nó biên dịch trực tiếp thành tệp nhị phân nền tảng. Đối với ứng dụng có UI phức tạp với hoạt ảnh phức tạp, sự lựa chọn nằm giữa Flutter và phát triển native.

Cách Chọn Framework Phù hợp

Sự lựa chọn giữa Flutter, React Native và KMP phụ thuộc vào ưu tiên của dự án. Nếu bạn cần UI hoàn hảo đến từng pixel và toàn quyền kiểm soát hoạt ảnh — Flutter cung cấp trải nghiệm đa nền tảng nhất quán nhất. Nếu nhóm thành thạo JavaScript/React và coi trọng hệ sinh thái thư viện bên thứ ba lớn nhất — React Native là lựa chọn thực tế. Nếu ứng dụng native đã tồn tại và bạn cần chia sẻ logic kinh doanh — KMP cho phép giới thiệu mã chia sẻ từng mô-đun mà không ảnh hưởng đến UI.

Đối với MVP và startup, Flutter hoặc React Native mang lại con đường ngắn nhất ra thị trường với 80–100% mã chia sẻ. Đối với ứng dụng doanh nghiệp có cơ sở native hiện có, KMP cho phép di chuyển mô-đun dần dần. Trò chơi và ứng dụng đa phương tiện với kết xuất tùy chỉnh được hưởng lợi từ Flutter hoặc cách tiếp cận hoàn toàn native. Mỗi framework đã chứng minh sự trưởng thành của mình — Instagram (React Native), Google Pay (Flutter) và Netflix (KMP) chạy trên các công nghệ đa nền tảng.

Xu hướng: Flutter mở rộng sang máy tính để bàn và web với cơ sở mã thống nhất. React Native với kiến trúc mới (Fabric + TurboModules) loại bỏ hoàn toàn cầu nối. KMP với Compose Multiplatform hướng tới một lớp UI thống nhất trong khi duy trì hiệu suất native. Đến năm 2027, ranh giới giữa phát triển đa nền tảng và native sẽ hoàn toàn mờ nhạt — các framework đang chuyển đổi sang đường dẫn biên dịch native.