بررسی استخوان‌بندی فریمورک React.js

React یکی از محبوب‌ترین فریمورک‌های جاوا اسکریپت است. با این‌که بسیاری از فریمورک‌های دیگر هم وجود دارد که ویژگی‌های زیادی را ارائه می‌دهند، اما ری‌اکت همچنان تسلط خود بر بازار را حفظ کرده، ضمنا یک اکوسیستم وسیع دارد که به سرعت در حال تغییر است. هدف این مقاله ارائه یک نمای کلی از آخرین تغییرات ری‌اکت مانند Remix، کامپوننت‌های سرور، هیدراتاسیون جزئی و موارد دیگر خواهد بود.

تاریخچه React

Bolt و FaxJS

حدود یک دهه پیش، فیسبوک شروع به جستجوی راهی برای مدرن کردن وب اپلیکیشن خود کرد. چرا که روند توسعه آن‌ها در حال پیچیده‌تر شدن بود و به فریمورکی نیاز داشتند که ساخت و نگهداری برنامه را آسان‌تر کند. برای رفع این مشکل، پروژه‌ای به نام Bolt ایجاد کردند. Bolt یک فریمورک MVC بود که بر روی JavelinJS ساخته شد و بسیاری از مشکلات فیسبوک را حل کرد. با این حال چندان کامل نبود. جردن واک - توسعه دهنده فیسبوک - نسخه جدیدتری از Bolt به نام FaxJS ایجاد کرد. این فریمورک ویژگی‌های زیادی را ارائه می‌داد که امروزه React آن‌ها را دارد، مانند رندرینگ سمت کلاینت و سرور، تغییر DOM و موارد دیگر. بعدها جردن واک آن را به FaxJS FBolt تغییر نام داد و شروع به استفاده از آن در پایگاه کد فیسبوک کرد.

تولد React

در سال 2013 فیسبوک FBolt را به React تغییر نام داد. به علاوه آن‌ها شروع به کار بر روی JSX کردند (یک لایه انتزاعی برای تعریف رابط کاربری). ری‌اکت کامپایل کردن دستورات HTML را برای فراخوانی توابع جاوا اسکریپت انجام می‌داد. جالب اینجاست طبق گفته تیم ری‌اکت، JSX در ابتدا مبتنی بر PHP بود که امکان قرار دادن XML را فراهم می‌کرد.

رشد اولیه

ری‌اکت بعد از آن کمی شروع به رشد کرد. ریپازیتوری گیت هاب آن در اواخر سال 2014 به 10 هزار ستاره، در سال 2015 به 20 هزار و در سال 2016 به 50 هزار ستاره رسید. علاوه بر این اکوسیستم آن با چیزهایی مانند Reactiflux شروع به پیشرفت کرد.

Hook

هوک روشی برای تعریف متدهای چرخه حیات در کامپوننت‌های تابعی است. در سال 2019 ری‌اکت هوک‌هایی را منتشر کرد که نحوه نوشتن برنامه‌های کاربردی را کاملا تغییر داد. قبل از این‌که هوک‌ها وجود داشته باشند، باید از کلاس‌ها برای کامپوننت‌های stateful استفاده می‌کردید. چون کامپوننت‌های تابعی فقط می‌توانستند کامپوننت‌های ساده‌ای باشند که فقط بر propها متکی‌اند. با این حال هوک‌ها روشی برای دسترسی به state از طریق توابع ارائه می‌کردند که راه را برای استفاده کامل از کامپوننت‌های تابعی باز می‌کرد. امروزه اکثر برنامه‌های جدید از هوک‌ها به جای کامپوننت‌های کلاس استفاده می‌کنند، زیرا استفاده از آن‌ها ساده‌تر و مختصرتر است.

چرا از React استفاده می‌شود؟

به‌روزرسانی داینامیک

در صورت تغییر داده‌ها، ری‌اکت به‌طور خودکار رابط کاربری شما را به‌روزرسانی می‌کند و این امر می‌تواند در زمان صرفه‌جویی نماید. به عنوان مثال اگر جدولی از تراکنش‌های مختلف را تنظیم کرده باشید که لازم است هر 15 ثانیه یک بار به‌روز شود، بدون استفاده از ری‌اکت باید بررسی و به‌روزرسانی را به صورت دستی تعریف کنید. اما با بهره‌گیری از فریمورکی مانند ری‌اکت فقط می‌توانید مقدار داده‌ها را تغییر دهید و همه چیز خودکار برای شما اتفاق می‌افتد. به‌روزرسانی داینامیک همچنین باعث می‌شود که رابط کاربری شما روان‌تر کار کند، زیرا می‌توانید تضمین کنید که داده‌ها در هر لحظه به نمایش در می‌آیند.

رندر ایزومورفیک

ری‌اکت می‌تواند رابط کاربری را هم روی کلاینت و هم روی سرور با کد یکسان رندر کند که فرصت‌هایی را برای رندر سمت سرور و هیدراتینگ در کلاینت ایجاد می‌نماید. به این ترتیب با بسیاری از زبان‌های سنتی که در آن‌ها می‌توانید HTML استاتیک تولید کنید در تضاد است، اما آن را به طور خودکار تعاملی نمی‌کند.

ری‌اکت این کار را از طریق دو API مختلف انجام می‌دهد. یکی تابع API رندرینگ به نام render که از طریق react-dom در دسترس است و JSX را به کلاینت منتقل می‌کند. از طرفی برای رندر HTML روی سرور renderToString زیرمجموعه react-dom/server وجود دارد که HTML استاتیک را رندر کرده و می‌تواند بعدا با استفاده از render هیدراته شود.

قالب‌بندی پیشرفته

ری‌اکت به شما این امکان را می‌دهد که کارهای زیادی برای کاهش تکرار در کد خود انجام دهید، از جمله قرار دادن جاوا اسکریپت و ماژولار کردن نشانه‌گذاری در داخل کامپوننت‌ها. این ویژگی‌ها به کاهش تکرار و تعمیر و نگهداری کمک کرده و به‌روزرسانی قطعات تکراری را آسان‌تر می‌کنند.

Remix و فریمورک‌های جدید

Remix یک فریمورک جدید ری‌اکت است (مانند Next.js) و توسط افرادی که React Router را ساخته‌اند ایجاد شده و نوید یکپارچگی بهتر با ویژگی‌های پلتفرم وب، ادغام با لبه و کد ایزومورفیک ساده‌تر را می‌دهد. این فریمورک در حال حاضر موفق به کسب 12 هزار ستاره در گیت هاب شده است. یکی دیگر از ویژگی‌های منحصربه‌فردی که دارد این است که به جای تولید سایت استاتیک و رندر داینامیک، به طور کامل بر روی رندر سمت سرور تمرکز می‌کند. یعنی با این‌که از تولید سایت استاتیک پشتیبانی نمی‌کند، اما اگر ترجیح می‌دهید داده‌های داینامیک را در سرور به جای استفاده از واکشی API روی کلاینت رندر کنید، بسیار عالی کار می‌کند. البته هم به منظور رندر کردن روی سرور و هم واکشی داده‌ها روی کلاینت برای داده‌های داینامیک، تغییراتی وجود داشته که بستگی به موارد استفاده شما دارد. در نهایت با توجه به تجربه توسعه دهنده React Router، ریمیکس مسیریابی پیشرفته‌ای را با ویژگی‌هایی مانند مسیریابی تودرتو و خطاهای ایزوله ارائه می‌دهد.

ریمیکس تنها فریمورک جدید ری‌اکت نیست، بلکه موارد دیگری مانند Astro هم وجود دارد. Astro یک مولد سایت استاتیک بوده که از چندین رویکرد برای ایجاد رابط کاربری پشتیبانی می‌کند. Astro از این نظر قابل توجه است که قابلیت پشتیبانی از هیدراتاسیون جزئی را دارد و جاوا اسکریپت ارسال شده به کلاینت را تنها با گنجاندن آنچه برای تعاملی کردن برنامه وب شما لازم است، کاهش می‌دهد.

React 18

ری‌اکت 18 آخرین نسخه پایدار این فریمورک است که بسیاری از ویژگی‌های جدید مانند رندر همزمان را فراهم می‌کند. رندر همزمان اجازه می‌دهد تا چندین نسخه از رابط کاربری به طور همزمان ساخته شود و فرصت‌هایی را برای ویژگی‌های جدید مانند به‌روزرسانی دسته‌ای خودکار، استریم رندرینگ در سمت سرور و موارد دیگر به وجود می‌آورد. این ویژگی‌ها به بهبود عملکرد کمک زیادی می‌کنند. به عنوان مثال به‌روزرسانی‌های دسته‌ای خودکار تعداد به‌روزرسانی‌های رابط کاربری مورد نیاز را کاهش می‌دهند که باعث افزایش عملکرد کلاینت می‌شود.

CSS

روش‌های متعددی برای استفاده از CSS در ری‌اکت وجود دارد. هرچند می‌توانید از CSS بومی استفاده کنید، اما بسیاری از رویکردهای دیگر هستند که با UI React بهتر کار می‌کنند.

CSS-in-JS

این تکنیک به خوبی با ری‌اکت ادغام می‌شود. محبوب‌ترین نمونه ابزار JS styled-components است که به شما امکان می‌دهد با استفاده از قالب‌های تگ‌شده، استایل‌ها را در جاوا اسکریپت تعریف کنید. با این حال رویکردهای جدیدتری برای CSS-in-JS نیز هست که اغلب از جهات خاصی برتری دارند. برخی از جالب‌ترین آن‌ها Linaria و Vanilla-Extract هستند. Linaria یک کتابخانه بوده که هدف آن بهینه‌سازی CSS در JS و کامپایل آن به CSS بومی است. این کتابخانه همچنین دارای یکپارچه‌سازی React داخلی است که اضافه کردن استایل داینامیک را بدون زمان اجرا آسان‌تر می‌کند. vanilla-extract نیز همین کار را انجام می‌دهد، با این تفاوت که بهتر با TypeScript ادغام می‌شود و ویژگی‌هایی مانند ایجاد استایل‌های کاربردی سفارشی را ارائه می‌دهد.

Atomic CSS

این رویکرد به دلیل scope آن به خوبی با ری‌اکت کار می‌کند. از آنجایی که استایل‌ها اتمیک هستند، به طور خودکار فقط به عناصری که از آن‌ها استفاده می‌کنند اختصاص داده می‌شوند و استایل‌دهی کامپوننت‌ها را آسان‌تر می‌کنند. علاوه بر این تکرار Atomic CSS را می‌توان با استفاده از کامپوننت‌ها حل کرد. برخی از جالب‌ترین کتابخانه‌های Atomic CSS در حال حاضر Tailwind و UnoCSS هستند. Tailwind به دلیل تنوع گسترده‌ای از ویژگی‌ها و سهولت استفاده، تا حد زیادی به عنوان محبوب‌ترین کتابخانه اتمیک CSS موجود شناخته می‌شود. UnoCSS نیز یک پروژه جدیدتر است که به طور قابل توجهی سریعتر و انعطاف‌پذیرتر از Tailwind عمل می‌کند.

جایگزین‌های سریع‌تر برای React

با این‌که ری‌اکت مزایای زیادی دارد، اما سرعت عملکرد جزء آن‌ها نیست. خوشبختانه جایگزین‌هایی برای آن وجود دارد که از API یکسانی استفاده می‌کنند. از بارزترین نمونه‌ها می‌توان به Preact و Solid اشاره کرد. Preact سریع‌تر و به طور قابل توجهی کوچک‌تر (3 کیلوبایت) از ری‌اکت است و یک API واحد دارد. تقریبا در هر جایی می‌توانید از Preact استفاده کنید و حتی به عنوان جایگزین از preact/compat بهره بگیرید. از طرف دیگر Solid یک API یکسان با ری‌اکت ندارد، اما روش‌های متفاوتی داشته که به آن اجازه می‌دهد از مزیت عملکردی بزرگی برخوردار شود. از نظر زمان اجرا Solid به طور قابل توجهی سریع‌تر از Preact و React است. Solid با چشم‌پوشی از DOM مجازی و ساختن کامپوننت‌ها تنها یک بار به جای هر زمان که state به‌روز می‌شود، به این امر دست می‌یابد. Solid هم کوچک‌تر از React است، اما نسبت به Preact حجم بیشتری دارد.