مقایسه فلاتر با ری اکت نیتیو ، یا به عبارت دیگر React Native یا Flutter ؟ کدام؟ ری اکت نیتیو از فیسبوک و فلاتر از گوگل دو تکنولوژی داغ cross-platform است که این روزها بسیار سروصدا کرده اند. در این پست ما از دید برنامه نویسان این دو را با هم بررسی خواهیم کرد. و به هرکدام در مباحث مختلف امتیاز می دهیم.
با گذر زمان و همچنین رشد و توسعه تکنولوژی موبایل تمامی شرکت ها و کمپانی ها برای ارتباط بیشتر با کاربر به اپلیکیشن های موبایل احساس نیاز کردند. و این احساس نیاز برای هردو پلتفرم اندروید و iOS وجود داشت. مشخصا همانطور که همه می دانیم اندروید بومی (Native) گوگل و iOS نیتیو اپل می باشد. و هر کدام بصورت جداگانه ابزار و زبان مخصوص و نیتیو خود را دارند. برای مثال Xcode ابزار و Swift زبان برنامه نویسی پلتفرم iOS است. و همچنین Android Studio ابزار و Java / Kotlin زبان برنامه نویسی پلتفرم اندروید است. که طبیعتا تولید دو اپلیکیشن برای هر دو پلتفرم نیاز به دو متخصص در زبان های گفته شده دارد.
اما کمپانی ها بیشتر تمایل به کمتر هزینه کردن در وقت و انرژی و مسائل مالی دارند. و همین امر باعث شده که کمپانی ها تمایل بیشتری به زبان های cross-platform داشته باشند چون تنها با یک زبان می توان هر دو اپلیکیشن Android و iOS را تولید کرد.
در ادامه ما دو تکنولوژی cross-platform یعنی Flutter و React Native که می توان گفت نسبت به بقیه تکنولوژی های مشابه بهتر هستند را مورد بررسی و مقایسه قرار خواهیم داد. و به این سوال شما ” فلاتر یا ری اکت نیتیو ؟ ” پاسخ خواهیم داد.
پروژه React Native در سال 2015 توسط فیسبوک و open source ارائه شد.
پروژه Flutter درسال 2017 در کنفرانس I/O گوگل و open source ارائه شد.
توجه کنید که هر دو پروژه open source است. و همین امر باعث رشد سریعتر و بیشتر این پروژه ها خواهد شد. هر دو پروژه به توسعه دهندگان اجازه پیاده سازی اپلیکیشن های cross-platform یا چند پلتفرم را می دهد. به این معنی که با یک سورس کد می توان دو اپلیکیش ایجاد کرد. هم برای android و هم برای iOS.
در این مقاله و در ادامه Flutter و Reac Native را در مباحث زیر مقایسه و امتیاز دهی می کنیم.
خب حالا به شرح هرکدام از آیتم های فوق می پردازیم.
نقطه قوت توسعه cross-platform استفاده از یک زبان برنامه نویسی و یک سورس کد برای هر دو پلتفرم اندروید و iOS است.
ری اکت نیتیو از زبان برنامه نویسی جاوا اسکریپت استفاده می کند. و این امر یکی از دلایل محبوبیت زیاد React Native است. جاوا اسکریپت برای مدت زیادی است که در برنامه نویسی وب کاربرد دارد. و همین امر باعث شد که منتقل شدن وب کارها به برنامه نویسی موبایل کار چندان سختی نباشد. جاوا اسکریپت یک زبان dynamic یا پویاست. که به دلیل قدرت زیادی که دارد می توان هر کاری با آن انجام داد. و تقریبا هر چیزی را با جاوا اسکریپت پیاده کرد.
فلاتر از زبان برنامه نویسی دارت استفاده می کند. این زبان توسط گوگل در سال 2011 ارائه شد و به ندرت توسط برنامه نویسان استفاده می شد. سینتکس دارت خیلی ساده است. و برای برنامه نویسان جاوا و حتی جاوا اسکریپت خیلی قابل فهم است. به گفته خودِ فلاتر، دارت به حدی ساده است که تنها با دنبال کردن داکیومنت های ارائه شده فلاتر می توان به آن مسلط شد.
همچنین بخوانید: فلاتر چیست ؟ چرا باید به Flutter توجه کنیم ؟
آنالیز و نتیجه مقایسه فلاتر و ری اکت نیتیو در زبان برنامه نویسی
جاوا اسکریپت توسط تعداد زیادی از برنامه نویسان استفاده می شود و جامعه بزرگتری دارد. در مقابل دارت به ندرت توسط برنامه نویسان انتخاب می شود و جامعه آماری کمتری دارد. پس کاملا طبیعی است که جاوا اسکریپت برنده این مقایسه شود.
برنده : React Native
امتیاز ها: React Native 1 – Flutter 0
زمانی که یک فریم ورک cross-platform را انتخاب می کنید باید به معماری فنی آن توجه کرد. چرا که در کارایی یا performance برنامه تاثیر بسزایی دارد.
React Native به شدت به محیط اجرایی JS متکی است. به علاو از پل جاوا اسکریپت برای اجرا استفاده می کند. در واقع کدهای جاوا اسکریپت در زمان اجرا به کدهای نیتیو کامپایل می شوند. ری اکت نیتیو از معماری Flux از فیسبوک استفاده می کند. به طور خلاصه ری اکت نیتیو از پل جاوا اسکریپت برای ارتباط با ماژول های نیتیو استفاده می کند.
فلاتر از زبان برنامه نویسی دارت برای ارتباط با ماژول های نتیو استفاده می کند که دارای اجزا (Component) داخلی بسیاری است. و این باعث حجم بالای آن خواهد شد اما نیازی به پل ارتباطی با ماژول های نیتیو ندارند. و همین امر باعث بالا رفتن سرعت و کارایی برنامه می شود. دارت فریم ورک های بسیاری درون خود دارد از جمله Material Design و Cupertino که تمامی تکنولوژی های مورد نیاز پیاده سازی اپلیکیشن را فراهم می کند. به طور خلاصه فلاتر تمام چیز هایی که نیاز است تا یک اپلکیشین توسعه داده شود را درون خود دارد.
آنالیز و نتیجه مقایسه فلاتر و ری اکت نیتیو در معماری فنی
فلاتر تقریبا تمامی مولفه های مورد نیاز توسعه اپلیکیشن را درون خود دارد. و نیازی به ایجاد یک پل برای برقراری ارتباط با مولفه های نیتیو ندارد. درحالی که ری اکت نیتیو از پل جاوا اسکریپت برای ارتباط با ماژول های نیتیو استفاده می کند که همین امر باعث پایین آمدن کارایی اپلیکیشن می شود. پس مشخصا فلاتر برنده این مقایسه است.
برنده: Flutter
امتیاز ها: React Native 1 – Flutter 1
مراحل نصب باید ساده باشد و بدون هیچ پیچیدگی خاصی. به صورتی که هر شخص با هر میزان علم بتواند آن را نصب کند.
فریم ورک ری اکت نیتیو برای نصب از Node Package Manager یا NPM استفاده می کند. برای برنامه نویسانی که پیش زمینه استفاده از جاوا اسکریپت را دارند نصب React Native پیچیدگی چندانی ندارد. اما برای توسعه دهندگانی که هیچ پیش زمینه ای از جاوا اسکریپت ندارند کمی پیچیده خواهد بود. چرا که باید node package manager را یاد بگیرند. در واقع node package manager پکیج هارا به صورت local یا global نصب می کند. برنامه نویسان باید مسیر نصب باینری را بدانند. در حالیکه برای نصب ری اکت نیتیو در macOS باید پکیج منیجر HomeBrew را هم نصب کرد.
به طور خلاصه با دستورات زیر می توان React Native را نصب کرد.
$ /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
پس از اجرای این دستورات می توان به React Native در کامند لاین دسترسی پیدا کرد.
فلاتر با دانلود سورس آن برای هر پلتفرم (ویندوز، مک و لینوکس) و ست کردن PATH نصب و راه اندازی خواهد شد.
همچنین بخوانید: نصب فلاتر بر روی ویندوز ، لینوکس و مک
آنالیز و نتیجه مقایسه فلاتر و ری اکت نیتیو در نصب و راه اندازی
React Native و Flutter هیچکدام نصب راحت و بدون دردسری ندارند. و هرکدام نیاز به کانفیگ های اضافه ای برای نصب و راه اندازی دارند. اما فلاتر به دلیل نیاز به ست کردن PATH کمی پیچیدگی بیشتری نسبت به ری اکت دارد. چرا که React Native تنها نیاز به نصب package manager دارد. به همین خاطر React Native برنده این مقایسه خواهد بود.
برنده: React Native
امتیاز ها: React Native 2 – Flutter 1
معمولا پروسه ای که انجام می شود تا یک توسعه دهنده بتواند محیط برنامه نویسی خود را کانفیگ و اجرا کند زمان بر است و نیاز به راهنما دارد مخصوصا اگر برای اولین بار است که این اتفاق می افتد. تکنولوژی که توسعه دهنده استفاده می کند باید دارای داکیومنت و راهنماهای کافی برای اجرا باشد تا توسعه دهنده زمان زیادی را صرف کانفیگ محیط برنامه نویسی خود نکند.
در صفحه راهنمای شروع ری اکت نیتیو، فرض بر این است که برنامه نویس تمامی پیش نیازهای پیکربندی پروژه برای توسعه اندروید و iOS را دارد. و یک سری اطلاعات بسیار کم درباره دستورات کامند لاین Xcode دارد اما نه به اندازه ی کافی. داکیومنت ارائه شده مستقیم سراغ پیاده سازی اولین پروژه می رود. که با اجرای دستورات زیر بر روی شبیه ساز iOS اجرا می شود.
$ react-native init MyProject
$ cd MyProject
$ react-native run-ios
همچنین راهنمای تنظیم پروژه اندرویدی نیز ارائه نداده است.
در صفحه راهنمای شروع فلاتر اطلاعات کامل با جزییات ریز برای تنظیمات و پیکربندی IDE برای هر دو یعنی اندروید و iOS ارائه شده است.
شما می توانید تمام راهنماهای مورد نیاز برای پیاده سازی و اجرای Flutter برروی macOS ، Linux و Windows را از اینجا از سایت Flutter بخوانید. نکته قابل توجه این است که فلاتر یک CLI (command-line interface ) با نام flutter doctor دارد. که راهنمایی برای توسعه دهندگان حین نصب و پیکربندی فلاتر است.
رابط خط فرمان یا CLI بستری برای ارتباط با برنامه های کامپیوتر است برای زمانی که کاربر به مشکلی با برنامه بر خورده و یا می خواهد از وضعیت برنامه ای به صورت command line مطلع شود.
در واقع flutter doctor بررسی می کند که کدام ابزارها به صورت local نصب شده اند و کدام ابزارها نیاز به پیکربندی دارند. و زمانی که flutter doctor پیغام success بدهد می توان مطمئن شد که همه چیز برای راه اندازی پروژه فلاتر محیاست. پس از انجام تمام مراحل به صورت موفق، می توان با دستورات زیر یک پروژه ایجاد و اجرا کرد.
$ flutter create MyProject
$ cd MyProject
$ flutter run
آنالیز و نتیجه مقایسه فلاتر و ری اکت نیتیو در تنظیمات و پیکربندی پروژه
با مقایسه ی بالا می توان به راحتی گفت که داکیومنت و راهنمای فلاتر خیلی بهتر و جامع تر از ری اکت نیتیو است. به علاوه CLI ارائه شده فلاتر خود نقطه قوتی برای فلاتر محسوب می شود.
برنده: Flutter
امتیازها: React Native 2 – Flutter 2
زمانی که شما اپلیکیشن های cross-platform را توسعه می دهید پشتیبانی از مولفه های native یک امتیاز بزرگ برای شما خواهد بود. (چرا که تا به حال اکثر مخالفت ها با اپ های cross-platform به دلیل پشتیبانی نکردن از مولفه های نیتیو بوده.) به این خاطر که اپلیکیشن هایی که از مولفه های نیتیو پشتیبانی نمی کنند کارایی خوبی ندارند و حس نیتیو بودن به کاربر نمی دهند.
هسته ری اکت نیتیو تنها رندر کردن UI و دسترسی به API های دستگاه را فراهم می کند. در حالی که برای دسترسی به ماژول های نیتیو تماما نیاز به کتابخانه های third-party داریم. درواقع می توان گفت ری اکت نیتیو بسیار متکی به کتابخانه های third-party است. می توانید لیست تمامی مولفه های توسعه و API های رسمی ری اکت نیتیو را در این اینجا ببینید.
فریم ورک Flutter تماما با رندر مولفه ها، دسترسی به API های دستگاه، جهت یابی (navigation) و تست، مدیریت وضعیت ( stateful management ) و بارگذاری کتابخانه ها ارائه شده است. این مجموعه کامل، تقریبا شما را از استفاده از کتابخانه های third-party بی نیاز می کند. به نوعی اگر شما فریم ورک فلاتر را دانلود کنید تمامی مولفه و ابزارهای مورد نیاز برای توسعه برنامه موبایل را دانلود کرده اید. فلاتر همچنین دارای ویجت برای Material Design و Cupertino است. که به توسعه دهندگان اجازه توسعه و رندر آسان UI برای هر دو پلتفرم اندروید و iOS را می دهد.
همچنین بخوانید: نمایش عکس در فلاتر Flutter به دو روش آفلاین و آنلاین
آنالیز و نتیجه مقایسه فلاتر و ری اکت نیتیو در اجزا UI و api های توسعه
طبق مقایسه به راحتی میتوان گفت فلاتر با ارائه کامل api ها و component ها توسعه دهنده را از استفاده از کتابخانه های third-party بی نیاز کرده برخلاف ری اکت نیتیو که تماما متکی به کتابخانه های third-party ست.
برنده: Flutter
امتیاز ها: React Native 2 – Flutter 3
بهره وری توسعه دهنده کلیدی ترین نکته برای توسعه اپلیکیشن سریعتر است. این خیلی مهم است که توسعه دهنده بتواند بدون هیچ حواس پرتی یا عامل اضافه اپ را توسعه دهد.
در صورتی که برنامه نویس در جاوا اسکریپت مهارت داشته باشد خیلی راحت می تواند ری اکت نیتیو کار کند. و اپلیکیشن های cross-platform با ری اکت نیتیو پیاده کند. ری اکت نیتیو دارای آپشن hot reload است که زمان زیادی از کاربر را ذخیره می کند و سرعت توسعه را چندین برابر می کند. چرا که برای تست هر تغییر در سورس نیاز به build کل برنامه نیست و برنامه به صورت hot reload ری استارت می شود. برای IDE نیز ری اکت نیتیو هیچ محدودیتی ندارد، طوری که با یک تکست ادیتور ساده هم می توان ری اکت نیتیو کار کرد.
فلاتر هم دارای قابلیت hot reload است و زمان توسعه دهنده را به حد قابل توجه ای ذخیره می کند. با این حال با رشد سورس اپلیکیشن و پیچیده تر شدن آن توسعه دهنده باید کانسپت جدیدی را برای فلاتر پیاده کند. علاوه بر این زبان برنامه نویسی Dart به ندرت استفاده شده و خیلی شناخته شده نیست. و این ضعف فلاتر محسوب میشود که نمی توان در اکثر IDE ها فلاتر را اجرا کرد.
آنالیز و نتیجه مقایسه فلاتر و ری اکت نیتیو در بهره وری توسعه دهنده
می توان گفت ری اکت نیتیو فریم ورک بالغ تری نسبت به فلاتر است. و بین توسعه دهندگان بیشتر از فلاتر جا افتاده است. فلاتر جدید است اما با این حال خیلی سریع توانست جامعه توسعه دهدگان قابل توجهی جذب کند. اما برنده این مقایسه بی شک ری اکت نیتیو خواهد بود.
برنده: React Native
امتیاز ها: React Native 3 – Flutter 3
از زمانی که توسعه دهندگان به یک تکنولوژی واکنش مثبت نشان می دهند و آن را مورد بررسی قرار می دهند یک جامعه پشتیبانی تشکیل داده می شود. که شامل توسعه دهندگان مرتبط به آن تکنولوژی است. و همین امر باعث رد وبدل شدن بیشتر علم و تجربه و حتی گاها کمک به حل مشکلات یکدیگر خواهد شد. طبیعتا هر چه جامعه برنامه نویسان یک تکنولوژی بزرگتر باشند میزان رشد و سرعت پیشرفت در آن تکنولوژی نیز بیشتر خواهد شد.
ری اکت نیتیو در سال 2015 ارائه شد و تا به حال محبوبیت زیادی کسب کرده است. گیت هاب ری کت نیتیو نشان دهنده جامعه آماری بزرگ آن است.
فلاتر در کنفرانس Google I/O سال 2017 مطرح شد. با اینکه قبل از آن هم وجود داشت. جامعه توسعه دهندگان فلاتر این روزها به سرعت در حال رشد است و کاملا صعودی پیش می رود. در کنفرانس Flutter Live در سال 2018 که نسخه 1.0 فلاتر ارائه شد جامعه فلاتر به سرعت رشد چشم گیری کرد. اما با این حال هنوز منابع کمی برای حل مسائل و مشکلات فلاتر وجود دارد که به دلیل جامعه آماری پایین تر فلاتر است.
آنالیز و نتیجه مقایسه فلاتر و ری اکت نیتیو در جامعه پشتیبانی یا Community support
مشخصا جامعه توسعه دهندگان ری اکت نیتیو به دلیل قدیمی بودن آن بیشتر است. و در مقابل فلاتر هنوز جدید است و دارای community support کمتری است. (اما با رشد مناسب)
برنده: React Native
امتیاز ها: React Native 4 – Flutter 3
نوشتن تست برای پروژه یک راه سریع و بهینه برای گرفتن فیدبک از کد است. و همچنین فهمیدن میزان درست بودن کدهای نوشته شده. همیشه یک فریم ورک برای هر تکنولوژی بالغی هست که توسعه دهنده بتواند چهارچوب مناسب unit test و تست UI را انجام داد.
چندین فریم ورک برای unit test برای جاوا اسکریپت وجود دارد. ابزاری مثل Jest می تواند برای snapshot test استفاده شود. در حالیکه زمانی که snapshot test ارائه شد هیچ ساپورت رسمی از آن توسط ری اکت نیتیو انجام نشد. درواقع یک کتابخانه third-party می باشد که برای ری اکت نیتیو ارائه شده است.
فلاتر یک مجموعه از فیچر هایی برای تست unit، ویجت و integration level ارائه داده است. به علاوه یک داکیومنت قوی برای تست در فلاتر Flutter در اینجا ارائه داده است. فلاتر همچنین یک ویجت برای test دارد که می توان با استفاده از widget testing ارائه شده توسط فلاتر یک ویجت برای تست UI در کنار unit تست اجرا کرد.
آنالیز و نتیجه مقایسه فلاتر و ری اکت نیتیو در پشتیبانی از تست
مشخصا می توان گفت ری اکت نیتیو هیچ فریم ورک رسمی برای تست ندارد. در حالیکه فلاتر یک مجموعه معتبر و رسمی به علاوه داکیومنت قوی برای تست ارائه داده است.
برنده: Flutter
امتیاز ها: React Native 4 – Flutter 4
همه توسعه دهندگان موبایل می دانند که ریلیز اپلیکیشن در App Store یا Play Store کار بسیار زمانبر و حوصله سربری است. ریلیز گرفتن درگیر مسائلی مثل sign کردن برنامه و غیره است. زمانی که این پروسه در مبحث cross-platform ها می آید تا حد زیادی پیچیده تر و خسته کننده تر می شود.
ری اکت نیتیو هیچ پروسه اتوماتیکی برای گرفتن خروجی و ارائه به مارکت را ندارد. این در حالی است که یک پروسه manual یا دستی برای گرفتن خروجی از Xcode رائه داده است. و در این مقاله می توانید ببینید که چطور می توان به صورت دستی خروجی را از ری اکت نیتیو به مارکت ها منتقل کرد. اگر چه یک کتابخانه third-party هم با نام fastlane هست که خروجی گرفتن از ری اکت نیتیو برای اندروید و iOS را انجام می دهد. پروسه خروجی گرفتن با fastlane در این مقاله آورده شده است. با این حال خودِ ری اکت نیتیو هیچ ساپورتی از fastlane نکرده و این بدین معناست که ری اکت نیتیو به کتابخانه های third-party برای گرفتن خروجی تکیه نکرده است.
فلاتر یک CLI یا command line interface قوی دارد (flutter doctor). که می توان با استفاده از آن خروجی هر دو هم اندروید و هم iOS را دریافت کرد. به علاوه فلاتر یک داکیومنت قوی برای استفاده از CLI برای گرفتن خروجی برای Android و iOS ارائه داده است. و همچنین یک داکیومنت قوی و رسمی برای استفاده از fastline نیز در اینجا ارائه داده است.
آنالیز و نتیجه مقایسه فلاتر و ری اکت نیتیو در پشتیبانی از اتوماسیون ساخت و ریلیز
فلاتر پروسه قوی برای ارائه اپلیکیشن به مارکت ها با استفاده از CLI اختصاصی خود ارائه داده است. اما ری اکت نیتیو در پشتیبانی از CLI برای اتوماسیون بیلد گرفتن برنامه عقب مانده است.
برنده: Flutter
امتیاز ها: React Native 4 – Flutter 5
ادغام مداوم یا CI (Continuous Integration) و تحویل مداوم یا (Continuous Delivery) CD بسیار ضروری است. به خصوص برای هر اپلیکیشنی که به طور مداوم در حال گرفتن فیدبک می باشد. و می خواهند سورس کد بدون باگی داشته باشند.
ری اکت نیتیو هیچ داکیومنت رسمی برای CI / CD ندارد. گرچه چندین مقاله از CI/CD برای ری اکت نیتیو وجود دارد. برای مثال در اینجا، این مقاله کانفیگ کردن CI/CD برای ری اکت نیتیو توضیح داده شده است.
فلاتر یک سکشن کامل برای CI و testing دارد که شامل لینک به سورس های خارجی است. می توانید در این لینک ببینید. گرچه CLI فلاتر این امکان را به شما می دهد که به صورت آسان تنظیمات CI/CD را انجام دهید.
آنالیز و نتیجه مقایسه فلاتر و ری اکت نیتیو در پشتیبانی DevOps و CI / CD
اپ های فلاتر خیلی راحت و بدون دردسر با سرویس های CI/CD توسط ابزار CLI تنظیم می شوند. ولی ری اکت نیتیو هیچ دستورالعمل رسمی برای CI/CD ارائه نداده است.
برنده: Flutter
امتیاز ها: React Native 4 – Flutter 6
در پایان و در جواب این سوال ( فلاتر یا ری اکت نیتیو ؟ ) باید گفت ری اکت نیتیو و فلاتر هر دو مزایا و معایب خاص خودشان را دارند. اما فلاتر برنده این مقایسه شد. خیلی از کارشناسان اعتقاد دارند که آینده صنعت موبایل در دست فلاتر است.
همچنین بخوانید: مقایسه دو معماری MVP و MVVM در اندروید با مثال
ما در این مقاله سعی کردیم تا حد زیادی به سوال شما در مورد React Native یا Flutter ؟ با مقایسه و ذکر دلایل اصولی پاسخ بدیم. امیدوارم این مقاله برای شما مفید بوده باشه.