مقایسه React Native و Flutter

ما به عنوان توسعه‌دهنده، همیشه در جستجوی ابزاری هستیم که به ما امکان صرفه‌جویی در وقت و انرژی را می‌دهد. ما می‌خواهیم قادر به نوشتن کدهایی باشیم که بتوانیم آن‌ها را در همه جا اجرا کنیم. با تکنولوژی‌های React Native و Flutter، این رویا به آرامی در حال تبدیل شدن به واقعیت است، زیرا اکنون می‌توانیم برنامه‌هایمان را در اندروید، iOS و حتی در وب و دسکتاپ نیز اجرا کنیم. این موضوع بسیار خوشحال کننده است.

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

مقایسه React Native و Flutter

برای اینکه مقایسه‌مان تاثیرگذارتر شود، React Native Web و Flutter برای وب را مورد بررسی قرار می‌دهیم اما مهم است که در ابتدای مقاله پلتفرم‌های اساسی‌تر را بررسی کنیم. البته در ادامه، نه‌تنها قابلیت‌های وب بلکه تجربه کلی این پلتفرم‌ها را با یکدیگر مقایسه خواهیم کرد. همچنین سعی داریم، این مقایسه‌ها تا حد امکان مختصر بمانند.

در ادامه مقاله از معیارهای زیر برای مقایسه این پلتفرم‌ها استفاده خواهیم کرد:

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

نحوه برقراری ارتباط این پلتفرم‌ها با افراد مبتدی

یک فرد مبتدی چقدر سریع می‌تواند با کم‌ترین دانش، یادگیری این پلتفرم‌ها را شروع کند و درنهایت یک برنامه کارآمد بسازد؟

در React Native، پنج مرحله وجود دارد:

1. نصب Node.js،
2. نصب Expo CLI،
3. ایجاد یک پروژه جدید،
4. نصب Expo Mobile بر روی تلفن همراه،
5. اجرای پروژه.

یک مرحله دیگر برای اجرای React Native بر روی وب، لازم است. اما بسیار ناچیز به‌حساب می‌آید زیرا تنها نیاز به اجرای دستور نصب وابستگی‌های وب است.

مراحل بالا راهنمای سریعی برای شروع کار با React Native است، شما نیاز به زمان بیشتری برای تنظیم مسیریابی‌های CLI بر روی سیستم خود دارید. گرچه این کاری است که یک مبتدی به‌ندرت باید آن را انجام دهد زیرا بیشتر APIهای Native قبلا در Expo پیاده‌سازی شده‌اند.

در سمت دیگر، آماده‌سازی محیط توسعه Flutter به‌صورت مختصر به‌شرح زیر است:

1. دانلود Flutter SDK،
2. نصب ابزارهای پیش‌نیاز توسعه‌ای مانند: curl، zip، git،
3. اضافه کردن مسیر Flutter SDK به System Path،
4. نصب Android Studio و Xcode،
5. ساخت پروژه جدید،
6. اجرای پروژه.

برای راه‌اندازی وب، چند مرحله اضافی وجود دارد که باید آن‌ها را طی کنید. به‌نظر می‌رسد برای شروع بسیار ساده است، اما می‌تواند برای یک مبتدی و فرد کم‌تجربه یا بدون تجربه، کار با خط فرمان (command line) و نحوه نصب ابزارهای مختلف بسیار دلهره‌آور باشد.

جامعه کاربری

جامعه کاربری فعال یکی دیگر از اصل‌های مهم، هنگام انتخاب یک پلتفرم است. این جامعه در نهایت باعث دسترسی به تعداد بیشتری کتابخانه، افزونه، آموزش‌، انجمن و پرسش‌وپاسخ‌های Stack overflow می‌شود، همچنین GitHub issueهای بیشتری مورد بررسی قرار می‌گیرند و ایمنی کار ما بالاتر می‌رود.

بدون شک، برنده این قسمت را می‌توان React Native دانست زیرا بیشتر از دو سال است که در این زمینه پیشروی می‌کند. همچنین گزینه مناسب و محبوبی برای توسعه‌دهندگان وب است که به توسعه برنامه‌هایی برای تلفن‌های همراه می‌پردازند زیرا از جاوااسکریپت و CSS برای طراحی ظاهری برنامه‌های React Native استفاده می‌شود.

پشتیبانی از افزونه

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

Flutter دارای یک سیستم افزونه (plugin system) بسیار مناسب و معقول است که بیشتر عملکردهایی که معمولا در برنامه‌های تلفن همراه استفاده می‌شوند (مانند ورود به شبکه‌های اجتماعی یا حساب Google Maps)، را می‌توان به‌کمک آن سیستم افزونه، پیاده‌سازی کرد.

در این مرحله هم React Native برنده این رقابت است به این دلیل که ما تقریبا از هر ماژول npm، می‌توانیم در برنامه خود استفاده کنیم (به‌جز آن ماژول‌هایی که برای node هستند و پیش‌نیازهای native دارند).

بهره‌وری توسعه‌دهنده (قابلیت‌های ویژه‌ای که هر پلتفرم به توسعه‌دهنده ارائه می‌دهد)

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

1. زبان برنامه‌نویسی،
2. مستندات،
3. ساختار کد،
4. ابزار توسعه،
5. کامپوننت‌های رابط کاربری (UI)،
6. دسترسی به Native API.

زبان برنامه‌نویسی

برای ساختن برنامه‌ با React Native باید نحوه کدنویسی با زبان جاوااسکریپت را بدانید، درحالی که برای کار با پلتفرم Flutter باید زبان Dart را بشناسید.

بیشتر افرادی که به‌دنبال راه‌حل‌های ساخت یک برنامه چندسکویی یا Cross-Platform با استفاده از یک کد پایه هستند را می‌توان توسعه‌دهندگان وب دانست. ما می‌خواهیم از دانش موجود در اکوسیستم وب، برای ساخت برنامه‌های موبایل و دسکتاپ مجددا استفاده کنیم. این بدان معناست که React Native یک گزینه مناسب برای توسعه‌دهندگان وب است. ما نیازی به یادگیری زبان دیگری برای ساخت برنامه‌هایمان توسط React Native نداریم.

مستندات

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

مستندات Flutter بسیار سازمان یافته‌تر و دقیق‌تر از React Native هستند. اما وقتی صحبت از مبتدیان درمیان باشد، می‌توان گفت که استفاده از مستندات بسیار طاقت فرسا است زیرا با شاخه‌های زیادی از ارتباطات بین مستندات روبرو می‌شوند و این گیج کننده است. در این بخش، سادگی مستندات React Native بسیار دوست داشتنی‌تر است.

البته باید افزود که ما برای همیشه مبتدی نخواهیم ماند. زمانی که تجربه‌های بیشتری کسب کنیم و بدانیم موارد مورد نیازمان را کجا می‌توانیم پیدا کنیم، راه آسان‌تر می‌شود. اینجاست که مستندات Flutter از React Native پیشی گرفته و کارایی بیشتری را به ارمغان می‌آورد. علاوه بر این‌ها، React Native به تعداد کتابخانه‌های زیادی وابسته است و این مورد باعث می‌شود تا مستندات تکه تکه‌ای را در پیشِ روی خود داشته‌باشیم. در حالی که Flutter، همه چیز را در یک مکان در اختیار ما قرار می‌دهد.

ساختار کد

زمانی‌ که به عنوان یک توسعه‌دهنده جدید، وارد یک پروژه از قبل ایجاد شده می‌شوید، درک چگونگی ساماندهی کدها آسان است؟

در React Native، تقریبا می‌توانید هر ساختاری که در نظر داشته باشید را پیاده‌سازی کنید. معمولا به مقیاس پروژه و ابزارها و کتابخانه‌های مختلفی که تیم توسعه شما، از آن‌ها استفاده می‌کند، بستگی دارد. برای مثال، استفاده از Redux شما را مجبور می‌کند از ساختار خاصی پیروی کنید زیرا شما reducerها، actionها و … را در پیش خواهید داشت.

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

ابزار توسعه

hot reload، یکی از مواردی است که اگر یک پلتفرم از آن پشتیبانی نکند، می‌تواند بسیار آزاردهنده باشد. با استفاده از این قابلیت قادر به تغییر کد خود و مشاهده تغییرها در هنگام کدنویسی هستید، این مورد یک تقویت کننده بزرگ محسوب می‌شود (به‌خصوص زمانی که دو مانیتور داشته باشید).

هردو پلتفرم React Native و Flutter از این ویژگی پشتیبانی می‌کنند اما Flutter در مقایسه با Expo سریع‌تر است. البته در مقایسه با CLI router در React Native تفاوت عملکردی بسیار کمی وجود دارد.

یک نکته مهم دیگر که باید در نظر بگیرید، تجربه دیباگینگ است. در React Native، درک پیام‌های خطا می‌تواند بسیار دشوار باشد. درحالی که در Flutter، به‌دلیل استفاده از زبان Dart پیام‌های خطای با معنی‌تری نمایش داده می‌شود.

کامپوننت‌های رابط کاربری (UI)

کامپوننت‌های React Native به کامپوننت‌های رابط کاربری Native درمی‌آیند، بنابراین تفاوتی را میان برنامه‌های Native و برنامه‌های ساخته‌شده با React Native مشاهده نخواهید کرد.

در طرف دیگر، Flutter با موتور رندرینگ خود، المنت‌های رابط کاربری را طراحی می‌کند که مسئول ایجاد کلیه عملکردهای پایه، برای هر یک از ابزارک‌ها (widgets) است. این‌ها این نتیجه را تداعی می‌کنند که توسعه‌دهندگان Flutter، مداوما در تلاش هستند که رابط کاربری به‌وجود آمده با Native UI، یکسان باشد.

React Native فقط چند کامپوننت اساسی و پایه را ارائه می‌دهد. اگرچه کیت‌های مختلف رابط‌ کاربری نیز وجود دارند، اما هنوز هم نمی‌توانند در برابر مجموعه ابزارک‌های Flutter، حرفی برای گفتن داشته باشند. البته باید افزود که یکی از نکته‌های منفی موجود در Flutter، تعداد بالای ابزارک‌های موجود برای اندروید نسبت به 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 مورد استفاده قرار گیرند.

همچنین در هنگام تهیه و استقرار برنامه، ابزارهایی مانند fastlane، App Center، codemagic و Bitrise به ما کمک می‌کنند.

اما در پلتفرم Flutter، تست به‌صورت داخلی (built-in) پشتیبانی می‌شود و برای استقرار برنامه می‌توان از fastlane، Bitrise، Cirrus CI و codemagic به‌خوبی استفاده کرد.

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 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، برای ساخت محصول‌ها دارد. بنابراین توسعه‌دهندگانی که قصد استفاده از آن را دارند، باید در موارد دیگری نگران باشند:

1. تمام تفاوت‌های موجود در مقایسه پلتفرم‌های اندروید و iOS، در وب نیز صادق هستند. این بدان معناست که کدهای React Native موجود، بلافاصله نمی‌توانند در React Native Web اجرا شوند. باید تفاوت‌های موجود در پلتفرم‌ها را تشخیص داده و اصلاح‌های مورد نیاز را در کدهای خود انجام دهید. این موضوع به ویژه در مواردی مانند FileSystem صادق است.
2. تمام APIهای موجود در React Native، در مرورگر موجود نیست. یعنی اگر یک برنامه React Native داشته باشید، نیاز است که مجددا عملکردهای آن را بازنویسی کرده یا به‌راحتی می‌توانید از پشتیبانی کردن بعضی قابلیت‌ها چشم پوشی کنید. برای نمونه، API ویرایشگر تصویر.
3. همه کامپوننت‌هایی که در React Native یا Expo ساخته شده‌اند، در وب کار نمی‌کنند. برای نمونه می‌توان به کامپوننت Model اشاره کرد. گاهی اوقات یک توسعه‌دهنده وجود دارد که نسخه دیگری که در وب اجرا می‌شود را منتشر می‌کند، اما در مواردی که این‌گونه نیست، شما مجبور به ساختن کامپوننت‌ مورد نیازتان هستید. همین موضوع در مورد کتابخانه‌ها نیز صادق است، توسعه‌دهندگان نیاز دارند نسبت به نیازهایشان، کتابخانه‌‌ای برای وب بنویسند.

جنبه‌های مثبت

• مانند 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 محدودی دارد.
• ابزاری به‌طور رسمی برای تست این پلتفرم، موجود نیست.

نتیجه پایانی

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

زمانی‌که صحبت از قابلیت‌های وب می‌شود، ما می‌گوییم که React Native Web بسته به نیاز شما، آماده تولید برنامه‌های تحت وب است. این حقیقت بیشتر به فناوری‌هایی برمی‌گردد که در وب کار می‌کنند. زیرا کدهای نوشته شده در کامپوننت‌های React Native Web به‌سادگی به کد‌های HTML، CSS و جاوااسکریپت کامپایل می‌شوند.

از طرف دیگر، Flutter web به دلیل مشکل‌های عملکردی هنوز آماده نیست. این مشکل به‌طور خاص به‌دلیل استفاده از canvasها ایجاد شده است. اگرچه ممکن است این موضوع در آینده تغییر کند زیرا تیم توسعه Flutter بر بهبود عملکرد این پلتفرم، متمرکز شده است.

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

منبع: https://blog.logrocket.com/react-native-web-vs-flutter-web