بعد عامين من الحياة الثانية لـ Northwind UI، أعدت تشغيل سكربت الألوان من درس جرد الواجهة. صارت الدرجات الرمادية الأربع والستون تسعًا، وسبع منها primitives في ملف الـ tokens. هذا الرقم الواحد فعل لتمويل الفريق أكثر من أي عرض تقديمي، لأنه القياس نفسه، مأخوذًا بالطريقة نفسها، يُظهر «قبل» و«بعد». القياس هو الطريقة التي يثبت بها نظام التصميم أنه منتج يستحقّ أن يُدفع له، والطريقة التي يكتشف بها أين يخذل مستخدميه.
\nلا يوجد رقم واحد يخبرك هل النظام يعمل. تتابع Northwind أربعة اتّجاهات، وتراجعها شهريًا:
\n| المقياس | \nالسؤال الذي يجيب عنه | \nكيف نجمعه | \n
|---|---|---|
| تبنّي المكوّنات | \nكم من الواجهة مبني بمكوّنات النظام؟ | \nمسح الاستيرادات في كل مستودع، ومسح الـ DOM للصفحات الرئيسية | \n
| تغطية الـ tokens | \nهل تستخدم الأنماط الـ tokens أم القيم الخام؟ | \nسكربت الألوان، موسّعًا ليشمل المسافات والطباعة | \n
| تأخّر الإصدارات | \nكم تتأخّر الفرق؟ | \nإصدارات الحزم عبر المستودعات | \n
| الرضا | \nهل يجعل النظام الفرق أسرع؟ | \nاستبيان من خمسة أسئلة كل ربع سنة | \n
معًا تقاوم هذه المقاييس التلاعب. يمكن لفريق أن يضخّم التبنّي بتغليف كل شيء في Box من النظام، لكن تغطية الـ tokens والرضا لن يتحرّكا.
مسح الاستيرادات هو العمود الفقري. يمرّ سكربت على كل مستودع، ويحلّل ملفات المصدر، ويعدّ عناصر JSX التي استُورد مكوّنها من @northwind/ui مقابل المكوّنات المعرّفة محليًا. والبحث في الكود على GitHub يعطي إجابة أولى سريعة عن سؤال منفرد، مثل «أين ما زال الـ prop المُهمَل kind مستخدمًا؟»، وهكذا يعمل تتبّع الاستخدام في درس الـ deprecation.
ولصفحات الإنتاج، كل مكوّن في Northwind يعرض سمة علامة:
\n<button class=\"nw-button\" data-variant=\"primary\" data-nw-component=\"Button\">Assign driver</button>مسح الصفحة المعروضة يعدّ العناصر التي تحمل data-nw-component مقابل كل العناصر من النوع نفسه. وهذه السمة أهمّ مما تبدو. النسخة الأولى من مسحنا كانت تعدّ الـ class المسمّى nw-button، فأبلغت عن تبنٍّ بنسبة 94% لـ Button في الموقع التسويقي. ثم اكتشفنا أن ثلاث فرق نسخت الـ CSS الخاص بالـ Button إلى مكوّناتها، بأسماء الـ classes. المكوّن الحقيقي وحده يكتب الـ data attribute، فتتوقّف النسخ المنفصلة عن الاحتساب تبنّيًا.
ثم تُجمَّع الأرقام لكل فريق:
\nconst scans = [\n { team: 'Dispatch', system: 412, total: 455, version: '5.2.0' },\n { team: 'Billing', system: 96, total: 180, version: '4.9.1' },\n { team: 'Marketing', system: 230, total: 251, version: '5.2.0' },\n { team: 'Reporting', system: 40, total: 160, version: '3.8.0' },\n];\nconst latestMajor = 5;\n\nfor (const s of scans) {\n const percent = Math.round((s.system / s.total) * 100);\n const majorsBehind = latestMajor - Number(s.version.split('.')[0]);\n console.log(`${s.team.padEnd(10)} ${String(percent).padStart(3)}% ${majorsBehind ? `${majorsBehind} major(s) behind` : 'current'}`);\n}نسبة 25% لدى فريق Reporting ليست سببًا لإرسال بريد إلى مديره. إنها سؤال بحثي: ما الذي يحتاجه Reporting ولا يملكه النظام؟ في حالة Northwind كانت الإجابة الرسوم البيانية والجداول الكثيفة، وصارتا خارطة الطريق لربعَي السنة التاليين.
\n\nالنظام الذي يقول نعم لكل شيء يعود إلى الدرجات الرمادية الأربع والستين، بخطوات إضافية. تقول Northwind «لا» للمكوّنات الخاصة بفريق واحد، ولتغييرات السلوك الخاصة بعلامة، وللـ props التي تتجاوز الـ tokens، ولأي شيء يكسر مبدأً. والمهارة في قولها بطريقة تحفظ ثقة الفريق:
\nتابعت Northwind UI من تدقيق 64 درجة رمادي إلى نظام يستخدمه أربعون فريقًا: مبادئ ونموذج فريق، وtokens في ثلاث طبقات مع themes وعلامات، ومكوّنات بـ APIs قابلة للتركيب وإمكانية وصول مبنية من الأساس، وإصدارات مرقّمة بمسارات deprecation واختبارات بصرية، وcontribution model مع governance ومقاييس. لا شيء من هذا منتهٍ، وهذا بالضبط معنى أن تديره كمنتج. في التمرين تكتب مسح التبنّي الذي يخبرك أين تنظر بعد ذلك.
\n","toc":[{"id":"sec-1","text":"ماذا تقيس","level":2},{"id":"sec-2","text":"جمع بيانات التبنّي بنزاهة","level":2},{"id":"sec-3","text":"قول «لا»","level":2},{"id":"sec-4","text":"أين وصلت الآن","level":2}],"takeaways":["قِس التبنّي بإشارات لا ينتجها إلا النظام الحقيقي، مثل استيراد الحزمة أو data attribute خاصة بالمكوّن، لا بأسماء classes يمكن نسخها.","تابع بضعة اتّجاهات معًا - تبنّي المكوّنات، وتغطية الـ tokens، وتأخّر الإصدارات، والرضا - لأن أي رقم منفرد يمكن التلاعب به.","استخدم المقاييس لتجد أين يخذل النظام الفرق، لا لتُخجل الفرق بسبب أرقامها المنخفضة أبدًا.","«لا» الجيدة تسمّي المبدأ، وتقدّم بديلًا، وتُكتب حتى يمكن مراجعتها بأدلّة جديدة."],"further":[{"title":"Data attributes (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/data-*"},{"title":"About code search (GitHub Docs)","url":"https://docs.github.com/en/search-github/github-code-search/about-github-code-search"},{"title":"Design Systems 101 (Nielsen Norman Group)","url":"https://www.nngroup.com/articles/design-systems-101/"}],"quiz":[{"q":"يضع نائب الرئيس في Northwind هدفًا «تبنٍّ لنظام التصميم بنسبة 100% بحلول الربع الرابع». ما الخطر الرئيسي؟
","options":[{"text":"ستصل الفرق إلى 100% بسرعة كبيرة وسينفد العمل لدى فريق النواة.","why":"لدى الأنظمة دائمًا عمل أكثر من الأشخاص؛ وهذا ليس الخطر الواقعي."},{"text":"سكربتات المسح لا تستطيع العدّ فوق 100%.","why":"الحساب سليم؛ المشكلة فيما يفعله الناس للوصول إلى الرقم."},{"text":"أرقام التبنّي لا يمكن قياسها آليًا.","why":"مسح الاستيرادات والـ DOM يقيس التبنّي جيدًا؛ قابلية القياس ليست المشكلة."},{"text":"ستحشر الفرق مكوّنات النظام في أماكن لا تناسبها، أو تعيد تسمية مكوّناتها المحلية، لتصل إلى الهدف.","why":"صحيح. حين يصبح المقياس هدفًا، يحسّن الناس المقياس؛ وبعض المكوّنات المحلية هي الإجابة الصحيحة."}],"answer":3},{"q":"أيّ إشارة هي الأكثر موثوقية لعدّ المواضع التي يُستخدم فيها Button الحقيقي من النظام في صفحات الإنتاج؟
","options":[{"text":"العناصر التي تحمل الـ class المسمّىnw-button.","why":"الفرق تنسخ أسماء الـ classes مع الـ CSS المنسوخ، فتُحتسب النسخ المنفصلة تبنّيًا."},{"text":"العناصر التي تحمل data-nw-component="Button"، وهي سمة لا يعرضها إلا مكوّن النظام.","why":"صحيح. العلامة التي لا يكتبها إلا المكوّن الحقيقي لا يمكن نسخها مع الـ CSS عن غير قصد."},{"text":"الأزرار التي يطابق لون خلفيتها token الإجراء.","why":"تطابق الألوان يحدث صدفة، ويفوّت كل variant غير أساسي."},{"text":"الصفحات التي تحمّل ملف CSS الخاص بالنظام.","why":"تحميل الملف لا يقول شيئًا عن عدد العناصر في الصفحة التي تستخدمه فعلًا."}],"answer":1},{"q":"يطلب فريق التقارير prop باسم chartColors على كل مكوّن ليطابق لوحات المعلومات الخاصة به. كيف يجب أن يقول فريق النواة «لا»؟
اكتب الدالة measureAdoption(root) بحيث تمسح عناصر <button> داخل root (مستند أو أي عنصر) وتعيد { total, system, percent }:
total: عدد عناصر <button>،system: عدد ما يحمل منها data-nw-component="Button"، وهي العلامة التي لا يعرضها إلا المكوّن الحقيقي (الـ class المسمّى nw-button لا يُحتسب؛ فقد نسخته الفرق)،percent: ناتج system / total كعدد صحيح مقرَّب بـ Math.round، أو 0 حين لا توجد أزرار.ثم اكتب نتيجة الصفحة داخل #report بالشكل 4 of 8 buttons use Northwind UI (50%)، مستخدمًا الأرقام التي حسبتها.
[...root.querySelectorAll('button')] يعطيك مصفوفة بكل زر داخل root.","button.dataset.nwComponent يقرأ data-nw-component. صفِّ على أن تكون قيمتها 'Button'.","ابنِ التقرير بـ template literal: ${result.system} of ${result.total} buttons use Northwind UI (${result.percent}%)."],"explanation":"العدّ بالـ data attribute يقيس ما يهمّك فعلًا: العناصر التي عرضها مكوّن النظام الحقيقي. أما العدّ بالـ class المسمّى nw-button فسيُبلغ هنا عن 6 من 8 (75%)، لأن فريقين نسخا الـ class إلى أزرارهما، ولن تعرف أبدًا أن هذه النسخ المنفصلة موجودة. وقبول أي root يسمح للدالة نفسها بالإبلاغ عن كل قسم من الصفحة أو منطقة كل فريق، والحساب عند الطلب يعني أن الأرقام تبقى صحيحة مع تغيّر الصفحة.
measureAdoption(document) تعيد 8 أزرار، 4 منها من النظام، أي 50%","ignores-copies":"الـ classes المنسوخة باسم nw-button لا تُحتسب تبنّيًا","scoped":"مسح #settings وحده يعيد 1 من 3 (33%)","live":"يتحدّث العدد حين يُضاف زر من النظام إلى الصفحة","report":"يعرض #report النص «4 of 8» و«50%»"}},"words":624,"readMinutes":4}