في السنوات الأخيرة، كان هناك تحول ملحوظ في كيفية تعامل المطورين مع مكتبات واجهة المستخدم، والابتعاد عن تثبيت مكتبات المكونات بأكملها عبر حزم npm والاتجاه نحو نسخ ولصق التعليمات البرمجية مباشرة في قاعدة التعليمات البرمجية الخاصة بهم.

لقد تم نشر هذا الاتجاه إلى حد كبير بواسطة Shadcn/UI، وهي مكتبة توفر للمطورين مكونات جاهزة وقابلة للتخصيص يمكن نسخها مباشرة إلى المشروع للحصول على أقصى قدر من المرونة.

لماذا يفوز النسخ للمكونات المعقدة

يتألق نهج النسخ واللصق، خاصة بالنسبة لعناصر واجهة المستخدم المعقدة مثل صفحات المصادقة، أو لوحات المعلومات التفصيلية، أو تصورات البيانات المعقدة. تتطلب هذه المكونات تخصيصًا دقيقًا يصعب تحقيقه من خلال حزم npm غير القابلة للتغيير.

بدلاً من إغراق واجهة برمجة تطبيقات المكتبة بخيارات تكوين لا نهاية لها، يتيح هذا الأسلوب للمطورين الاستفادة من طبيعة القابلة للتركيب والتصريح لأطر عمل الواجهة الأمامية الحديثة، مما يتيح تحكمًا أكبر في كل جزء من المكون.

بدلاً من محددات CSS الطويلة والمعقدة، يمكنك تطبيق الأنماط مباشرة على العناصر الموجودة في المكون. بدلاً من حقن المكونات باستخدام منطق حقن التبعية المعقد، يمكنك ببساطة وضع المكونات أو إعادة ترتيبها بالطريقة التي تختارها.

مخطط shadcnui تفاعلي على منصة Bit

وقد اكتسب هذا النهج أهمية أكبر مع تقديم مساعدي البرمجة بالذكاء الاصطناعي. بدلاً من إنشاء مكونات من الصفر عبر الذكاء الاصطناعي بمطالبات طويلة ومعقدة - أو الانخراط في محادثة مطولة مع المساعد - يمكنك البدء بتركيبة معدة مسبقًا قريبة مما تحتاج إليه.

من خلال تضمين الكود في مشروعك، فإنك تمنح مساعد الذكاء الاصطناعي سياقًا محددًا وملموسًا. ومن هناك، يمكنك أن تطلب منه إجراء تعديلات تدريجية، مثل تعديل الأنماط، أو إضافة ميزات إمكانية الوصول، أو تغيير التخطيط.

مكونات البت: الحزم التي يمكنك تحريرها مباشرة

قدمت شركة Bit كيانًا جديدًا لعالم تطوير الويب: The Bit Component. باختصار، يمكن اعتبار مكون البت بمثابة حزمة فائقة. يمكنك مشاركته وتثبيته ونسخه وحتى التعاون فيه بشكل مستقل عن أي إعداد مشروع معين.

للتبسيط، يمكننا تقسيم مكونات واجهة المستخدم إلى مجموعتين: مكونات نظام التصميم ومكونات الكتلة. في نظام التصميم، تعتبر المكونات الأساسية مثل البطاقة بمثابة لبنات بناء أساسية. وفي الوقت نفسه، تتكون مكونات الكتلة، مثل MediaCard، من عناصر نظام التصميم ولكنها توفر وظائف أكثر تقدمًا.

الاختيار 1: التأليف باستخدام مكونات نظام التصميم

عند إنشاء مكون جديد، الخيار الأول هو الإنشاء من نظام التصميم الخاص بك. على سبيل المثال، لإنشاء بطاقة مخصصة، قد تحتاج إلى دمج مكونات مثل البطاقة والزر والطباعة.

المكونات المستندة إلى MUI المشتركة على منصة Bit

يمكن تثبيت هذه المكونات في مشروعك من خلال تثبيت npm أو pnpm أو الغزل أو Bit:

npm i @bitdesign/material-ui.surfaces.card bitdesign.material-ui/inputs/button @bitdesign/material-ui.data-display.typography

الاختيار 2: استخدام مكونات الكتلة

عند اختيار مكون كتلة تم إنشاؤه مسبقًا، لديك العديد من الخيارات المرنة التي تتجاوز التثبيت البسيط.

أسهل طريق هو تثبيت حزمة المكونات مباشرة واستخدام واجهة برمجة التطبيقات الخاصة بها. يعمل هذا الأسلوب بشكل جيد إذا كان المكون يناسب احتياجاتك خارج الصندوق أو يتطلب تعديلات بسيطة فقط.

بالنسبة للسيناريوهات التي تحتاج فيها إلى إجراء تغييرات واسعة النطاق، يسمح لك أمر Bit's fork بنسخ الكود الكامل للمكون إلى مشروعك. يتضمن ذلك الملفات المصدر والتبعيات والتكوينات (بما في ذلك أدوات تطوير المكون).

https://bit.cloud/learnbit-react/material-ui-blocks/content/media-card

على سبيل المثال، لنسخ مكون MediaCard وتكوينه، سنقوم بتشغيل bit fork وتمرير معرف المكون الخاص به (وليس اسم الحزمة) كوسيطة:

bit fork learnbit-react.material-ui-blocks/content/media-card

من الجدير بالذكر أن Bit يوفر أيضًا أمر bit import، والذي يسمح لك بإنشاء تغييرات على المكون وإصدار إصدار جديد. يتطلب هذا الخيار أن يكون لديك الأذونات المناسبة لتعديل المكون (بخلاف أمر bit fork، الذي لا يؤثر على المكون الأصلي).

إخراج الملفات المصدر للتبعيات

عند تفرع المكونات ذات التبعيات، يقوم Bit بتثبيتها تلقائيًا من أجل الراحة. ومع ذلك، إذا كنت بحاجة إلى الوصول المباشر إلى التعليمات البرمجية المصدر للتبعية، فيمكنك أيضًا تفرع تلك التبعيات.

على سبيل المثال، إذا كنت تريد نسخ مكون Button، فيمكنك تفرعه أيضًا من مجموعة فريقك على Bit Platform:

bit fork bitdesign.material-ui/inputs/button