React Native چیست؟

React Native

یکی از آرزوهای ما و شاید خیلی از برنامه نویس ها این بوده که با یادگیری یک زبان برنامه نویسی برنامه هایی بنویسیم که روی پلتفرم های مختلف اجرا بشه. هر چند که تلاش های زیادی تو این زمینه شد ولی هیچکدوم چنگی به دل نزد تا اینکه فیسبوک در ابتدای سال ۲۰۱۳ اولین نسخه stable از یک کتابخونه جاوا اسکریپت رو بصورت open-source روی GitHub منتشر کرد.اسم این کتابخونه ReactJs بود که برای توسعه وب اپلیکیشن ها مورد استفاده قرار میگرفت.این کتابخونه سرعت بسیار بالاو سادگی خاصی داشت که باعث شد خیلی سریع مورد توجه قرار بگیره. اواخر مارچ ۲۰۱۵ بود که فیسبوک یک فریم ورک جدید به اسم React Native منتشر کرد که بهت اجازه میداد فقط با استفاده از جاوا اسکریپت و کتابخونه React اپلیکیشن موبایل برای ios بسازی. فیسبوک شش ماه بعد گام اصلی و محکم رو با انتشار React Native برای Android برداشت . توسعه دهنده ها دیگه مجبور به نوشتن کدهای جداگونه برای سیستم عامل های مختلف نبودن و استارتاپ ها و صاحبان کسب کار به توسعه دهنده هایی دسترسی پیدا کردند که برای هر دو سیستم عامل َAndroid و IOS اپلیکیشن طراحی میکردند.
با React Native یک “mobile web app” ، ” HTML5 app” یا “Hybridapp” نمیسازی.یک اپلیکیشن واقعی موبایل میسازی که از یک برنامه ساخته شده با Objective-c یا Java قابل تشخیص نیست(منظور از برنامه های Native برنامه هایی هست که برای یک سیستم عامل خاص نوشته شده)

یکی از ویژگی های کار با React Native اینکه برای طراحی UI دستت خیلی بازه و با سرعت بالایی میتونی اپلیکیشن هایی با ظاهر زیبا و جذاب طراحی کنی (نمونه بارزش که تقریبا هممون ازش استفاده میکنیم instagram). اگه دوست داری در مورد اپلیکیشن های نوشته شده با react native بدونی میتونی مقاله در مورد ده اپلیکیشنی که با reactnative نوشته شدند رو بخونی.همچنین با استفاده از Node میتونی سمت سرور برنامه نویسی کنی.یک لحظه فکرشو بکن تو داری فقط و فقط با استفاده از جاوا اسکریپت اپلیکیشن Native طراحی میکنی که روی Android و IOS اجرا میشه.

Open-source بودن ReactNative و پشتیبانیش توسط فیسبوک آدم رو خیلی وسوسه میکنه که به سمتش بره(منم پیشنهاد میکنم حتماامتحانش کنید)و اینکه به قول اردلان نقشینه عزیز ،تا چند سال دیگه دنیای IT توسط جاوا اسکریپت تسخیر میشه و چه بهتر که ما هم تو این تسخیر یک سهمی داشته باشیم.

در ادامه چند مورد از مزایا و معایب React Native رو بصورت موردی بیان میکنم:

ویژگی های React Native :

کامپوننتی بودن و امکان استفاده از کامپوننت ها در پروژه های دیگر و همچنین استفاده از کامپوننت های دیگر افراد که هم باعث سادگی میشه و هم سریعتر شدن کار.(هزاران کامپوننت برای هزاران کار)
ساخت بسیار راحتتر رابط کاربری های زیبا برای اپلیکیشن (به دلیل وجود استایل css مانند و jsx) که میبینید که skype هم تجدیدنظر کرد و به ریکت نیتیو پیوست به تازگی.
هیچ محدودیتی برای شما نداره . شما میتونید هرموقع خواستید توی ریکت نیتیو کدهای java , swift بنویسید تا کامپوننت های نیتیو خودتونو به وجود بیارید. پس از این بابت هم نگرانی ای نمیزاره (البته که هر کامپوننتی نیاز داشته باشید ایجاد شده ولی این مورد محض اطمینان هست).
یه فرانت اند کار خوب میتونه با گذاشتن تایم کمی ریکت نیتیو رو به خوبی فرا بگیره و همچنین برنامه نویس های اندروید و Ios هم که تا الان نیتیو کار میکردند با یادگرفتن پایه های وب سمت ریکت نیتیو بیان.
بدون اینکه از زبان های نیتیو هم سردر بیارید میتونید کار بکنید باهاش و فقط باید قواعد اپلیکیشن و تفاوتش با وب رو فرا بگیرید.
نیازی نیست برای توسعه اپ اندرویدتون از اندروید استودیو و برای ios از xcode استفاده کنید و آزادانه میتونید از هر ادیتوری استفاده بکنید و لذت ببرید.

یکی از ویژگی های خاص و مفید کتابخانه ی React Native این است که این کتابخانه با اجزای نوشته شده به زبان Swift ، Objective_C و یا Java به خوبی ترکیب می شودو توسعه دهنده را قادر می سازد که به راحتی در زمان نیاز از کدهای Native استفاده کند.این امکان نیز فراهم است تا بخشی از برنامه با استفاده از React Native و بخشی دیگر مستقیما با کدهای Native نوشته شود.در واقع React Native از همان اساس ساختن بلاک های رابط کاربری در ios و Andriod استفاده میکند و شما این بلاک ها را با استفاده از React و زبان جاوا اسکریپت در کنار هم قرار می دهید. با استفاده از React Native برای طراحی UI دستت خیلی بازه و با سرعت بالایی میتونی اپلیکیشن هایی با ظاهر زیبا و جذاب طراحی کنی.(به دلیل وجود استایل css و jsx) در React Native نیاز به کامپایل دوباره نیست.شاید کامپایل یکی از مهمترین بخش هایی است که زمان را از توسعه دهندگان موبایل میگیرد اما با استفاده از React Native شما بدون نیاز به کامپایل دوباره ، با هر تغییر می توانید برنامه را reload کنید در نتیجه سرعت توسعه بسیار بیشتر خواهد شد. یادگیری React Native بسیار آسان است و برنامه نویس های اندروید و ios هم که تا الان Native کار میکردند میتونند با یادگرفتن پایه های وب با صرف زمان کمی به سمت React Native بیان. React Native میتونه زمان و هزینه ی توسعه را به شدت کاهش دهد و خروجی تقریبا یکسان بدهد

معایب استفاده از React Native

پشتیبانی نکردن از تمام APIها

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

ماژول‌های محلی

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

طراحی

Andriod و IOS طراحی و ظاهر متفاوتی دارند که هر کدام برای خود دارای راهنما و شیوه‌ های متفاوتی هستند. المان‌های گرافیکی در React Native در پلتفرم‌های مختلف تبدیل می‌شود اما این جایگزین کردن‌ها در برخی مواقع ممکن است بی ‌ثبات باشد. به همین دلیل بسیاری از اوقات نیاز دارید که شیوه‌های متفاوتی را برای کار کردن با المان‌های طراحی در بر بگیرید.

نیاز به توسعه دهندگان  native

باتوجه به اینکه شما فقط با جاوااسکریپت کد میزنید ولی گاهی اوقات به توسعه دهنده های native نیاز پیدا میکنید.تصور کنید که گاهی اوقات لازمه که در اپلیکیشن محاسبات سنگین انجام دهید،در اینگونه موارد به برنامه نویس native نیاز دارید.همچنین گاهی اوقات موقع استفاده از SDK های مختلف مثل Google Analytics برای تلفن همراه شما باید نحوه کار داخلی کتابخونه رو بفهمید تا بتونید این کتابخونه رو با React Native ادغام کنید.

رفتار متفاوت بعضی از کامپوننت ها در پلتفرم های مختلف

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

کامپوننت های مهم مخصوص پلتفرم Ios:

  • DatePickerIOS
  • NavigatorIOS
  • PickerIOS
  • ProgressViewIOS
  • SegmentedControlIOS
  • SnapshotViewIOS
  • ActionSheetIOS
  • AdSupportIOS
  • AlertIOS
  • ImagePickerIOS
  • VibrationIOS

کامپوننت های مهم مخصوص پلتفرم Android:

  • DrawerLayoutAndroid
  • ProgressBarAndroid
  • ToolbarAndroid
  • ViewPagerAndroid
  • BackAndroid
  • DatePickerAndroid
  • PermissionsAndroid
  • TimePickerAndroid
  • ToastAndroid

محدودیت های انتزاع لایه

به منظور ایجاد قابلیت های بیشتر، یک انتزاع لایه در بالاترین سطح React Native ایجاد میشود.در صورتی که هر مشکلی در انتزاع لایه بوجود بیاد، اشکلات غیرمنتظره در اپلیکیشن شما بوجود میاد.تشخیص اینگونه خطا ها بسیار دشوار و وقت گیر است.داشتن یک انتزاع لایه باعث وابستگی به کتابخونه های جانبی برای بروزنگه داشتن فریمورک میشود.یکی دیگر از مشکلات انتزاع لایه اینکه شما باید برای اجرای طرح های سفارشی از زبان های native مثل Java, Objective-C، Swift استفاده کنید.این کار معمولا برنامه نویس ها رو خسته میکند و مزایای این فریمورک رو کاهش میدهد.

 Document برای پشتیبانی React Native

اگرچه توسعه دهندگان React Native یک جامعه بالغ دارند اما مستندات در این زمینه به اندازه کافی نیست و مستندات سایت  React Native هم برای شروع و در حد متوسط مناسب است .این امر باعث میشود که برنامه نویس ها برای بهبود و بهینه سازی  عملکرد برنامشون دچار مشکل شوند.البته خوشبختانه توسعه دهنده های React Native داستان مشکلات و راه حل هاشون رو به اشتراک میزارند.

وابستگی به کتابخانه های جانبی

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

به عنوان نمونه Tab Bar. شما میتونید از Tab Bar خود React Native برای IOS استفاده کنید اما برای اندروید شما نیاز به کتابخونه جانبی دارید.وقتی این اتفاق بیفته شما باید دنبال یک کتابخونه باشید و بعد از پیدا کردن یک کتابخونه باید بررسی کنید که این کتابخونه مناسب کار شما هست یا نه که خودش کاری وقت گیره.

کتابخانه های جانبی قدیمی

در مورد وابستگی به کتابخونه های جانبی در بخش قبلی صحبت کردیم اما چیز جدیدی که باید بدونید اینکه با بروزرسانی React Naive گاها مشکلاتی برای این کتابخونه ها اتفاق میفته.بسته به پشتیبانی جامعه توسعه دهنده کتابخونه، میتونید انتظار داشته باشید که کتابخونه رو بروزرسانی کنند یا با مشکلات بروزرسانی دست و پنجه نرم کنید.

پشتیبانی نکردن از پردازش موازی

React Native از چند پردازشی یا پردازش موازی پشتیبانی نمیکند. React Native  از تک پردازشی با استفاده از جاوااسکریپت استفاده میکند. عملکرد برنامه کاهش پیدا میکند اگه شما بخواین چندین فرایند رو همزمان اجرا کنید.برای مثال اگه شما بخواین برنامه  چت زنده و گشت وگذار ویدئویی در برنامه داشته باشید.این کار رو نمی تونید با React Native انجام بدید.

اشکال زدایی استایل ها در React Native

سبک های اشکال زدایی استایل در React Native برای توسعه دهنده های وب مبتدی ممکنه کمی ناراحت کننده باشه.چون نمیتونند مانند وب با استفاده از حالت developer مرورگرها به اشکال زدایی بپردازند.البته خوشبختانه در نسخه های جدید React Native شما میتونید با استفاده از قابلیت hot reloading اشکال زدایی رو راحت تر انجام بدید.

بروزرسانی بسیار زیاد React Native

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

جنبه‌های بلند مدت

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

در این مقاله بعضی از محدودیت های React Native رو معرفی کردیم البته این محدودیت ها به هیچ عنوان باعث نمیشه تا فکر کنید React Native مناسب توسعه اپلیکیشن نیست

اپلیکیشن هایی که با React Native  ساخته شدند

1)Facebook

فیسبوک React Native   را برای پشتیبانی از IOS توسعه داد اما با پشتیبانی اخیر از Android ، هم اکنون میتوانید از UI های خود  برای هر دو سیستم عامل استفاده کنید.فیسبوک ار React Native  برای توسعه نرم افزار AdsManager خود استفاده میکند که هر دو نسخه آن توسط تیم توسعه دهنده React Native طراحی شده است.

2)Facebook Ads

FacebookAds اولین برنامه توسعه داه شده با  React Native برای اندروید و اولین اپلیکیشن کامل مبتنی بر cross platform  ساخت این شرکت بود.این Framework به نظر میرسه که کاملا مناسبه برای بسیاری از کسب و کارهای پیچیده که نیاز به دقت در دسته بندی تفاوت ها در فرمت های تبلیغاتی،مناطق زمانی ، ارزها ، فرمت های تاریخ و… به ویژه اینکه  بخش بزرگی از آن در جاوا اسکریپت پیش نویس شده است.

3)Walmart

Walmart موفق به بهبود عملکرد برنامه در هر دو نسخه iOS و Android با استفاده از منابع کمتر و در مدت زمان کوتاهترشد. 96٪ از پایگاه داده بین سیستم عاملها به اشتراک گذاشته شده بود در حالیکه مهارت ها و تجارب توسعه دهندگان در سراسر سازمان استفاده شد.این یعنی صرفه جویی در زمان و هزینه.

4)Bloomberg
نرم افزار تلفن همراه جدید بلومبرگ برای iOS و Android به مشتریان یک تجربه ساده و تعاملی با محتوا، فیلم ها و فید های زنده را که از طریق رسانه های بلومبرگ برجسته شده است را می دهد. برای توسعه نرم افزار، شرکت یک  framework توسعه نرم افزار تلفن همراه منحصر به فرد استفاده کرد. یک تیم مهندسی در دفتر مرکزی شهر نیویورک بلومبرگ این برنامه را با استفاده از React Native تولید کرد.

5)Instagram

Instagram چالش ادغامی  React Native با برنامه موجود خود را از ساده ترین دیدی که می توانید تصور کنید، به نمایش گذاشت: نمایش Notification Push که اساسا به عنوان WebView اجرا میشد. این نیازی به ساخت زیرساخت های ناوبری نداشت، زیرا UI بسیار ساده بود.

6)SoundCloudPlus

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

7)Townske

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

8)Gyroscope

Gyroscope  شما را قادر میسازد تا روند کامل زندگی خود را مشاهده کنید.این یک اپلیکیشن سلامتی بر پایه استروئیدهاست.شما نه تنها قادر به پیگیری گام های خود هستید بلکه میتوانید تمرینات یا ضربان قلب خود را پیگیری کنید.همچنین شما میتوانید با ده ها هزار یکپارچه سازی میتوانید فعالیت هایی مانند بهره وری را در کامپیوتر پیگیری کنید و یا با استفاده از ردیاب خواب Ai از میزان خوابتان به اندازه کافی اطمینان حاصل کنید.

9)Wix

Wix یک شرکت آنلاین است که خدمات طراحی سایت و میزبانی وب را ارائه می دهد. کاربران میتوانند وب سایت خود را با HTML5 , CSS3 با استفاده از Drag , drop بسازند. دو  تا از ویژگی های محبوب Wix این است که توسعه دهندگان میتوانند وب اپلیکیشن خودشون رو برای فروش به مشتریانشان بسازند و کاربران میتوانند بدون هیچ دانش برنامه نویسی وب سایت بسازند.

10)Delivery.com

کافیه که فقط در Delivery.com آدرس خودتون رو ثبت کنید تا به تمام رستوران ها و فروشگاه های محلی متصل بشید و از بین هزاران رستوران غذا مورد علاقه خود را سفارش دهید تا به بدون هزینه ارسال  درب خونه غذا رو تحویل بگیرید.React Native  به شما اجازه میدهد تا بین پلاگین ها و ماژول های native ارتباط برقرار کنید. بنابراین شما میتوانید نقشه را با تابع های دستگاه مثل زوم،چرخش و قطب نما ترکیب کنید در حالی که از حافظه کمتری استفاده میکنید و سرعت بارگذاری بسیار بیشتر است.