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

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

فواید استفاده از React:

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

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

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

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

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

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

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

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

فواید استفاده از React Native:

1. توانایی انجام موازی کارها
فیسبوک فریمورکی به نام Async display kit ساخته که به توسعه‌دهندگان این امکان را می‌دهد تا پردازش‌های مختلف را از بار محاسبات تِرِد اصلی خارج کنند که باعث روان‌تر شدن انیمیشن‌ها می‌شود. این کار را می‌توان با استفاده از Webworkerها نیز انجام داد اما در این روش محدودیت‌هایی هم وجود خواهد داشت. وب ورکرها فرآیند پیچیده‌ای در دیکد کردن تصاویر دارند و قابلیت سنجش متن را ندارند و طراحی لی‌اوت در آن‌ها سخت‌تر است، در صورتی که تمامی این کارها با استفاده از React Native به سادگی قابل انجام است.

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

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

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

5. بارگذاری سریع‌تر
React Native گزینه‌هایی مثل Hot Reloading و Live Reloading را فراهم می‌کند، که می‌توانید برای نحوهٔ ریلود شدن اپ خود برای مشاهده تغییرات از آن‌ها استفاده نمایید (در روش Live که پیش‌فرض هم هست، اپلیکیشن پس از به‌روزرسانی داده‌ها از صفحه اول شروع به کار می‌کند که البته برای اپلیکیشن‌های تک صفحه‌ای مساله مهمی نیست ولی اگر صفحهٔ موردنظر، چند لایه با صفحه اصلی فاصله داشته باشد، با روش Live، کاربر باید از ابتدا مسیر قبلی را طی کند تا به صفحهٔ موردنظر برسد. در این مواقع، از روش Hot استفاده می‌شود که در آن پس از به‌روزرسانی، وضعیت قبلی حفظ می‌شود) این گزینه همچنین چرخه بازخورد را نیز کاهش می‌دهد، که در نتیجه به توسعه‌دهنده امکان صدور به‌روزرسانی‌های OTA را با رندر لحظه‌ای می‌دهد. 

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

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

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

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

Benefits of React and React Native

0


مرتضی صمدی

فارغ‌التحصیل رشتهٔ نرم‌افزارم و موفق شدم تا‌به‌حال چندتا پروژهٔ نصفه‌و‌نیمه رو ناموفق رها کنم! جستجوگر خوبی هستم، طوری که تا‌به‌حال مشخصات بیشتر سخت‌افزارهای جدید مثلا اسمارتفون‌ها، کنسول‌ها و لپ‌تاپ‌ها رو میدونم؛ اطلاعات سیستم‌عامل‌های جدید مثل لینوکس، ویندوز و مک رو می‌خونم و امتحان می‌کنم، البته اگه بتونم. بازی‌های جدید رو میشناسم ولی بازی نمیکنم (چراش رو نمیدونم) و عاشق اینم که یک بار اتومبیل‌های قدیمی مثل فورد ماستنگ یا کامارو اس‌اس رو برونم.






از طریق این فرم، می توانید بدون ثبت نام نظر دهید و یا اگر قبلا ثبت نام کرده اید، با ورود ناحیه ی کاربری می توانید علاوه بر ثبت نظر، به مدیریت نظرات خود نیز بپردازید.
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)