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

أعلنت Vercel و Shopify في مؤتمر Vercel Ship 26 في نيويورك أنهما يعيدان بناء إطار Hydrogen بالكامل للتجارة بدون رأس، مما يجعلها مفتوحة المصدر وغير محصورة بـ runtime — الآن ستكون قادرة على التشغيل في أي بيئة حيث يتم تنفيذ JavaScript، وليس فقط بالاقتران مع مكدس محدد.

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

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

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

كيف يتم هيكلة طبقة core

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

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

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

ماذا يعني هذا

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

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

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

الإطار غير محصور برنتايم ويدعم بوضوح Svelte و Nuxt و Next.js، ويسمح أيضاً بتوصيل إطار المطور الخاص بك.

من أي طبقات تتكون عمارة Hydrogen الجديدة؟

يميز المطورون ثلاث طبقات: core (المنطق العام للعمل مع Shopify API) و client (حالة UI والسلة) و server.