مقالات

Flutter vs React Native: چگونه انتخاب کنم و چه زمانی به Native بروم


شما باید یک برنامه بسازید، دو فروشگاه برای ارسال آن، و تیمی که نمی تواند آن را دوبار بنویسد. سپس Flutter vs. React Native (یا React Native در مقابل Flutter بسته به اینکه از کدام کمپی می‌پرسید) وجود دارد. پاسخ کوتاه با دلایل زیر:

  • صفحات را به یک برنامه سفارشی که از قبل دارید اضافه کنید: React Native.
  • برنامه جدید، تیم بدون تجربه وب: سوسو زدن
  • برنامه جدید، جاوا اسکریپت یا تیم React: React Native، احتمالاً با Expo.
  • محصول در یک پلت فرم زندگی می کند ویژگی های: نه برو بومی

تجربه من لکه دار است، بنابراین در اینجا آن را در جلو. من یک برنامه تولیدی فلاتر را به هر دو فروشگاه فرستادم. کار من روی React Native در برنامه های بومی، SDK و نمونه بود. من همچنین برنامه های بومی را برای اندروید و iOS ارسال می کنم.

آنچه من در واقع در هر یک فرستادم

سوسو زدن Carewell یک برنامه پرسنل مراقبت‌های بهداشتی سوئیسی است که در Google Play و اپ استور به صورت زنده در اختیار شما قرار می‌گیرد. من مهندس اصلی موبایل با 539 تعامل بین فوریه و اکتبر 2026 بودم.

من همچنین CI/CD Android را بازسازی کردم و خط لوله انتشار iOS را از ابتدا، GitHub Actions به TestFlight و Play ساختم. این یک مخزن مشتری است، بنابراین من آن را توصیف می کنم و منبع را پیوند نمی دهم.

React Native. تجربه من در اینجا محدودتر است:

  • یک نمونه عمومی، ReactNativeShoppingApp که روی iOS و Android اجرا می شود.
  • یک مؤلفه React Native که در برنامه اصلی اندروید یاهو Sports تعبیه شده است. برنامه بومی بود و React Native بخشی از آن بود.
  • کمک React Native SDK به پورتالی که در آن جاوا اسکریپت API یک SDK بومی Android را می‌پیچد.

من از یک برنامه فقط React Native، چه Expo یا نه، تا زمان انتشار فروشگاه استفاده نکرده ام. قطعات React Native زیر را بر این اساس وزن کنید.

Flutter در مقابل React Native: هر کدام چگونه صفحه را ترسیم می کنند

Flutter ویجت های خود را ترسیم می کند. نمای کلی معماری آن می‌گوید: «Flutter پیاده‌سازی‌های خاص خود را از هر کنترل UI دارد، نه اینکه به مواردی که توسط سیستم ارائه می‌شود، موکول شود». در پلتفرم‌های بومی، «کد Dart که تصاویر Flutter را ترسیم می‌کند به کد بومی که از Impeller برای رندر استفاده می‌کند، کامپایل می‌شود».

Workwheel پیش‌فرض برای iOS و Android API 29 و بالاتر است. در نسخه‌های قدیمی‌تر اندروید یا دستگاه‌های بدون پشتیبانی Vulkan، صفحه می‌گوید که Impeller “به رندر OpenGL قدیمی بازمی‌گردد”.

React Native راه دیگری را پیش می‌برد. صفحه اجزای اصلی می‌گوید: «در زمان اجرا، React Native نماهای مربوط به Android و iOS را برای این مؤلفه‌ها ایجاد می‌کند».<Изглед>نقشه های ViewGroup در اندروید و UIView در iOS.

فلاتر مالک پیکسل هاست. React Native مالک جاوا اسکریپت است و پیکسل ها را به نماهای پلتفرم ارسال می کند.

  • زبان: فلوتر از دارت استفاده می کند. React Native از جاوا اسکریپت (یا TypeScript) استفاده می کند.
  • کنترل‌های رابط کاربری: Flutter مجموعه‌ای از ویجت‌های خاص خود را دارد که از Flutter گرفته شده است (پاپلر که پشتیبانی می‌شود، OpenGL جایگزین در اندروید قدیمی‌تر). React Native نماهای Android و iOS را در زمان اجرا ایجاد می کند.
  • کد پلت فرم فراخوانی: Flutter از کانال های پلت فرم به Kotlin/Java و Swift/Objective-C استفاده می کند. React Native از ماژول های بومی با JSI در معماری جدید استفاده می کند.

منبع جدول: صفحات Flutter و React Native که در این بخش پیوند داده شده اند، به علاوه کانال های پلت فرم.

عملکرد Flutter در مقابل React Native

من دستورالعملی برای ارائه به شما ندارم. من زمان‌های فریم یا راه‌اندازی را روی هیچ‌کدام از فریم‌ها اندازه‌گیری نکردم، و یک عدد از برنامه شخص دیگری چیز زیادی درباره برنامه شما به شما نمی‌گوید. این چیزی است که اسناد می گویند.

برای فلاتر، اهداف اعلام شده ایمپلر شامل عملکرد قابل پیش بینی است: “همه سایه زن ها و بازتاب را در زمان ساخت به صورت آفلاین کامپایل می کند.” صفحه معماری اضافه می کند که ترسیم همه چیز به خودی خود به Flutter اجازه می دهد تا “کل صحنه را به یکباره بدون رفت و برگشت بین کد فلاتر و کد پلت فرم بسازد.”

برای React Native، صفحه New Architecture می گوید که “پل ناهمزمان بین جاوا اسکریپت و بومی را حذف می کند و آن را با یک رابط جاوا اسکریپت (JSI) جایگزین می کند.” با “یک مرجع حافظه، می توانید مستقیماً متدها را بدون سربار سریال سازی فراخوانی کنید”. این پیش‌فرض از React Native 0.76 بوده است.

فابریک، رندر جدید، به عنوان “تکامل مفهومی سیستم رندر قدیمی” توصیف می شود. اینها اهداف طراحی از هر پروژه هستند. اینکه آیا آنها برای درخواست شما اهمیت دارند یا خیر، چیزی است که باید خودتان بررسی کنید:

  1. صفحه نمایشی را که بیشتر نگران آن هستید (فهرست طولانی، نقشه، نمای دوربین) در هر دو به عنوان نسخه ساخت بسازید.
  2. هر دو را روی کندترین دستگاهی که کاربران واقعا دارند اجرا کنید، نه گوشی خودتان.
  3. افت قاب اسکرول، زمان شروع سرد و اندازه نصب را مقایسه کنید.

اگر کسی نمودار «فلوتر در مقابل عملکرد بومی» را بدون دستگاه، نسخه و صفحه نمایش برای شما ارسال کرد، آن را بخواهید.

آنچه برنامه Flutter کد بومی من به آن نیاز داشت

یک نگرانی رایج در مورد چارچوبی که رابط کاربری خود را ترسیم می کند زمانی است که به چیزی نیاز دارید که آن را ندارد. بنابراین من حساب کردم که مخزن خود Carewell در هر طرف چه چیزی دارد:

  • فایل‌های دارت تحت lib/: 580 (494 بدون ایجاد .g.dart و .freezed.dart)
  • فایل های منبع Kotlin یا Swift در android/ و ios/ که بخشی از برنامه هستند: 3 (دو فایل MainActivity.kt، یکی از آنها 5 خط و AppDelegate.swift)
  • کانال های پلت فرم سفارشی: 1، برای همگام سازی تقویم، با یک کنترل کننده در هر پلت فرم

این تعداد فقط فایل های پیگیری شده خود برنامه را پوشش می دهد. کد بومی در افزونه ها گنجانده نشده است. لایه بومی خود برنامه دو فایل اکتیویتی، یک نماینده برنامه و یک کانال است.

بقیه دامنه پلتفرم از افزونه‌های pub.dev می‌آید: firebase_messaging، permission_handler، device_calendar، webview_flutter، و url_launcher و غیره. هر کدام کد خود را برای اندروید و iOS ارسال می کنند.

کانال همگام‌سازی تقویم Kotlin و Swift است که برنامه مالک آن است. اسناد فلاتر می‌گویند که کانال‌های پلتفرم پیام‌هایی را بین Dart و یک جزء پلتفرم که به زبانی مانند Kotlin یا Swift نوشته شده است ارسال می‌کنند. در این اپلیکیشن دارت به تنهایی کافی نبود. هر دو پلتفرم بومی وارد کد برنامه و حتی بیشتر از آن در فرآیند انتشار شدند.

React Native، brownfield و Expo

جایی که React Native در کار من به راحتی قابل توجیه بوده است، جایی است که اسناد آن منجر می شود: افزودن به برنامه ای که از قبل وجود دارد. راهنمای ادغام می گوید که “همچنین برای افزودن یک نمای یا جریان کاربر به برنامه های بومی موجود خوب کار می کند.”

این جزء ورزش یاهو بود. کار پورتال برعکس همان ایده بود: یک React Native-facing SDK در بالای یک Android SDK بومی، جایی که کار در مرز بین این دو قرار داشت.

اسناد Expo Expo را به عنوان “یک چارچوب React Native که توسعه برنامه اندروید و iOS را آسان‌تر می‌کند” و EAS را به عنوان “مجموعه‌ای از خدماتی که چارچوب Expo را در هر مرحله از فرآیند توسعه تکمیل می‌کنند” توصیف می‌کنند. بنابراین Expo vs. Flutter اینگونه نیست: انتخاب Expo به معنای انتخاب React Native با چارچوب و خدماتی است که در بالا قرار دارد.

زمانی که از توسعه اپلیکیشن های چند پلتفرمی صرف نظر کردم و به بومی رفتم

سوالات React Native در مقابل Native و Flutter vs. Swift به همین لیست خلاصه می شوند. وقتی به بومی می رسم:

  • این برنامه بیشتر ویژگی های پلت فرم است. ویجت‌ها، کار پس‌زمینه، برنامه‌های افزودنی اشتراک‌گذاری، فعالیت‌های زنده، مجوزهای سیستم. شما به هر حال سمت هسته را می نویسید، و لایه کراس پلتفرم فقط پوسته است.
  • یک پلت فرم محصول است. اگر کسب و کار یک برنامه اندرویدی است، آن را در Kotlin و Compose می‌سازم. برای iOS، Swift و SwiftUI.
  • در روز اول به آخرین API پلتفرم نیاز دارید. با یک قاب در بین، شما منتظر فریم هستید یا پل را می نویسید.

این شامل React Native در مقابل Swift، Flutter در مقابل Swift و Flutter در مقابل Kotlin می شود. من برنامه‌های خودم را به این صورت ارسال می‌کنم: PlannedPing اندروید بومی در Kotlin و Compose است و برنامه‌های iOS من Swift و SwiftUI هستند. طرف iOS در SwiftUI در مقابل UIKit قرار دارد: هشت مورد از برنامه‌های iOS من را شامل می‌شود.

هزینه دوبار انتقال به برنامه‌های بومی، نگه‌داشتن دو برنامه در یک مرحله است، که در مورد آن‌ها در «برنامه‌های iOS و Android شما باید همان محصول باشند» نوشتم. من هیچ داده ای ندارم که ساخت بومی ارزانتر یا سریعتر باشد. این همان چیزی است که وقتی پلتفرم محصول باشد، انتخاب می‌کنم.

Flutter یا React Native: چرا من این راه را انتخاب می کنم

React Native همان برنامه‌ای است که وقتی برنامه بومی از قبل وجود داشته باشد و به صفحه‌نمایش‌های جدید نیاز دارد، بدون هیچ سؤالی انتخاب می‌کنم. اسناد ادغام خودش برای این مورد نوشته شده است، و این موردی است که من روی آن کار کردم.

برای یک برنامه جدید، تیم تصمیم می گیرد. یک تیم بدون تجربه وب یک زبان و یک مجموعه از ویجت‌ها را دریافت می‌کند که روی هر دو پلتفرم با Flutter یکسان طراحی شده‌اند، و من آن را به هر دو فروشگاه ارسال کردم.

یک تیم جاوا اسکریپت یا React نزدیک‌تر به React Native و Expo شروع می‌شود. این استدلال از اسناد است، نه نسخه ای که من ارسال کردم، بنابراین مانند یک مشتری بالقوه با آن رفتار کنید.

هر آنچه را که انتخاب می کنید، بودجه ای را برای انتشار در نظر بگیرید. در Carewell، 36 مورد از 539 commit من پیکربندی CI و انتشار را لمس کردند، و حتی یک فروشگاه بدون آن تولید نشد. این قسمت با قاب تغییر نمی کند، بنابراین قبل از انتخاب تصمیم بگیرید که مالک آن چه کسی است.

اگر نظر دومی می‌خواهید در مورد یک برنامه خاص یا برنامه نجاتی که قبلاً نصف فریمی است که پشیمان شده‌اید، این کاری است که من انجام می‌دهم.

نقل قول های جعبه از صفحات رسمی لینک شده در بالا، بازیابی شده 2026–10–28 آمده است. شمارش معاملات ریپو در همان روز انجام شد.

در ابتدا منتشر شد https://codebyramiz.com در 28 اکتبر 2026


Flutter vs. React Native: How I Choose, and When I Go Native در اصل در ProAndroidDev در Medium پست شد، جایی که مردم با برجسته کردن و پاسخ دادن به این داستان به گفتگو ادامه می‌دهند.


Source link

نوشته های مشابه

دیدگاهتان را بنویسید

دکمه بازگشت به بالا