إطار ⁦JavaScript⁩ يغيّر كلفة وكيل البرمجة: أرقام تجربة ⁦Nolan Lawson⁩

اختيار إطار JavaScript قد يغيّر ما يستهلكه وكيل البرمجة لبناء التطبيق نفسه. في تجربة نشرها المطوّر Nolan Lawson في 28 أكتوبر 2026 كان وسيط الكلفة التقديرية $2.67 مع Hono+htmx، وارتفع إلى $4.97 مع Angular، أي قرابة الضعف.

بين الطرفين جاء إطار Astro عند $2.76 وإطار Next.js عند $3.14. التجربة مستقلة وصغيرة ونموذجها واحد، فهي تساعدك على تصميم اختبارك أكثر مما تحسم أي إطار تختار.

الخلاصة أولًا

الفرق ملموس لا هائل: بين أقل وسيط كلفة وأعلاه $2.30 لكل تطبيق، أي نحو 1.86 ضعف، بحسب جدول Lawson.
الكلفة تتبع الرموز والزمن: استهلك وكيل Angular وسيط 9.76 مليون رمز في 17.2 دقيقة، مقابل 4.26 مليون رمز في 8.6 دقيقة مع Hono+htmx.
بلا إطار ليس أرخص: جاء إعداد Vanilla عند $2.98، أغلى من Hono+htmx وAstro وNuxt.
الوكيل يدفع ثمن ما لا يعرفه: قرأ وكلاء SvelteKit دليل الترحيل إلى الإصدار 3 في كل جولة، ويرجّح الكاتب أن الإصدار أحدث من بيانات تدريب النموذج.

كيف أُجريت التجربة

أعطى Lawson نموذج Opus 5.5 بجهد High ملف مواصفات واحدًا، وطلب منه بناء تطبيق عن البوكيمون يعتمد على PokéAPI بأحدث إصدار من الإطار المحدد. التطبيق قائمة بالأنواع والحركات وبيانات الألعاب مع بحث وتصفية، ويصفه الكاتب بأنه موقع محتوى قليل التفاعل.

شملت التجربة 12 إعدادًا، منها Angular وAstro وHono+htmx وNext.js وNuxt وSvelteKit، وإعداد Vanilla الذي طُلب فيه JavaScript أو TypeScript مع Vite دون إطار واجهة. شُغّل كل إطار خمس جولات وأُخذ الوسيط. وعمل كل وكيل في بيئة معزولة، ومعه مجموعة اختبارات مطابقة تعتمد على شجرة إمكانية الوصول، دون أن يعلم أن الأداء سيُقاس.

ومنع الكاتب توليد صفحات HTML ثابتة مسبقًا، وجعل ذلك فحصًا صريحًا في أداة الاختبار. أما الأداء فقيس بأداة Lighthouse على الصفحة الرئيسية في اختبار الجوال، بإبطاء المعالج أربع مرات وشبكة Slow 4G.

كلفة الجولة في كل إطار

الوسيط من خمس جولات كما نشره Lawson، وبين القوسين أرخص جولة وأغلاها:

الإطار	الكلفة التقديرية
Hono+htmx	$2.67 (2.23–3.19)
Astro	$2.76 (2.16–3.63)
Nuxt	$2.82 (2.39–4.25)
Vanilla	$2.98 (2.24–3.37)
Next.js	$3.14 (2.58–4.13)
Qwik	$3.27 (2.35–3.80)
TanStack Start	$3.54 (3.11–3.96)
SolidStart	$3.79 (2.84–4.81)
React Router	$3.81 (2.82–3.97)
SvelteKit	$4.28 (3.59–4.65)
Gracile+Lit	$4.65 (3.92–5.07)
Angular	$4.97 (3.19–6.82)

الزمن والرموز

الوسيط من خمس جولات، والرموز تشمل القراءة من الذاكرة المؤقتة والإدخال والإخراج كما أحصاها Claude Code:

الإطار	الدقائق	الرموز بالمليون
Astro	8.2	4.13
Hono+htmx	8.6	4.26
Nuxt	9.0	3.85
Vanilla	10.1	5.00
TanStack Start	10.3	7.07
Qwik	10.7	5.64
SvelteKit	10.8	8.53
Next.js	10.9	4.99
SolidStart	11.2	7.13
Gracile+Lit	12.1	9.04
React Router	12.5	7.58
Angular	17.2	9.76

حجم الشيفرة وما يصل إلى المتصفح

أسطر الشيفرة غير الفارغة وحجم JavaScript المنقول بحسب Lighthouse، وسيط خمسة تطبيقات وثلاثة في Angular:

الإطار	أسطر الشيفرة	JavaScript
Hono+htmx	1370	18 KiB
Nuxt	1415	84 KiB
Astro	1461	0 KiB
Vanilla	1492	7 KiB
Next.js	1539	142 KiB
React Router	1564	115 KiB
SvelteKit	1611	36 KiB
SolidStart	1630	40 KiB
TanStack Start	1697	118 KiB
Gracile+Lit	1717	8 KiB
Qwik	1744	40 KiB
Angular	2009	93 KiB

درجات Lighthouse نفسها كادت تتساوى: إمكانية الوصول 100 في الأطر كلها، والأداء بين 97 و100. وتباين زمن أكبر عرض للمحتوى أكثر، من 810 ملي ثانية مع Astro إلى 2090 ملي ثانية مع Next.js.

ما الذي تعنيه هذه الأرقام لقرارك

حجم ما يكتبه الوكيل يحرّك الكلفة. يربط Lawson كلفة Angular بحجم الشيفرة الكلي، ويلاحظ أن Hono+htmx أنجز تقريبًا العمل نفسه بنحو 70% من الشيفرة. وبحسابنا من الجدول: 1370 سطرًا مقابل 2009، أي 68%، ورموز Angular أكثر بنحو 2.3 ضعف. ويضيف الكاتب أن حجم الشيفرة يؤثر أيضًا في الرموز عند كل تعديل لاحق، أي في كلفة الصيانة مع الوقت.

والمعرفة المسبقة تحرّكها كذلك. جاءت SvelteKit وGracile+Lit وAngular أغلى من البقية بنمط ثابت بحسب الكاتب. في SvelteKit قرأ الوكلاء دليل الترحيل في كل جولة، وفي Gracile لم يعرف الوكلاء الإطار جيدًا فنسخوا مستودعه أو قرؤوا شيفرته المجمّعة. ولافت أن إعداد Vanilla بلا إطار جاء أغلى من عدة أطر، وبنى الوكيل فيه تطبيق صفحة واحدة في الجولات الخمس.

لكن الفروق بين المتقاربين لا تصمد كثيرًا. بين Hono+htmx وAstro تسعة سنتات فقط، ونطاقا الجولات متداخلان. ويضرب الكاتب مثلًا بأن أرخص جولة لإطار React Router، $2.82، أرخص من أغلى جولة لإطار Hono+htmx، $3.19. فاقرأ الجدول مجموعات تقريبية لا ترتيبًا دقيقًا.

وانخفاض كلفة البناء لا يعني دائمًا تطبيقًا أخف. كلّف Next.js قرابة 18% أكثر من Hono+htmx، لكنه شحن نحو ثمانية أضعاف JavaScript. والفكرة نفسها تنطبق على اختيار النماذج: العبرة بما تستهلكه المهمة كاملة لا بسعر الوحدة، كما شرحنا في مقال النموذج الأرخص قد يكلّف أكثر لكل مهمة منجزة.

مثال حسابي بالدولار والريال: عشرة تطبيقات مشابهة

هذا مثال توضيحي من حسابنا، لا فاتورة. افترضنا عشرة تطبيقات بحجم تطبيق التجربة، بالنموذج والجهد نفسيهما وبالتعرفة التي عرضها Claude Code يومها، ثم ضربنا الوسيط في عشرة. وحوّلنا إلى الريال بسعر الربط 3.75 ريال للدولار، كما في شرحنا لسعر صرف الدولار مقابل الريال، وقرّبنا إلى أقرب هللة:

الإطار	بالدولار	بالريال تقريبًا
Hono+htmx	$26.70	100.13
Astro	$27.60	103.50
Next.js	$31.40	117.75
Angular	$49.70	186.38

الفرق بين الطرفين $23.00، أي نحو 86.25 ريالًا بالحساب نفسه. المبالغ صغيرة لمشروع واحد وتكبر مع تكرار البناء والتعديل. وإن كنت تدفع بالاستهلاك فاحسب على تعرفة يومك، ويساعدك في ذلك دليلنا لأسعار النماذج وكلفة الاستخدام عبر الواجهة البرمجية.

حدود التجربة قبل أن تبني عليها

تقدير لا فاتورة: يقول الكاتب إن الأرقام لا تمثل ما أنفقه، فالتجربة جزء من اشتراكه في Max البالغ $100 شهريًا.
تطبيق صغير واحد: موقع محتوى قليل التفاعل، ويقرّ الكاتب بأن مقاييس Lighthouse منحازة ضد تطبيقات الصفحة الواحدة، فتكاد التطبيقات متعددة الصفحات تفوز سلفًا.
نموذج واحد وجهد واحد: كل الجولات على Opus 5.5 بجهد High، فلا تخبرك بما يحدث مع نماذج أو مستويات جهد أخرى.
جولتان فاشلتان في Angular: بنى الوكيل تطبيقًا يُعرض من الخادم ويرفض الطلبات من خارج الجهاز المحلي، رغم أن المواصفات ذكرت وسيطًا عكسيًا. احتُسبت الجولات الخمس في الكلفة، واعتمدت أسطر الشيفرة ومقاييس الأداء على ثلاثة تطبيقات.
تباين واضح: يصف الكاتب كل ما قاسه بأنه عشوائي إلى حد كبير، وتراوحت كلفة Angular وحده بين $3.19 و$6.82.
لا شيء عن العربية: لم تتناول التجربة واجهات عربية ولا اتجاه الكتابة من اليمين إلى اليسار.

ولم نُعِد في ClueTrove تشغيل التجربة، وكل الأرقام هنا من منشور Lawson.

كيف استقبل مجتمع Hacker News التجربة

جمع النقاش 336 نقطة و258 تعليقًا عند قراءتنا في 2 نوفمبر 2026، ولم يكتب صاحب التجربة فيه أي تعليق. رأى أحد المعلّقين أن الاختبار أبسط من أن يحسم الاختيار، وأن دفع دولارين ودقيقتين إضافيتين قد يستحق مقابل صيانة أسهل. وربط آخر جزءًا من الكلفة بواجهات برمجية أحدث من معرفة الوكلاء، وهو ما يوافق ملاحظة الكاتب عن SvelteKit. وروى ثالث من تجربته الشخصية أن الوكيل تعثّر مع htmx في نموذج معقّد كثير الحالات.

كيف تستفيد منها في مشروعك

هذه قراءتنا للأرقام، لا توصية من الكاتب، فهو يقول إنه لا يقصد ذم أي إطار:

إن كان مشروعك محتوى وصفحات وبحثًا: جاءت Hono+htmx وAstro وNuxt في أقل الكلف بفوارق صغيرة، وشحن Astro صفرًا تقريبًا من JavaScript.
إن كان فريقك يعمل بإطار معيّن أصلًا: فرق دولار أو دولارين لكل تطبيق لا يبرر وحده التحول، فخبرة الفريق والصيانة أثقل وزنًا.
إن كان تطبيقك لوحة تحكم أو تطبيقًا تفاعليًا ثقيلًا: يقرّ الكاتب بأن اختبارًا بهذه الطبيعة قد يأتي لصالح تطبيقات الصفحة الواحدة، فلا تنقل النتيجة إلى حالتك.
إن اخترت إطارًا حديث الإصدار: توقّع أن يصرف الوكيل رموزًا في تعلّمه، كما حدث مع SvelteKit وGracile+Lit.
إن أردت دليلًا لحالتك: أداة التجربة منشورة على GitHub، فشغّلها على مواصفات قريبة من مشروعك وبالنموذج الذي تستخدمه.

أخطاء تتجنبها عند قراءة الجدول

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

أسئلة وأجوبة

أي إطار JavaScript كلّف أقل في بناء تطبيق بوكيل ذكاء اصطناعي

في تجربة Nolan Lawson المنشورة في 28 أكتوبر 2026 سجّل Hono+htmx أقل وسيط كلفة تقديرية عند $2.67، ثم Astro عند $2.76 وNuxt عند $2.82. وسجّل Angular أعلاها عند $4.97، والنموذج المستخدم Opus 5.5 بجهد High.

هل الكلفة المذكورة مبلغ دفعه الكاتب فعلًا

لا. الأرقام أسعار بتعرفة الواجهة البرمجية يعرضها Claude Code لكل جولة. الكاتب مشترك في خطة Max، والتجربة جزء من اشتراكه البالغ $100 شهريًا.

كم استغرق بناء التطبيق بكل إطار

كان الوسيط 8.2 دقيقة مع Astro، و8.6 دقيقة مع Hono+htmx، و10.9 دقيقة مع Next.js، و17.2 دقيقة مع Angular، بحسب جدول Lawson لخمس جولات لكل إطار.

لماذا كلّف Angular أكثر من غيره

يربط الكاتب كلفة Angular بحجم الشيفرة الكلي: وسيط 2009 أسطر مقابل 1370 مع Hono+htmx، واستهلاك 9.76 مليون رمز مقابل 4.26 مليون. وفي جولتين من خمس رفض التطبيق الناتج الطلبات من خارج الجهاز المحلي، واحتُسبت الجولتان في الكلفة.

هل استخدم الوكيل أدوات MCP والمهارات الرسمية للأطر

ليس بانتظام. لم يستخدم الوكلاء خادم MCP الخاص بإطار Nuxt في أي جولة، وقرأ وكيل Next.js ملف المهارات في جولة واحدة من خمس. في المقابل استخدم وكلاء Hono+htmx أداة المهارات في الجولات الخمس، واستخدم وكلاء SvelteKit خادم MCP في الخمس كذلك. ويرجّح الكاتب أن هذه الأدوات بصورتها الحالية قد تضر أكثر مما تنفع.

هل يمكنني إعادة التجربة على مشروعي

نعم. المستودع agent-framework-benchmark على GitHub، ويذكر ملف التعريف فيه أنه يحتاج إلى Linux وPodman 4.3 أو أحدث وNode 20 أو أحدث ونحو 15 GB من المساحة، مع مفتاح API أو بيانات اعتماد Claude Code. والجهد الافتراضي فيه Medium، فأضف خيار الجهد High لتطابق تجربة المنشور. وينصح الملف باستخدام مفتاح بحد إنفاق، لأن الوكيل يستطيع قراءة بيانات الاعتماد.

مصطلحات بلغة مبسطة

وكيل البرمجة: نموذج ذكاء اصطناعي يكتب الشيفرة وينفّذ الأوامر ويصحح أخطاءه حتى ينجز المهمة.
الرمز: وحدة نص صغيرة يحسب بها المزود الاستهلاك والسعر.
الوسيط: القيمة التي تقع في المنتصف بعد ترتيب نتائج الجولات الخمس.
تطبيق الصفحة الواحدة: تطبيق يبني صفحاته في المتصفح بشيفرة JavaScript، مقابل تطبيق متعدد الصفحات يرسل الخادم صفحاته جاهزة.
زمن أكبر عرض للمحتوى: الوقت حتى يظهر أكبر عنصر مرئي في الصفحة، ويُختصر LCP.

المصادر

قُرئت المعلومات في 2 نوفمبر 2026.