مقایسه React Native و Flutter

React Native توسط Facebook و Flutter توسط Google ارائه شده اند که دو فناوری داغ برای توسعه برنامه های  cross-platform  می باشند. در این پست قصد داریم این دو تکنولوژی را با جزئیات و از دیدگاه یک توسعه دهنده مقایسه کنیم.

به دلیل محبوبیت روزافزون برنامه های تلفن همراه، تقریباً هر شرکتی برای حفظ رقابت در بازار به یک برنامه یا اپلیکیشن موبایل نیاز دارد. علاوه بر این، شرکت ها به دنبال گزینه ای برای ساختن برنامه های تلفن همراه، به ویژه برای iOS و اندروید، با سرعت بیشتر و هزینه کمتر هستند. بدیهی است که اپل و گوگل ابزار و فناوری های native (بومی) خود برای ساخت برنامه ها ارائه داده اند. توسعه دهندگان برنامه iOS می توانند برنامه های خود را با استفاده از Xcode و زبان برنامه نویسی Swift بسازند، در حالیکه توسعه دهندگان Android از Android Studio وJava  برای ساخت اپلیکیشن استفاده می کنند. با این وجود، نیاز به توسعه دهندگانی می باشد که ساخت دو مجموعه کاملاً متفاوت از برنامه های موبایل (Android و iOS) را بیاموزند. در نتیجه، برخی از شرکت ها شروع به اتخاذ راه حل هایی برای ساخت برنامه ها جهت اجرا در پلتفرم های مختلف (cross-platform) نمونده اند تا بتوانند با استفاده از یک زبان واحد، برنامه های iOS و Android را بسازند.

Flutter و React Native چیست؟

React Native پروژه ای است که توسط فیس بوک در سال 2015 آغاز شده است. در طرف دیگرFlutter ، پروژه ای است که توسط گوگل آغاز شده است و آنها از در کنفرانس I/O در سال2017  آن را معرفی کردند. هر دو تکنولوژی امکان ساخت سریع برنامه های cross-platform با استفاده از یک زبان برنامه نویسی را به توسعه دهندگان می دهند. در حال حاضر React Native ابزاری بالغ است و جامعه عظیمی دارد، اما Flutter نیز از سال 2017 شروع به دیدن شدن کرد و در این مدت جهش عظیمی داشته است. در این پست ، ما با استفاده از ده معیار ، هریک از آنها را مقایسه خواهیم کرد:

  • زبان برنامه نویسی
  • معماری فنی
  • نصب
  • تنظیمات و پیکربندی پروژه
  • کامپوننت های UI و API های توسعه
  • بهره وری توسعه دهنده
  • انجمن پشتیبانی
  • تست نرم افزاری
  • ساخت و انتشاربرنامه
  • پشتیبانی DevOps و CI / CD

اکنون که ما تمام معیارهای خود را تعریف کرده ایم به ارائه توضیحاتی در هر مورد هرکدام از آنها می پردازیم.

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

مهمترین مزیت استفاده از یک تکنولوژی cross-platform امکان برنامه نویسی همزمان برای توسعه برنامه های iOS و Android می باشد.

React Native – JavaScript

React Native از زبان برنامه نویسی JavaScript برای ساخت برنامه های cross-platform استفاده می کند. در حال حاضر JavaScript یک زبان بسیار محبوب در بین برنامه نویسان وتوسعه دهندگان وب می باشد. به لطف  React Native،  توسعه دهندگان وب می توانند با کمی آموزش برنامه های موبایل نیز بسازند. با توجه به این موضوع، شرکت های مختلف React Native  را به عنوان یک مغز متفکر مشخص کردند. جاوا اسکریپت یک زبان پویا است و هر کاری را می توان با  آن  انجام داد که دارای مزایا و معایبی نیز می باشد.

Flutter - Dart

 Flutter از زبان برنامه نویسی Dart استفاده می کند که توسط گوگل در سال 2011 معرفی شده است و بندرت توسط برنامه نویسان استفاده می شود. درک دستورات نحوی Dart برای توسعه دهندگان JavaScript یا Java بسیار آسان است زیرا بیشتر مفاهیم شی گرایی را پشتیبانی می کند. شروع کار با Dart آسان است زیرا مستندات فوق العاده و آسانی برای یادگیری در سایت رسمی Dart موجود است.

ری اکت 1

معماری فنی

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

React Native - Flux

معماری React Native به شدت به معماری محیط JS تکیه می کند و به عنوان واسط JavaScript شناخته می شود.  React Native  از واسط JavaScript برای برقراری ارتباط با ماژول های خود استفاده می کند.

Flutter - Skia

Flutter  از فریم ورک Dart استفاده می کند که بیشتر اجزای آن ساخته شده است بنابراین از نظر اندازه بزرگتر است و اغلب برای برقراری ارتباط با ماژول های خود نیازی به واسط ندارد. دارت فرم ورک های زیادی مانند Material Design و Cupertino را در خود جای داده که تمامی فناوری های مورد نیاز برای توسعه برنامه های تلفن همراه را ارائه می دهد. در فریم ورک دارت از موتور ++Skia C استفاده شده است که دارای تمامی پروتکل ها  است.

فلاتر 1

نصب

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

React Native

React Native با استفاده از Node Package Manager (NPM) قابل نصب است.. برای توسعه دهندگان که آشنایی با JavaScript  دارند، نصب React Native آسان است، در حالیکه سایر توسعه دهندگان نیاز به یادگیری NPM  دارند. NPM می تواند بسته ها را بصورت محلی یا سراسری نصب کند. توسعه دهندگان باید دقت کنند که پکیج دقیقاً در کجا واقع شده اند. ضمن نصب React Native در macOS ، بایدHomeBrew  را نیز نصب کنید. به طور خلاصه ، برای نصب React Native  در macOS باید دستورات زیر را اجرا کنید:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install node
$ brew install watchman
$ npm install -g react-native-cli

Flutter

Flutter را می توان با دانلود فایل های باینری برای یک سیستم عامل خاص از Github نصب کرد. در مورد macOS ، باید فایل flutter.zip را دانلود کنید و آن را به عنوان متغیر PATH اضافه کنید. که این کار را می توان از طریق دستورات زیر انجام داد:

$ curl -O https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.7.3-beta.zip

$ unzip flutter_macos_v0.7.3-beta.zip

export PATH=[PATH_TO_FLUTTER__DIRECTORY]/flutter/bin:$PATH

Flutter باید با پشتیبانی از مدیران پکیج ها مانند Homebrew ، MacPorts ، YUM ، APT  و غیره، روش نصب را بهبود بخشیده است تا کاربران نیازی به انجام این مراحل اضافی در حین نصب نداشته باشند.

ری اکت 2

تنظیمات و پیکربندی پروژه

فرایند تنظیم دستگاه توسعه دهنده برای استفاده از فریم ورک جدید به زمان نیاز دارد. به تنظیمات زیادی در نصب نرم افزار نیاز دارد بنابراین باید دارای مستندات مناسب برای بهره برداری و کارآیی کاربران باشد.

React Native

راهنمای شروع به کار پروژ React Native فرض می کند که توسعه دهنده از قبل تمام برنامه های مورد نیاز برای توسعه برای iOS و Android را انجام داده است و اطلاعات کمی در مورد ابزارهایXcode  وجود دارد اما برای ادامه کار کافی نیست. مستندات  React Nativeمستقیماً به مرحله ایجاد یک پروژه جدید می رود و یک پروژه جدید با استفاده از دستورات زیر می توانید بر روی شبیه ساز iOS ایجاد و اجرا کرد:

$ react-native init MyProject
$ cd MyProject
$ react-native run-ios

هیچ راهنمای تنظیم برای پروژه های Android در مستندات React Native وجود ندارد.

Flutter

راهنمای شروع به کار برای Flutter اطلاعات مفصلی در مورد راه اندازی IDE و راه اندازی سیستم عامل برای iOS و Android  دارد که با مطالعه آن می توانید تمام جزئیات و تنظیمات مورد نیاز در مورد نصب Flutter برای macOS را مطالعه کنید. علاوه بر این، Flutter یک ابزار CLI به نام flutter doctor دارد که می تواند راهنمایی مورد نیاز جهت راه اندازی به توسعه دهندگان را ارائه دهد. این قابلیت بررسی می کند که کدام ابزارها روی دستگاه محلی نصب شده اند و کدام ابزارها باید پیکربندی شوند. هنگامیکه خطاها و نیازمندی های پروژه توسط flutter doctor بررسی و رفع گردید، می توانید یک پروژه جدید Flutter را به وسیله CLI ایجاد کنید:

$ flutter create MyProject
$ cd MyProject
$ flutter run

فلاتر 2

کامپوننت های UI و API های توسعه

هنگام تهیه برنامه های تلفن همراه، پشتیبانی از کامپوننت های native بسیار مهم است. بدون پشتیبانی از این کامپوننت ها، برنامه ما مانند یک برنامه native احساس نمی شود و بسیار مهم است که این فریم ورک دارای یک API برای دسترسی به ماژول های native و بدون درد باشد.

React Native

هسته اصلی فریم ورک React Native فقط API های رندر UI و دسترسی به دستگاه را فراهم می کند. برای دسترسی به اکثر ماژول های native، باید به کتابخانه های third-party اعتماد کنید. React Native  بیش از حد به این کتابخانه ها وابسته است و گاها نصب همزمان آنها، برنامه نویس را دچار مشکلات زیادی می کند.

Flutter

فریم ورک Flutter با کامپوننت های رندر UI، دسترسی به API های دستگاه، ناوبری (navigation)، آزمایش، مدیریت پایدار و مجموعه عظیمی از کتابخانه ها همراه است. این مجموعه غنی ا نیاز به استفاده از کتابخانه های third-party را برطرف می کند. هنگامیکه شما فریم ورکFlutter  را نصب می کنید، بدین معنی است که همه موارد لازم برای توسعه برنامه های تلفن همراه را خواهید داشت. علاوه بر این Flutter دارای ابزارهایی برای Material Design و Cupertino  است که به توسعه دهندگان این امکان را می دهد تا به راحتی UI را در هر دو سیستم عامل iOS و Android  طراحی نمایند.

فلاتر 3

بهره وری توسعه دهنده

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

React Native

اگر برنامه نویسی ماهر در جاوا اسکریپت هستید، پس استفاده از این مهارت ها برای توسعه برنامه های  cross-platform  کاملاً آسان است.  React Native یک ویژگی بارز به نام hot reload دارد که ضمن اعمال تغییرات در UI ، صرفه جویی بسیار زیادی در زمان توسعه نرم افزار می کند و از نظر پشتیبانی از IDE ، توسعه دهندگان می توانند از هر ویرایشگر متن یا IDE بنا به علاقه خود استفاده نمایند.

Flutter

Flutter  نیز دارای ویژگی hot reload است که شروع به کار با برنامه های آزمایشی را بسیار آسان می کند. با این حال، با افزایش پیچیدگی برنامه ها، لازم است که توسعه دهندگان مفاهیم جدید Flutter را یاد بگیرند و آنها را اتخاذ کنند. علاوه بر این ، Dart یک زبان برنامه نویسی رایج نیست و عدم پشتیبانی از آن در بسیاری از IDE ها و ویرایشگرهای متن وجود دارد.

ری اکت 3

انجمن پشتیبانی

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

React Native

React Native  در سال 2015 راه اندازی شد و از آن زمان محبوبیت بسیار زیادی کسب کرد. انجمنی از توسعه دهندگان React Native در GitHub و بسیاری از نشست ها و همایش های مختلف در سراسر جهان وجود دارد. یکی از کنفرانس های اخیر در باره React Native در لهستان بود، اما تقریباً در هر شهر بزرگ دنیا چنین نشست هایی برگزار می شود.

Flutter

Flutter  مدتی زمان کوتاهتری است که مورد توجه واقع شده است، اما وقتی Google در کنفرانس Google I / O در سال 2017 آن را معرفی کرد، توجه بسیاری از توسعه دهندگان را به خود جلب کرد. این روزها انجمن Flutter به سرعت در حال رشد است، جلسات و کنفرانس ها بصورت آنلاین برگزار می شود و به طور خلاصه، جامعه Flutter به سرعت در حال رشد است. با این وجود، هنوز منابع کافی برای توسعه دهندگان برای حل مسائل مشترک وجود ندارند.

ری اکت 4

تست نرم افزاری

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

React Native

React Native  یک فریم ورک جاوا اسکریپتی است و چند فریم ورک تست در جاوا اسکریپت موجود است. از ابزارهایی مانند Jest می توان برای تست فوری استفاده کرد. با این حال، وقتی صحبت از یکپارچه سازی یا تست سطح UI است، هیچ پشتیبانی رسمی از React Native وجود ندارد. ابزارهای third-party مانند Appium و Detox وجود دارند که می توانند برای آزمایش برنامه های React Native مورد استفاده قرار گیرند اما به طور رسمی پشتیبانی نمی شوند.

Flutter

Flutter  مجموعه ای غنی از ویژگی های تست را برای آزمایش برنامه ها در سطح ویجت و سطح ادغام فراهم می کند. مستندات خوبی در مورد آزمایش برنامه های Flutter وجود. Flutter از ابزار تست جالبی برخوردار است که می توانیم تست های ویجت را برای آزمایش UI ایجاد کنیم و آنها را با سرعت unit test اجرا کنیم.

فلاتر 4

ساخت و انتشار برنامه

انتشار برنامه های تلفن همراه بهApp Store  یا Play Store یک روند دشوار است. وقتی صحبت از توسعه برنامه cross-platform می شود، این دشواری دو چندان خواهد بود.

React Native

در مستندات رسمی React Native راهنمای اتوماتیک قدم به قدم برای انتشار برنامه های iOS در App Store وجود ندارد. با این حال، یک فرآیند دستی برای انتشار برنامه از Xcode را فراهم می کند و می توان از ابزارهای third-party مانند fastlane برای انشتار برنامه های iOS و Android که با React Native نوشته شده اند استفاده کرد. این بدان معنی است که در React Native برای ساخت و انتشار اتوماتیک برنامه ها باید به کتابخانه های thid-party اعتماد کرد.

Flutter

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

فلاتر 5

پشتیبانی DevOps و CI / CD

ادغام مداوم و روش های Continuous Delivery برای دریافت بازخورد مداوم و جلوگیری از انتشار کدهای خطادار برای هر برنامه ضروری است.

React Native

React Native هیچ مستندات رسمی در مورد تنظیمات CI / CD ندارد. با این حال، مقالاتی وجود دارد که CI / CD را برای برنامه های React Native توصیف می کند.

Flutter

 Flutter دارای بخشی در مورد ادغام و آزمایش مداوم (Continuous Integration and Testing) است که پیوندهایی به منابع دیگر دارد. با این حال، رابط خط فرمان غنی Flutter به شما امکان می دهد CI / CD را به راحتی تنظیم کنید.

فلاتر 6

نتیجه گیری

React Native و Flutter هر دو جوانب مثبت و منفی خود را دارند، اما Flutter در این مقایسه به عنوان برنده ظاهر شد. برخی از کارشناسان صنعت پیش بینی کرده اند که Flutter آینده توسعه برنامه های تلفن همراه است. با در نظر گرفتن مقایسه فوق، مشخص است که Flutter خیلی جدی وارد مسابقه توسعه تلفن همراه cross-platform شده است. آینده را پیش بینی نمی کنیم اما صبر کنید و تماشا کنید!