مقایسه عملکرد Swift و React Native

React Native یک فریمورک موبایل کراس پلتفرم است که به شما امکان می‌دهد فقط با استفاده از جاوااسکریپت برنامه‌های تلفن همراه خود را بسازید. با این حال برخلاف سایر فناوری‌های تلفن همراه هیبریدی، شما وب اپلیکیشن موبایل نمی‌سازید (وب اپلیکیشن در یک کانتینر تعبیه شده است)، بلکه به یک برنامه واقعی دست خواهید یافت. پایگاه کد جاوااسکریپت شما به یک برنامه تلفن همراه قابل تفکیک از یک برنامه iOS ساخته شده که با استفاده از Objective-C یا یک برنامه Android با استفاده از Java ساخته شده است. این بدان معنی است که React Native مزایای برنامه‌های تلفن همراه بومی و هیبریدی را فراهم می‌کند. هدف من این است که بفهمم آیا آنها می‌توانند دقیقا همان چیزی را ارائه بدهند که قول داده‌اند. برای رسیدن به این هدف، باید یک برنامه مشابه را هم با Swift و هم با React Native بسازم.

این کار باید به اندازه کافی ساده باشد تا بتوانم هر دو زبان را یاد بگیرم و برنامه‌ها را به موقع تکمیل کنم، از طرف دیگر هم به اندازه کافی پیچیده است به طوری که به من امکان مقایسه پردازنده مرکزی، پردازنده گرافیکی، حافظه و میزان مصرف هر برنامه را می‌دهد. این برنامه چهار بخش خواهد دارد. بخش اول "Profile" نامیده می‌شود و کاربر را وادار می‌کند تا برای دیدن عکس پروفایل، نام و ایمیل و همچنین نمایش آنها در صفحه وارد حساب فیسبوک شود. بخش دوم "To Do List" نامیده می‌شود و با استفاده از NSUserDefaults (حافظه داخلی آیفون) لیستی ساده برای مدیریت کارها خواهد بود که شامل "Add Item" و "Delete Item" می‌باشد. بخش سوم "Page Viewer" نام دارد و از یک کنترل کننده صفحه نمایش تشکیل شده است. کنترل کننده Page View دارای سه صفحه است که کاربر می‌تواند بین صفحه‌های "سبز"، "قرمز" و "آبی" جابه‌جا شود. بخش آخر هم "Maps" نامیده می‌شود و شامل یک نمای نقشه است که مکان فعلی کاربر را بزرگ نمایی می‌کند و نقطه آبی روی نقشه نشان دهنده مکان کاربر است.

فرآیند Swift

یادگیری Swift نسبتا آسان بود. اما یادگیری Cocoa Touch (فریمورک Swift) کار بسیار سخت‌تری بود. من مجموعه ویدئویی را در Udemy تماشا کردم که از معرفی آن تا تکمیل چندین برنامه مرا درگیر خود کرد. حتی بعد از فیلم‌های مقدماتی هم هنوز در درک Cocoa Touch مشکل داشتم. بخش عمده‌ای از مبحث یادگیری در این فیلم‌ها شامل کپی و چسباندن کد بود و حس کردم خود مربی هم چیزی نمی‌داند و فقط آنها را حفظ کرده است. من دوست ندارم که ندانم هر خط کد چه کاری انجام می‌دهد.

محیط توسعه یکپارچه شرکت اپل (Xcode) بدون شک بسیار پیشرفته و کاربرپسند است. من می‌توانستم بر روی آنچه Storyboard نامیده می‌شود کلیک کرده و صفحه‌های برنامه را به ترتیب دلخواه تنظیم کنم و در صفحه شروع برنامه یک پیکان قرار دهم. در اولین تب ("Profile") می‌توانستم نمای تصویر، نام و ایمیل را به هر جایی که می‌خواهم بکشم. سپس آن را وارد کد کنم و با ساختن یک ارتباط، متغیر جدیدی در آن ایجاد کنم. بعد از طریق برنامه نویسی، هنگامی که کاربر از طریق فیسبوک وارد سیستم می‌شد، نام‌های متغیر را با مقادیر مربوط به آنها در فیسبوک تنظیم کنم. 3 هفته طول کشید تا بتوانم از طریق مجموعه ویدیوها موفق به کدزنی شوم.

می‌توانید کد مرا برای نسخه Swift این برنامه در گیت هاب در لینک زیر مشاهده کنید: https://github.com/jcalderaio/swift-honors-app

Swift Tab 1 (Facebook Login)

Swift Tab 2 (To-Do List)

Swift Tab 3 (Page View)

Swift Tab 4 (Maps)

فرآیند React Native

یادگیری جاوااسکریپت کمی دشوارتر از Swift بود اما نه زیاد. من سعی کردم برنامه را از روی نمونه‌ها و ماژول‌های React Native که از اینترنت آموخته بودم کدنویسی کنم، اما این کافی نبود. من به چند ویدئو احتیاج داشتم. با بازگشت به Udemy، ویدئوی معرفی React Native را توسط Stephen Grider تماشا کردم. در ابتدا فوق العاده غرق در آن شدم. ساختار React Native از نظر من هیچ معنایی نداشت، اما فقط پس از یک هفته تماشای فیلم‌های استفان گریدر، خودم توانستم برنامه نویسی را شروع کنم.

چیزی که من واقعا در مورد ری‌اکت نیتو دوست دارم این است که برخلاف Swift، هر خط کدی که می‌نویسید منطقی است. شما می‌دانید که هر خط کد چه کاری انجام می‌دهد. علاوه بر این برخلاف Swift (که در آن مجبور بودید تنظیمات مربوط به هر صفحه را تغییر دهید تا حالت عمودی برای اندازه‌های مختلف صفحه نمایش خوب به نظر برسد)، در React Native تمام تغییرهای کار برای شما انجام شده است. بدون هیچ تنظیماتی من از برنامه‌ای که ساختم استفاده می‌کردم و کاملا خوب به نظر می‌رسید. من برنامه را در اندازه‌های مختلفی از صفحه نمایش اجرا کردم و در آنجا نیز به نظر خوب رسیدند. از آنجا که React Native از flexbox استفاده می‌کند (شبیه CSS برای HTML) به اندازه صفحه نمایش برنامه واکنش‌گرا است.

می‌توانید کد مرا برای نسخه React Native برنامه در گیت هاب از طریق این لینک مشاهده کنید: https://github.com/jcalderaio/React Native-honors-app

توجه: این کد منبع قبلا کار نمی‌کرد، اما با ارتقا به iOS 10 من این مشکل را برطرف کردم و اکنون باید کار کند.

React Native Tab 1 (Facebook Login)

React Native Tab 2 (To-Do List)

React Native Tab 3 (Page View)

React Native Tab 4 (Maps)

بررسی داده‌ها

اکنون زمان آن فرا رسیده است که برنامه‌ها را در برابر یکدیگر قرار دهیم تا ببینیم کدام یک عملکرد بهتری دارد. من از Apple Instruments (ابزاری که در Xcode  قرار داده شده است) برای تست دو برنامه در سه دسته اصلی استفاده خواهم کرد:
پردازنده مرکزی("Time Profiler Tool")  
پردازنده گرافیکی ("Core Animation Tool")
حافظه ("Allocations Tool")

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

در هر برنامه 4 تب وجود دارد و هر تب دارای یک وظیفه است که من برای اندازه‌گیری در هر گروه انجام می‌دهم. اولین عملکرد ("Profile") ورود به سیستم از طریق فیسبوک است. در کد یک درخواست برای تصویر پروفایل، نام و ایمیل وجود دارد که باید از سرور فیسبوک به برنامه برگردانده شود. وظیفه دوم برنامه ("To Do List") افزودن و حذف موارد از لیست خواهد بود. وظیفه تب سوم ("Page View") کشیدن انگشت یا به اصطلاح سوایپ در 3 صفحه است. وظیفه چهارم ("Maps") فقط کلیک بر روی تب است، این کار باعث می‌شود تا با فعال کردن GPS مکان فعلی را بزرگ کند و یک علامت روی آن قرار دهد.

اندازه گیری پردازنده مرکزی

مقایسه عملکرد پردازنده مرکزی در Swift و React Native

بیایید هر کدام را مورد بررسی قرار دهیم:

Profile: React Native با 1.86 درصد استفاده کارآمدتر از پردازنده مرکزی، این بخش را برنده می‌کند. در حین انجام تست و ثبت اندازه‌گیری‌ها، دقیقا در لحظه فشار دادن دکمه "ورود به سیستم با فیسبوک" اوج مصرف پردازنده مشاهده شد.

To Do List: React Native با 1.53 درصد استفاده کارآمدتر از پردازنده مرکزی، با اختلاف کم باز هم برنده این بخش است. در حین انجام تست و ثبت اندازه‌گیری‌ها، اوج استفاده از پردازنده دقیقا در لحظه اضافه کردن مورد جدید به لیست و هنگام حذف آن مشاهده شد.

Page View: در این بخش سوئیفت با 8.82 درصد استفاده کارآمدتر از پردازنده مرکزی، React Native را شکست داد. هنگام انجام تست و ثبت اندازه‌گیری‌ها، دقیقا در لحظه‌ای که به صفحه دیگری از برنامه می‌رفتم، اوج استفاده از پردازنده مشاهده شد. هنگامی که در یک صفحه می‌ماندم، میزان استفاده از پردازنده کاهش می‌یافت اما وقتی صفحه را دوباره می‌کشیدم، میزان استفاده از پردازنده بالا می‌رفت.

Maps: swift با 13.68 درصد استفاده کارآمدتر از پردازنده مرکزی، دوباره برنده این بخش می‌شود. در حین انجام تست و ثبت اندازه گیری‌ها، دقیقا در لحظه فشار دادن تب "Maps" که باعث می‌شد MapView مکان فعلی را پیدا کند و آن را با یک نقطه آبی و برجسته نمایان کند، جهشی در میزان استفاده از پردازنده مشاهده شد.

در نتیجه swift دو بخش و React Native هم دو بخش را برنده شدند، اما به طور کلی Swift از پردازنده 17.58 درصد موثرتر استفاده کرد. اگر به جای اینکه فقط روی یک بخش تمرکز کنم و متوقف شوم، به خودم فرصت بیشتری در استفاده از چند برنامه را بدهم نتایج ممکن است متفاوت باشد. من متوجه شدم که در هنگام تغییر از یک تب به تب دیگر اصلا از پردازنده مرکزی استفاده نشده است.

اندازه گیری پردازنده گرافیکی

دومین مجموعه داده‌ای که نمودار خواهیم کرد، اندازه گیری پردازنده گرافکی است. من برای Swift و React Native هر کدام یک کار یکسان در هر تب انجام می‌دهم و نتایج را یادداشت می‌کنم. محور عمودی تا 60 فریم بر ثانیه اندازه می‌گیرد. در هر ثانیه با گذشت زمانی که من وظیفه تب را انجام می‌دهم، یک اندازه‌گیری توسط ابزار "Core Animation" ثبت می‌شود. سپس میانگین اینها را می‌گیرم و آن را در نمودار زیر ترسیم می‌کنم.

مقایسه عملکرد پردازنده گرافیکی در Swift و React Native

بیایید هر دسته را بررسی کنیم:

Profile: Swift با اجرای 1.7 فریم بر ثانیه بالاتر از React Native، این بخش را برنده می‌شود. هنگام انجام تست و ثبت اندازه‌گیری‌ها، دقیقا در لحظه فشار دادن دکمه "ورود به سیستم با فیسبوک" یک جهش در فریم مشاهده شد.

To Do List: React Native با اجرای 6.25 فریم بر ثانیه بالاتر از Swift در این بخش برنده می‌شود. هنگام انجام تست و ثبت اندازه‌گیری‌ها، دقیقا در لحظه اضافه کردن مورد جدید به لیست و هنگام حذف آن، جهشی در فریم مشاهده شد.

Page View: Swift با اجرای 3.6 فریم بر ثانیه بالاتر، React Native را در این بخش شکست داد. در حین انجام تست و ثبت اندازه‌گیری‌ها، مشاهده کردم که اگر سریع‌تر صفحه‌ها را بکشم، فریم تا 50 بالا می‌رود. وقتی روی صفحه‌ای می‌ماندم، فریم کاهش می‌یافت اما وقتی صفحه را می‌کشیدم، فریم دوباره بالا می‌رفت.

Maps: React Native برنده این بخش است زیرا 3 فریم بر ثانیه بالاتر از Swift کار می‌کند. در حین انجام تست و ثبت اندازه گیری‌ها، دقیقا در لحظه فشار دادن تب "Maps" که باعث می‌شد MapView مکان فعلی را پیدا کند و آن را با یک نقطه آبی و برجسته نشان دهد، جهشی در فریم مشاهده شد.

بار دیگر سوئیفت برنده دو بخش و React Native هم برنده دو بخش می‌شوند. با این حال React Native در مجموع با 0.95 فریم بر ثانیه برنده این بخش است.

اندازه گیری حافظه

سومین مجموعه داده‌ای که روی نمودار نمایش می‌دهیم، اندازه‌گیری حافظه است. من برای هر دوی Swift و React Native یک کار در هر تب انجام می‌دهم و اندازه گیری‌ها را یادداشت می‌کنم. محور عمودی (حافظه) بالاترین اندازه‌گیری را نشان خواهد داد. فاصله نمونه من برای استفاده از پردازنده 1 میلی ثانیه است. در حالی که من تست را انجام می‌دهم، یک اندازه گیری توسط ابزار "Allocations" ثبت می‌شود. سپس میانگین را می‌گیرم و آن را در نمودار زیر ترسیم می‌کنم.

مقایسه عملکرد حافظه در Swift و React Native

بیایید هر دسته را بررسی کنیم:

Profile: Swift با استفاده حافظه کمتر از 0.02 مگابایت این بخش را برنده می‌شود. در حین انجام تست و ثبت اندازه گیری‌ها، دقیقا در لحظه فشار دادن دکمه "ورود به سیستم با فیسبوک" اوج استفاده از حافظه مشاهده شد.

To Do List: React Native با استفاده 0.83 مگابایت حافظه کمتر برنده این بخش است. در حین انجام تست و ثبت اندازه‌گیری‌ها دقیقا در لحظه اضافه کردن مورد جدید به لیست، تغییرات مربوط به استفاده از حافظه مشاهده شد و با پاک کردن مورد از لیست، میزان حافظه مصرفی کاهش یافت.

Page View: در این بخش React Native با استفاده حافظه کمتر از 0.04 مگابایت، Swift را شکست داد. هنگام انجام تست و ثبت اندازه گیری‌ها، موقع جابجایی بین صفحات در View Page متوجه هیچ تغییری در عملکرد حافظه نشدم.

Maps: React Native با استفاده فوق العاده از حافظه 61.11 مبی بایت (MiB)کمتر از Swift در این بخش با اختلاف بسیار زیاد برنده می‌شود. هنگام انجام تست و ثبت اندازه‌گیری‌ها، دقیقا در لحظه فشار دادن تب "Maps" که باعث می‌شد MapView مکان فعلی را پیدا کند و آن را با یک نقطه آبی و برجسته نمایان کند، میزان استفاده از حافظه مشاهده شد. در هر دو، حافظه در طول کار مرتبا افزایش می‌یافت اما در نهایت به حالت سکون در می‌امد.

React Native موفق به کسب برنده سه بخش شد. به طور کلی React Native از 61.96 مبی بایت حافظه کمتری استفاده کرد و در قسمت عملکرد حافظه برنده میدان شد. من در تب "Maps" (در هر دو برنامه) متوجه شدم که وقتی نقشه را بزرگنمایی می‌کردم یا نقشه را جابجا می‌کردم، حافظه مورد استفاده به صورت تصاعدی افزایش می‌یافت. در نتیجه "Maps" با بیشترین میزان استفاده از حافظه در هر دو عمل می‌کرد.

جمع بندی

برنامه‌های موبایلی که برای Swift و React Native ساخته‌ام تقریبا از لحاظ ظاهری یکسان هستند. همانطور که در داده‌های جمع‌آوری شده از طریق اندازه‌گیری پردازنده مرکزی، پردازنده گرافیکی و حافظه مصرفی در هنگام اجرای هر چهار تب مشاهده می‌کنید، برنامه‌ها از نظر عملکرد تقریبا یکسان هستند. swift در مجموع در دسته پردازنده مرکزی و React Native در رده پردازنده گرافیکی (با اختلاف اندک) و نیز عملکرد حافظه برنده شدند. می‌توان از این داده‌ها استنباط کرد که Swift از پردازنده آیفون با کارآیی بیشتری نسبت به رقیب خود استفاده می‌کند. React Native هم از پردازش گرافیکی موثرتری از Swift بهره می‌برد و به نوعی حافظه را بسیار بهینه‌تر از swift مصرف می‌کند. React Native با برنده شدن در دو دسته، در جایگاه اول قرار می‌گیرد و به تبع عملکرد بهتری از خود نشان می‌دهد.

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

من اکنون بیش از هر زمان دیگری متقاعد شده‌ام که React Native فریمورک آینده است، چون دارای مزایای بسیار و معایب کمی است. React Native می‌تواند با جاوااسکریپت (زبانی که بسیاری از توسعه دهندگان از قبل می‌دانند) نوشته شود، پایگاه کد آن را می‌توان در هر دو پلتفرم iOS و Android نصب کرد، تولید برنامه سریعتر و ارزان‌تر است و توسعه دهندگان می‌توانند به روزرسانی‌ها را مستقیما به کاربران ارسال کنند و لازم نیست آنها نگران بارگیری به روزرسانی‌ها باشند. از همه مهمتر اینکه React Native تنها با یک سال قدمت بیشتر از عملکرد بهتری نسبت به برنامه‌های بومیiOS  در Swift برخوردار است.

منبع