+
✦
●
✕
ALWKALA logo
ابدأ بقوة .. تعلم بسرعة .. توسع بحكمة
🚀
0%
arrow_back العودة لكتالوج المنتجات
طبقة تفاعلية الويب المخدمية متاح · حزمة NPM
Hypermedia · hx-swap · morphdom · CSRF

تفاعلية SPA الفورية
ببساطة الـ HTML ودون تعقيدات جافاسكربت.

مسار هندسي يوجّه مساعدي الذكاء الاصطناعي لبناء تجارب تفاعلية غنية وسلسة (تبديل أجزاء الصفحة، التحقق الفوري من النماذج، والتحديث الحي) عبر HTMX مباشرة من السيرفر وبدون ازدواجية في كود الواجهة والـ API.

npm تثبيت الحزمة عبر NPM open_in_new menu_book دليل أنماط HTMX GitHub
swap_horiz استبدال فوري بدون وميض security حماية CSRF مدمجة code_off صفر كود JS تكراري
html view.partial.html
HTMX Declarative Swap Action
morphdom

<button hx-post="/cart/add" hx-target="#cart" hx-swap="outerHTML">

<!-- Server returns pure HTML partial -->

8 ms

زمن التبديل

0 JSON

تحويل البيانات

100%

توافق السيو

published_with_changes

استبدال لحظي بدون وميض

تحديث أجزاء الصفحة المحددة فقط فورياً مع الحفاظ على موضع التمرير، دون الحاجة لإعادة تحميل الصفحة بالكامل.

data_object

صفر ازدواجية في الـ API

السيرفر يرسل HTML جاهزاً مباشرة. تخلص من طبقات الـ REST API المعقدة، والتحقق المزدوج للبيانات في السيرفر والعميل.

lock_outline

أمان مدمج وتضمين محلي

تضمين محلي للمكتبة بدون الاعتماد على CDN خارجي، مع حماية CSRF تلقائية وتزامن كامل مع سجل المتصفح (History API).

المشكلة والحل

لماذا تبني واجهة برمجة تطبيقات (API) كاملة لمجرد تحديث زر أو نموذج؟

إجبار المطورين على كتابة منطق التحقق مرتين (في العميل والسيرفر) وإدارة مئات نقاط الـ API لعمليات بسيطة يؤدي إلى مضاعفة الجهد وتراكم الأخطاء. معمارية Hypermedia تعيد البساطة والسرعة للويب.

cancel

تعقيدات الـ SPA والـ API المزدوج

  • ✕ كتابة منطق التحقق مرتين في واجهة العميل وكود السيرفر.
  • ✕ عشرات الـ Endpoints الوسيطة لتحويل البيانات إلى JSON ثم إلى HTML.
  • ✕ إدارة معقدة للحالة (State Management) تزامن البيانات بين الطرفين.
  • ✕ تعطيل محركات البحث وصعوبة فهرسة المحتوى التفاعلي (SEO).
check_circle

معيار TidyFactor Hypermedia

  • ✓ السيرفر يرسل HTML جاهزاً ومباشراً؛ صفر كود وسيط مهدور.
  • ✓ تحقق مركزي واحد من البيانات في السيرفر مع إرجاع الخطأ مكانه.
  • ✓ تفاعلية فورية وسلسة تضاهي تطبيقات الـ SPA بدون أطر عمل ثقيلة.
  • ✓ فهرسة وسيو كامل بنسبة 100% لأن كل استجابة هي HTML أصيل.
الاستخدامات ومجالات التطبيق

ماذا يمكنك أن تبني وتطور بواسطة HTMX؟

حلول تفاعلية ذكية تضفي على المواقع المخدمية سرعة وحيوية التطبيقات الحديثة.

search

البحث والتصفية اللحظية (Live Search)

تصفية المنتجات والمقالات فور الكتابة مع تأخير ذكي (Debounce) واستبدال مباشر لشبكة النتائج.

fact_check

التحقق المباشر من النماذج

فحص صحة البيانات (البريد، اسم المستخدم، الحقول) فور ترك الحقل وإظهار رسائل الخطأ بدقة.

sync

الجداول الحية والتحديث المستمر

تحديث لوحات التحكم والمؤشرات دورياً (Polling أو SSE) دون كتابة أسطر معقدة من WebSocket.

layers

القوائم التبويبية والنوافذ المنبثقة

فتح النوافذ وتغيير التبويبات بجلب محتوى الـ HTML عند الحاجة فقط، مما يوفر استهلاك الذاكرة.

الركائز الهندسية

أربعة أسس معمارية لبناء تفاعلية Hypermedia متقنة

معايير تضمن تجربة مستخدم فورية وأماناً متكاملاً بدون تعقيدات البرمجة الزائدة.

أجزاء HTML المخدمية (Server-Rendered Fragments)

01

عودة لقوة معمارية الويب الأصلية؛ السيرفر هو مصدر الحقيقة الوحيد للمنطق والواجهة، مما يضمن أماناً أعلى وكوداً أقل بنسبة 70%.

استراتيجيات الاستبدال المورفولوجي (Morph Swaps)

02

دعم استبدال DOM الدقيق عبر `hx-swap="morph"` وتحديث عناصر متعددة متباعدة في نفس الوقت عبر `hx-swap-oob`.

أمان CSRF ومؤشرات التحميل اللحظية

03

حقن تلقائي لرموز CSRF مع كل طلب، وتفعيل مؤشرات التحميل وأزرار التعطيل المؤقت لمنع النقرات المزدوجة.

تزامن عنوان الـ URL وسجل المتصفح

04

تحديث رابط الصفحة وعنوانها وتاريخ المتصفح تلقائياً عبر `hx-push-url` ليعمل زر الرجوع والمشاركة بسلاسة تامة.

التكامل مع منظومة TidyFactor

HTMX تضيف التفاعلية، و PHP تشغل السيرفر، و Styler تضبط التصميم

تكامل مثالي بين الطبقات: ابنِ المنطق الخلفي وقوالب السيرفر بـ TidyFactor PHP، واجعل التفاعل لحظياً بدون إعادة تحميل بـ TidyFactor HTMX، ونسّق الواجهات ودعم الـ RTL بـ TidyFactor Styler.

استعرض حزم المنظومة arrow_forward
terminal خيارات التثبيت وأوامر Slash Commands لمساعدي الذكاء الاصطناعي
expand_more

أمر التثبيت لطبقة تفاعلية الويب المخدمية وتبديل أجزاء HTML. يتم تفعيل المهارة تلقائياً داخل وكلاء ومساعدي البرمجة (Antigravity, Claude Code, Cursor, Codex, Windsurf).

$ npx skills add @alwkala/tidyfactor-htmx

أوامر Slash Commands المتاحة داخل بيئة العمل:

/swap

أنماط واستراتيجيات تبديل أجزاء HTML.

/form

نماذج تفاعلية مع حماية CSRF.

/oob

تحديثات Out-of-Band لمناطق متعددة.

/indicator

مؤشرات التحميل وحالات الانتظار.

دليل التوثيق المعماري الكامل ← استعراض المستودع على GitHub ←