دوئل React Native و Cordova

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

هر ابزاری را بهر کاری ساختند!!!
هر ابزاری را بهر کاری ساختند!!!

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

 خروجی صحبت درباره تاریخ پیدایش
خروجی صحبت درباره تاریخ پیدایش


خوب React Native چیست؟

این تکنولوژی توسط FaceBook طراحی و حمایت شده است و همچنین منبع باز است. و برای هر دو محیط IOS و Android با استفاده از جاوا اسکریپت و Reactjs می توان برنامه موبایل بنویسید و بعد بیلد کردن یک فایل خروجی قابل اجراء به ما می‌دهد. (در احادیث این چنین آمده که فیسبوک برای ارتباط تیم توسعه اندروید و IOS خود دچار مشکل بوده و همواره می‌خواسته از توانایی تیم توسعه دهندگان وب خود نیز استفاده کند و در نهایت این بحران منجر به این ابتکار شده است).



اصل ماجرا این هست که با استفاده از این تکنولوژی شما برنامتون را با جاوا اسکریپت، کتابخانه های React Native و React Js می‌نویسید و این کد جاوا اسکریپت در زمان اجرا با UI بومی هر پلتفرم پیغام رد و بدل کرده و موجب تغییر در UI بومی می‌شود.

این تکنولوژی شامل چهار ترد اصلی: UI Thread , JS Thread, Native Module Thread و Render Thread می باشد و از یک ساختار Dom مجازی استفاده می‌کند. یعنی رابط Web View وجود ندارد و کد جاوا اسکریپت بعد پردازش در ریسمانی جدا با UI بومی ارتباط برقرار می‌نماید و از رابط کاربری بومی خود دستگاه استفاده می‌کند و لغت بومی انتهای React نیز به این دلیل هست.

شایان ذکر است که DOM مجازی توسط React خلق نشده و خیلی وقت هست توسعه دهندگان از آن استفاده می‌کنند.
شایان ذکر است که DOM مجازی توسط React خلق نشده و خیلی وقت هست توسعه دهندگان از آن استفاده می‌کنند.


  • توضیح مختصر UI Thread: ریسمان رابط کاربری بومی که ریسمان اصلی نیز شناخته می‌شود جهت رندر رابط کاربری بومی IOS و Android استفاده می شود و اتفاقات روی رابط کاربری بومی را کنترل می‌کند.
یک نمونه رهگیری ریسمان رابط کاربری
یک نمونه رهگیری ریسمان رابط کاربری
  • توضیح مختصر JS Thread: این ریسمان جهت اجرای منطق کد جاوا اسکریپت و سپس اضافه کردن نتایج تغییرات UI به صف رویداد و در نهایت به ریسمان رابط کاربری بومی به کار می‌رود و برای یک عملکرد خوب دسته ای از به روزرسانی ها را به UI Thread قبل از مهلت پایانی اجرای فریم بعدی ارسال می‌کند.
یک نمونه رهگیری ریسمان جاوا اسکریپت
یک نمونه رهگیری ریسمان جاوا اسکریپت
  • توضیح مختصر Native Modules Thread: گاهی اوقات برنامه نیاز به ارتباط با API یک پلتفرم دارد که این وظایف به عنوان بخشی از این ریسمان اتفاق می افتند.
 یک نمونه رهگیری ریسمان پیمانه بومی
یک نمونه رهگیری ریسمان پیمانه بومی
  • توضیح مختصر Render Thread: از Android L (5.0) به بالا برای تولید دستورات OpenGL به کار می‌رود تا فشار وارده بر UI Thread را کاهش دهد.
یک نمونه رهگیری ریسمان نمایان سازی
یک نمونه رهگیری ریسمان نمایان سازی
یک نمونه آزمایشی از گراف رهگیری این چهار ریسمان روی هم رفته
یک نمونه آزمایشی از گراف رهگیری این چهار ریسمان روی هم رفته

ارتباط بین این ترد ها به صورت غیر همزمان و غیر بلوکه کردن و از یک صف جهت ارسال تغییرات استفاده می‌کند.

نحوه رندر کردن کد و تغییر UI بومی
نحوه رندر کردن کد و تغییر UI بومی

خلاصه کلام React Native را به سه بخش زیر می توان تقسیم کرد:

  1. React Native — Native side
  2. React Native — JS side
  3. React Native — Bridge
  • هر چند که قدیم ها React Native فقط از IOS پشتیبانی می کرد.
  • همچنین برای استفاده از ویژگی های سخت افزاری در صورتی که پلاگین مورد نظر خود را یافت نکنیم مجبور به نوشتن پلاگین مثل سابق با زبان جاوا، کاتلین و swift یا ابجکتیو سی هستیم.

خوب نوبت به کوردوا رسید.

wake up wake up
wake up wake up


آپاچی Cordova چیست؟

یک بستر و مجموعه ای از API های دستگاه هست که به برنامه نویس این امکان را می دهد تا با استفاده از جاوا اسکریپت، CSS3 و HTML5 جهت سیستم عامل های Apple iOS, Bada, BlackBerry, Firefox OS Google Android, LG webOS, Microsoft Windows Phone (7 and 8), Nokia Symbian OS, Tizen (SDK 2.x), and Ubuntu Touch برنامه بسازد و فایل قابل اجراء مختص هر پلتفرم دریافت کند.


مزیت اصلی این تکنولوژی این هست که شما می توانید از ساختار مرسوم و استاندارد HTML5 و CSS3 درست همان گونه که در صفحات وب استفاده می‌کنید، بهره ببرید. و این تکنولوژی بر خلاف React Native از WebView استفاده می کند و با استفاده از آن در هر بستری پیاده سازی می شود.

معماری کوردوا
معماری کوردوا


این تکنولوژی خیلی قدیمی تر از React native و جزء نسل اولی های یک بار کد زدن است. قبل زامارین با سی شارپ.

بعضی چیزها قدیمیش باحال تر هست.
بعضی چیزها قدیمیش باحال تر هست.

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

اما نقطه ضعف آن نیز همان Webview هست، درست است که سینتکس بسیار منعطف استفاده می کند، اما باعث کندی روند اجراء می شود. اما این تکنولوژی پلاگین های بسیار زیادی دارد.

از نسخه 4.0.0 اندروید کدهای وب ویو توسط موتور کروم اجراء می شوند و سرعت بسیار مناسبی دارد، نسخه 4.4.0 نیز از موتور V8 شبیه موتوری که کدهای نود جی اس را رندر می کند استفاده می کند که واقعا عالی است.

اجرای یک نمونه کامپوننت تقویم کوردوا و هدایت آن به وسیله انسان، ( تصویر از یک پروژه در دست ساخت برش و ضبط شده است)
اجرای یک نمونه کامپوننت تقویم کوردوا و هدایت آن به وسیله انسان، ( تصویر از یک پروژه در دست ساخت برش و ضبط شده است)
اجرای یک نمونه کامپوننت ساعت کوردوا
اجرای یک نمونه کامپوننت ساعت کوردوا


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




مقایسه Cordova و React Native:

باید حقیقت را بگی...
باید حقیقت را بگی...

بعد پانزده سال بردگی ماشین (برنامه نویسی) باید حقایقی را از نقطه نظر حرفه ای گفت:

1.بهترین برنامه ها از لحاظ سرعت برنامه های هستند که با سی، سی پلاس پلاس و توابع بومی سیستم عامل نوشته می شوند و همراه نسخه اندروید بیلد می شوند، در نتیجه زبان جاوای کامپایلری مفسری و یا کاتلین نیز بومی نیست و تنها اپ های بومی این طور نوشته می شوند و وقتی می گوییم زبان جاوا بومی هست، یعنی نسبت به چهار چوب اجرایی به توابع کرنل نزدیک تر است. وگرنه کد کامپایل شده بایت کد با ماشین مجازی Dalvik یا ART اجرا می شود واقعا بومی نیست بلکه بومی نسبی است.

2.زبان جاوا بسیار بهتر از زبان های مفسر در مفسر مثل React native و Cordova از نظر سرعت اجراء هست، البته نه همه جا مگر با هفته ها وقت برابر معادل یا کمی بهتر. این دو تکنولوژی قابلیت پیاده سازی و اجراء در چند سیستم عامل را فراهم می کنند.

3.تکنولوژی React native از نظر سرعت اجراء به دلیل نحوه پیاده‌سازی و استفاده نکردن از WebView در برنامه‌های که با داده ها سر و کار دارند مثل اینستاگرام، سریع تر از کوردوا است.

4.در اپ های که با وب ویو سر کار دارند، مثل مپ ها، بهترین گزینه کوردوا هست، واقعا استفاده از react native و سپس فراخوانی وب ویو، یعنی مفسر، در مفسر در مفسر واقعا فاجعه هست، و اپ های کوردوا به دلیل بهینه بودن پیاده سازی از اپ های که در جاوا با وب ویو و با canvas سرکار دارند نیز بهتر هست. هر چند که با وقت بسیار در جاوا نتیجه یکسان دارند.

5.اپ های که با canvas و انیمیشن پیچیده سرکار دارند بهتر هست با کوردوا نوشته شوند در مقایسه با react هر چند که هر دو قابلیت استفاده از بوم با کتابخانه بومی را دارند اما بوم وب ویو دارای نمای بزرگتر، کتابخانه بهتر و به دلیل پردازش توسط خود وب ویو ساده تر قابل گسترش هست.

6.برنامه های که با قابلیت های سخت افزاری زیاد سر و کار دارند را با جاوا یا کاتلین در اندروید و یا سوئیفت و ابجکتیو سی در IOS بنویسید، و برنامه های که با داده سر و کار دارند و می خواهید رابط کاربری خیلی زیبایی داشته باشند را با react native و برنامه های کار با بوم مثل بازی های دوبعدی، در صورت استفاده نکردن از موتور بازی سازی مثل یونیتی و... که در برابر انیمیشن دوبعدی بسیار بسیار کندتر هستند را با cordova پیشنهاد می شود بنویسید.

7. ایراد کوردوا را می توان با یک مرورگر خاص منظوره بدون استفاده از ماشین مجازی Dalvik یا ART و کاملا بومی برطرف کرد، اگر در آینده چنین شود، این تکنولوژی بسیار محبوب می شود و اگر هم نشود سورس شما مختص کوردوا نبوده و در تکنولوژی که این کار را انجام شده قابل استفاده است.

موفق و پیروز باشید.

دی ماه سال 1397