آنچه در این مقاله میخوانید
مقایسه React Native و Flutter
۵ شهریور ۱۳۹۹
بهعنوان توسعهدهندگان نرمافزار، همیشه به دنبال ابزارهایی هستیم که فرآیند توسعه را سریعتر، سادهتر و کارآمدتر کنند. یکی از مهمترین خواستههای ما، توانایی تولید یک کد پایه و اجرای آن در پلتفرمهای مختلف است. این خواسته امروز دیگر یک رویا نیست. با ظهور فناوریهایی مانند React Native و Flutter، حالا میتوانیم برنامههایی بسازیم که همزمان روی Android، iOS، وب و حتی دسکتاپ اجرا شوند.
در این مقاله قصد داریم بهصورت جامع این دو فریمورک پرکاربرد را با هم مقایسه کنیم. ابتدا نگاهی کلی به ویژگیهای کلیدی آنها خواهیم داشت، سپس بررسی میکنیم که هرکدام در زمینه توسعه وب چه قابلیتهایی ارائه میدهند و در نهایت، نقاط قوت و ضعفشان را تحلیل میکنیم. پس از مطالعه این مطلب، درک دقیقتری از مزایا، محدودیتها و کاربردهای Flutter و React Native بهدست خواهید آورد تا بتوانید انتخاب مناسبتری برای پروژه بعدیتان داشته باشید.
در ادامه خواهید خواند:
- مقایسه React Native و Flutter
- Flutter web
- React Native Web
- جنبههای مثبت و منفی Flutter
- جنبههای مثبت و منفی React Native
- جمع بندی

مقایسه React Native و Flutter
برای مقایسهای دقیقتر و کاربردیتر میان دو فریمورک محبوب React Native و Flutter، ابتدا بهتر است نگاهی کلی به ویژگیهای پایهای آنها داشته باشیم. در ادامه، علاوهبر بررسی نسخههای وب یعنی React Native Web و Flutter for Web، تجربه کلی توسعه با هر پلتفرم را نیز مرور خواهیم کرد. سعی شده مطالب بهصورت خلاصه، قابلفهم و کاربردی ارائه شوند تا در نهایت بتوانید انتخاب مناسبی برای پروژه بعدیتان داشته باشید.
نحوه برقراری ارتباط این پلتفرمها با افراد مبتدی
یکی از موارد مهم در انتخاب یک فریمورک، این است که آیا یک فرد مبتدی میتواند با حداقل دانش اولیه وارد فضای توسعه شود و در مدت زمان معقولی به یک خروجی قابل استفاده برسد یا خیر.
React Native
شروع کار با React Native (بهویژه با استفاده از Expo) بسیار ساده و سریع است. مراحل راهاندازی به این صورت است:
- نصب Node.js
- نصب Expo CLI
- ساخت یک پروژه جدید
- نصب اپلیکیشن Expo Go روی موبایل
- اجرای پروژه
برای فعالسازی پشتیبانی از وب نیز تنها کافی است وابستگیهای مربوط به وب را نصب کرده و با یک دستور ساده، پروژه را در مرورگر اجرا کنید.
مزیت اصلی این پلتفرم، راهاندازی آسان و مناسب برای توسعهدهندگان وب است که از قبل با JavaScript آشنایی دارند.
Flutter
راهاندازی Flutter نسبت به React Native پیچیدهتر است و مراحل بیشتری دارد:
- دانلود Flutter SDK
- نصب ابزارهایی مانند Git، curl و zip
- اضافهکردن مسیر SDK به متغیرهای محیطی (PATH)
- نصب Android Studio و در صورت نیاز Xcode
- ساخت پروژه و اجرای آن
برای اجرای پروژه روی وب نیز چند مرحله تکمیلی نیاز است. بهطور کلی، اگر کار با ترمینال یا تنظیمات سیستمعامل برایتان تازگی دارد، ورود به Flutter ممکن است کمی چالشبرانگیز باشد.بهنظر میرسه، اما اگه با خط فرمان و نصب ابزارها آشنا نباشید، ممکنه یه مقدار ترسناک بهنظر برسه. برای یه مبتدی واقعی، React Native ورود نرمتری داره.
جامعه کاربری
داشتن یک جامعه کاربری فعال و گسترده، مزیتی مهم برای هر پلتفرم محسوب میشود. این موضوع به معنی دسترسی بهتر به آموزشها، کتابخانهها، انجمنها و حل سریعتر مشکلات فنی است.
در این زمینه، React Native برتری دارد. از آنجا که این فریمورک زودتر از Flutter معرفی شده و بر پایه JavaScript توسعه یافته، مورد استقبال گستردهتری قرار گرفته است. بسیاری از توسعهدهندگان وب نیز بهراحتی میتوانند وارد فضای توسعه موبایل با React Native شوند.
پشتیبانی از افزونه
یکی از نیازهای اصلی توسعهدهندگان، دسترسی به افزونهها و کتابخانههای آماده است که سرعت توسعه را بالا میبرند.
- Flutter از سیستم افزونه نسبتاً کاملی برخوردار است. بسیاری از قابلیتهای رایج مانند احراز هویت با حسابهای گوگل یا نمایش نقشه با Google Maps با استفاده از پلاگینهای رسمی قابل پیادهسازی هستند.
- React Native بهدلیل اتصال به مخزن npm، امکان استفاده از طیف وسیعی از کتابخانههای JavaScript را فراهم میکند. البته برخی از پکیجها که به Node وابستهاند یا نیاز به اتصال Native دارند، ممکن است به پیکربندیهای اضافی نیاز داشته باشند.
در این بخش، React Native بهدلیل تنوع بالای کتابخانهها و ابزارها، انتخاب گستردهتری در اختیار توسعهدهندگان قرار میدهد.
مقایسه Angular و React، کدام را انتخاب کنیم؟
مقایسه Angular و React
بهرهوری توسعهدهنده (قابلیتهای ویژهای که هر پلتفرم به توسعهدهنده ارائه میدهد)
یکی از عوامل دیگری که در این مقایسه به آن میپردازیم، بهرهوری توسعهدهنده است. این مورد میتواند در موارد مختلفی بررسی شود.
زبان برنامهنویسی
- React Native با JavaScript توسعه مییابد، زبانی که برای بسیاری از توسعهدهندگان وب آشناست.
- Flutter مبتنی بر زبان Dart است. یادگیری Dart نسبتاً آسان است، اما نسبت به JavaScript جامعه کوچکتری دارد.
برای کسانی که از پیش با JavaScript کار کردهاند، React Native انتخاب طبیعیتری خواهد بود.
مستندات
- مستندات Flutter ساختاریافته، دقیق و جامع است.
- مستندات React Native سادهتر و در بسیاری از موارد برای افراد مبتدی قابل فهمتر است، اما گاهی پراکنده و وابسته به مستندات کتابخانههای جانبی میشود.
در مراحل ابتدایی، سادگی مستندات React Native کمک بزرگی است؛ اما با افزایش تجربه، مستندات متمرکز و دقیق Flutter عملکرد بهتری دارد.
ساختار کد
در هر دو پلتفرم، نحوه ساختاردهی به کد به انتخاب توسعهدهنده و تیم بستگی دارد. اگر از ابزارهایی مانند Redux در React Native یا Bloc در Flutter استفاده شود، ساختار مشخصی لازم خواهد بود.
ابزار توسعه
ویژگی Hot Reload که امکان مشاهده تغییرات لحظهای در زمان کدنویسی را فراهم میکند، در هر دو پلتفرم وجود دارد. البته در Flutter این قابلیت سرعت و پایداری بیشتری دارد.
از نظر تجربه خطایابی (Debugging)، Flutter عملکرد بهتری ارائه میدهد. پیامهای خطا در این پلتفرم شفافتر و قابل درکتر هستند.
کامپوننتهای رابط کاربری (UI)
در React Native، کامپوننتها به کامپوننتهای Native تبدیل میشوند؛ بنابراین ظاهر برنامه مشابه اپلیکیشنهای بومی است.
Flutter از موتور رندرینگ اختصاصی خود استفاده میکند و رابط کاربری را از پایه طراحی میکند. این موضوع انعطاف طراحی بیشتری را فراهم میکند، اما ممکن است در برخی دستگاهها تفاوتهایی با رابط بومی ایجاد شود.
مجموعه ویجتهای Flutter بسیار غنی است، اما در برخی موارد تعداد ابزارکهای ارائهشده برای Android از iOS بیشتر است.
دسترسی به Native API
هر دو پلتفرم React Native و Flutter، از Native APIها پشتیبانی میکنند که برای کار با قابلیتهایی مانند گرفتن عکس یا geolocation از آنها استفاده میشود. اگر به عملکرد Native نیاز دارید که البته هنوز در دسترس نیست، میتوانید کدهای اختصاصی پلتفرم خود را بنویسید و یا ماژولهای Native خود را بسازید.
عملکرد برنامه
قضاوت درمورد عملکرد برنامه، دشوار است زیرا صرفا بستگی به نوع برنامهای دارد که قصد ساخت آن را دارید. اگر برنامهتان به طرحبندیهای پیچیده، transitions و ارسال دادهها به بخش Native و یا دریافت آنها، نیازی ندارد، میتوانید هرکدام از پلتفرمهایی را که دوست دارید انتخاب کنید.
هرچند اگر بخواهید عملکرد کدها را بررسی کنید، مطمئنا Flutter برنده این رقابت است، زیرا کدهای نوشته شده در این پلتفرم مستقیما به کدهای Native، کامپایل میشوند. برخلاف React Native که مفهومی (concept) مانند رابط جاوااسکریپتی برای ارسال دادهها بین کدهای جاوااسکریپتی و بخش Native ندارد.
نکته اصلی و مهم، این است که Flutter عملکرد بهتری نسبت به React Native دارد.
پشتیبانی از وب
React Native و Flutter، از وب پشتیبانی میکنند. React Native بیشتر برپایه جامعهکاربری توسعه پیدا میکند. درصورتی که Flutter را تیم توسعهاش رهبری میکند. پشتیبانی از وب در React Native، بالغتر از Flutter است. یکی از موارد مهم که میتوان به آن اشاره کرد، شما با استفاده از مستندات میتوانید پشتیبانی از وب را به پروژه فعلیتان که با React Native توسعه داده شده، اضافه کنید.
آزمایش و استقرار برنامه
آیا این پلتفرمها از تست و استقرار خودکار پشتیبانی میکنند؟ این موضوع برای پروژههای کوچکتر میتواند اختیاری باشد اما برای پروژههای بزرگتر، ضروری است زیرا به ما کمک میکند تا از بروز مشکلهای مختلف در برنامههای خود جلوگیری کنیم و در فرایند استقرار دستی دچار مشکل نشویم.
در زمان نوشتن این مقاله، React Native از این قابلیت پشتیبانی نمیکند. درعوض، فقط دستورالعملهایی درباره نحوه تهیه برنامه برای استقرار در app store وجود دارد اما از آنجا که برنامهها بیشتر با زبان جاوااسکریپت نوشته شدهاند، ابزارهای تست مانند Jest و Enzyme میتوانند در تامین نیاز به تست خودکار برنامه، جوابگوی ما باشند. علاوهبر این دو ابزار، فریمورکهایی مانند Detox میتوانند برای تستهای end-to-end مورد استفاده قرار گیرند.
اما در پلتفرم Flutter، تست بهصورت داخلی (built-in) پشتیبانی میشود و برای استقرار برنامه میتوان از fastlane، Bitrise، Cirrus CI و codemagic بهخوبی استفاده کرد.
فلاتر (Flutter) چیست؟
فلاتر (Flutter)
Flutter web
Flutter web بر پایه Flutter توسعه یافته و این قابلیت را در اختیار شما قرارمیدهد که کدهای Dart خود را که برای ساخت برنامه Flutter نوشتهاید، به کدهای HTML، CSS و جاوااسکریپت، کامپایل کنید.
Flutter Web مانند Flutter، برروی اندروید و iOS کارمیکند. تفاوت Flutter و Flutter Web در این است که بهجای استفاده از کتابخانه گرافیکی Skia که برای رندرکردن ابزارکها و موتور Flutter که برنامه شما بر روی آن اجرا میشود، از موتور Flutter web و کامپایلر dart2js استفاده میکند. مسئولیت موتور Flutter web این است که ابزارکهای شما را بهصورت برنامهای معادل در وب کامپایل کند. درحالی که کامپایلر dart2js، کدهایی که به زبان Dart نوشتهاید را به کدهای جاوااسکریپت کامپایل میکند تا در مرورگر وب اجرا شود.
برنامههای ایجاد شده توسط Flutter بهصورت canvas رندر میشوند، بنابراین کاملا متفاوت از وبسایتهای معمول، عمل میکنند. بهاینصورت، وبسایتهای ایجاد شده توسط Flutter بیشتر شبیه Flash هستند و حس یک وبسایت معمولی با کدهای HTML را به ما نمیدهند. بنابراین هدف اصلی Flutter Web، ایجاد برنامههای تحت وب بهجای وبسایت است.
درمورد ابزارکها Flutter Widget Livebook وجود دارد، با استفاده از Flutter web ساخته شده است و به شما اجازه میدهد پیشنمایش ابزارکهایی که برای رندر شدن بهصورت وب دردسترس هستند را مشاهده کنید. وقتی صحبت از افزونهها درمیان باشد، باید گفت که همه آنها قابلیت پیادهسازی در وب را ندارند (مانند: ARCore، Filesystem access).
Flutter web هنوز برای تولید محصول آماده نیست. یکی از موارد و مشکلهایی که در محصولهای Flutter web وجود دارد، SEO-friendly و screen-reader-friendly نبودن این محصولها است. همه چیز در سمت کاربر رندر میشود و در نتیجه بارگیری اولیه وبسایت کندتر پیش میرود. همچنین پشتیبانی از native scrollbarها وجود ندارد، زیرا همه چیز تحت کنترل Flutter درمیآیند.
اگر SSR (Server-Side Rendering) برای شما اهمیت دارد، این قابلیت در Flutter web پشتیبانی نمیشود. البته به عنوان نقطه عطفی برای آینده برنامه ریزی شده است ولی به این زودیها در دسترس قرار نمیگیرد.
جنبههای مثبت
- مجموعه ویژگیهای موجود به اندازه کافی کامل است و به توسعهدهندگان امکان میهد تا وبسایتهای تعاملی ایجاد کنند.
- دسترسی به همان ابزارکهایی که در Flutter موبایل در دسترس هستند.
- دسترسی کامل به تمام کتابخانههایی که در زبان Dart بر روی وب اجرا میشوند.
- یکپارچگی با IDEها و ویرایشگرهای متنی مختلف مانند IntelliJ و VS Code.
جنبههای منفی
- عملکرد نامطلوب.
- آمادگی نداشتن برای تولید محصول.
- تمام کتابخانههای جاوااسکریپت پشتیبانی نمیشوند و فقط میتوانید از پکیجهای Dart’s JS-interop استفاده کنید.
- ضعف در SEO Friendly و Screen Reader.
- mobile-friendly نبودن پروژههایی که با flutter web ساخته شدهاند، زیرا اندازه canvasها بزرگ است و منابع سختافزاری زیادی را مصرف میکنند.
- نمیتوانید متنی را select، copy و یا paste کنید.
- عملیات دیباگینگ بسیار سخت است زیرا شما نمیتوانید از ابزار دیباگینگ داخلی مرورگر استفاده کنید.
- در حال حاضر بیشتر برای ساختار برنامهها و بازیهای وب مناسب است تا وبسایتهای معمولی.
- از مرورگرهای قدیمی پشتیبانی نمیکند.
با هاست React لیارا، اپلیکیشن خود را با سرعت و امنیت بالا مدیریت کنید.
✅ استقرار آسان ✅ منابع بهینه ✅ آپتایم ۹۹٪
خرید هاست React
React Native Web
React Native Web یک پروژه متنباز است که توسط Nicolas Gallagher توسعه داده شده و با استفاده از آن، توسعهدهندگان وب قادر خواهند بود که از کامپوننتهای React Native و APIها، در وب استفاده کنند. مزیت بارز این قابلیت امکان اشتراکگذاری کد، بین چند پلتفرم است. بنابراین شما فقط یک کد مینویسید و در ادامه میتوانید آن را در هر جایی اجرا کنید.
یکی از اولین سوالهایی که در ذهن شما ایجاد میشود این است که چرا باید بهجای استفاده از React، از React Native web استفاده کنیم؟ پاسخ آن هم در اشتراکگذاری کدها است. اگر شما از React استفاده کنید، واقعا نمیتوانید از مزیت ابزارهایی که در React Native وجود دارند، بهرهمند شوید و اینگونه باید دو دفعه کدنویسی عملکردهای مورد نیازتان را انجام دهید.
البته توجه داشته باشید، تمام کامپوننتهای Native و APIها، در دسترس نیستند زیرا همه آنها web APIهای یکسانی ندارند. اصلیترین کاری که React Native Web انجام میدهد، معادل سازی برای هر یک از کامپوننتهای React Native و API است. مثلا، کامپوننتهای <View>
به <div>
، یا <Image>
به <img>
تبدیل میشوند.
دومین سوالی که ممکن است به ذهن خطور کند، تفاوت میان React Native Web و Expo Web است. چگونه باید متوجه شویم که از کدام یک استفاده کنیم؟ همانگونه که برای پروژههای React Native یک CLI route استاندارد وجود دارد، یک سیستم routing سریعتر هم بهنام Expo موجود است.
Expo Web یکی از ابزارهایی است که در ساخت پروژههای Expo به شما کمک میکند. بنابراین اگر یک پروژه از قبل داشته باشید، تصمیم اصلی این بوده است که از CLI استاندارد استفاده کنید یا بهجای آن بخواهید از مزیتهای Expo بهرهمند شوید. بااینحال، اگر پروژه جدیدی دارید، این مورد فقط به کلیت پروژهتان مربوط میشود. اگر فکر میکنید به تعداد زیادی کتابخانههای شخص ثالث همراه با پیشنیازهای Native نیاز دارید، پس بهتر است از React Native CLI استاندارد استفاده کنید. درغیر اینصورت، هیچ دلیلی برای استفاده نکردن از Expo وجود ندارد، زیرا بسیاری از موارد پیش رو را برای شما راحتتر میکند.
React Native Web آمادگی بیشتری نسبت به Flutter Web، برای ساخت محصولها دارد. بنابراین توسعهدهندگانی که قصد استفاده از آن را دارند، باید در موارد دیگری نگران باشند:
- تمام تفاوتهای موجود در مقایسه پلتفرمهای اندروید و iOS، در وب نیز صادق هستند. این بدان معناست که کدهای React Native موجود، بلافاصله نمیتوانند در React Native Web اجرا شوند. باید تفاوتهای موجود در پلتفرمها را تشخیص داده و اصلاحهای مورد نیاز را در کدهای خود انجام دهید. این موضوع به ویژه در مواردی مانند FileSystem صادق است.
- تمام APIهای موجود در React Native، در مرورگر موجود نیست. یعنی اگر یک برنامه React Native داشته باشید، نیاز است که مجددا عملکردهای آن را بازنویسی کرده یا بهراحتی میتوانید از پشتیبانی کردن بعضی قابلیتها چشم پوشی کنید. برای نمونه، API ویرایشگر تصویر.
- همه کامپوننتهایی که در React Native یا Expo ساخته شدهاند، در وب کار نمیکنند. برای نمونه میتوان به کامپوننت Model اشاره کرد. گاهی اوقات یک توسعهدهنده وجود دارد که نسخه دیگری که در وب اجرا میشود را منتشر میکند، اما در مواردی که اینگونه نیست، شما مجبور به ساختن کامپوننت مورد نیازتان هستید. همین موضوع در مورد کتابخانهها نیز صادق است، توسعهدهندگان نیاز دارند نسبت به نیازهایشان، کتابخانهای برای وب بنویسند.
React چیست و چه کاربردی دارد؟ با مشهورترین برنامههای تحت وب React آشنا شوید
React چیست
جنبههای مثبت
- مانند React Native، در React Native Web هم ابزارهایی وجود دارند که به توسعهدهندگان اجازه میدهند برنامههایی با قابلیت دسترسی مناسب با استفاده از accessibility propهایی مانند
accessibilityLabel
وaccessibilityRole
بسازند. - امکان اجرای کدهای اختصاصی وب با استفاده از قابلیت تشخیص پلتفرم، وجود دارد. البته نمیتوانیم انتظار داشته باشیم که تمام APIها بهخوبی کار کنند. بنابراین تشخیص پلتفرمی که میخواهید کدهایتان بر روی آن اجرا شود بسیار مهم است.
- از server-side rendering پشتیبانی میکند. شما میتوانید از
AppRegistery
برای hard-code کردن فایل HTML استفاده کنید که از آن برای رندر کردن برنامه استفاده میشود. - Expo web server، بهعنوان پوشانندهای برای React Native Web است که قابلیت اجرای پروژه با Expo بر روی اندروید، iOS و وب را به شما میدهد. حتی میتوان از آن در برنامههای تحت دسکتاپ مبتنی بر Electron هم استفاده کرد.
- Expo web از PWA (Progressive Web Apps) پشتیبانی میکند.
جنبههای منفی
- در زمان نوشتن این مقاله، نسخه بتا React Native web در دسترس است، بنابرین هنوز آمادگی تولید برنامههای کاربردی را ندارد.
- پکیجهای React Native با پیشنیازهای Native، نمیتوانند بر روی وب اجرا شوند. اگر شما به پکیجهای شخص ثالث با پیشنیازهای Native (مانند: Swift، Objective-C یا کدهای جاوا و یا کاتلین) تکیه کردهاید، آنها در وب کار نخواهند کرد.
- نمیتوان از پکیجهای React Native بدون وابستگیهای Native انتظار داشت که ۱۰۰ درصد بهخوبی کار کنند. این امر بهویژه در صورتی که پکیجها شامل animations، transitions، gestures، keyboard و lists باشند، صادق است.
جنبههای مثبت و منفی Flutter
برای جمعبندی مقاله، اجازه دهید مواردی که در هر پلتفرم مفید بوده است را بررسی کنیم. اولین موردی که به آن میپردازیم Flutter است. توجه داشته باشید که ما نمیخواهیم به نکتههای خوب و بدی بپردازیم که در هر دو پلتفرم مشابه هستند. این نکتهها میتوانند در تصمیمگیری قطعی شما برای انتخاب یک پلتفرم، دخیل باشند:
جنبههای مثبت
- عملکرد بسیار نزدیک به کدهای Native است زیرا کدهای شما به کدهای Native کامپایل میشوند.
- تعداد زیادی ابزارک داخلی برای طراحی Material و Cupertoni وجود دارند.
- پشتیبانی داخلی از تست برنامه.
- مستندات دقیق و منظم.
جنبههای منفی
- پیامهای خطا معنی بیشتری پیدا میکنند زیرا زبان Dart بهصورت strong typed است.
- روند یادگیری زبان مورد نیاز این پلتفرم و استفاده از آنها در Flutter کمی سخت است.
جنبههای مثبت و منفی React Native
اکنون به جوانب مثبت و منفی در React Native میپردازیم:
جنبههای مثبت
- جامعه کاربری بزرگی دارد.
- برای مبتدیان آسان است.
- از طریق ماژولهای npm به اکوسیستم زبان جاوااسکریپت دسترسی خواهید داشت.
جنبههای منفی
- اجرای آهستهتر قابلیت hot reloading، در مقایسه با پروژههای استاندارد React Native.
- مستندات پراکنده هستند و چندان هم کامل نیستند.
- کامپوننتهای Native UI محدودی دارد.
- ابزاری بهطور رسمی برای تست این پلتفرم، موجود نیست.
کار با hookها در React
hookها در React
جمع بندی
در انتخاب بین React Native و Flutter، هیچ جواب قطعی درست یا غلطی وجود ندارد. تصمیمگیری باید بر اساس نیازهای پروژه، تجربه تیم و اولویتهای شما انجام شود. اگر پروژه شما نیاز به تعاملات روان و استفاده گسترده از وب دارد، React Native Web گزینه آمادهتر و مناسبتری است، چون کدهای آن به راحتی به HTML، CSS و JavaScript تبدیل میشوند.
در مقابل، Flutter Web هنوز به دلیل مشکلات عملکردی و نحوه رندر با Canvas، برای پروژههای تولیدی مناسب نیست، هرچند تیم Flutter روی بهبود آن کار میکند و احتمالاً در آینده شرایط بهتر خواهد شد.
در نهایت، دسترسی به چندین گزینه قدرتمند، فرصت خوبی برای توسعهدهندگان فراهم کرده تا با توجه به نیازهای خاص خود، بهترین انتخاب را داشته باشند.
منبع: https://blog.logrocket.com/react-native-web-vs-flutter-web