كل مهندس برمجيات حاول مراجعة طلب دمج كبير على GitHub يعرف تلك اللحظة جيداً: واجهة الفروقات تتجمّد، صناديق التعليقات تتأخر في الاستجابة، وذاكرة المتصفح تنفجر لعشر دقائق. كلما كبر الـ Pull Request، ساءت التجربة، وغالباً ما يتعطّل المتصفح على الهاتف بمجرد تجاوز بضعة آلاف من الأسطر.
في العشرين من ماي 2026، نشر فريق صغير اسمه Pierre Computer Company الإجابة بهدوء: DiffsHub. خلال أربع وعشرين ساعة فقط، تجاوزت تغريدة الإطلاق 52 ألف منشور، وتجاوز المستودع على GitHub 4500 نجمة، وامتلأ التايملاين بمطوّرين يصفون عارض الفروقات الأصلي في GitHub بأنه "قصور هندسي". الفكرة بسيطة بشكل صادم: خذ رابط GitHub الذي تنظر إليه الآن، استبدل github.com بـ diffshub.com، وشاهد فرقاً بمليون سطر يُحمَّل في لحظات.
هذه واحدة من تلك الإطلاقات النادرة التي تجمع بين خدعة تسويقية ذكية وقطعة هندسية جادة. في هذه المقالة نشرح ما يحدث فعلاً تحت الغطاء، ولماذا يهم هذا فرق الهندسة، وكيف يمكن دمج المكتبة الأساسية في منتجاتك.
خدعة السطر الواحد
السحر الموجّه للمستخدم هو مجرد إعادة كتابة لعنوان URL. أي فرق عام على GitHub، سواء كان طلب دمج أو commit أو comparison أو patch، يمكن فتحه على diffshub.com بتغيير جزء واحد فقط من الرابط.
https://github.com/oven-sh/bun/pull/12345
https://diffshub.com/oven-sh/bun/pull/12345
هذا كل شيء. لا تسجيل دخول، لا إضافة، لا إعداد. تجلب DiffsHub نفس البيانات العامة التي يكشفها GitHub، ثم تعرضها عبر مكوّنات Pierre الخاصة. خلال ساعات من الإطلاق، أصدر المجتمع إضافة Chrome تقوم بإعادة التوجيه تلقائياً، ومحوّلاً لـ GitLab يربط نفس الواجهة بطلبات الدمج هناك.
أما المستودعات الخاصة فالقصة مختلفة. DiffsHub خدمة عامة، ولا تستطيع الوصول إلى ما خلف نظام تسجيل الدخول الموحّد. الخطوة الأكثر إثارة للاهتمام بالنسبة للفرق هي تضمين المكتبة الأساسية مباشرة، وهو ما يشجّع عليه فريق Pierre صراحة.
ما الذي بنته Pierre فعلاً
DiffsHub في الحقيقة تطبيق ويب رفيع يجلس فوق مكتبة مفتوحة المصدر أكثر أهمية: @pierre/diffs، وهي حالياً في الإصدار 1.2.1 على npm. تأتي ضمن مستودع pierrecomputer/pierre على GitHub، وهي المحرّك نفسه الذي يشغّل منتج Pierre المُستضاف.
تقوم المكتبة على ثلاث أفكار لا يحسّنها عارض GitHub الحالي:
- التمرير الافتراضي (Virtualised Scrolling). فقط الأسطر الظاهرة في نافذة العرض هي التي تُحقن في الـ DOM. فرق بمليون سطر لا يُنشئ مليون عنصر، بل بضع مئات يُعاد تدويرها مع التمرير.
- CSS Grid مع Shadow DOM. تستخدم تخطيطات العرض الجانبي والموحّد شبكة CSS Grid للحفاظ على محاذاة الإضافات والحذف، بينما يعزل Shadow DOM تنسيقات الفرق عن الصفحة المضيفة. هذا العزل هو ما يسمح بإسقاط المكوّن داخل تطبيق Next.js أو Remix أو Vite دون أن يرث نصف أنماط الصفحة.
- Shiki لتلوين الصياغة. السمات ليست مخصّصة. تتكيّف الفروقات مع أي سمة Shiki، مما يعني أن رموز هويتك البصرية الحالية تنتقل مباشرة إلى عرض الفرق.
فوق هذه القاعدة، تضيف المكتبة تعليقات وتوضيحات في أي مكان على الفرق، اختيار الأسطر بالسحب، ردود الفعل عند تمرير المؤشر على الرموز للتلميحات، تمييز التغييرات على مستوى الحرف، وواجهة لحل تعارضات الدمج. كما أنها صريحة في أنها ليست محدودة بـ Git: يمكن تغذيتها بأي زوج من الملفات لتعرض المقارنة.
الهندسة خلف فرق بمليون سطر
السبب في اختناق عارض GitHub عند الـ PR الكبيرة ليس الكسل، بل تراكم القرارات التاريخية. يعرض GitHub كل سطر، كل صندوق تعليق، كل زر blame، وكل استدعاء API مضمّن داخل الـ DOM دفعة واحدة. مع فرق بمئتي سطر، لا مشكلة. مع إعادة هيكلة بمئتي ألف سطر، يصبح ذلك قنبلة ذاكرة.
تقلب مكتبة Pierre النموذج رأساً على عقب. يُعامَل الفرق كتيار من الصفوف الموسومة بالرموز، يُغذّى عبر قائمة افتراضية لا تركّب إلا ما هو معروض على الشاشة. يُؤدّى التلوين كسولاً لكل صف ظاهر باستخدام Shiki، لا بشكل عاجل عبر الكتلة كاملة. وتُفصَل طبقة التعليقات عن طبقة العرض، فلا تعطّل التعليقاتُ الرسمَ الأوّلي.
النتيجة هي ما لاحظه المطوّرون فعلاً على التايملاين: فتح مقارنة بين إصدارين من نواة Linux في DiffsHub يشبه فتح صفحة ثابتة أكثر من تشغيل تطبيق ويب ثقيل. أحد المطوّرين على X لخّص الفكرة: GitHub "يحشر كل سطر وكل صندوق تعليق وكل استدعاء API ثقيل في متصفّحك دفعة واحدة"، بينما DiffsHub "يبسّط صفحة العرض ويستخدم التمرير الافتراضي، فلا يعرض إلا ما هو فعلاً على شاشتك."
لماذا يهم هذا فريقك الهندسي
DiffsHub في حد ذاتها لعبة ممتعة. لكن المكتبة هي القصة الحقيقية للفرق التي تبني منصّات مطوّرين داخلية، أو منتجات مراجعة كود، أو أدوات برمجة بالذكاء الاصطناعي.
- أدوات المراجعة الداخلية. إن كان فريق المنصّات لديك يصون واجهة مراجعة داخلية فوق GitHub أو GitLab، فإن
@pierre/diffsعارض جاهز يمنحك جودة GitHub البصرية بدون مشاكل أدائه. - وكلاء البرمجة بالذكاء الاصطناعي. أدوات البرمجة الوكيلة مثل Cursor و Claude Code والموجة الجديدة من مراجعي PR المستقلّين تحتاج إلى عرض الفروقات للبشر أثناء الموافقة. مكتبة تعرض فروقات الوكلاء بأي حجم، مع التعليقات والملاحظات المضمّنة، تلغي فئة كاملة من عمل الواجهات.
- عروض التدقيق والامتثال. فرق الأمن والامتثال غالباً ما تحتاج إلى قراءة فروقات ضخمة مولّدة آلياً، من تحديثات تبعيات إلى ترحيلات قواعد بيانات إلى خطط بنية تحتية بالكود. عارض لا ينهار عند مئة ألف سطر يغيّر مفهوم "ما الذي يمكن مراجعته".
- التوثيق والتعليم. شرح كيف شكّل تغيير ما قاعدة الكود يصبح أسهل بكثير عندما يكون الفرق نفسه سريعاً، قابلاً للتنسيق، وقابلاً للتضمين داخل أي موقع MDX أو وثائق.
موقف الترخيص مهم أيضاً. المستودع مفتوح المصدر فعلاً، الحزمة على npm، والفريق وراءه يحمل خبرة من Cloudflare و Stripe و GitHub. هذه ليست خدمة SaaS مغلقة قد تسحب البساط من تحتك، بل بنية أساسية يمكنك البناء عليها.
كيف تجرّبها في خمس دقائق
أسرع طريق هو خدعة الرابط. اختر أي PR عام كنت فضولياً بشأنه، مثلاً أحد ثقيلي الوزن من Bun أو Node.js أو Linux المعروضة على صفحة DiffsHub الرئيسية، واستبدل النطاق. مرّر، ولاحظ غياب التقطّع.
إن أردت ربط المكتبة بمنتجك، التثبيت سطر واحد:
bun i @pierre/diffs
# أو
pnpm add @pierre/diffsمن هناك يمكنك تركيب مكوّن CodeView، تمرير زوج محتويات ملف إليه، واختيار سمة Shiki. يشرح ملف README في مستودع pierrecomputer/pierre كل تفاصيل التخطيطات الجانبية والموحّدة، واجهة برمجة التعليقات، ووضع حل تعارضات الدمج.
إشارة منظومة Pierre
DiffsHub قطعة من ثلاث تطرحها Pierre علناً: Diffs (مكتبة العرض)، Trees (بدايات شجرة الملفات)، وCode Storage. كل قطعة من تلك القواعد غير البرّاقة التي تعيد معظم الفرق اختراعها بشكل سيّئ. إطلاقها مفتوحة المصدر، وعرضها عبر تجربة استهلاكية فيروسية تثبت عملها على نطاق متطرّف، هو استراتيجية متعمّدة. تكسب الثقة، تشحن البدائيات إلى آلاف سلاسل أدوات المطوّرين في أسبوع، وتزرع السوق لما ستفرض Pierre مقابله ثمناً لاحقاً.
الدرس الأوسع لقادة الهندسة يتجاوز DiffsHub. أكثر إطلاقات أدوات المطوّرين تأثيراً في 2026 تتبع الكتاب نفسه: افتح مصدر البدائية، أطلق عرضاً فيروسياً يثبت أنها تعمل على نطاق متطرّف، ودع المجتمع ينقلها إلى كل مكان قبل أن يتفاعل المنافسون. رأيناها مع shadcn/ui للمكوّنات، ومع Shiki لتلوين الصياغة. تكرّرها Pierre الآن في مراجعة الكود.
ما الذي نأخذه من هذا في نقطة
نفكّر كثيراً في نقطة بما يحتاجه وكلاء البرمجة بالذكاء الاصطناعي ليشعر فريق المؤسسة بأنهم أصليّون داخل تدفّقات العمل. أغلب تجاربنا التجريبية مع المؤسسات تصطدم بنفس الجدار: الوكلاء يولّدون فروقات كبيرة وصحيحة أسرع مما يستطيع البشر مراجعته. عنق الزجاجة هو سطح المراجعة، لا النموذج.
مكتبات مثل @pierre/diffs هي نوع اللبنات التي تسدّ هذه الفجوة. اجمع عارض فروقات سريعاً وقابلاً للتضمين مع وكيل يشرح تغييراته مضمّنةً، وستتوقّف خطوة الإنسان في الحلقة عن كونها الجزء الأبطأ من الأنبوب. هذا هو الاتجاه الذي يجب أن تسلكه البرمجة الوكيلة لتنزل في بيئات منظّمة وقواعد كود ضخمة.
DiffsHub إطلاق صغير بخدعة من سطر واحد. لكن المكتبة وراءه ترقية هادئة لأحد أكثر الأسطح شيوعاً وألماً في هندسة البرمجيات. إن لم تكن قد فتحت بعد فرقاً بمئة ألف سطر فيها، افعل ذلك قبل مراجعة الكود التالية، ثم انظر بجدّية إلى ما يمكن لمنصّة المطوّرين الخاصة بك أن تفعله بنفس البدائية.