+
ALWKALA logo
ابدأ بقوة .. تعلم بسرعة .. توسع بحكمة
🚀
0%
arrow_back العودة لكتالوج المنتجات
تطبيقات الويب بدون أطر عمل متاح · حزمة NPM
Vanilla JS · Web Components · State Proxy

تطبيقات ويب تفاعلية كاملة (SPA)
بجافاسكربت الصرفة وبدون أطر عمل.

مسار هندسي يوجّه مساعدي الذكاء الاصطناعي لبناء تطبيقات Single Page Apps حقيقية (إدارة حالة، توجيه العميل، Web Components، وجلب البيانات) بجافاسكربت الحديثة وبدون React أو Vue أو أي اعتماديات خارجية.

check_circle صفر حزم واعتماديات خارجية check_circle حجم كلي أقل من 10KB check_circle معايير W3C القياسية
javascript app.vanilla.js
JS <smart-dashboard>
Shadow DOM

const state = new Proxy({ count: 0 }, handler);

customElements.define('smart-dashboard', Dashboard);

8.4 KB

الحجم الكلي

0 NPM

الاعتماديات

1.2 ms

زمن التشغيل

memory

صفر اعتماديات (Zero Dependencies)

تخلص من مئات حزم NPM الهشة. يعمل تطبيقك مباشرة على معايير المتصفح القياسية دون خوف من كسر التحديثات.

electric_bolt

حجم حزمة فائق الصغر < 10KB

تحميل وتشغيل لحظي في المتصفح في أقل من 2 ميلي ثانية، مما يمنح المستخدمين على الهواتف تجربة سلسة وفائقة السرعة.

all_inclusive

كود يدوم لـ 20 عاماً (Forever Code)

الاعتماد على Web Components و ES Modules يضمن تشغيل كودك في متصفحات اليوم والغد دون الحاجة لإعادة كتابته.

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

لماذا نشحن مئات الكيلوبايتات لتطبيق ويب بسيط؟

أصبحت أطر العمل الحديثة تفرض مئات التبعيات الهشة ومجمعات معقدة تنكسر باستمرار، مع بطء في معالجة المتصفحات للهواتف. جافاسكربت الحديثة توفر اليوم كل ما تحتاجه أصلياً دون أي إطار عمل.

cancel

فخ أطر العمل وتضخم التبعيات

  • أحجام حزم تفوق 500KB تتسبب في بطء استجابة الهواتف.
  • مئات التبعيات الهشة في `node_modules` المعرضة للثغرات.
  • أدوات بناء ومجمعات معقدة تنكسر عند كل تحديث رئيسي.
  • قفل احتكاري داخل أطر عمل تتقادم وتتغير كل عامين.
check_circle

معيار TidyFactor Vanilla JS

  • حجم كلي ضئيل للغاية < 10KB وتشغيل فوري في أقل من 2ms.
  • صفر تبعيات خارجية وصفر مخاطر ثغرات أمنية.
  • وحدات ES Modules تعمل مباشرة في المتصفح بدون Bundler.
  • معايير W3C القياسية تضمن عمل كودك واستقراره لعقود قادمة.
الاستخدامات ومجالات التطبيق

ماذا يمكنك أن تبني وتطلق بواسطة Vanilla JS؟

حلول تفاعلية متكاملة للمتصفح تجمع بين الخفة القصوى والمرونة والاستدامة.

web

تطبيقات الصفحة الواحدة (SPAs)

تطبيقات تفاعلية متكاملة مع توجيه عميل سلس (History API أو Hash) وإدارة حالة مركزية دون أطر عمل ثقيلة.

extension

مكتبات Web Components المستقلة

عناصر واجهة معزولة وقابلة لإعادة الاستخدام تعمل في أي مشروع أو بيئة برمجة دون أي قيود.

insights

لوحات التحكم والشاشات المدمجة

لوحات تحليلات وبيانات خفيفة الوزن يمكن تضمينها داخل أي منصة دون إبطاء زمن تحميل الصفحة.

wifi_off

أدوات الويب المحلية (Offline-First)

تطبيقات معالجة محلية سريعة تعمل بالكامل داخل متصفح المستخدم دون الحاجة لطلب خوادم خارجية.

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

أربعة أسس لبناء تطبيقات جافاسكربت أصيلة ومستدامة

معايير هندسية تضمن الأداء الفائق والتحرر الكامل من أعباء التبعيات.

معمارية خالية من الاعتماديات (Zero-Dependency)

01

استخدام قدرات المتصفح الأصلية بنسبة 100%، مما يقضي تماماً على ثغرات الأمان في سلاسل التوريد (Supply-Chain Risks) وحزم NPM المهدرة.

إدارة حالة تفاعلية عبر Proxies

02

نمط إدارة حالة مركزي ذكي يعتمد على كائنات `Proxy` الأصلية في جافاسكربت لمراقبة التغيرات وتحديث واجهة المستخدم فورياً بدون Virtual DOM.

مكونات ويب معزولة (Native Web Components)

03

كبسلة كاملة للأنماط والمنطق عبر `CustomElements` و `Shadow DOM` لإنتاج مكونات واجهة مستقلة ونظيفة.

توجيه عميل فوري ووحدات ES Modules

04

دعم أصيل لموجه History API و Hash Routing مع وحدات ES Modules المباشرة التي تعمل في المتصفح فوراً بدون Bundler.

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

Vanilla JS تبني المنطق التفاعلي، و Styler يمنحها الواجهات الفاخرة

تكامل متناغم: ابنِ تطبيقات الويب الخفيفة و Web Components بـ TidyFactor JS، ونسق تصاميمها ودعم الـ RTL بواسطة TidyFactor Styler، وأطلق استراتيجيات النمو عبر TidyFactor Marketing.

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

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

$ npx skills add @alwkala/tidyfactor-js

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

/component

إنشاء Web Component مخصص.

/router

توجيه العميل (History/Hash).

/store

إدارة حالة مركزية بـ Proxies.

/build

فحص وتجهيز الحزم للإنتاج.