وقتی صحبت از ساخت برنامه های React مدرن، مقیاس پذیر و از نظر بصری جذاب می شود، ShadCN و رادیکس بهترین دوستان یک توسعه دهنده هستند.
این ابزارها بر آسان‌تر کردن زندگی شما تمرکز می‌کنند و در عین حال اطمینان می‌دهند که رابط کاربری شما براق، در دسترس و کاملاً تحت کنترل شماست. بیایید آنها را به روشی سرد و بدون هیاهو از بین ببریم.
ShadCN: نه فقط یک کتابخانه دیگر
ShadCN چیست؟
ShadCN کتابخانه کامپوننت معمولی یا چارچوب رابط کاربری شما نیست.
بیشتر شبیه یک است مجموعه ای از اجزای قابل استفاده مجدد که می توانید مستقیماً در پروژه خود کپی و جایگذاری کنید.
بله، شما به معنای واقعی کلمه مالک کد زمانی هستید که آن را در مخزن خود قرار دهید.
چرا باحاله؟
- بدون به روز رسانی اجباری: اجزای شما به طور جادویی تغییر نمی کنند مگر اینکه آنها را به روز کنید. تا زمانی که وابستگی‌های شما به نسخه‌های خاصی قفل می‌شوند، رابط کاربری شما ثابت می‌ماند.
- اثبات آینده: مطمئناً، اگر مرورگرها تصمیم بگیرند که چیزی را 10 سال بعد منسوخ کنند، ممکن است لازم باشد آن را اصلاح کنید. اما هی، این یک مشکل با هر کدی است.
- منطق حداقلی: ShadCN چرخ را دوباره اختراع نمی کند. این بیشتر به رابط کاربری Radix و سایر کتابخانه ها برای کارهای سنگین تکیه می کند.
زمان مقایسه
| ShadCN UI |
رابط کاربری مواد (MUI) |
طراحی مورچه | |
|---|---|---|---|
| ستاره های GitHub | 78 هزار | 94 هزار | 93 هزار |
| اندازه بسته نرم افزاری | صفر | 93.7 کیلوبایت | 429 کیلوبایت |
| اجزاء | 48 | 66 | 65 |
| بلوغ | جوان و سریع رشد می کند | کتابخانه تاسیس کرد | کتابخانه تاسیس کرد |
| بهترین برای | پروژه های کوچک یا شخصی | پروژه های کوچک تا بزرگ | پروژه های کوچک تا بزرگ |
موارد اضافی برای کاوش
رادیکس: ستون فقرات رابط کاربری مدرن
Radix UI چیست؟
رادیکس مجموعه ای از UI ابتدایی بدون استایل و در دسترس برای React.
به آن به عنوان بلوک های سازنده اجزای رابط کاربری سفارشی خود فکر کنید.
Radix که در نوامبر 2020 راه اندازی شد، به سرعت در میان توسعه دهندگانی که عاشق کنترل کامل بر طرح های خود هستند، محبوبیت پیدا کرد.
چرا رادیکس راکز
- دسترسی اول: با استانداردهای WAI-ARIA ساخته شده است، بنابراین نیازی به عرق کردن چیزهای کوچک ندارید.
- ترکیب پذیری بالا: شما می توانید فقط از قطعات مورد نیاز خود بدون اضافه کردن نفخ غیر ضروری استفاده کنید.
- آزادی بی سبک: به اجزای خود هر طور که دوست دارید استایل بدهید. باد دم؟ CSS ساده؟ انتخاب با شماست.
- استفاده در دنیای واقعی: حتی Vercel از Radix primitives استفاده می کند. (این یه چیزی میگه!)
مطالعات موردی
مطالعات موردی Radix، از جمله اجرای Vercel را بررسی کنید.
زمان مقایسه
| رابط کاربری رادیکس |
رابط کاربری بدون سر (Tailwind) |
رابط کاربری پایه (MUI) |
|
|---|---|---|---|
| ستاره های GitHub | 16 هزار | 26 هزار | 2k |
| اندازه بسته نرم افزاری | 248b | 33.8 کیلوبایت | 48.7 کیلوبایت |
| اجزاء | 28 | 10 | 20 |
| زمین بازی | ✅ | ❌ | ❌ |
هشدار پادکست!
می خواهید بیشتر بدانید؟ بررسی کنید
امتیاز: اجزای تولید شده با هوش مصنوعی با V0
آیا از V0 اطلاع داشتید؟ این ابزار هوش مصنوعی مولد ربات چت Vercel برای ساخت اجزای رابط کاربری است.
با پشتیبانی از ShadCN UI و Tailwind CSS، کد مؤلفه را بر اساس درخواست های شما تولید می کند.
ایده آل برای زمانی که وقتتان کم است اما اجزای شیک و کاربردی می خواهید.
افکار نهایی
ShadCN و Radix یک ترکیب قاتل برای توسعه دهندگانی ایجاد می کنند که مولفه های قابل دسترس، قابل تنظیم و سبک وزن می خواهند.
آنها برای پروژه های شخصی عالی هستند و عمدتاً برای برنامه های بزرگتر مقیاس پذیر هستند.
با تم‌ها، بلوک‌ها و نمودارهای ShadCN، می‌توانید در ساخت چیزی عالی شروع کنید.
اتفاقا من استفاده کردم ShadCN برای ساختن LiveAPI—یک ابزار فوق العاده راحت برای تولید اسناد API برای توسعه دهندگان باطن برای تولید اسناد API تنها با چند کلیک.
این فقط 2-4 کلیک است و نیازی به نصب Swagger یا نوشتن اسناد به صورت دستی ندارد. آن را بررسی کنید!
