طراحی اپلیکیشن

فلاتر یا ری اکت نیتیو

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

  • درس ۴ از ۸
  • میانی
  • رایگان، بدون ثبت نام

دو کفه، بدون برنده

هیچ کفه ای سنگین تر نیست. آنچه کفه را پایین می آورد، پروژه شماست.

کفه فلاتر

  • رابط را خودش می کشد، پس روی هر دو پلتفرم یکسان است
  • طرح اختصاصی و حرکت زیاد را راحت تر پیاده می کند
  • دارت، با هات ریلود حفظ وضعیت و کامپایل پیش از اجرا
  • تغییر ظاهر سیستم عامل خود به خود به اپ نمی رسد

کفه ری اکت نیتیو

  • ویوهای خود پلتفرم را می سازد، پس بومی به نظر می رسد
  • جاوااسکریپت و ری اکت، همان چیزی که تیم وب بلد است
  • با تغییر ظاهر سیستم عامل همراه می شود
  • یکسان بودن مو به موی دو پلتفرم را رایگان نمی دهد

این تقسیم بندی برای اپ کسب و کار است. برای بازی و رابط سنگین گرافیکی هیچ کدام از این دو جواب پیش فرض نیست.

آخرین بررسی: فکت ها و نام ابزارهای این درس در همین تاریخ با منابعشان بازبینی شده اند.

تفاوت واقعی این دو کجاست؟

در یک جمله از خود مستندات هر کدام. پرسش و پاسخ رسمی فلاتر می پرسد آیا فلاتر از ویجت های داخلی سیستم عامل استفاده می کند و جواب خودش را با یک کلمه شروع می کند: نه. فلاتر مجموعه ویجت های خودش را دارد، شامل متریال و کوپرتینو، که چارچوب و موتور خودش آنها را مدیریت و رسم می کنند. در سمت مقابل، مستندات ری اکت نیتیو می گوید در زمان اجرا، ری اکت نیتیو ویوهای متناظر اندروید و iOS را برای کامپوننت های شما می سازد، و چون کامپوننت ها پشتشان همان ویوهای پلتفرم است، اپ مثل هر اپ دیگری به نظر می رسد و رفتار می کند.

پس دو مسیر متفاوت برای رسیدن به یک تصویر. فلاتر مثل یک موتور بازی رفتار می کند: بوم خودش را می گیرد و همه چیز را روی آن می کشد. خود مستندات فلاتر همین تشبیه را می کند وقتی توضیح می دهد کد دارت روی iOS به یک کتابخانه ARM بومی کامپایل می شود و داخل یک پروژه runner قرار می گیرد. ری اکت نیتیو در عوض مثل یک راننده رفتار می کند: خودش چیزی نمی کشد و به ویوهای پلتفرم می گوید چه کار کنند.

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

کدام یک بهتر است؟ هیچ کدام. این دو جواب دو سوال متفاوت اند و بقیه این درس درباره این است که سوال شما کدام است.

دو قلم موی شیشه ای، یکی که خودش قرمز و سبز می کشد و دیگری با نخ های آبی به بلوک های کوچک وصل است

شش محوری که واقعا فرق دارند

موتور رسمزبان
همراهی با سیستم عاملشش محورچیزهایی که واقعا بین این دو فرق دارندچرخه توسعه
تیم و استخدامدسترسی بومی

هیچ کدام از این شش محور به تنهایی تصمیم نمی گیرد. تصمیم از ترکیب آنها با پروژه شما درمی آید.

دارت یا جاوااسکریپت؛ کدام برای تیم شما ارزان تر است؟

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

ری اکت نیتیو با جاوااسکریپت و ری اکت نوشته می شود. مستندات خودش می گوید شما با جاوااسکریپت هم به ای پی آی های پلتفرم دسترسی پیدا می کنید و هم ظاهر و رفتار رابط را با کامپوننت های ری اکت توصیف می کنید.

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

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

اکوسیستم را چطور بسنجیم بدون تکیه بر عدد بی منبع؟

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

پس فهرست خودتان را بنویسید. درگاه پرداخت، نقشه، نوتیفیکیشن، دوربین، اسکن بارکد، ورود با حساب، هر چه که هست. بعد برای هر کدام در ثبت کننده بسته همان اکوسیستم جستجو کنید: pub.dev برای دارت و فلاتر، و npm برای جاوااسکریپت.

و سه چیز را در هر بسته نگاه کنید که با شمردن ستاره پیدا نمی شوند. یک، تاریخ آخرین انتشار؛ بسته ای که یک سال است منتشر نشده روی نسخه بعدی سیستم عامل مسئله شماست. دو، اینکه بسته یک SDK بومی را می پیچد یا خودش پیاده سازی کرده؛ بسته ای که SDK رسمی را می پیچد معمولا با به روزرسانی آن SDK هم راه می آید. سه، اینکه issue های باز درباره همان پلتفرمی هستند که برای شما مهم است یا نه.

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

یک بسته را قبل از تکیه کردن به آن چطور بسنجیم

برگه ارزیابی یک بستهپیش از انتخاب

این ها را نگاه کنید

  • تاریخ آخرین انتشار و اینکه با آخرین نسخه سیستم عامل تست شده
  • اینکه SDK رسمی را می پیچد یا خودش از نو نوشته
  • issue های باز روی همان پلتفرمی که برای شما مهم است
  • مجوز و اینکه با استفاده تجاری شما سازگار است

این ها را ملاک نگیرید

  • عدد سهم بازار در مقاله های مقایسه
  • تعداد ستاره بدون نگاه کردن به تاریخ آخرین کامیت
  • اینکه یک شرکت بزرگ اسمش را جایی برده است

این برگه در هر دو اکوسیستم یکسان کار می کند. تعداد ستاره در هیچ کدامشان نیست، چون چیزی درباره نگهداری نمی گوید.

پس کدام را انتخاب کنم؟

سه سوال، به همین ترتیب. اول، تیم شما امروز چه بلد است؟ اگر ری اکت می نویسند، ری اکت نیتیو انتخاب پیش فرض است و برای دور شدن از آن باید دلیل داشته باشید. دوم، رابط اپ چقدر اختصاصی است؟ اگر طرح شما پر از حرکت و شکل های غیراستاندارد است و باید روی هر دو پلتفرم مو به مو یکسان باشد، فلاتر همان چیزی است که برای این کار ساخته شده. سوم، چند SDK بومی باید وصل شود؟ هر چه این عدد بزرگ تر باشد، وزن اکوسیستمی که بسته زنده دارد بیشتر می شود، و این را باید برای پروژه خودتان بسنجید نه به طور کلی.

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

یک استثنای واقعی هم هست. اگر اپ شما بازی است یا رابط سنگین گرافیکی دارد، هیچ کدام از این دو جواب پیش فرض نیست و باید سراغ ابزار همان حوزه بروید. و اگر اپ فقط یک نسخه موبایلی از سایت شماست، شاید اصلا به اپ احتیاج ندارید؛ این سوال را قبل از انتخاب فریمورک بپرسید، نه بعدش.

تصمیم، از آنچه دارید شروع می شود نه از آنچه بهتر است

تیم شما امروز کدام را می نویسد؟

اگر ری اکت و وب می نویسند

ری اکت نیتیو

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

فلاتر

  • یکسان بودن دو پلتفرم را رایگان می دهد
  • طرح اختصاصی و حرکت زیاد ارزان تر درمی آید
  • در عوض به روزرسانی ظاهر با شماست

این درخت وقتی کار می کند که اپ یک اپ کسب و کار باشد. برای بازی هیچ کدام از دو شاخه جواب نیست.

مسیر سریع با هوش مصنوعی

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

  1. فهرست قابلیت ها را به زبان ساده بنویسید، هر کدام یک جمله. مثل: کاربر با شماره موبایل وارد می شود، سفارش می دهد، پرداخت می کند، وضعیت سفارش را با نوتیفیکیشن می گیرد.
  2. نسخه پایین را اجرا کنید. خروجی یک جدول است، نه یک توصیه.
  3. اسم هر قابلیت پلتفرم را که جدول داد، در مستندات رسمی همان پلتفرم جستجو کنید. اگر اسمی که مدل داده در مستندات پیدا نشد، همان جا متوقف شوید؛ یعنی مدل اسم ساخته است.
  4. حالا و فقط حالا، برای همان چند قابلیت در pub.dev و npm جستجو کنید و برگه ارزیابی بالای همین صفحه را روی هر بسته اجرا کنید. تصمیم فریمورک از همین جدول درمی آید، نه از مقاله.

نسخه آماده کپی

این فهرست قابلیت های یک اپ موبایل است که قرار است روی اندروید و iOS منتشر شود.

برای هر قابلیت یک ردیف جدول بده، با این چهار ستون و بدون هیچ توضیح اضافه:
۱) خود قابلیت، به همان جمله ای که نوشتم.
۲) «رابط» یا «قابلیت پلتفرم». اگر فقط صفحه و فرم و فهرست و پیمایش است، رابط. اگر به سخت افزار یا به یک سرویس سیستم عامل وصل می شود، قابلیت پلتفرم.
۳) فقط برای ردیف های قابلیت پلتفرم: نام آن قابلیت در سطح سیستم عامل، جدا برای اندروید و برای iOS. اسم ای پی آی یا چارچوب رسمی خود پلتفرم را بنویس.
۴) یک ریسک کوتاه: چیزی که در آن قابلیت معمولا در عمل خراب می شود.

قاعده های سختگیرانه:
- هیچ اسم بسته یا کتابخانه شخص ثالثی ننویس. هیچ شماره نسخه ای ننویس.
- توصیه نکن کدام فریمورک بهتر است. جدول را بده و تمام.
- اگر برای یک ردیف مطمئن نیستی، در ستون سوم بنویس «نامطمئن» و حدس نزن.

قابلیت ها:
{فهرست قابلیت ها}

قبل از اعتماد به خروجی: ستون سوم همان جایی است که مدل ممکن است اسم بسازد، و اسم ساختگی دقیقا شبیه اسم واقعی به نظر می رسد. هر نامی را که داد، در مستندات رسمی اندروید و اپل جستجو کنید؛ اگر پیدا نشد، آن ردیف را دور بیندازید. و هیچ تصمیمی درباره فریمورک از دل این جدول نگیرید تا وقتی خودتان بسته های واقعی را در pub.dev و npm ندیده اید. جدول فهرست چیزهایی است که باید بررسی کنید، نه نتیجه بررسی.

هوش مصنوعی در این کار

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

ابزارهایی که واقعا کمک می کنند

  • Claude برای شکستن نیازمندی ها به قابلیت های پلتفرم و برای خواندن کد یک بسته قبل از تکیه کردن به آن خوب جواب می دهد. ایران در هیچ کدام از دو فهرست کشورهای پشتیبانی شده انتروپیک نیست؛ این را از صفحه خود انتروپیک خوانده ایم.
  • Gemini برای پاس های حجیم تر روی کد و برای خلاصه کردن مستندات مقرون به صرفه است. صفحه خود گوگل می گوید اپ وب جمنای در بیش از دویست و سی کشور و منطقه کار می کند و ایران در آن فهرست نیست.
  • Claude Code وقتی به مرحله کد رسیدید، ابزار خط فرمان کار را روی مخزن واقعی انجام می دهد نه روی متن چسبانده شده. کلاد کد روی همان حساب انتروپیک کار می کند و ایران در فهرست کشورهای پشتیبانی شده نیست.

کجا نتیجه معکوس می دهد

یک خطر مشخص اینجا هست و اسم بسته دارد. وقتی از مدل بپرسید برای فلان کار کدام بسته را نصب کنم، جواب معمولا اسمی است که موجه به نظر می رسد، و اگر آن اسم واقعا وجود نداشته باشد شما یک نام خالی در ثبت کننده بسته جستجو کرده اید. مشکل وقتی جدی می شود که کسی همان نام را ثبت کند. این همان علتی است که در نسخه بالا نوشتیم مدل حق ندارد اسم بسته بدهد: شما اسم قابلیت پلتفرم را می گیرید و بسته را خودتان در pub.dev و npm پیدا می کنید.
خطر دوم نرم تر است و ما در جلسه های مشاوره زیاد دیده ایمش: مدل به هر دو فریمورک مثبت جواب می دهد، چون هر دو در داده هایش ستایش شده اند. اگر بپرسید «آیا فلاتر برای پروژه من خوب است» جواب بله می گیرید و اگر همان سوال را با ری اکت نیتیو بپرسید هم بله می گیرید. موضع ما: از مدل نخواهید انتخاب کند؛ از او بخواهید کاری را که باید بررسی کنید فهرست کند. برای اینکه بدانید هر ابزار از ایران چطور قابل پرداخت است، راهنمای خرید را ببینید.

منبع ها: Flutter FAQ: does Flutter use the built-in platform widgets React Native docs: Core Components and Native Components Anthropic: supported countries Google: where Gemini Apps are available

حد این توصیه

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

از تجربه خود ما

همین انتخاب معماری را ما روی وب گرفته ایم و صورتحسابش را هم پرداخته ایم. تمام شکل های این سایت، از نمودار تا چارت، با کتابخانه آماده کشیده نمی شوند: قالب rgb.ir کتابخانه شکل خودش را دارد با ۵۲ کهن الگو، و هر کدام یک تابع rgb_dg_* در فایل های inc/diagram*.php است. سنجه اش ساده است و خودتان می توانید بشمارید: در assets/css/diagram.css تعداد url( صفر است، یعنی هیچ تصویری بارگذاری نمی شود، و هیچ فایل جاوااسکریپتی در پوشه assets/js به این شکل ها دست نمی زند.
سود این انتخاب همان سود فلاتر است: خروجی روی هر صفحه ای یکسان است و هیچ کتابخانه شخص ثالثی وسط راه از دست نمی رود. هزینه اش هم همان هزینه فلاتر است و ما امسال پرداختیمش: وقتی بخش آموزش همین سایت به شکل هایی نیاز داشت که نداشتیم، کسی آنها را برایمان نساخت. فایل inc/diagram-lib2.php پانزده کهن الگوی تازه دارد که خودمان نوشتیم. کتابخانه آماده آن پانزده تا را رایگان می داد و در عوض ظاهرش را خودش تعیین می کرد. این دقیقا همان معامله ای است که این درس درباره اش است.

سوال هایی که واقعا پرسیده می شوند

کدام یک سریع تر است؟

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

با این دو می شود نسخه وب و دسکتاپ هم گرفت؟

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

اگر بعدا پشیمان شویم، مهاجرت چقدر سخت است؟

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