ری اکت React
امروزه استفاده از کتابخانه‌ها(Libraries) و قالب‌ها(Framework) در فرانت اند(Front-end) به یک پیش‌نیاز و ضرورت برای توسعه مدرن وب(Modern Web Development) تبدیل شده‌است. React.js یکی از کتابخانه‌های فرانت اند است که به مرور زمان به فریم ورکی برای توسعه مدرن وب در دنیای جاوا اسکریپت تبدیل شده‌است. در سال‌های اخیر این کتابخانه سر و صدای زیادی به پا کرده‌است؛ برای پاسخ به این سوال که چگونه این کتابخانه به این سرعت به محبوبیت رسیده‌است، باید به بررسی این کتابخانه بپردازیم. از این رو چگونگی عملکرد آن و اینکه چه چیزی باعث تمایز این کتابخانه با سایر کتابخانه‌های جاوا اسکریپت شده‌است را در ادامه مورد بحث قرار می‌دهیم.
ری اکت جی اس(React.js) چیست؟
ری اکت جی اس یک فریم ورک و کتابخانه متن باز جاوا اسکریپت است که توسط شرکت متا(Meta) توسعه یافته‌است و برای ساخت رابط‌های کاربری(User Interface) تعاملی و برنامه‌های تحت وب استفاده می‌شود که مزیت اصلی آن سرعت و کارایی بالا و استفاده از کدهای کمتر نسبت به Vanilla JavaScript است که در آن از جاوا اسکریپت خالص و بدون بهره‌گیری از هیچگونه کتابخانه و فریم ورکی استفاده می‌شود. در React برنامه‌های خود را با ایجاد کامپوننت‌هایی با قابلیت استفاده مجدد(Reusable Components) توسعه می‌دهید که می‌توان آنها را به عنوان بلوک‌های لگو(Lego Block) مستقل در نظر گرفت. هر یک از این کامپوننت‌ها، مولفه‌های جداگانه‌ای هستند که مانند تکه‌های یک پازل عمل می‌کنند و وقتی کنار یکدیگر قرار میگیرند فرم نهایی رابط کاربری را تشکیل می‌دهند.
عملکرد اصلی React بهبود سرعت و ارائه عملکرد بهتر برای رندرینگ(Rendering) در یک اپلیکیشن است. در React به جای اینکه کل رابط کاربری را به صورت یکجا کدنویسی و پیاده‌سازی کنیم، آن را به اجزای کوچک‌تر تقسیم می‌کنیم که به آنها کامپوننت گفته می‌شود که هر یک از این کامپوننت‌ها تکه‌ای از کل رابط کاربری را تشکیل می‌دهند و قابلیت استفاده مجدد نیز دارند. این کار به طور چشم‌گیری باعث کاهش پیچیدگی پیاده‌سازی رابط کاربری می‌شود. ReactJS این کار را با ترکیب جاوا اسکریپت و DOM و فراهم کردن امکان ایجاد تغییرات در DOM انجام می‌دهد که نتیجه آن داشتن صفحات وب پویاتر، واکنش‌گرا(Responsive) و سریع است.
خلاصه‌ای از نحوه پیدایش React.js:
در سال 2011 شرکت متا بخاطر حجم عظیم دیتا و کاربران بسیار زیادش با یک چالش روبه رو شد. این شرکت قصد داشت تا با ایجاد یک رابط کاربری پویاتر و سریع‌تر، تجربه کاربری بهتری را برای کاربران خود ایجاد کند. برای عملی کردن این برنامه، یکی از مهندسین نرم افزار متا به نام “Jordan Walke” ری اکت را به وجود آورد. روش‌های ارائه‌شده توسط React سازمان یافته‌تر بوده و ساختاری بسیار کارآمدتر دارد که فرآیند ساخت و توسعه رابط کاربری را سریع‌تر و ساده‌تر می‌کند.
کمپانی متا برای اولین بار از React در قسمت Newsfeed خود استفاده کرد. این کتابخانه به طورکلی رویکرد این شرکت به توسعه وب را تغییر داد و پس از رونمایی آن، به علت داشتن ابزارهای بسیار کارآمد برای ایجاد تغییرات DOM، پیاده‌سازی ساده آسان رابط کاربری و متن باز بودن، به سرعت در دنیای جاوا اسکریپت محبوب شد و جایگاه ویژه‌ای پیدا کرد.
عملکرد React.js به چه صورت است؟
به طور معمول، برای پیدا کردن یک صفحه وب، URL آن را در مرورگر خود تایپ می‌کنید؛ سپس مرورگر شما برای آن صفحه وب درخواستی(Request) ارسال می‌کند و پس از دریافت پاسخ، صفحه را برای شما نمایش می‌دهد؛ پس از باز شدن صفحه، اگر بر روی لینکی کلیک کنید که به صفحه دیگری برود، مرورگر شما دوباره درخواستی دیگر برای نمایش صفحه جدید ارسال می‌کند و دوباره پس از دریافت پاسخ آن را نمایش می‌دهد. این الگوی رفت و برگشتی بین مرورگر شما یعنی کلاینت(Client) و سرور(Server) برای هر صفحه جدیدی که می‌خواهید به آن دسترسی داشته باشید مانند یک چرخه تکرار می‌شود. این رویکرد برای بارگذاری سایت‌های معمولی بسیار کاربردی و مناسب است؛ اما وبسایتی را در نظر بگیرید که بسیار مبتنی بر داده(Data-Driven) است؛ کاربرد همچین ساختاری برای این وبسایت‌ها تجربه کاربری خوبی را برای کاربران رقم نخواهد زد. علاوه بر این برای تیم توسعه‌دهنده نیز بسیار دشوار است، زیرا با ایجاد تغییرات در بخش جاوا اسکریپت باید در بخش DOM نیز به صورت دستی و جداگانه تغییرات ایجاد کرد؛ باید داده‌هایی که می‌خواهیم تغییر کنند را پیدا کنیم و DOM را بروزرسانی کنیم تا نتیجه درست را ارائه دهد و باعث بارگیری صحیح صفحه شود؛ اما React نحوه پیاده سازی متفاوتی را برای این کار در اختیار شما می‌گذارد که با عنوان اپلیکیشن تک صفحه ای یا SPA(Single-Page Application) شناخته می‌شود. یک SPA، در درخواست اول تنها یک HTML document را بارگذاری می‌کند؛ سپس بخش‌های دیگر مانند: محتوا، بدنه و... که نیاز به بروزرسانی با استفاده از جاوا اسکریپت دارند را بروز رسانی می‌کند. این الگو با عنوان “Client-side routing” شناخته می‌شود؛ زیرا کلاینت برای هر درخواست جدید نیاز نیست کل صفحه را بارگذاری مجدد کند و با هر درخواست، فقط قسمت‌هایی را که نیاز به تغییرات دارند پیدا کرده و بدون بارگذاری مجدد صفحه فقط قسمت‌های مورد نیاز را تغییر می‌دهد. این شیوه به علت سرعت بیشتر و عملکرد بهتر، قطعاً تجربه کاربری بهتری را نیز به دنبال خواهد داشت.
در اصل React از یک DOM مجازی استفاده می‌کند که یک کپی از DOM اصلی است؛ این DOM بلافاصله بارگذاری مجدد(Reload) می‌شود تا در صورت ایجاد تغییرات در داده‌ها، این تغییرات را اعمال کرده و نمایش دهد. بعد از آن، React شروع به مقایسه DOM مجازی خود با DOM اصلی می‌کند تا بفهمد دقیقا چه چیزهایی تغییر کرده‌است؛ سپس React شروع به پچ(Patch) کردن DOM اصلی با آپدیت‌ها می‌کند بدون اینکه نیازی به رندر(Render) کردن DOM مجازی باشد. در نتیجه، کامپوننت‌ها و رابط‌های کاربری React، تغییرات را با سرعت بسیار بالاتری اعمال و منعکس می‌کنند؛ زیرا دیگر نیاز نیست که به ازای هر تغییر جدید کل صفحه بارگذاری مجدد شود.
چرا React.js؟
برخلاف فریم ورک‌های دیگر مانند انگولار(Angular)، React قوانین و ساختار پیچیده‌ای برای پیاده‌سازی و سازماندهی کدها اعمال نمی‌کند. این بدان معناست که توسعه‌دهندگان و برنامه‌نویسان آزادی عمل زیادی برای پیاده‌سازی آن دارند و می‌توانند نحوه پیاده‌سازی آن را براساس نیاز خود شخصی سازی(Customize) کنند. با استفاده از React می‌توانید یک دکمه ساده، قسمتی از رابط کاربری و یا کل رابط کاربری اپلیکیشن خود را ایجاد کنید. از روش‌های مختلفی می‌توان از ری اکت استفاده کرد؛ برای مثال می‌توان از آن به صورت تدریجی در یک اپلیکیشنی که از قبل طراحی شده و موجود است استفاده کرده و آن را با فرم قبلی بکارگیری شده ادغام و یا جایگرین کرد، می‌توان از ابتدای کار کل پروژه را بر پایه و اصول React پیاده‌سازی کرد. پس از بررسی این مزایا، در یک کلام باید به انعطاف‌پذیری بالای React اعتراف کرد.
در قسمت بعدی نحوه بکارگیری React در پروژه و خصوصیات آن را مورد بررسی قرار خواهیم‌داد.
