مقایسه React native و Flutter بر اساس 10 فاکتور اساسی

ری اکت نیتیو React native ارائه شده توسط فیسبوک و فلاتر Flutter ارائه شده توسط گوگل، دو نمونه از پرطرفدارترین و مشهورترین تکنولوژی های مورد استفاده در زمینه توسعه اپلیکیشن های کراس پلتفرم، در عصر حاضر هستند.

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

دنیای امروز چه نیازی به react native و flutter دارد؟

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

بدیهی است که کمپانی های گوگل و اپل، هر دو تکنولوژی ها و ابزارهای بومی مختص به خود را برای طراحی و تولید اپلیکیشن برای مخاطبینشان فراهم کرده اند. افرادی که قصد طراحی و تولید اپلیکیشن مناسب برای سیستم IOS را دارند، می توانند از Xcode و Swift استفاده کنند و این در حالی است که علاقه مندان به تولید اپلیکیشن های اندرویدی می توانند از Android Studio یا Koltin/Java استفاده نمایند.

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

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

بنابراین، تکنولوژی های واسطه ای مانند react native و flutter پدیدار شدند تا برنامه نویسان بدون نیاز به آموختن مهارت کار با تکنولوژی هایی مانند Swift، Xcode و مواردی از این دست، تحت یک زبان برنامه نویسی مشخص، اپلیکیشن خود را در یک پلتفرم واسط طراحی کنند و سپس آن را توسط همان پلتفرم با سیستم های IOS و اندروید، انطباق داده و برای دسترس عموم منتشر نمایند.

آشنایی با React native و Flutter

پروژه React native توسط کمپانی فیسبوک به صورت منبع باز آغاز و در سال 2015 ارائه شد. از سوی دیگر Flutter توسط کمپانی گوگل در سال 2017 معرفی و روانه بازار شد.

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

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

react native و flutter را می توان از نظر شاخص های زیر مورد مقایسه و مورد بررسی قرار داد :

• زبان برنامه نویسی
• ساختار فنی
• نحوه نصب
• راه اندازی و دریافت تاییدیه ها
• اجزاء UI و API توسعه
• بهره وری توسعه دهنده
• انجمن های پشتیبان
• پشتیبانی تست و آزمایش
• پشتیبانی اتوماسیون ساخت و انتشار
• پشتیبانی CI/CD

در ادامه به بررسی و مقایسه این 10 شاخص درباره react native و flutter خواهیم پرداخت.

1- مقایسه react native و Flutter از نظر زبان برنامه نویسی

همانطور که پیش تر اشاره کردیم، نقطه قوت و حائز اهمیت در هر دو تکنولوژی react native و flutter، توانایی نوشتن اپلیکیشن به یک زبان برنامه نویسی مشخص برای هر دو سیستم IOS و اندروید است.

• React native و جاوا اسکریپت

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

• Flutter و دارت

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

نتیجه گیری:

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

2- مقایسه react native و Flutter از نظر ساختار فنی

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

• React native – FLUX شار

ساختار کلی react native بر اساس پل جاوا اسکریپت شکل گرفته است. به این ترتیب کدهای جاوا اسکریپت در زمان اجرا به کدهای بومی شده تبدیل می شود. react native از ساختار flux فیسبوک در ساختار خود استفاده می کند. برای کسب اطلاعات بیشتر در این زمینه باید مقالات و منابع منتشر شده در زمینه معرفی Flux را مطالعه کنید اما به طور کلی باید گفت ساختار react native به نحوی است که کدهای جاوا اسکریپت را توسط پل های جاوا اسکریپت به ماژول های بومی شده مدنظر برای IOS و اندروید تبدیل می کند.

• Flutter – Skia

می دانیم که flutter از فریم ورک dart استفاده می کند و به این ترتیب در ساختار اصلی خود از اجزای درونی منحصر به فردی بهره مند است که تبدیل کردن برنامه نوشته شده توسط کاربرش را بدون نیاز به پل به ماژول های بومی شده تبدیل می کند.

در واقع ساختار دارت به گونه ای است که فریم ورک های مختلفی اعم از Material Design و Cupertino را در قالب یک پکیج در اختیار کاربر می گذارد. فریم ورک دارت از موتور Skia زبان ++C استفاده می کند که تمام پروتکل ها، تصنیف ها و کانال ها را داراست.

نتیجه گیری:

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

3- مقایسه react native و Flutter از نظر نحوه نصب

بنا به گفته قبلی مبنی بر پیدایش react native و Flutter برای صرفه جویی در زمان و انرژی توسعه دهندگان، بدیهی است که مورد انتخابی ما باید از راحت ترین روش نصب برخوردار باشد تا این افزایش سرعت و جلوگیری از اتلاف انرژی تحقق یابد.

• React native – NPM

React native قابلیت نصب توسط NPM یا همان Node Package Manager را دارد. توسعه دهندگان و برنامه نویسانی که با جاوا اسکریپت آشنا هستند، می توانند به آسانی react native را نصب نمایند. سایر برنامه نویسان نیاز دارند که نحوه کار کردن با NPM را آموزش ببینند. NPM می تواند پکیج ها را به صورت لوکال یا گلوبال نصب نماید. درواقع لازم است که توسعه دهندگان بدانند که محل دقیق قرارگیری باینری کجاست.

همچنین زمانی که قصد نصب react native را بر روی سیستم های مک دارند، نیاز است که پکیج HomeBrew را داشته باشند. به طور مختصر ما برای نصب react native بر روی سیستم مک به کامند زیر نیازمند هستیم :

پس از اجرای این دستور، ما می توانیم از خط دستور به react native دسترسی داشته باشیم.

• Flutter- دانلود باینری از منابع

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

البته بهتر است که flutter این روش نصب را اندکی بهینه سازی کند و ارتقا دهد به طوری که کاربران دیگر مجبور به انجام این گام های اضافی برای نصب آن نباشند.

نتیجه گیری:

اگرچه هر دو این تکنولوژی ها فاقد نصب آسان و یک مرحله ای هستند اما همانطور که مشاهده شد، Flutter نسبت به react native دارای چند مرحله اضافی برای نصب است. بنابراین اگر بخواهیم صرفا این دو گزینه را بر اساس نحوه نصبشان مقایسه کنیم باید بگویم که react native از شیوه نصب آسان تری برخوردار است.

4- مقایسه react native و Flutter از نظر راه اندازی و دریافت تاییدیه ها

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

• React native

React native خود دارای تمام تاییدیه های لازم جهت فعالسازی و انتقال پروژه به ماژول های قابل خوانش IOS و اندروید می باشد. کافی است فهرست آن ها را از منبع معتبر دریافت نمایید. البته در قسمت IOS یک اطلاعات جزئی باقی می ماند که آن هم به شیوه زیر توسط این کامند قابل دسترسی و انجام است:

لذا برای انتقال پروژه به سیستم اندروید هیچ تاییدیه یا دستور اضافی برای react native نیاز نیست.

• Flutter

Flutter دارای یک ابزار به نام CLI یا دکتر فلاتر است که توسط آن قادر هستید از هر گونه اطلاعات یا تاییدیه ای که نیاز است مطلع شده و آن را تهیه نمایید. زمانی که دکتر flutter خوشحال باشد در واقع به این معنی است که عملیات به درستی در حال اجراست و پروژه شما نیازمند تاییدیه دیگری نمی باشد.

این دستوری است که برای تمام پروژه های Flutter باید آن را اجرا نمایید:

نتیجه گیری:

در این مقایسه، پیداست که flutter با در اختیار قرار دادن یک دستیار هوشمند و به روز، کاربر را در زمینه دریافت تاییدیه ها بسیار بهتر از react native یاری می دهد.

5- مقایسه react native و Flutter از نظر اجزای UI و API توسعه

مهم است که فریم ورک منتخب ما API لازم برای دسترسی به ماژول بومی را داشته باشد تا عملیات مورد نظر ما را بدون هیچ آسیب و نقصی انجام دهد.

• React native – کامپوننتس های کمتر

هسته فریم ورک react native، خروجی گرفتن از UI و دسترسی دیوایس یا دستگاه به API را فراهم کرده است. در راستای دسترسی به اکثر ماژول های بومی، react native مجبور به انجام کارهایی بر اساس کتابخانه های ثالث است. در واقع react native به شکلی افراطی متکی به کتابخانه های ثالث است.

• Flutter – غنی از کامپوننت ها

Flutter دارای امکانات غنی و زیادی اعم از خروجی گرفتن UI، دسترسی دستگاه به API، جهت یابی یا نویگیشن، آزمودن، مدیریت کامل و بازخوانی کتابخانه هاست. بنابراین در flutter نیازی به کتابخانه های ثالث نیست. همچنین flutter ابزارک هایی برای خروجی گرفتن UI و دسترسی API در Material Design و Cupertino دارد.

نتیجه گیری:

مشخص است که در این مقایسه flutter دارای امتیازات بسیار بیشتری نسبت به react native است.

6- مقایسه react native و Flutter از نظر بهره وری توسعه دهنده

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

• React native

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

• Flutter

برای کار کردن با Flutter و بهره مند شدن از مزایایی که در react native یا سایر فریم ورک ها وجود ندارد، لازم است که کاربر اندکی زمان برای یادگیری فضا و دستورات آن صرف نماید اما پس از آن کار آسان شده و تمام موارد ساده پیش خواهد رفت. اگرچه dart زبان برنامه نویسی رایجی نیست و در بسیاری از ادیتور ها پشتیبانی نمی شود.

نتیجه گیری:

از نظر به روز بودن و رایج بودن زبان برنامه نویسی و ابزارهای مرتبط با آن، react native بسیار بالغ تر و مناسب تر ظاهر شده است.

7- مقایسه react native و Flutter از نظر انجمن های پشتیبانی

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

• React native

در سال 2015، react native منتشر شد و در میان مردم رونق پیدا کرد. در همان سال در GitHub انجمنی برای این فریم ورک تشکیل داده شد که کنفرانس ها و بازدیدهای آنلاین و حضوری زیادی در آن صورت می گرفت. امروز در شهرها و کشورهای زیادی درباره react native میتینگ ها و کنفرانس های مختلف اتفاق می افتند.

• Flutter

با اینکه زمان کمی از انتشار flutter می گذرد، اما زمانی که گوگل در کنفرانس Google I/O از آن رو نمایی کرد، به سرعت در میان مردم شناخته شد و استفاده از آن مرسوم شد. از این رو انجمن پشتیبان flutter به سرعت در حال توسعه و فعالیت است. اما با این حال هنوز برای بسیاری از مشکلات پیش آمده برای کاربران منابعی برای پاسخگویی و رفع مشکل وجود ندارد.

نتیجه گیری:

بدیهی است که برای رفع مشکلات احتمالی برای یک کاربر react native، منابع و افراد زیادی هستند که کمک رسان او باشند اما این امکانات برای کاربر flutter هنوز جای رشد و بهینه سازی دارد.

8- مقایسه react native و Flutter از نظر پشتیبانی تست و آزمایش

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

• React native

از آنجایی که جاوا اسکریپت زبان حاکم بر react native است، ابزارهای موجود در جاوا اسکریپت نیز می تواند به عنوان ابزارهای لازم جهت تست و آزمودن کدها در آن مورد استفاده قرار بگیرد. ابزاری مانند Jest می تواند برای تست اسنپ شات استفاده شود. زمانی که نوبت به تست مواردی مانند UI برسد، react native از کتابخانه های ثالث مانند Appium و Detox استفاده می کند.

• Flutter

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

نتیجه گیری:

مشخص است که در این مقایسه Flutter پیروزمندانه تر از react native است چرا که امکانات بسیار کامل تری برای تست اپلیکیشن طراحی شده به کاربر خود ارائه کرده است.

9- مقایسه react native و Flutter از نظر اتوماسیون ساخت و انتشار

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

• React native

برای react native، هیچ مراحل اتوماتیک گونه ای جهت انتشار اپلیکیشن ها بر روی IOS و اندروید وجود ندارد. برای استقرار اپلیکیشن طراحی شده در Xcode نیز یک فرآیند دستی وجود دارد که پیش تر دستورهای مربوط به آن را ارائه کردیم.

• Flutter

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

نتیجه گیری:

مشخص است که عملیات انتشار اپلیکیشن برای flutter بسیار حرفه ای تر و کاربر پسندتر از react native پیش می رود.

10- مقایسه react native و Flutter از نظر پشتیبانی CI/CD

CI یا همان Continuous Integration و CD یا همان Continuous Delivery برای هر اپلیکیشنی، امری ضروری است تا بتواند به واسطه آن ها بازخوردهای مداوم دریافت کند و به دنبال آن از انتشار کدهای معیوب جلوگیری به عمل آورد.

• React native

React native هیچ سند رسمی برای راه اندازی CI/CD ندارد. البته مقالات و محتواهایی پیرامون CI/CD در react native وجود دارد. همچنین مقاله ای وجود دارد که در آن این موضوع را با NeverCode توضیح داده است.

• Flutter

Flutter در Continuous Integration and Testing، قسمتی دارد که در آن لینک هایی برای ارتباط با منابع خارجی مهیا شده است. اگرچه flutter اجازه راه اندازی CI/CD را برای ما به آسان ترین شیوه ممکن فراهم کرده است.

نتیجه گیری:

در این شاخص آنچه مشهود است، آسان بودن راه اندازی CI/CD توسط Flutter نسبت به انجام این کار توسط react native است. چرا که react native از ساز و کار خاصی برای انجام این کار تبعیت نمی کند.

نتیجه گیری کلی

اگرچه هر دو فریم ورک react native و flutter می توانند بنا به نیاز کاربرانشان به نوبه خود موثر و کارآمد واقع شوند، اما با توجه به مواردی که مقایسه شد به نظر می رسد Flutter بسیار کارآمدتر و پیروزمندانه تر از react native ظاهر شده باشد. به معنای دیگر علیرغم آنکه flutter از زبان برنامه نویسی رایجی برخوردار نیست اما از آنجایی که امتیازات ویژه بسیاری دارد، ممکن است توسط بسیاری از توسعه دهندگان انتخاب شده و مورد استفاده قرار بگیرد.