ماذا يفعل مطور Hyvä بالفعل؟

إذا كنت تفكر في توظيف مطور Hyvä أو تكليف بناء Hyvä، فمن المفيد أن تفهم ما يتضمنه الدور بالفعل. هذه المقالة هي النسخة الصادقة: أنماط الكود، الأدوات اليومية، أنواع المشاكل التي يحلها مطور Hyvä، وكيف يختلف الدور عن تطوير واجهة Magento العامة.

الإجابة الرئيسية

مطور Hyvä يبني ويحافظ على المتاجر الإلكترونية على مجموعة Hyvä Theme + Hyvä Commerce، وTailwind CSS للتصميم، وAlpine.js للتفاعلية، ونمط وحدة Hyvä لتمديد واجهة Magento، ونمط وحدة التوافق Hyvä لجعل ملحقات Magento الخارجية تعمل تحت Hyvä.

في الممارسة العملية، يعني ذلك أن الأسبوع يتضمن عادة:

• كتابة قوالب .phtml بتصميم Tailwind لصفحات أو أقسام جديدة من المتجر
• بناء مكونات Alpine.js للميزات التفاعلية (عربة التسوق الصغيرة، محدد العنوان، المتغيرات القابلة للتكوين)
• كتابة وحدات توافق Hyvä لملحقات Magento المدفوعة بدون توافق البائع
• تحسين أداء المواقع نحو Lighthouse 90+ على الهواتف المحمولة
• مراجعة كود الزملاء، في الغالب أعمال Hyvä الأخرى
• أحيانًا العمل على خلفية Magento، المراقبون، المكونات الإضافية، تكوين الإدارة

الدور يركز على الواجهة الأمامية ولكنه مدرك لـ Magento. يستغرق مطور واجهة أمامية خالص بدون خلفية Magento من 3 إلى 6 أشهر للتكيف مع العمل الإنتاجي في Hyvä؛ بينما يستغرق مطور Magento Luma كبير من 2 إلى 4 أشهر لتعلم الأنماط الخاصة بـ Hyvä.

الأدوات اليومية

إعداد مطور Hyvä المحلي النموذجي:

• المحرر: VS Code أو PhpStorm. كلاهما يعمل. مكون Tailwind CSS IntelliSense ضروري لـ VS Code.
• بيئة التطوير المحلية: Warden أو DDEV أو Lando تعمل محليًا مع Magento + قاعدة البيانات. يتم تثبيت Hyvä عبر Composer مثل أي وحدة Magento أخرى.
• المتصفح: Chrome مع ملحق Alpine.js DevTools. يتم تشغيل تدقيق Lighthouse من Chrome DevTools.
• تحكم النسخة: Git، عادةً ما يتم الدفع إلى GitHub أو GitLab. مراجعة الكود عبر طلبات السحب.
• سطر الأوامر: Composer (composer require hyva-themes/...)، bin/magento لعمليات Magento، npm run watch لتجميع Tailwind.
• التوثيق: docs.hyva.io مفتوح في علامة تبويب في جميع الأوقات. compat.hyva.io للبحث عن توافق الملحقات.
• التواصل: قنوات على نمط Slack مع الفريق. Slack مجتمع Hyvä لأسئلة النظام البيئي.

أسبوع، عينة

كيف يبدو أسبوع مطور Hyvä كبير، عينة من تقاويم أحد فرقنا:

صباح الاثنين: مراجعة كود لوحدة توافق Hyvä لزميل في العمل لملحق Search Sphinx من Mirasvit. تعيد وحدة التوافق تنفيذ قائمة البحث التلقائي تحت Alpine.js. اكتشاف خطأ حيث لا تغلق القائمة عند النقر خارجها. اقتراح الإصلاح (توجيه @click.outside على مكون القائمة). تمت الموافقة على المراجعة.

بعد ظهر الاثنين: عمل PDP على بناء عميل جديد، مُكون منتج مخصص لعلامات الطباعة. مُكون المنتج هو مكون Alpine.js مع حالة نموذج تفاعلية (اختيارات النص، الخط، اللون، الحجم) + عرض مباشر. حوالي 200 سطر من Alpine + Tailwind.

الثلاثاء: دمج طريقة الدفع في Hyvä Checkout لبوابة دفع إقليمية متخصصة (Trustly). لا يوجد توافق Hyvä مقدم من البائع. بناء وحدة جديدة لطريقة الدفع تتصل بنمط مُعالج الدفع في Hyvä Checkout + تتعامل مع تدفق إعادة التوجيه للبوابة. اختبار ضد بيئة الاختبار للبوابة. ملاحظة توثيق للفريق.

صباح الأربعاء: تصحيح أداء على موقع مباشر انخفض من Lighthouse 92 إلى 76 خلال الشهر الماضي. التحقيق عبر PageSpeed Insights. السبب: أضاف فريق التسويق ثلاث علامات جديدة إلى حاوية GTM، جميعها تحميلت على كل صفحة. نقل اثنتين إلى جانب الخادم عبر Stape، وتأجيل الثالثة مع شرط مشغل GTM. إعادة القياس: العودة إلى 91.

بعد ظهر الأربعاء: مراجعة PR لوحدة توافق Hyvä الأولى لمطور مبتدئ. إرشادهم خلال نمط وحدة Hyvä، تجاوزات XML للتخطيط، لماذا تتجاوز نهجهم مساحة سطحية كبيرة جدًا. اقتراح نمط أبسط. يقومون بالتكرار.

الخميس: بناء موضوع Hyvä لعلامة تجارية جديدة للعميل. تكوين Tailwind يتناسب مع رموز علامتهم التجارية (لوحة دافئة رمادية، مجموعة خطوط مخصصة، إيقاع تباعد محدد). مكتبة المكونات: متغيرات الأزرار، مدخلات النموذج، بطاقات، شارات، نافذة منبثقة. رأس / تذييل / تنقل بأسلوبهم البصري.

صباح الجمعة: خطأ من تقرير عميل، "طرق الشحن في الخروج لا تظهر على iOS Safari." التحقيق. السبب: كان مُعالج طريقة الشحن في Hyvä Checkout يعتمد على محدد CSS :has() غير المدعوم على إصدارات iOS Safari القديمة. إعادة هيكلة لاستخدام حالة قائمة بدلاً من ذلك. اختبار عبر iOS 14، 15، 16، 17.

بعد ظهر الجمعة: تخطيط السبرينت للأسبوع المقبل. تقدير الجهد لثلاث قطع عمل قادمة (وحدة توافق Hyvä جديدة، مكون PDP مخصص، تدقيق تحسين الأداء). تحديث لوحات المشروع.

هذا هو المستوى الكبير. يمتلك مطور Hyvä متوسط المستوى ملفًا مشابهًا ولكنه يقضي وقتًا أطول في بناء المكونات الموجهة وأقل في العمارة / مراجعة الكود. بينما يكون المبتدئ في الغالب على بناء المكونات الموجهة + جلسات مشتركة مع الكبار.

أنماط الكود المحددة

كيف يبدو كود مطور Hyvä بالفعل:

قالب .phtml بتصميم Tailwind

قالب بطاقة منتج Hyvä النموذجي:

`php getProduct(); ?>

`

هذا هو HTML المُقدم من الخادم مع فئات أدوات Tailwind للتصميم. لا نماذج عرض Knockout، ولا تبعيات RequireJS. يتلقى المتصفح HTML عادي ويقوم بعرضه على الفور.

مكون تفاعلي Alpine.js

مكون الزر الصغير النموذجي في Hyvä:

`html

`

تتعامل Alpine مع الحالة التفاعلية (عدد السلع في العربة) والتفاعلات (النقر لفتح، والنقر خارج لإغلاق) مع السمات المضمنة في HTML. لا حاجة لملف JS منفصل لهذا المكون.

هيكل وحدة توافق Hyvä

هيكل وحدة توافق Hyvä النموذجي:

app/code/Acme/MirasvitSearchHyvaCompat/ ├── etc/ │ └── module.xml # يعلن عن الوحدة + التبعيات ├── registration.php # تسجيل وحدة Magento القياسية ├── view/frontend/ │ ├── layout/ │ │ └── default.xml # تجاوزات التخطيط لمكونات البحث │ └── templates/ │ ├── search/ │ │ ├── autocomplete.phtml # قالب البحث التلقائي الخاص بـ Hyvä │ │ └── results.phtml # قالب النتائج الخاص بـ Hyvä │ └── _index.html.phtml # تسجيل فئات Tailwind الإضافية <code></code>

تعلن الوحدة عن اعتمادها على وحدة Mirasvit Search Sphinx الأصلية، ثم تتجاوز قوالب الواجهة الأمامية المحددة بنسخ خاصة بـ Hyvä. تظل منطق خلفية Mirasvit (معالجة استعلام البحث، الفهرسة) دون تغيير.

ما يحتاج مطور Hyvä إلى معرفته

جرد المهارات لمطور Hyvä كبير:

مجموعة الواجهة الأمامية:

• تقنيات Tailwind CSS القائمة على الأدوات (بعمق، وليس "قراءة الوثائق مرة واحدة")
• مكونات Alpine.js التفاعلية، x-data، x-on، x-show، x-bind، المتاجر
• CSS الحديثة، الشبكة، flexbox، :has()، استعلامات الحاويات، الخصائص المخصصة
• أنماط التصميم المتجاوبة، أولاً للهواتف المحمولة
• إمكانية الوصول على الويب، التنقل عبر لوحة المفاتيح، ARIA، إدارة التركيز

خاص بـ Hyvä:

• نمط وحدة Hyvä، themePackage، حزم hyva-themes/*
• نمط وحدة التوافق Hyvä من docs.hyva.io
• وظائف مساعد Hyvä ومتاجر Alpine

مدرك لـ Magento:

• هيكل وحدة Magento (registration.php، etc/module.xml، view/frontend/...)
• XML التخطيط، لغة تخطيط واجهة Magento، لا تزال تنطبق تحت Hyvä
• مكونات واجهة Magento، معرفة ما هي وكيفية عدم الاعتماد عليها تحت Hyvä
• Composer (composer require hyva-themes/*، حل تبعيات Magento)
• أوامر bin/magento (setup:upgrade، cache:clean، setup:di:compile)

الأداء:

• تدقيق Lighthouse، معرفة أي المقاييس تقيس ماذا
• Core Web Vitals، LCP، INP، CLS، ما يحرك كل منها
• تضمين CSS الحرج، تحميل الخطوط مسبقًا، تلميحات أولوية الصورة
• إدارة ميزانية JavaScript

الوعي بالنظام البيئي:

• compat.hyva.io كمرجع يومي
• بائعو ملحقات Magento الرئيسيون وحالة توافق Hyvä الخاصة بهم
• مجتمع Hyvä Slack

يفتقر مطور Hyvä المبتدئ إلى المعرفة العميقة بالأداء، والسياق الأوسع لـ Magento، والوعي بالنظام البيئي. يصبح مطورًا متوسط المستوى بعد 12-18 شهرًا من العمل العملي في Hyvä؛ وكبيرًا بعد 24-36 شهرًا.

ما تدفعه عند توظيف مطور Hyvä

عندما توظف مطورًا متخصصًا في Hyvä أو وكالة، فإنك تدفع مقابل:

1. مكتبة وحدات التوافق. لقد أنشأت فريق متخصص عشرات من وحدات التوافق. تستفيد المشاريع الجديدة من المكتبة، ما كان سيكون بناءً مخصصًا لمدة أسبوعين لفريق لأول مرة هو تثبيت لمدة 30 دقيقة لمتخصص.

2. أنماط الكود الخاصة بـ Hyvä. معرفة الطريقة القياسية للقيام بشيء ما في Hyvä توفر الوقت الذي يقضيه العامي في تعلم النمط من الصفر.

3. دليل تحسين الأداء. Lighthouse 90+ كمعيار خروج عادي بدلاً من هدف صعب.

4. الوعي بنظام Magento البيئي. معرفة أي الملحقات المدفوعة لديها توافق البائع دون الحاجة إلى البحث عنها في كل مرة.

5. علاقات البائعين. Hyvä Themes، بائعو ملحقات Magento الأكبر، مجتمع Hyvä، العلاقات الراسخة تسرع من حل المشكلات.

هذا يتراكم. بحلول البناء العاشر لـ Hyvä، يكون الفريق المتخصص أسرع بنسبة 30-50% في نطاق مكافئ مقارنة بفريق Hyvä لأول مرة.

الخلاصة

يوميات مطور Hyvä تتكون من قوالب Tailwind + مكونات Alpine + وحدات توافق + تحسين الأداء + سياق Magento. الدور يركز على الواجهة الأمامية ولكنه مدرك لـ Magento. يتطلب العمق الكبير 24+ شهرًا من العمل العملي في Hyvä لتطويره.

عندما توظف واحدًا، فإنك تدفع مقابل مكتبة وحدات التوافق، الأنماط القياسية، دليل الأداء، والوعي بالنظام البيئي، وليس فقط الساعات.

الخطوات التالية

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