Thử nghiệm với Pokémon: Hono và Astro giúp AI xây dựng ứng dụng JavaScript hiệu quả hơn

Một phép thử dùng Claude Code để xây dựng ứng dụng Pokémon trên 12 khung phát triển JavaScript cho thấy Hono kết hợp htmx và Astro có chi phí thấp nhất, trong khi Astro hoàn thành nhanh nhất. Kết quả cho thấy tác nhân AI có thể làm việc hiệu quả hơn với công cụ ưu tiên xử lý phía máy chủ, quy ước rõ ràng và ít mã rườm rà, thay vì các ứng dụng phụ thuộc nhiều vào phía trình duyệt.

Cách tiến hành phép thử

Nolan Lawson, nhà phát triển tại công ty bảo mật AI Socket, tạo một bộ thử nghiệm để so sánh cách các tác nhân AI làm việc với những khung phát triển khác nhau. Ông yêu cầu Claude Code xây dựng cùng một ứng dụng Pokémon cơ bản, sử dụng PokéAPI, trên 12 lựa chọn: Angular, Astro, Gracile với Lit, Hono với htmx, JavaScript thuần với Vite, Next.js, Nuxt, Qwik, React Router, TanStack Start, SolidStart và SvelteKit.

Mỗi lựa chọn được chạy trong năm môi trường thử nghiệm độc lập để giảm ảnh hưởng từ sự dao động giữa các lần thực hiện. Lawson dùng bộ kiểm tra tự động để rà soát cây trợ năng của trình duyệt, xác nhận các nút và ô nhập liệu có thể tương tác thật, thay vì chỉ được tạo ra để trông có vẻ hoạt động. Google Lighthouse được dùng để đo dung lượng truyền tải và hiệu năng khi chạy.

Với những khung phát triển có máy chủ MCP, tiện ích bổ sung cho Claude hoặc tệp hướng dẫn dành cho tác nhân, các tài nguyên này được cung cấp cho mô hình, dù không phải lúc nào mô hình cũng sử dụng chúng. Lawson không áp đặt kiến trúc kết xuất cụ thể nào.

Hono và htmx dẫn đầu về chi phí

Hono kết hợp htmx có chi phí trung vị thấp nhất, ở mức 2,67 đô la cho mỗi ứng dụng. Cả hai xử lý hoàn toàn ở phía máy chủ, nhờ đó giảm bớt các bước cần thiết để đồng bộ phần máy chủ với phần trình duyệt. Lượng mã ít hơn cũng giúp tác nhân tiêu thụ ít mã thông báo đầu ra hơn.

Astro đứng sát phía sau, với chi phí 2,76 đô la. Cách xử lý phía máy chủ giúp Astro đạt thời gian trung vị nhanh nhất để xây dựng và kiểm thử ứng dụng: 8,2 phút.

Nuxt có chi phí 2,82 đô la, là lựa chọn tiết kiệm nhất trong nhóm ứng dụng kiểu một trang (SPA). Nuxt kết xuất mã trên máy chủ rồi hoàn thiện ứng dụng ở trình duyệt. Khung này được xây dựng trên Vue.js và định hướng sẵn nhiều quyết định, giảm lượng mã nền mà tác nhân phải viết. Nuxt cũng tự xử lý việc chuyển dữ liệu và định tuyến tệp.

Nuxt dùng ít mã thông báo nhất trong nhóm, với 3,85 triệu, nhưng không phải lựa chọn có chi phí thấp nhất vì Claude tính phí đầu vào và đầu ra theo các mức khác nhau. Ứng dụng do Nuxt tạo ra gồm 1.415 dòng mã, chỉ nhiều hơn Hono kết hợp htmx, với 1.370 dòng.

Ba lựa chọn dẫn đầu nằm trong khoảng sai số của phép thử, nên thứ hạng có thể thay đổi tùy vào lần chạy của mô hình. Trong khi đó, SvelteKit có chi phí 4,28 đô la; tác nhân nhiều lần phải tra tài liệu để nắm những thay đổi gần đây của Svelte. Angular là lựa chọn đắt nhất, ở mức 4,97 đô la, mất 17,2 phút và tiêu thụ 9,76 triệu mã thông báo. Trong năm lần thử với Angular, tác nhân không hoàn thành được ứng dụng hoạt động ở hai lần.

Khác biệt về tốc độ tải

Tất cả ứng dụng đều đạt điểm tốt trong các bài kiểm tra về khả năng tiếp cận và hiệu năng của Lighthouse, dù Lawson lưu ý đây là ứng dụng tương đối đơn giản.

Astro có thời gian hiển thị nội dung lớn nhất (LCP) nhanh nhất, ở mức 810 mili giây. Next.js và TanStack Start chậm nhất, lần lượt mất 2.090 mili giây và 2.028 mili giây. Hai khung này có thể cần nhiều thời gian hơn do lượng JavaScript gửi đến trình duyệt.

Hiệu quả của AI không phải tiêu chí duy nhất

Lawson kỳ vọng phép thử sẽ giúp việc lựa chọn khung phát triển cho các công việc do AI đảm nhiệm dựa trên dữ liệu hơn, thay vì chỉ theo sở thích cá nhân. Tuy nhiên, một số nhà phát triển trên Hacker News nhấn mạnh rằng khả năng duy trì dự án cũng quan trọng: dùng một công cụ mới có thể khiến nhóm khó rà soát và gỡ lỗi sản phẩm do tác nhân khác tạo ra.

Một ý kiến khác cho rằng AI cũng có thể được dùng để hiện đại hóa chính khung phát triển đang sử dụng, thay vì viết lại ứng dụng bằng công nghệ khác. Bản thân các công cụ cũng có thể thay đổi theo thời gian khi được AI hỗ trợ phát triển.

Góc nhìn

Với nhóm phát triển dùng AI để tạo ứng dụng, phép thử cho thấy kiến trúc gọn và quy ước nhất quán có thể giúp giảm chi phí, thời gian và lượng mã cần sinh. Đây là cơ sở hữu ích để đưa hiệu quả của tác nhân vào quy trình đánh giá công nghệ.

Tuy vậy, kết quả chỉ dựa trên một ứng dụng Pokémon cơ bản và năm lần chạy cho mỗi lựa chọn. Do đó, chi phí trong thử nghiệm không thể thay thế việc cân nhắc năng lực đội ngũ, khả năng bảo trì và mức độ phù hợp của từng khung phát triển với dự án thực tế.