علی مقیمی
علی مقیمی
خواندن ۳ دقیقه·۳ سال پیش

react-admin چیست؟

بسم الله الرحمن الرحیم.

بعد از کلی سرچ کردن و بالا-پایین کردن گزینه های مختلف برای پیداکردن یه قالب واسه پیاده سازی پنل کاربری(داشبورد) وبسایتی که با کتابخونه ی reactjs نوشته میشه، به قالبی رسیدیم که واقعا از هرنظر نسبت به بقیه بهتر بود و کارکردن باهاش خیلی راحته. همچنین، از نظر سرعت و کارایی هم سریع و خوبه و خیال آدم رو یه جورایی راحت می کنه. ازنظر داکیومنت هم واقعا نسبت به بقیه ی قالب ها بسیار بهتر کارکرده. تعداد ستاره ها و fork ها در گیت هاب و دانلود هفتگی در npmjs اش هم نسبت به بقیه ی قالب های از این دست بسیار بیشتر و تفاوت چشمگیری داره.

تصویری از پنلی که با این ابزار ایجاد میشه
تصویری از پنلی که با این ابزار ایجاد میشه

اسم این قالب react-admin هست که آدرس داکیومنتش تو این لینکه. خود شرکتی که این قالب رو پیاده سازی کرده، یه دمو براش ایجاد کرده که آدرس اون هم اینجاست. بنابراین میشه کارایی که با این تمپلیت قابل انجام هست رو بفهمیم و ایده و الگو بگیریم. همچنین، یه کار خیییلیییی خوبی هم که این شرکت انجام داده، قراردادن سورس کد این دمو رو هم برای ماست که واقعا استفاده ازش برای من بسیار مفید بود و تونستم چیزای جدیدی هم با نگاه کردن به همین کدها و نحوه ی پیاده سازی قسمت های مختلف این دمو یادبگیرم و بعضا تو انجام کارایی که می خواستم انجام بدم کارگشا بود.


خوب حالا ویژگی های این ابزار چیه؟ تو ادامه یه نگاهی بهشون می اندازیم:

برخی ویژگی های react-admin :

  • سازگاری با هر نوع بک اند( rest api , graphql , soap ,... ).
  • پشتیبانی و استفاده از ابزارهای معروف و رایج و کارآمدی مانند: material-ui , redux , react-final-form .
  • سرعت بسیار عالی.
  • قابلیت بازگردانی عمل حذف و ویرایش در مولفه ی لیست آن به مدت چند ثانیه.
  • اعتبارسنجی داده های دریافتی از شبکه.
  • قابلیت ترجمه به زبان های مختلف(i18n یا همون internationalization که من خودم وقتی از این قابلیت استفاده کردم واقعا برام جذاب بود. مخصوصا اینکه فارسی رو هم پشتیبانی می کنه و تو داکش هم ابزار لازم برای پیاده سازی کلمات بصورت فارسی رو قرار داده که به نظر من با وجود این تحریم ها، خیلی جالب بود.)
  • بصورت باورنکردنی ای قابل شخصی سازی شدنه، مخصوصا اینکه از material-ui استفاده می کنه، انعطاف بسیار بالایی در customize شدن داره. این موضوع جایی خودشو بهتون نشون میده که می خواید همه چیز رو راست چین کنید(چون سایت های فارسی باید راست چین باشن)، ظاهر وبسایت رو تغییر بدین و....
  • یه dataprovider داره که کارای مربوط به ارسال و دریافت داده به/از سرور رو بصورت خودکار و در پشت صحنه انجام میده، یعنی شما یکی از پکیج های npm ای رو که داخل داک این قالب هست انتخاب می کنید و ازش استفاده می کنید و دیگه نگران این نیستید که الان باید درخواست بدم به سرور و رسپانس رو دریافت و پردازش کنم. خودش درخواست رو ارسال می کنه و دریافت و کنه و خودش هم داده ها رو داخل لیست قرار میده و نمایش میده. ضمن اینکه شما می تونید dataprovider دلخواه خودتون رو پیاده سازی کنید و به داشبوردتون بدید.
  • یه مولفه ای به نام datagrid داره که یه سری امکانات مثل sort , filter , pagination رو خودش انجام میده با یه دکمه که تو ui اش هست.
  • شخصی سازی ظاهر داشبورد.
  • و...

اما یه نکته ای که هست، یه ایراد خیلی بزرگ داره که اون هم بعضی جاها برای عوض کردن استایل ها (کدهای css) و override کردن اون ها یکم اصطکاک وجود داره و این کار سخت انجام میشه که اون هم بیشتر مربوط به وقتی میشه که ما می خوایم ظاهر و استایل و کدهای css کامپوننت های material-ui رو اون طور که دلخواه خودمونه بازنویسی(override) کنیم.

درکل با توجه به اینکه مطالب فارسی کمی درباره ی این ابزار منتشر نشده بود ولی حس می کردم که ایرانی ها درحال استفاده از اون هستن ولی مطلب چندانی درموردش منتشر نکردن، خواستم توضیحاتی درمورد اون بنویسم. انشاا... که مفید باشه.

تشکر.

reactadminreactfrontendreactadminچیست؟
شاید از این پست‌ها خوشتان بیاید