Frontend Academy · درس

استهلاك نظام التصميم

ثبّت المكتبة في تطبيق مضيف، وطبّق موفّر السمة، وأزل المكوّنات غير المستخدمة عبر tree-shaking، وحافظ على تحديث الإصدارات

استهلاك نظام التصميم درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

التثبيت والإعداد

أضف نظام التصميم كتَبعية. تحتاج بعض المكتبات إلى إعداد إضافي: موفّر، أو استيراد CSS، أو تحميل الخطوط.

npm install @yourorg/design-system

// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';

<DesignSystemProvider theme="light">
  <App />
</DesignSystemProvider>

موفّر السمات

توفّر معظم أنظمة التصميم موفّراً على المستوى الأعلى للسمات (الفاتحة/الداكنة) واللغة والسياق المشترك. غلّف تطبيقك به مرة واحدة.

<DesignSystemProvider
  theme={isDarkMode ? darkTheme : lightTheme}
  locale="en"
>
  <App />
</DesignSystemProvider>

استيراد المكوّنات

استورد ما تحتاج إليه فقط؛ وبالاقتران مع tree-shaking، لن تُضمّن في الحزمة إلا المكوّنات المستخدمة.

import { Button, Card, TextField } from '@yourorg/design-system';

function LoginForm() {
  return (
    <Card>
      <TextField label="Email" type="email" />
      <TextField label="Password" type="password" />
      <Button variant="primary">Sign In</Button>
    </Card>
  );
}

الاستيراد من المسارات الفرعية

تدعم بعض المكتبات الاستيراد من المسارات الفرعية لتحسين الوضوح وتقليل حجم الحزمة.

// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card   from '@yourorg/design-system/Card';

// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';

نصائح حول Tree-shaking

يزيل Tree-shaking الصادرات غير المستخدمة أثناء التجميع. ويتطلب ذلك: عملية بناء ESM، وsideEffects: false في package.json الخاص بالمكتبة، واستيرادات مسماة في شيفرتك. تحقّق من النتيجة باستخدام محلّل الحزمة.

التخصيص باستخدام Theme

يمكنكم تجاوز رموز السمة لتتوافق مع علامتكم التجارية، من دون تفريع المكتبة.

import { defaultTheme } from '@yourorg/design-system';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#ff5733'
  }
};

<DesignSystemProvider theme={customTheme}>
  <App />
</DesignSystemProvider>

توسيع المكوّنات

هل تحتاجون إلى زر مختلف قليلًا؟ ركّبوا المكوّنات بدلًا من تفريعها.

import { Button as DSButton } from '@yourorg/design-system';

function IconButton({ icon, ...props }) {
  return (
    <DSButton {...props}>
      <Icon name={icon} />
      {props.children}
    </DSButton>
  );
}

قراءة CHANGELOG قبل الترقية

اقرؤوا CHANGELOG دائمًا قبل الترقية إلى إصدارات MAJOR. ابحثوا عن التغييرات الكاسرة، وcodemods الخاصة بالترحيل، وواجهات API الجديدة الموصى بها.

Codemods للترقيات الكبرى

توفّر المكتبات الجيدة codemods، وهي نصوص jscodeshift البرمجية التي تؤتمت عمليات الترحيل الناتجة عن التغييرات الكاسرة.

npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIs

التثبيت مقابل Caret

تسمح "^1.4.2" بالترقية إلى إصدارات 1.x.y، وهذا محفوف بالمخاطر إذا لم تلتزم المكتبة بـ SemVer. أما "1.4.2" فتثبّت الإصدار تمامًا، وهي الطريقة الأكثر أمانًا، لكن عليكم التحديث يدويًا. تساعد Renovate وDependabot في أتمتة التحديثات الأسبوعية.

الإبلاغ عن المشكلات إلى المشروع الأصلي

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

تجنّب تجاوزات الأنماط

لا تتدخلوا في الأجزاء الداخلية لنظام التصميم باستخدام !important أو محددات العناصر السلفية. استخدموا واجهة API العامة للسمات. تتعطل التجاوزات الملتوية عند الترقية التالية.

تحقق سريع

إذا كان نظام التصميم يستخدم ESM وعمليات التصدير المُسمّاة، فما الطريقة الأنظف لاستخدام المكوّنات التي تحتاجون إليها فقط؟

مراجعة: استخدام نظام التصميم

ثبّتوا الحزمة ثم لفّوا التطبيق داخل DesignSystemProvider مع السمة. استخدموا عمليات استيراد ESM المُسمّاة للاستفادة من tree-shaking. تجاوزوا رموز السمة لتناسب العلامة التجارية. ركّبوا المكوّنات بدلًا من تفريعها. اقرؤوا CHANGELOG قبل ترقيات MAJOR، وشغّلوا codemods إن كانت متاحة. استخدموا التثبيت الدقيق أو caret بحذر. أبلغوا المشروع الأصلي عن الأخطاء وPRs. لا تتحايلوا باستخدام !important على حساب واجهة API العامة.

الأسئلة الشائعة

هل درس «استهلاك نظام التصميم» مجاني؟

نعم — نص درس «استهلاك نظام التصميم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «استهلاك نظام التصميم»؟

ثبّت المكتبة في تطبيق مضيف، وطبّق موفّر السمة، وأزل المكوّنات غير المستخدمة عبر tree-shaking، وحافظ على تحديث الإصدارات تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «استهلاك نظام التصميم»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy