Vercel وShopify تعيدان بناء إطار Hydrogen ليصبح مفتوح المصدر ومستقلًا عن بيئة التشغيل

أعلنت Vercel وShopify في مؤتمر Vercel Ship 26 في نيويورك أنهما تعيدان بناء Hydrogen، إطار التجارة بلا واجهة أمامية مدمجة (headless)، بالكامل، وتجعلانه مفتوح المصدر ومستقلًا عن بيئة التشغيل. وبذلك سيعمل الإطار في أي بيئة تُنفَّذ فيها JavaScript، لا مع حزمة تقنية بعينها فقط.

ما الذي سيتغير في البنية الجديدة

كان Hydrogen يسهّل في السابق إطلاق واجهات المتاجر بلا واجهة أمامية مدمجة، لكن نقله بين الحزم التقنية المختلفة كان صعبًا. أما النسخة الجديدة فهي مفتوحة وغير مرتبطة ببيئة تشغيل محددة، وسيتمكن المطورون من بناء المتجر على Svelte أو Nuxt أو Next.js أو على إطارهم الخاص.

• أُعلن عن المشروع في مؤتمر Vercel Ship 26 في نيويورك
• النسخة الجديدة من Hydrogen مفتوحة المصدر ومستقلة عن بيئة التشغيل (runtime-agnostic)
• يدعم الإطار Svelte وNuxt وNext.js وأي أطر أخرى يختارها المطوّر
• تنقسم البنية إلى ثلاث طبقات: core وclient وserver

كيف صُمّمت طبقة core

كان كل فريق يكتب بنفسه شيفرة «لاصقة» للتعامل مع واجهة Shopify API، ومثال ذلك تنسيق السعر: فالواجهة لا تعيد رقمًا، بل نوعًا خاصًا بها هو MoneyV2 يُرمَّز فيه المبلغ على هيئة سلسلة نصية. والآن نُقل هذا المنطق إلى طبقة core المشتركة، المبنية على Intl.NumberFormat القياسية. يستدعي المطوّر الدالة الجاهزة formatMoney فيحصل على السعر منسقًا دون كتابة طبقة ربط خاصة به أو صيانتها. وعندما تتغير واجهة Shopify API يصبح التحديث بسيطًا، بدل التعديل اليدوي في كل مشروع على حدة.

ما الذي تفعله طبقة client

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

ماذا يعني ذلك

تنقل Vercel وShopify المنطق المتكرر في المتاجر الإلكترونية، مثل تنسيق الأسعار وحالة السلة، إلى طبقة مفتوحة مشتركة تُصلَح وتُحسَّن مرة واحدة للجميع. وبذلك لا يضطر كل فريق إلى حل المسائل نفسها من جديد على حزمته التقنية الخاصة.

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

على أي أطر يمكن استخدام Hydrogen الجديد؟

الإطار مستقل عن بيئة التشغيل (runtime-agnostic) ويدعم صراحةً Svelte وNuxt وNext.js، كما يتيح ربط الإطار الخاص بالمطوّر.

مما تتكون البنية الجديدة لـ Hydrogen؟

يحدد المطورون ثلاث طبقات: core (المنطق المشترك للتعامل مع Shopify API)، وclient (حالة واجهة المستخدم والسلة)، وserver.