React و React Native: معرفی، کاربردها و مزایا

لایبرری جاوااسکریپتی React به عنوان راه‌کاری کاربردی برای استفاده در اپ‌هایی با قابلیت توسعهٔ بالا و ترافیک سنگین توسط فیسبوک ایجاد شد؛ این شرکت با مشکلاتی در زمان بارگذاری در قسمت تبلیغات خود روبه‌رو بود و به ریلود پیوسته نیازمند بود که باعث کند شدن صفحاتش می‌شد و به همین منظور، مهندسین فیسبوک شروع به کار روی ایده‌ای با این هدف کردند که چه می‌شد اگر آن‌ها مجبور به آپدیت کدها در هر تغییر و اجرای آن تغییرات در DOM نبودند و چه می‌شد اگر خود DOM می‌توانست به جای رندر دوبارهٔ کل صفحه، تنها در قسمت تغییر کرده، صفحهٔ مورد نظر را رندر می‌کرد؟ و نتیجه این شد که React خلق شد و بسیاری از مشکلاتی که برنامه‌نویسان با آن‌ها دست‌و‌پنجه نرم می‌کردند را مرتفع کرد. البته فیسبوک کار خود را به اینجا ختم نکرد و چندی بعد React Native را به بازار عرضه کرد که توسعه‌دهندگان موبایل می‌توانند با استفاده از آن، اپ‌هایی در ظاهر هیبریدی اما در اصل نِیتیو توسعه دهند. در ادامه با سکان آکادمی همراه باشید تا به بررسی مزیت‌های هر کدام از این لایبرری‌های فیسبوک بپردازیم.

فواید استفاده از React
DOM مجازی: در این قسمت، تغییراتی که در صفحه رخ داده پیش از رِندِر شدن صفحهٔ مورد نظر، در حافظهٔ سیستمی ذخیره می‌شوند (DOM مخفف Document Object Model به عنوان واسطی که نه به زبان خاصی وابسته است و نه به پلتفرم خاصی، که به دولوپر این امکان را می‌دهد تا به محتوا، ساختار و طرز کار داکیومنت‌ها دسترسی داشته باشند و به طور پویا بتواند آن‌ها را تغییر دهد و به‌روزرسانی نماید). 

رِندِرینگ سمت سرور: رِندِر سمت سرور برای استفاده در React ایجاد شد که باعث سادگی بیشتر برای تغییرات و رِندِر DOM و کدها می‌شود. 

شرح خطاها: یکی از بهترین مواردی که به درد یک دولوپر تازه‌کار می‌خورد، شرح خطاها است؛ اگر دولوپری که برای اولین بار است با React کار می‌کند خطایی ایجاد کند، سیستم دقیقاً به او می‌گوید که چه چیزی را اشتباه انجام داده است، این خطا در کدام خط کد قرار دارد و چگونه می‌توان آن را اصلاح کرد.

سیستم رویداد اختصاصی: React به توسعه‌دهندگان این امکان را می‌دهد تا Event (ایونت یا رویداد) اختصاصی خود را بسازند که پس از آن در مجموعهٔ داده‌ها به‌روزرسانی می‌شود. لایبرری‌های مختلفی وجود دارند که به توسعه‌دهندگان کمک می‌کنند تا به‌ راحتی کدهای مربوط به هر نوع Callback را به مدلی با منطق برنامه‌نویسی بهتر انتقال دهند.

کدنویسی دیکلِرِتیو: React اقدام به جایگزینی API دستوری (Imperative) با مدل تشریحی (Declarative) کرده که ساخت رابط کاربری تعاملی را نیز آسان‌تر می‌کند؛ با استفاده از ویوها برای هر وضعیتی، ریئکت به طور مناسبی اقدام به آپدیت و رِندِر کامپوننت‌های مورد نیاز برای تغییر داده‌ها می‌کند که این کار باعث قابل پیش‌بینی‌تر و خواناتر شدن کدها می‌شود.

کدنویسی قابل پیش‌بینی‌تر: React به دولوپرها این امکان را می‌دهد تا هر فایل جاوااسکریپتی را با کامپوننت React درون آن باز کرده، حالت‌های قابل‌قبول آن کامپوننت را درک کنند و تنها با نگاه کردن به فایل، متوجه طرز کار و رفتار آن فایل بشوند.

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

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

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

توانایی انجام موازی کارها: فیسبوک فریمورکی به نام Async Display Kit ساخته که به توسعه‌دهندگان این امکان را می‌دهد تا پردازش‌های مختلف را از بار محاسبات تِرِد اصلی خارج کنند که باعث روان‌تر شدن انیمیشن‌ها می‌شود. این کار را می‌توان با استفاده از وب‌ورکرها نیز انجام داد اما در این روش محدودیت‌هایی هم وجود خواهد داشت؛ در واقع، وب‌ورکرها فرآیند پیچیده‌ای در دیکد کردن تصاویر دارند و قابلیت سنجش متن را ندارند و طراحی لی‌اوت در آن‌ها سخت‌تر است و این در صورتی است که تمامی این کارها با استفاده از ریئکت نیتیو به سادگی قابل انجام است.

شیوهٔ کدزنی دیکلِرِتیو: شیوهٔ کدنویسی تشریحی (Declarative) به یکی از دلایل اصلی محبوبیت React و React Native تبدیل شده است؛ برنامه‌نویسان می‌توانند کدهایی بنویسند که خوانا و انعطاف‌پذیر است و قابل دستکاری نیستند. این کدها باعث ایجاد رابط‌های کاربری شگفت‌انگیزی شده‌اند که تنها با نگاه کردن به کدهایشان، قابل‌فهم هستند. 

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

دسترسی به امکانات نیتیو: React امکان دسترسی به امکانات و کامپوننت‌های اختصاصی هر پلتفرم شامل ویجت‌های نیتیو را فراهم می‌کند که بدون آن‌ها اگر سعی کنید با استفاده از CSS ،HTML و JavaScript اقدام به پیاده‌سازی این ویجت‌ها نمایید، نتیجهٔ کارتان پر از لَگ و تأخیر شده و به درستی جواب نخواهد داد.

بارگذاری سریع‌تر: React Native گزینه‌هایی مثل Hot Reloading و Live Reloading را فراهم می‌کند که می‌توانید برای نحوهٔ ریلود شدن اپ خود برای مشاهدهٔ تغییرات از آن‌ها استفاده نمایید.

در روش Live -که پیش‌فرض هم هست- اپلیکیشن پس از به‌روزرسانی داده‌ها از صفحهٔ اول شروع به کار می‌کند که البته برای اپلیکیشن‌های تک صفحه‌ای مسئلهٔ مهمی نیست ولی اگر صفحهٔ مورد نظر چندلایه با صفحه اصلی فاصله داشته باشد، با روش Live کاربر باید از ابتدا مسیر قبلی را طی کند تا به صفحهٔ مورد نظر برسد.

در این مواقع، از روش Hot استفاده می‌شود که در آن پس از به‌روزرسانی، وضعیت قبلی حفظ می‌شود. این گزینه همچنین چرخهٔ بازخورد را نیز کاهش می‌دهد که در نتیجه به دولوپر امکان صدور به‌روزرسانی‌های OTA را با رِندِر لحظه‌ای می‌دهد. 

چند پلتفرمی بودن: خوبی React Native این است که به پلتفرم خاصی محدود نیست؛ یک فریمورک واحد می‌تواند برای کدنویسی، طراحی، و عرضهٔ اپ‌های گوناگون برای پلتفرم‌های مختلف مثل Android و iOS مورد استفاده قرار بگیرد. این امکان به طور قابل ملاحظه‌ای زمان مورد نیاز برای کدنویسی و تنظیم منابع ضروری برای هر پلتفرم‌ را کاهش می‌دهد.

خوانایی آسان‌تر: شیوهٔ کدنویسی این لایبرری‌ها باعث آسان‌تر شدن الگوها و فرآیند کدزنی می‌شود که در نتیجه خواندن کدها برای سیستم و همچنین توسعه‌دهنده راحت‌تر می‌شود؛ برنامه‌نویس به سادگی می‌تواند کد را ببیند و خروجی آن را بفهمد (به جای آنکه نیاز باشد آن را رِندِر کند تا متوجهٔ نحوهٔ عملکرد آن شود).

موارد فوق‌الذکر تنها بخشی از دلایلی بود که React و React Native را به لایبرری و فریمورک‌های محبوب در دنیای برنامه‌نویسی تبدیل کرده است. توانایی کد زدن با React Native مهارتی بسیار عالی -به‌خصوص برای توسعه‌دهندگان موبایل- محسوب می‌شود، مخصوصاً امروزه که عصر کنار زدن کامپیوترهای دسکتاپ‌ توسط دیوایس‌های هوشمند است!

آیا تجربهٔ استفاده از این دو لایبرری را در رزومهٔ کاری خود داشته‌اید و آیا با مزایای طرح شده در این مقاله در مورد هر کدام از آن‌ها موافقید؟ نظرات و دیدگاه‌های خود را با سایر کاربران سکان آکادمی به اشتراک بگذارید.