Friday, November 14, 2025

Kanban board app in 10 JS frameworks

what could be considered "industry standard" solution (React with Next.js)
is at least 5x larger and 10x slower that some other simpler frameworks!

I Built the Same App 10 Times: Evaluating Frameworks for Mobile Performance | Loren Stewart

lorenseanstewart/kanban-comparison: Comparing frontend fullstack frameworks

This project implements the same Kanban board application in 10 different frameworks to provide fair, reproducible performance comparisons. All implementations share identical functionality, database schema, and UI framework (Tailwind CSS + DaisyUI).

Frameworks Compared

  1. Next.js 16 (React 19 with built-in compiler)
  2. TanStack Start (React 19, leaner meta-framework)
  3. TanStack Start + Solid (SolidJS 1.9)
  4. Nuxt 4 (Vue 3)
  5. Analog (Angular 20)
  6. Marko (@marko/run)
  7. SolidStart (SolidJS 1.9)
  8. SvelteKit (Svelte 5)
  9. Qwik City (Resumability-based)
  10. Astro + HTMX (MPA approach)

Bundle Size Champions (Board Page):

  • Marko: 88.8 kB raw (28.8 kB compressed) - 6.36x smaller than Next.js
  • Qwik: 114.8 kB raw (58.4 kB compressed) - 4.92x smaller than Next.js
  • SvelteKit: 125.2 kB raw (54.1 kB compressed) - 4.51x smaller than Next.js
  • SolidStart: 128.6 kB raw (41.5 kB compressed) - 4.39x smaller than Next.js

Middle of the Pack:

  • TanStack Start (React): 373.6 kB raw (118.2 kB compressed) - 1.51x smaller than Next.js
  • Analog: 376.3 kB raw (103.9 kB compressed) - 1.50x smaller than Next.js

Performance Champions (First Contentful Paint):

  • SolidStart: 35ms FCP (fastest)
  • Nuxt: 38ms FCP (tied for 2nd)
  • SvelteKit: 38ms FCP (tied for 2nd)
  • Marko: 39ms FCP

Baseline:

  • Next.js 16: 564.9 kB raw (176.3 kB compressed), 444ms FCP

No comments: