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

قارن معيار 12 إطاراً وأطر ميتا في JavaScript من خلال طلب وكيل ذكاء اصطناعي بناء نفس تطبيق Pokemon الصغير باستخدام كل منها. قاس التكلفة الوسيطة والوقت والرموز وأسطر الشفرة وأداء Lighthouse وإمكانية الوصول عبر تشغيلات متعددة. تراوحت التكاليف من 2.67 دولار لـ Hono مع htmx إلى 4.97 دولار لـ Angular، بينما حصلت معظم الأطر على 100 في إمكانية الوصول في Lighthouse.

تكلفة البناء والجهد

تراوحت تكاليف البناء الوسيطة من 2.67 دولار لـ Hono مع htmx إلى 4.97 دولار لـ Angular. كلف SvelteKit 4.28 دولار، وGracile مع Lit 4.65 دولار، وAngular 4.97 دولار، مما جعلها أغلى من غيرها. يقول المعيار إن وكلاء SvelteKit قرأوا دليل ترحيل SvelteKit v3 في كل تشغيل، وغالباً ما استنسخ وكلاء Gracile مستودعه أو قرأوا الشفرة المترجمة، وارتبطت تكلفة Angular الأعلى بحجم شفرتها الأكبر. تراوحت أوقات التشغيل الوسيطة من 8.2 دقيقة لـ Astro إلى 17.2 دقيقة لـ Angular، بينما تراوح استخدام الرموز من 3.85 مليون لـ Nuxt إلى 9.76 مليون لـ Angular.

الأداء وإمكانية الوصول

كانت إمكانية الوصول في Lighthouse 100 لكل إطار. كان الأداء من 97 إلى 100، مع Vanilla عند 97 وNext.js وTanStack Start عند 99. تراوحت بايتات JavaScript المرسلة من 0 KiB لـ Astro إلى 142 KiB لـ Next.js. تراوح Total Blocking Time من 0 ms لعدة أطر إلى 103 ms لـ Angular. تراوح Largest Contentful Paint من 810 ms لـ Astro إلى 2090 ms لـ Next.js، ويلاحظ المعيار أن المقياس يكافئ بشكل عام تطبيقات متعددة الصفحات ويعاقب تطبيقات صفحة واحدة.

حجم الشفرة وقابلية الصيانة

تراوحت أسطر شفرة المصدر غير الفارغة من 1370 لـ Hono مع htmx إلى 2009 لـ Angular. يقتبس المنشور Rich Harris: "الأطر ليست أدوات لتنظيم شفرتك؛ إنها أدوات لتنظيم عقلك." كما يجادل بأن حجم الشفرة يؤثر على تكاليف الرموز المستقبلية عند التحرير. قدّم Hono مع htmx تقريباً نفس التطبيق بحوالي 70% من شفرة Angular ونتائج Lighthouse أسرع.

التحفظات والمنهج

كان التطبيق موقع Pokemon يعتمد نسبياً على المحتوى مع تفاعل قليل، وLighthouse وCore Web Vitals منحازان ضد تطبيقات صفحة واحدة. استخدم الاختبار MCP أو skills الرسمية حيث كانت متوفرة، ولم يفرض SSR أو CSR، وتجنب Tailwind وBootstrap. شغّل المؤلف تكرارات متعددة لأن مخرجات LLM ونتائج Lighthouse عشوائية، وفشل Angular مرتين، لذا تستخدم أرقامه ثلاث تشغيلات بدلاً من خمس. المعيار والشفرة متاحان على GitHub.

المصادر: nolanlawson.com