Summarize this content to 400 words in Persian Lang
در سال‌های اخیر، تغییر قابل‌توجهی در نحوه رویکرد توسعه‌دهندگان به کتابخانه‌های UI، دور شدن از نصب کل کتابخانه‌های مؤلفه از طریق بسته‌های npm و به سمت کپی کردن مستقیم کدها در پایگاه کدشان، رخ داده است.
این روند تا حد زیادی توسط Shadcn/UI رایج شده است، کتابخانه‌ای که اجزای آماده و قابل تنظیمی را در اختیار توسعه‌دهندگان قرار می‌دهد که می‌توانند مستقیماً در یک پروژه برای حداکثر انعطاف‌پذیری کپی شوند.
چرا کپی کردن برای اجزای پیچیده برنده است؟
رویکرد کپی-پیست، به‌ویژه برای عناصر پیچیده رابط کاربری مانند صفحات احراز هویت، داشبوردهای دقیق، یا تجسم‌های پیچیده داده می‌درخشد. این مؤلفه‌ها به سفارشی‌سازی دقیق نیاز دارند که دستیابی به آن از طریق بسته‌های غیرقابل تغییر npm دشوار است.
این رویکرد به جای غلبه بر API کتابخانه با گزینه های پیکربندی بی پایان، به توسعه دهندگان اجازه می دهد تا از ترکیب پذیر و اعلامی ماهیت فریمورک های فرانت اند مدرن، امکان کنترل بیشتر بر هر قسمت از مؤلفه را فراهم می کند.
به جای انتخابگرهای طولانی و پیچیده CSS، می‌توانید مستقیماً استایل‌ها را روی عناصر یک مؤلفه اعمال کنید. به جای تزریق مولفه ها با استفاده از منطق تزریق وابستگی پیچیده، به سادگی اجزا را به دلخواه خود قرار می دهید یا مرتب می کنید.
نمودار shadcnui تعاملی در بستر بیت
این رویکرد با معرفی دستیارهای کدنویسی هوش مصنوعی اهمیت بیشتری پیدا کرده است. به جای تولید اجزاء از ابتدا از طریق هوش مصنوعی با اعلان های طولانی و پیچیده – یا درگیر شدن در یک مکالمه طولانی با دستیار – می توانید با یک ترکیب از پیش ساخته شده نزدیک به آنچه نیاز دارید شروع کنید.
با جاسازی کد در پروژه خود، زمینه خاصی را به دستیار هوش مصنوعی می دهید. از آنجا، می‌توانید از آن بخواهید که تنظیمات تدریجی، مانند تغییر سبک‌ها، افزودن ویژگی‌های دسترسی، یا تغییر طرح‌بندی را انجام دهد.
Bit Components: بسته هایی که می توانید مستقیما آنها را ویرایش کنید
بیت موجودیت جدیدی را به دنیای توسعه وب معرفی کرده است: کامپوننت بیت. به طور خلاصه، یک جزء Bit را می توان به عنوان یک بسته فوق العاده در نظر گرفت. شما می توانید آن را به اشتراک بگذارید، نصب کنید، آن را کپی کنید، و حتی مستقل از هر راه اندازی پروژه خاص روی آن همکاری کنید.
برای سادگی، می توانیم اجزای UI را به دو گروه تقسیم کنیم: اجزای سیستم طراحی و اجزای بلوک. در سیستم طراحی، اجزای اساسی مانند Card بلوک های ساختمانی اساسی هستند. در همین حال، اجزایی مانند a MediaCard، از عناصر سیستم طراحی تشکیل شده اند اما عملکرد پیشرفته تری ارائه می دهند.
انتخاب 1: آهنگسازی با اجزای سیستم طراحی
هنگام ایجاد یک جزء جدید، اولین گزینه این است که از سیستم طراحی خود ترکیب کنید. به عنوان مثال، برای ساخت یک کارت سفارشی، ممکن است لازم باشد اجزایی مانند Card، Button و Typography را ترکیب کنید.
اجزای مبتنی بر MUI به اشتراک گذاشته شده در پلتفرم بیت
این اجزا را می توان از طریق نصب npm، pnpm، yarn یا Bit در پروژه شما نصب کرد:
npm i @bitdesign/material-ui.surfaces.card bitdesign.material-ui/inputs/button @bitdesign/material-ui.data-display.typography
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
انتخاب 2: استفاده از اجزای بلوک
هنگام انتخاب یک جزء بلوک از پیش ساخته شده، چندین انتخاب انعطاف پذیر فراتر از نصب ساده دارید.
ساده ترین مسیر نصب مستقیم بسته کامپوننت و استفاده از API آن است. این رویکرد در صورتی کار می کند که جزء با نیازهای شما مطابقت داشته باشد یا فقط به تغییرات جزئی نیاز داشته باشد.
برای سناریوهایی که نیاز به ایجاد تغییرات گسترده دارید، دستور Bit's fork به شما این امکان را می دهد که کد کامل کامپوننت را در پروژه خود کپی کنید. این شامل فایل‌های منبع، وابستگی‌ها و پیکربندی‌ها (از جمله ابزارهای توسعه‌دهنده مؤلفه) است.
https://bit.cloud/learnbit-react/material-ui-blocks/content/media-card
به عنوان مثال، برای کپی کردن MediaCard کامپوننت و پیکربندی آن، بیت فورک را اجرا می کنیم و شناسه کامپوننت آن (نه نام بسته) را به عنوان آرگومان ارسال می کنیم:
bit fork learnbit-react.material-ui-blocks/content/media-card
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
شایان ذکر است که بیت نیز این را فراهم می کند bit import فرمان، که به شما امکان می دهد تغییراتی در کامپوننت ایجاد کنید و نسخه جدیدی را منتشر کنید. این گزینه مستلزم داشتن مجوزهای مناسب برای تغییر مؤلفه است (برخلاف bit fork دستور، که بر مؤلفه اصلی تأثیر نمی گذارد).
خارج کردن فایل های منبع وابستگی ها
هنگام جدا کردن قطعات با وابستگی، Bit آنها را به صورت خودکار برای راحتی نصب می کند. با این حال، اگر نیاز به دسترسی مستقیم به کد منبع یک وابستگی دارید، می‌توانید آن وابستگی‌ها را نیز جدا کنید.
به عنوان مثال، اگر می‌خواهید مؤلفه Button را کپی کنید، می‌توانید آن را نیز از مجموعه تیم خود در Bit Platform جدا کنید:
bit fork bitdesign.material-ui/inputs/button
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
در سال‌های اخیر، تغییر قابل‌توجهی در نحوه رویکرد توسعه‌دهندگان به کتابخانه‌های UI، دور شدن از نصب کل کتابخانه‌های مؤلفه از طریق بسته‌های npm و به سمت کپی کردن مستقیم کدها در پایگاه کدشان، رخ داده است.
این روند تا حد زیادی توسط Shadcn/UI رایج شده است، کتابخانه‌ای که اجزای آماده و قابل تنظیمی را در اختیار توسعه‌دهندگان قرار می‌دهد که می‌توانند مستقیماً در یک پروژه برای حداکثر انعطاف‌پذیری کپی شوند.
چرا کپی کردن برای اجزای پیچیده برنده است؟
رویکرد کپی-پیست، به‌ویژه برای عناصر پیچیده رابط کاربری مانند صفحات احراز هویت، داشبوردهای دقیق، یا تجسم‌های پیچیده داده می‌درخشد. این مؤلفه‌ها به سفارشی‌سازی دقیق نیاز دارند که دستیابی به آن از طریق بسته‌های غیرقابل تغییر npm دشوار است.
این رویکرد به جای غلبه بر API کتابخانه با گزینه های پیکربندی بی پایان، به توسعه دهندگان اجازه می دهد تا از ترکیب پذیر و اعلامی ماهیت فریمورک های فرانت اند مدرن، امکان کنترل بیشتر بر هر قسمت از مؤلفه را فراهم می کند.
به جای انتخابگرهای طولانی و پیچیده CSS، می‌توانید مستقیماً استایل‌ها را روی عناصر یک مؤلفه اعمال کنید. به جای تزریق مولفه ها با استفاده از منطق تزریق وابستگی پیچیده، به سادگی اجزا را به دلخواه خود قرار می دهید یا مرتب می کنید.
نمودار shadcnui تعاملی در بستر بیت
این رویکرد با معرفی دستیارهای کدنویسی هوش مصنوعی اهمیت بیشتری پیدا کرده است. به جای تولید اجزاء از ابتدا از طریق هوش مصنوعی با اعلان های طولانی و پیچیده – یا درگیر شدن در یک مکالمه طولانی با دستیار – می توانید با یک ترکیب از پیش ساخته شده نزدیک به آنچه نیاز دارید شروع کنید.
با جاسازی کد در پروژه خود، زمینه خاصی را به دستیار هوش مصنوعی می دهید. از آنجا، می‌توانید از آن بخواهید که تنظیمات تدریجی، مانند تغییر سبک‌ها، افزودن ویژگی‌های دسترسی، یا تغییر طرح‌بندی را انجام دهد.
Bit Components: بسته هایی که می توانید مستقیما آنها را ویرایش کنید
بیت موجودیت جدیدی را به دنیای توسعه وب معرفی کرده است: کامپوننت بیت. به طور خلاصه، یک جزء Bit را می توان به عنوان یک بسته فوق العاده در نظر گرفت. شما می توانید آن را به اشتراک بگذارید، نصب کنید، آن را کپی کنید، و حتی مستقل از هر راه اندازی پروژه خاص روی آن همکاری کنید.
برای سادگی، می توانیم اجزای UI را به دو گروه تقسیم کنیم: اجزای سیستم طراحی و اجزای بلوک. در سیستم طراحی، اجزای اساسی مانند Card بلوک های ساختمانی اساسی هستند. در همین حال، اجزایی مانند a MediaCard، از عناصر سیستم طراحی تشکیل شده اند اما عملکرد پیشرفته تری ارائه می دهند.
انتخاب 1: آهنگسازی با اجزای سیستم طراحی
هنگام ایجاد یک جزء جدید، اولین گزینه این است که از سیستم طراحی خود ترکیب کنید. به عنوان مثال، برای ساخت یک کارت سفارشی، ممکن است لازم باشد اجزایی مانند Card، Button و Typography را ترکیب کنید.
اجزای مبتنی بر MUI به اشتراک گذاشته شده در پلتفرم بیت
این اجزا را می توان از طریق نصب npm، pnpm، yarn یا Bit در پروژه شما نصب کرد:
npm i @bitdesign/material-ui.surfaces.card bitdesign.material-ui/inputs/button @bitdesign/material-ui.data-display.typography
انتخاب 2: استفاده از اجزای بلوک
هنگام انتخاب یک جزء بلوک از پیش ساخته شده، چندین انتخاب انعطاف پذیر فراتر از نصب ساده دارید.
ساده ترین مسیر نصب مستقیم بسته کامپوننت و استفاده از API آن است. این رویکرد در صورتی کار می کند که جزء با نیازهای شما مطابقت داشته باشد یا فقط به تغییرات جزئی نیاز داشته باشد.
برای سناریوهایی که نیاز به ایجاد تغییرات گسترده دارید، دستور Bit's fork به شما این امکان را می دهد که کد کامل کامپوننت را در پروژه خود کپی کنید. این شامل فایل‌های منبع، وابستگی‌ها و پیکربندی‌ها (از جمله ابزارهای توسعه‌دهنده مؤلفه) است.
https://bit.cloud/learnbit-react/material-ui-blocks/content/media-card
به عنوان مثال، برای کپی کردن MediaCard کامپوننت و پیکربندی آن، بیت فورک را اجرا می کنیم و شناسه کامپوننت آن (نه نام بسته) را به عنوان آرگومان ارسال می کنیم:
bit fork learnbit-react.material-ui-blocks/content/media-card
شایان ذکر است که بیت نیز این را فراهم می کند bit import فرمان، که به شما امکان می دهد تغییراتی در کامپوننت ایجاد کنید و نسخه جدیدی را منتشر کنید. این گزینه مستلزم داشتن مجوزهای مناسب برای تغییر مؤلفه است (برخلاف bit fork دستور، که بر مؤلفه اصلی تأثیر نمی گذارد).
خارج کردن فایل های منبع وابستگی ها
هنگام جدا کردن قطعات با وابستگی، Bit آنها را به صورت خودکار برای راحتی نصب می کند. با این حال، اگر نیاز به دسترسی مستقیم به کد منبع یک وابستگی دارید، می‌توانید آن وابستگی‌ها را نیز جدا کنید.
به عنوان مثال، اگر می‌خواهید مؤلفه Button را کپی کنید، می‌توانید آن را نیز از مجموعه تیم خود در Bit Platform جدا کنید:
bit fork bitdesign.material-ui/inputs/button
