Pokémon bakeoff بهترین چارچوب های جاوا اسکریپت برای هوش مصنوعی را نشان می دهد

اکثر برنامه نویسان جاوا اسکریپت به طور پیش فرض فریمورک های خود را سوار یا بمیرند، اما چنین وفاداری ها می تواند مانع از آن ها شود، زمانی که ماموران هوش مصنوعی را مجبور به انجام کارهای کثیف خود می کنند. ابزارهای انسان پسند لزوما مؤثرترین ابزارها برای مینیون‌های مجهز به مدل نیستند.

نولان لاوسون، ساکن سیاتل، که در حال حاضر توسعه‌دهنده شرکت امنیتی هوش مصنوعی Socket است، نوشت: «یکی از علاقه‌مندی‌های من به جامعه توسعه وب این است که بسیاری از تصمیم‌هایی که می‌گیریم مبتنی بر حس و حال است. این یک دست کم گرفتن است؛ جنگ های جاوا اسکریپت بیش از یک دهه است که به خوبی در جریان است و هر فریم ورک جدید نوید درمان مشکلات انتشار سال گذشته را می دهد.

لاوسون که نمی‌خواست این سوگیری‌های vibey به قلمرو هوش مصنوعی نفوذ کند، معیاری برای مقایسه نحوه عملکرد چارچوب‌های جاوا اسکریپت مختلف تحت یک مدل عامل ایجاد کرد. او متعاقبا این آزمایش را بر روی 12 فریمورک جاوا اسکریپت انجام داد و نتایج را در پستی منتشر کرد که در آن هر فریم‌ورک از نظر هزینه ساخت، قابلیت نگهداری و عملکرد کاربر نهایی برنامه‌های ساخته شده توسط عامل آن‌ها مقایسه شد.

نتایج روشنگر هستند. به طور کلی، عوامل تمایل دارند با چارچوب‌های سرور محور کارآمدتر از چارچوب‌های «Single-Page App» (SPA) مشتری‌محور کار کنند (که باید برای افراد متنفر React قلقلک دهد).

اما بزرگ‌ترین برداشت باید کمتر بحث‌انگیز باشد: عامل‌ها به بهترین وجه از چارچوب‌هایی استفاده می‌کنند که به نفع قرارداد، ثبات API و مختصر هستند.

نحوه مقایسه فریمورک های جاوا اسکریپت

برای این آزمایش، لاوسون مجموعه‌ای از دستورالعمل‌ها را برای یک عامل کلود کد نوشت تا با استفاده از PokéAPI، یک برنامه وب پایه پوکمون بسازد. این مدل از تنظیمات یکسان روی ۱۲ فریم‌ورک مختلف و پشته‌های جاوا اسکریپت استفاده کرد: Angular، Astro، Gracile با Lit، Hono با htmx، وانیلی جاوا اسکریپت با Vite، Next.js، Nuxt، Qwik، React Router، TanStack Start، SolidStart و SvelteKit.

لاوسون هر پشته را در پنج اجرا مستقل جعبه شنی ارزیابی کرد. تکرارهای مکرر واریانس عملکرد مدل را هموار کرد.

لاوسون برای تأیید اینکه برنامه به دست آمده با مشخصات مطابقت دارد، یک مجموعه آزمایشی خودکار سفارشی را به کار گرفت که درخت دسترسی مرورگر را جویا شد تا اطمینان حاصل شود که عناصر تعاملی مانند دکمه‌ها و ورودی‌ها جعلی نیستند - میانبری که LLM گاهی اوقات از آن استفاده می‌کند. لاوسون همچنین از Google Lighthouse برای اندازه گیری اندازه انتقال و عملکرد زمان اجرا استفاده کرد.

اگر فریم‌ورک‌ها سرورهای رسمی MCP، پلاگین‌های کلود و فایل‌های مهارت عامل را مشخص می‌کردند، لاوسون آنها را به‌عنوان منابعی در اختیار نمایندگان قرار می‌داد (اگرچه همیشه با آنها مشورت نمی‌شد). در غیر این صورت، او هیچ معماری خاصی را برای رندر کردن برنامه الزامی نکرده است.

مقایسه 12 فریمورک جاوا اسکریپت

تفاوت‌های بین مقرون‌به‌صرفه‌ترین و گران‌ترین ساخت‌ها، حداقل می‌توان گفت، با بهترین تلاش‌های بی‌سابقه‌ها، قابل توجه است.

اگر می‌خواهید یک Pokéworld را مقرون‌به‌صرفه بسازید، قوی‌ترین شرط‌بندی روی Hono است که با htmx جفت می‌شود. این تگ تیم فناوری با هزینه متوسط ​​2.67 دلار برای هر Pokéapp، مقرون به صرفه ترین عملکرد را داشت.

شاید این تعجب آور نباشد، زیرا این دو به طور کامل بر روی سرور اجرا می شود، در نتیجه مجموعه کاملی از بررسی های مورد نیاز برای همگام سازی یک تقسیم معماری بین مشتری و سرور حذف می شود. همچنین به به حداقل رساندن کد کمک کرد که منجر به مصرف توکن های خروجی کمتری شد.

تقریبا به همان اندازه Astro مؤثر بود (2.76 دلار). مانند Hono/htmx، Astro همه کارها را در سمت سرور انجام می دهد. خرد شدن داده های سمت سرور همچنین به Astro کمک کرد تا سریع ترین زمان متوسط ​​​​برای ساخت و آزمایش برنامه را در 8.2 دقیقه به دست آورد.

Nuxt (2.82 دلار) مقرون به صرفه ترین گزینه برای یک رویکرد SPA مانند بود. Nuxt کدی را بر روی سرور ارائه می دهد که در مشتری هیدراته می شود. Nuxt در واقع بر روی Vue.js ساخته شده است، اما "نظر" است و بسیاری از boilerplate را که عامل باید بنویسد حذف می کند. Nuxt همچنین انتقال داده و مسیریابی فایل را به صورت داخلی انجام می دهد، که کد بیشتری برای سر و صدا نیست.

همچنین شایان ذکر است که Nuxt کمترین توکن‌های این دسته را مصرف کرده است (3.85 میلیون)، هرچند که با توجه به اینکه چگونه کلود نرخ‌های متفاوتی را برای توکن‌های ورودی و خروجی دریافت می‌کند، ارزان‌ترین توکن‌ها را مصرف نمی‌کند. Nuxt این برنامه را در 1415 خط کد تولید کرد که پس از 1370 خط Hono/htmx در رتبه دوم قرار دارد.

به طور کلی، این سه چارچوب برتر در حاشیه خطای یکدیگر قرار داشتند، به این معنی که هر یک از آنها بسته به روزی که LLM می‌گذراند، می‌توانست امتیاز برتر را کسب کند.

با این حال، برخی از چارچوب‌های سنتی‌تر بسیار عقب مانده‌اند.

هزینه تولید یک برنامه مبتنی بر SvelteKit 4.28 دلار است، با این که عامل بارها به اسناد SvelteKit برمی گردد تا نحوه عملکرد Svelte اخیرا به روز شده را بهتر به دست آورد. Angular گران‌ترین راه برای یک نماینده برای ساخت یک برنامه بود، با هزینه 4.97 دلار در حالی که 17.2 دقیقه زمان می‌برد و 9.76 میلیون توکن را می‌جوید (در حالی که نماینده حتی در دو مورد از پنج تلاش خود نتوانست یک برنامه کاربردی را تمام کند).

همه برنامه‌های به‌دست‌آمده به تست‌های دسترسی و عملکرد Lighthouse رسیدند. لاوسون اذعان کرد که این یک برنامه بسیار ساده برای ارائه است.

برنامه Astro سریع‌ترین زمان بارگیری (به نام Largest Contentful Paint یا LCP) 810 میلی‌ثانیه را داشت، در حالی که کندترین فریم‌ورک‌ها در گروه - Next.js (2090 میلی‌ثانیه) و TanStack Start (2028 میلی‌ثانیه) - بیش از دو برابر طول کشید تا کالاها را به JavaScript ارسال کنند.

ستاره های طلایی برای همه

لاوسون امیدوار است که این کار زمینه را برای اعمال کمی دقت بیشتر در انتخاب چارچوب‌ها برای مشاغل هوش مصنوعی فراهم کند، حالا که توسعه‌دهندگان مجبور نیستند خودشان کارهای سنگین را انجام دهند.

اما تعدادی از توسعه دهندگان در Hacker News اشاره کردند که بهره وری هوش مصنوعی تنها عاملی نیست که باید در نظر گرفته شود. مولفه انسانی حفظ چارچوب نیز وجود دارد.

یکی از آنها نوشت: «بعد از یک دهه React، من قصد ندارم htmx یا هر ابزار هم‌شکل بسیار بهتر دیگری را برای یک پروژه جدید بیاموزم، به خصوص زمانی که توانایی من برای بررسی و اشکال‌زدایی محصول کار بازیگر دیگر را کاهش می‌دهد.

به هر حال، خود چارچوب‌ها ممکن است با کمک هوش مصنوعی تکامل یابند و تفاوت‌هایشان را در طول زمان به حداقل برسانند. شخص دیگری خاطرنشان کرد: "علاوه بر بازنویسی در چارچوب دیگری با استفاده از هوش مصنوعی، گزینه دیگر این است که به جای آن چارچوب را با هوش مصنوعی مدرن کنید." ®