{"id":31483339,"url":"https://github.com/lissy93/framework-benchmarks","last_synced_at":"2025-10-02T08:08:34.343Z","repository":{"id":312094800,"uuid":"1033085340","full_name":"Lissy93/framework-benchmarks","owner":"Lissy93","description":"🌈 The same app built in 10 different frontend frameworks. For automated performance benchmarking","archived":false,"fork":false,"pushed_at":"2025-09-27T06:10:29.000Z","size":27075,"stargazers_count":17,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-27T07:06:34.362Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://framework-benchmarks.as93.net/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lissy93.png","metadata":{"files":{"readme":".github/README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"lissy93"}},"created_at":"2025-08-06T09:21:53.000Z","updated_at":"2025-09-27T06:10:32.000Z","dependencies_parsed_at":"2025-08-28T20:50:12.796Z","dependency_job_id":"d62593e6-8cd9-474b-9c37-ceda77c8fe47","html_url":"https://github.com/Lissy93/framework-benchmarks","commit_stats":null,"previous_names":["lissy93/framework-benchmarks"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Lissy93/framework-benchmarks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lissy93%2Fframework-benchmarks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lissy93%2Fframework-benchmarks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lissy93%2Fframework-benchmarks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lissy93%2Fframework-benchmarks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lissy93","download_url":"https://codeload.github.com/Lissy93/framework-benchmarks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lissy93%2Fframework-benchmarks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277974435,"owners_count":25908398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-02T02:00:08.890Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-02T08:08:30.273Z","updated_at":"2025-10-02T08:08:34.334Z","avatar_url":"https://github.com/Lissy93.png","language":"Python","funding_links":["https://github.com/sponsors/lissy93"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e🌈 Framework Benchmarks\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\u003ci\u003eThe same weather app built in 10 different frontend frameworks\u003c/i\u003e\u003cbr\u003e\n    For automated cross-framework web performance benchmarking\n  \u003cbr\u003e\n\t\u003ca href=\"https://framework-benchmarks.as93.net\"\u003e\u003cimg width=\"96\" src=\"https://storage.googleapis.com/as93-screenshots/project-logos/framework-benchmarks.png\" /\u003e\u003c/a\u003e\u003cbr\u003e\n\t\u003cb\u003e📊 \u003ca href=\"https://framework-benchmarks.as93.net\"\u003eView Results\u003c/a\u003e \u003c/b\u003e  •\n \t\u003cb\u003e 🎯 \u003ca href=\"https://stack-match.as93.net/\"\u003eChoose a Framework\u003c/a\u003e\u003c/b\u003e\n\u003c/p\u003e\n\n### Intro\nI've built the same weather app in 10 different frontend web frameworks.\nAlong with automated scripts to benchmark each of their performance, quality and capabilities.\nTo finally answer the age-old question: \"Which is the _best_* frontend framework?\"\u003cbr\u003e\nSo, without further ado, let's see how every framework weathers the storm! ⛈️\n\n#### Why?\n1. To objectively compare frontend frameworks in an automated way\n2. Because I have no life, and like building the same thing 10 times\n\n#### What does _best_ mean?\n- Smallest bundle size and best compression\n- Fastest load time _(FCP, LCP, TTI, TTFB, etc)_\n- Lowest resource consumption _(CPU \u0026 memory usage, etc)_\n- Most maintainable _(least verbose, complex and repetitive code)_\n- Quickest build time _(prod compile, dev server HMR latency, etc)_\n\n#### Contents\n- [Frameworks Covered](#frameworks-covered)\n- [Usage Guide](#usage)\n- [Project Outline](#project-outline)\n- [Requirement Spec](#requirement-spec)\n- [Benchmarking](#benchmarking)\n- [Results](#results)\n- [Real-world Applications](#side-note)\n- [Status](#status)\n- [Attributions and License](#attributions)\n\n---\n\n## Frameworks Covered\n\n\u003c!-- start_framework_list --\u003e\n\u003cp align=\"center\"\u003e\n        \u003ca href=\"https://framework-benchmarks.as93.net/react/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/react.png\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://framework-benchmarks.as93.net/angular/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/angular.png\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://framework-benchmarks.as93.net/svelte/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/svelte.png\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://framework-benchmarks.as93.net/preact/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/preact.png\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://framework-benchmarks.as93.net/solid/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/solid.png\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://framework-benchmarks.as93.net/qwik/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/qwik.png\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://framework-benchmarks.as93.net/vue/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/vue.png\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://framework-benchmarks.as93.net/jquery/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/jquery.png\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://framework-benchmarks.as93.net/alpine/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/alpine.png\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://framework-benchmarks.as93.net/lit/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/lit.png\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://framework-benchmarks.as93.net/vanjs/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/vanjs.png\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://framework-benchmarks.as93.net/vanilla/\"\u003e\u003cimg width=\"48\" src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/javascript.png\" /\u003e\u003c/a\u003e\n\u003cbr\u003e\u003csub\u003eClick a framework to view info, test/lint/build/etc statuses, and to preview the demo app\u003c/sub\u003e\u003c/p\u003e\n\u003c!-- end_framework_list --\u003e\n\n---\n\n## Usage\n\n### Prerequisites\n\nYou'll need to ensure you've got\nGit, Node (LTS or v22+), Python (3.10) and uv installed\n\n### Setup\n\n```bash\ngit clone git@github.com:lissy93/framework-benchmarks.git\ncd framework-benchmarks\nnpm install\npip install -r scripts/requirements.txt\nnpm run setup\n```\n\n### Developing\nRun `npm run dev:[app-name]`\u003cbr\u003e\nOr, you can: `cd ./apps/[app-name]` then `npm i` and `npm run dev`\n\n### Testing\nAll apps are tested with the same shared test suite, to ensure they all conform to the same requirements, and are fully functional.\nTests are dome with [Playwright](https://playwright.dev/docs/intro) and can be found in the [`tests/`](https://github.com/lissy93/framework-benchmarks/tree/main/tests) directory.\n\nEither execute tests for all implementations with `npm test`, or just for a specific app with `npm run test:[app]` (e.g. `npm run test:react`).\u003cbr\u003e\nYou should also verify the lint checks pass, with `npm run lint` or `npm run lint:[app]`.\n\n### Deploying\nBuild the app for production, with `npm run build:[app-name]`\u003cbr\u003e\nThen upload `./apps/[app-name]/dist/` to any web server, CDN or static hosting provider\n\n### Adding a Framework\n1. Create app directory: `apps/your-framework/` with `package.json`, `vite.config.js`, and a `src/` dir\n2. Build your app (ensuring it meets the [requirements spec](#requirement-spec) above)\n3. Update [`frameworks.json`](https://github.com/lissy93/framework-benchmarks/blob/main/frameworks.json)\n4. Add a test config file in `tests/config/`\n6. Them run `node scripts/setup/generate-scripts.js` and `node scripts/setup/sync-assets.js`\n\n\n---\n\n## Project Outline\n\n### Directory Structure\n\n```\nframework-benchmarks\n├── scripts\t\t\t\t\t# Scripts for managing the app (syncing assets, generating mocks, etc)\n├── assets\t\t\t\t\t# These are shared across all apps for consistency\n│   ├── icons\t\t\t\t# SVG icons, used by all apps\n│   ├── styles\t\t\t# CSS classes and variables, used by all apps\n│   └── mocks\t\t\t\t# Mocked data, used by apps when running benchmarks\n├── tests\t\t\t\t\t\t# Test suit\n└── apps\t\t\t\t\t\t# Directory for each app as a standalone project\n    ├── react/\n    ├── svelte/\n    ├── angular/\n    └── ...\n```\n\n### Scripts\nThe **[`scripts/`](https://github.com/lissy93/framework-benchmarks/tree/main/scripts)** directory contains\neverything for managing the project (setup, testing, benchmarking, reporting, etc).\nYou can view a list of scripts by running `npm run help`.\n\n\n### Shared Assets\nTo keep things uniform, all apps will share certain assets\n\n- **[`tests/`](https://github.com/lissy93/framework-benchmarks/tree/main/tests)** - Same test suit used for all apps. To ensure each app conforms to the spec and is fully functional\n- **[`assets/`](https://github.com/lissy93/framework-benchmarks/tree/main/assets)** - Same static assets (icons, fonts, styles, meta, etc)\n- **[`assets/styles/`](https://github.com/lissy93/framework-benchmarks/tree/main/assets/styles)** - Same styles for all apps, and theming is done with CSS variables\n\n### Third Parties\n- **Dependencies**: Beyond their framework code, none of the apps use any additional dependencies, libraries or third-party \"stuff\"\n- **Data**: Apps support using real weather data, from [open-meteo api](https://open-meteo.com). However, to keep tests fair, we use mocked data when running benchmarks.\n\n\n### Commands\n\n- `npm run setup` - Creates mock data, syncs assets, updates scripts and installs dependencies\n- `npm run test` - Runs the test suite for all apps, or a specific app\n- `npm run lint` - Runs the linter for all apps, or a specific app\n- `npm run check` - Verifies the project is correctly setup and ready to go\n- `npm run build` - Builds all apps, or a specific app for production\n- `npm run start` - Starts the demo server, which serves up all built apps\n- `npm run help` - Displays a list of all available commands\n\nSee the [`package.json`](https://github.com/lissy93/framework-benchmarks/blob/main/package.json) for all commands\n\nNote that the project commands get generated automatically by the [`generate_scripts.py`](https://github.com/lissy93/framework-benchmarks/blob/main/scripts/setup/generate_scripts.py) script, based on the contents of [`frameworks.json`](https://github.com/lissy93/framework-benchmarks/blob/main/frameworks.json) and [`config.json`](https://github.com/lissy93/framework-benchmarks/blob/main/config.json).\n\n---\n\n## Requirement Spec\n\nEvery app is built with identical requirements (as validated by the shared test suite), and uses the same assets, styles, and data. The only difference is the framework used to build each.\n\n### Technical Requirements\nWhy a weather app? Because it enables us to use all the critical features of any frontend framework, including:\n- Binding user input and validation\n- Fetching external data asynchronously\n- Basic state management of components\n- Handling fallback views (loading, errors)\n- Using browser features (location, storage, etc)\n- Logic blocks, for iterative content and conditionals\n- Lifecycle methods (mounting, updating, unmounting)\n\n### Functional Requirements\nFor our app to be somewhat complete and useful, it must do the following:\n- On initial load, the user should see weather for their current GPS location\n- The user should be able to search for a city, and view it's weather\n- And the user's city should be stored in localstorage for next time\n- The app should show a detailed view of the current weather\n- And a summary 7-day forecast, where days can be expanded for more details\n\n### Quality Requirements\nThere's certain standards every app should follow, and we want to use best practices, so:\n- Theming: The app should support both light and dark mode, based on the user's preferences\n- Internationalization: The copy should be extracted out of the code, so that it is translatable\n- Accessibility: The app should meet AA standard of accessibility\n- Mobile: The app should be fully responsive and optimized for mobile\n- Performance: The app should be efficiently coded as best as the framework allows\n- Testing: The app should meet 90% test coverage\n- Error Handling: Errors should be handled, correctly surfaced, and tracible\n- Quality: The code should be linted for consistent formatting\n- Security: Inputs must be validated, data via HTTPS, and no known vulnerabilities\n- SEO: Basic meta and og tags, SSR where possible, \n- CI: Automated tests, lints and validation should ensure all changes are compliant\n\n### Benchmarking Requirements\nTo compare the frameworks, we need to measure:\n- Bundle size \u0026 output\n- Load metrics: FCP, LCP, CLS, TTI, interaction latency\n- Hydration/SSR cost, CPU \u0026 memory\n- Cold vs. warm cache behaviour\n- Memory usage: idle, post-flow, leak delta\n- Build time \u0026 dev server HMR latency\n\n### UI Requirements\nThe interface is simple, but must be identical arcorss all apps. As validated by the snapshots in the tests.\u003cbr\u003e\nThe screenshots will all look like this:\n\n\u003cimg src=\"https://raw.githubusercontent.com/Lissy93/framework-benchmarks/refs/heads/main/assets/screenshot.png\" width=\"400\" /\u003e\n\n---\n\n## Benchmarking\n\n---\n\n## Results\n\nA summary of results can be viewed in [`summary.tsv`](https://github.com/Lissy93/framework-benchmarks/blob/main/results/summary.tsv).\u003cbr\u003e\nFull, detailed results can be found in the [`results`](https://github.com/Lissy93/framework-benchmarks/tree/results) branch,\nor attached as an artifact in the GitHub Actions benchmarking workflow runs.\nFor slightly more interactive reports, you can view the website at [framework-benchmarks.as93.net](https://framework-benchmarks.as93.net),\nand also view a stats on a per-framework basis.\n\n### Summary\n\u003cp align=\"center\"\u003e\u003csub\u003eThe following charts show live data from the latest benchmark run. See the web version for interactive charts.\u003c/sub\u003e\u003c/p\u003e\n\u003c!-- start_summary_charts --\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://quickchart.io/chart/render/zf-ba55831c-a0a8-4412-8ce3-723c9a6c961d\" width=\"256\" title=\"Performance Overview\" alt=\"Performance Overview\" /\u003e\n  \u003cimg src=\"https://quickchart.io/chart/render/zf-53d72626-43f1-43f4-98fd-68f03efd9e40\" width=\"256\" title=\"Performance vs Bundle Size\" alt=\"Performance vs Bundle Size\" /\u003e\n  \u003cimg src=\"https://quickchart.io/chart/render/zf-9e26e357-9181-41b7-82e8-a618e50a11b8\" width=\"256\" title=\"Source Code Analysis\" alt=\"Source Code Analysis\" /\u003e\n  \u003cimg src=\"https://quickchart.io/chart/render/zf-a66b2447-ef7c-4b90-baef-e042f33969e7\" width=\"256\" title=\"Bundle Size and Comparison\" alt=\"Bundle Size and Comparison\" /\u003e\n  \u003cimg src=\"https://quickchart.io/chart/render/zf-bf5f429b-10b4-41a8-aeeb-90ba70e44631\" width=\"256\" title=\"Lighthouse Performance Scores\" alt=\"Lighthouse Performance Scores\" /\u003e\n  \u003cimg src=\"https://quickchart.io/chart/render/zf-9001a3fd-b805-45f3-9b94-d982b684415e\" width=\"256\" title=\"Loading Performance\" alt=\"Loading Performance\" /\u003e\n  \u003cimg src=\"https://quickchart.io/chart/render/zf-64f4e6fb-18ce-4973-bfd5-15081fde81da\" width=\"256\" title=\"Project Size Distribution\" alt=\"Project Size Distribution\" /\u003e\n  \u003cimg src=\"https://quickchart.io/chart/render/zf-dbadb39b-b1e6-4e73-a52c-b95ef5fa8992\" width=\"256\" title=\"Development Server Performance\" alt=\"Development Server Performance\" /\u003e\n  \u003cimg src=\"https://quickchart.io/chart/render/zf-af6e0bba-b681-40a6-a9f3-dccce7a08c12\" width=\"256\" title=\"Build Time Distribution\" alt=\"Build Time Distribution\" /\u003e\n\u003c/p\u003e\n\u003c!-- end_summary_charts --\u003e\n\n### Community Info\n\n\u003c!-- start_framework_stats --\u003e\n| Framework | Stars | Downloads | Size | Contributors | Age | Last updated | License |\n|---|---|---|---|---|---|---|---|\n| \u003ca href=\"https://github.com/facebook/react\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/react.png\" alt=\"⚛️\" width=\"16\"\u003e\u003c/a\u003e [**React**](https://github.com/facebook/react) | 239.4k | 194.4M | 1138.3 MB | 1.9k | 12.3y | 4 hours ago | MIT |\n| \u003ca href=\"https://github.com/angular/angular\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/angular.png\" alt=\"🅰️\" width=\"16\"\u003e\u003c/a\u003e [**Angular**](https://github.com/angular/angular) | 99k | 17.9M | 557.7 MB | 2.5k | 11.0y | 8 hours ago | MIT |\n| \u003ca href=\"https://github.com/sveltejs/svelte\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/svelte.png\" alt=\"🔥\" width=\"16\"\u003e\u003c/a\u003e [**Svelte**](https://github.com/sveltejs/svelte) | 84.3k | 9.8M | 114.0 MB | 867 | 8.9y | 14 hours ago | MIT |\n| \u003ca href=\"https://github.com/preactjs/preact\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/preact.png\" alt=\"💜\" width=\"16\"\u003e\u003c/a\u003e [**Preact**](https://github.com/preactjs/preact) | 38k | 37.6M | 17.8 MB | 364 | 10.1y | 2 days ago | MIT |\n| \u003ca href=\"https://github.com/solidjs/solid\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/solid.png\" alt=\"🚀\" width=\"16\"\u003e\u003c/a\u003e [**Solid.js**](https://github.com/solidjs/solid) | 34.3k | 3.7M | 13.8 MB | 177 | 7.4y | 1 month ago | MIT |\n| \u003ca href=\"https://github.com/QwikDev/qwik\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/qwik.png\" alt=\"⚡\" width=\"16\"\u003e\u003c/a\u003e [**Qwik**](https://github.com/QwikDev/qwik) | 21.7k | 104.2k | 59.8 MB | 616 | 4.6y | 18 hours ago | MIT |\n| \u003ca href=\"https://github.com/vuejs/core\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/vue.png\" alt=\"💚\" width=\"16\"\u003e\u003c/a\u003e [**Vue 3**](https://github.com/vuejs/core) | 51.7k | 32.7M | 36.6 MB | 576 | 7.0y | 1 week ago | MIT |\n| \u003ca href=\"https://github.com/jquery/jquery\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/jquery.png\" alt=\"💙\" width=\"16\"\u003e\u003c/a\u003e [**jQuery**](https://github.com/jquery/jquery) | 59.6k | 67.6M | 34.1 MB | 344 | 19.5y | 1 week ago | MIT |\n| \u003ca href=\"https://github.com/alpinejs/alpine\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/alpine.png\" alt=\"🏔️\" width=\"16\"\u003e\u003c/a\u003e [**Alpine.js**](https://github.com/alpinejs/alpine) | 30.4k | 1.3M | 8.8 MB | 295 | 5.9y | 3 days ago | MIT |\n| \u003ca href=\"https://github.com/lit/lit\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/lit.png\" alt=\"🔥\" width=\"16\"\u003e\u003c/a\u003e [**Lit**](https://github.com/lit/lit) | 20.4k | 15M | 59.1 MB | 206 | 8.3y | 1 day ago | BSD-3-Clause |\n| \u003ca href=\"https://github.com/vanjs-org/van\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/vanjs.png\" alt=\"🚐\" width=\"16\"\u003e\u003c/a\u003e [**VanJS**](https://github.com/vanjs-org/van) | 4.2k | 8.1k | 3.8 MB | 24 | 2.4y | 1 week ago | MIT |\n\u003c!-- end_framework_stats --\u003e\n\n---\n\n## Side note\nDifferent frameworks shine in different ways, and therefore have very different usecases.\u003cbr\u003e\nSo, in order to let each one shine, I have I have built real-world apps in each framework.\n\n\n| Project | Framework | GitHub | Website |\n|---|---|---|---|\n| [\u003cimg src=\"https://raw.githubusercontent.com/Lissy93/web-check/master/public/android-chrome-192x192.png\" width=\"18\" /\u003e Web Check](https://github.com/Lissy93/web-check) - All-in-one OSINT tool for analyzing any site | [![React](https://img.shields.io/static/v1?label=\u0026message=React\u0026color=61DAFB\u0026logo=react\u0026logoColor=FFFFFF)](https://react.dev/) | [![GitHub Repo stars](https://img.shields.io/github/stars/Lissy93/web-check)](https://github.com/Lissy93/web-check) | [🌐 web-check.xyz](https://web-check.xyz) |\n| [\u003cimg src=\"https://i.ibb.co/yhbt6CY/dashy.png\" width=\"18\" /\u003e Dashy](https://github.com/Lissy93/dashy) - Highly configurable self-hostable server dashboard | [![Vue.js](https://img.shields.io/static/v1?label=\u0026message=Vue.js\u0026color=4FC08D\u0026logo=vuedotjs\u0026logoColor=FFFFFF)](https://vuejs.org/) | [![GitHub Repo stars](https://img.shields.io/github/stars/Lissy93/dashy)](https://github.com/Lissy93/dashy) | [🌐 dashy.to](https://dashy.to) |\n| [\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/project-logos/digital-defense.png\" width=\"18\" /\u003e Digital Defense](https://github.com/Lissy93/personal-security-checklist) - Interactive personal security checklist | [![Qwik](https://img.shields.io/static/v1?label=\u0026message=Qwik\u0026color=ac7ef4\u0026logo=qwik\u0026logoColor=FFFFFF)](https://qwik.builder.io/) | [![GitHub Repo stars](https://img.shields.io/github/stars/Lissy93/personal-security-checklist)](https://github.com/Lissy93/personal-security-checklist) | [🌐 digital-defense.io](https://digital-defense.io) |\n| [\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/project-logos/portainer-templates.png\" width=\"18\" /\u003e Portainer Templates](https://github.com/Lissy93/portainer-templates) - Automated Docker deployment specs | [![Svelte](https://img.shields.io/static/v1?label=\u0026message=Svelte\u0026color=ff3e00\u0026logo=svelte\u0026logoColor=FFFFFF)](https://svelte.dev/) | [![GitHub Repo stars](https://img.shields.io/github/stars/Lissy93/portainer-templates)](https://github.com/Lissy93/portainer-templates) | [🌐 portainer-templates](https://portainer-templates.as93.net/) |\n| [\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/project-logos/domain-locker.png\" width=\"18\" /\u003e Domain Locker](https://github.com/Lissy93/domain-locker) - Domain name portfolio manager | [![Angular](https://img.shields.io/static/v1?label=\u0026message=Angular\u0026color=DD0031\u0026logo=angular\u0026logoColor=FFFFFF)](https://angular.io/) | [![GitHub Repo stars](https://img.shields.io/github/stars/Lissy93/domain-locker)](https://github.com/Lissy93/domain-locker) | [🌐 domain-locker.com](https://domain-locker.com) |\n| [\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/project-logos/email-comparison.png\" width=\"18\" /\u003e Email Comparison](https://github.com/Lissy93/email-comparison) - Objective testing of mail providers | [![Lit](https://img.shields.io/static/v1?label=\u0026message=Lit\u0026color=00ffff\u0026logo=lit\u0026logoColor=FFFFFF)](https://lit.dev/) | [![GitHub Repo stars](https://img.shields.io/github/stars/Lissy93/email-comparison)](https://github.com/Lissy93/email-comparison) | [🌐 email-comparison](https://email-comparison.as93.net/) |\n| [\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/project-logos/who-dat.png\" width=\"18\" /\u003e Who Dat](https://github.com/Lissy93/who-dat) - WHOIS lookup for domain registration info  | [![Alpine.js](https://img.shields.io/static/v1?label=\u0026message=Alpine.js\u0026color=8BC0D0\u0026logo=alpinedotjs\u0026logoColor=FFFFFF)](https://alpinejs.dev/) | [![GitHub Repo stars](https://img.shields.io/github/stars/Lissy93/who-dat)](https://github.com/Lissy93/who-dat) | [🌐 who-dat.as93.net](https://who-dat.as93.net) |\n| [\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/project-logos/cso.png\" width=\"18\" /\u003e Chief Snack Officer](https://github.com/Lissy93/cso) - Office snack management app | [![Solid](https://img.shields.io/static/v1?label=\u0026message=Solid\u0026color=2C4F7C\u0026logo=solid\u0026logoColor=FFFFFF)](https://www.solidjs.com/) | [![GitHub Repo stars](https://img.shields.io/github/stars/Lissy93/cso)](https://github.com/Lissy93/cso) | [🌐 N/A](https://lissy93.github.io/cso) |\n| [\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/project-logos/awesome-privacy.png\" width=\"18\" /\u003e Awesome Privacy](https://github.com/Lissy93/awesome-privacy) - Curated directory of respectful apps | [![Astro](https://img.shields.io/static/v1?label=\u0026message=Astro\u0026color=E83CB9\u0026logo=astro\u0026logoColor=FFFFFF)](https://astro.build/) | [![GitHub Repo stars](https://img.shields.io/github/stars/Lissy93/awesome-privacy)](https://github.com/Lissy93/awesome-privacy) | [🌐 awesome-privacy.xyz](https://awesome-privacy.xyz/) |\n| [\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/project-screenshots/raid-caclularor.png\" width=\"18\" /\u003e RAID Calculator](https://github.com/Lissy93/raid-calculator) - RAID array capacity and fault tolerance | [![Van.js](https://img.shields.io/static/v1?label=\u0026message=Van.js\u0026color=F44336\u0026logo=vitess\u0026logoColor=FFFFFF)](https://vanjs.org/) | [![GitHub Repo stars](https://img.shields.io/github/stars/Lissy93/raid-calculator)](https://github.com/Lissy93/raid-calculator) | [🌐 raid-calculator](https://raid-calculator.as93.net/) |\n| [\u003cimg src=\"https://github.com/Lissy93/permissionator/blob/main/public/logo.png?raw=true\" width=\"18\" /\u003e Permissionator](https://github.com/Lissy93/permissionator) - Generating Linux file permissions | [![Marko](https://img.shields.io/static/v1?label=\u0026message=Marko\u0026color=2596BE\u0026logo=marko\u0026logoColor=FFFFFF)](https://markojs.com/) | [![GitHub Repo stars](https://img.shields.io/github/stars/Lissy93/permissionator)](https://github.com/Lissy93/permissionator) | [🌐 permissionator](https://permissionator.as93.net) |\n\n---\n\n## Status\n\nEach app gets built and tested to ensure that it is functional, compliant with the spec, and (reasonably) well coded. Below is the current status of each, but for complete details you can see the [Workflow Logs](https://github.com/lissy93/framework-benchmarks/actions) via GitHub Actions. \n\n| Workflow | Status |\n|---|---|\n| **Build**: Compiles each app for deployment | [![🔨 Build](https://github.com/Lissy93/framework-benchmarks/actions/workflows/build.yml/badge.svg)](https://github.com/Lissy93/framework-benchmarks/actions/workflows/build.yml) |\n| **Test**: Runs all unit and integration tests | [![🧪 Test](https://github.com/Lissy93/framework-benchmarks/actions/workflows/test.yml/badge.svg)](https://github.com/Lissy93/framework-benchmarks/actions/workflows/test.yml) |\n| **Lint**: Ensures lint/consistency checks pass | [![🧼 Lint](https://github.com/Lissy93/framework-benchmarks/actions/workflows/lint.yml/badge.svg)](https://github.com/Lissy93/framework-benchmarks/actions/workflows/lint.yml) |\n| **Benchmark**: Executes all app benchmarks | [![📈 Benchmark](https://github.com/Lissy93/framework-benchmarks/actions/workflows/benchmark.yml/badge.svg)](https://github.com/Lissy93/framework-benchmarks/actions/workflows/benchmark.yml) |\n| **Transform**: Formats and publishes results | [![🔄 Transform Results](https://github.com/Lissy93/framework-benchmarks/actions/workflows/transform-results.yml/badge.svg)](https://github.com/Lissy93/framework-benchmarks/actions/workflows/transform-results.yml) |\n| **Docker**: Builds and publishes the image | [![🐳 Build \u0026 Publish Docker Image](https://github.com/Lissy93/framework-benchmarks/actions/workflows/docker.yml/badge.svg)](https://github.com/Lissy93/framework-benchmarks/actions/workflows/docker.yml) |\n| **Docs**: Updates dynamic info in markdown | [![📄 Update readme](https://github.com/Lissy93/framework-benchmarks/actions/workflows/update-docs.yml/badge.svg)](https://github.com/Lissy93/framework-benchmarks/actions/workflows/update-docs.yml) |\n| **Mirror**: Syncs repo to Codeberg mirror  | [![🪞 Mirror to Codeberg](https://github.com/Lissy93/framework-benchmarks/actions/workflows/mirror.yml/badge.svg)](https://github.com/Lissy93/framework-benchmarks/actions/workflows/mirror.yml) |\n\n\n\u003c!-- start_all_status --\u003e\n\n| App | Build | Test | Lint |\n|---|---|---|---|\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/react\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/react.png\" width=\"16\" /\u003e React\u003c/a\u003e | ![React Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-react.svg) | ![React Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-react.svg) | ![React Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-react.svg) |\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/angular\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/angular.png\" width=\"16\" /\u003e Angular\u003c/a\u003e | ![Angular Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-angular.svg) | ![Angular Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-angular.svg) | ![Angular Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-angular.svg) |\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/svelte\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/svelte.png\" width=\"16\" /\u003e Svelte\u003c/a\u003e | ![Svelte Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-svelte.svg) | ![Svelte Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-svelte.svg) | ![Svelte Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-svelte.svg) |\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/preact\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/preact.png\" width=\"16\" /\u003e Preact\u003c/a\u003e | ![Preact Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-preact.svg) | ![Preact Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-preact.svg) | ![Preact Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-preact.svg) |\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/solid\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/solid.png\" width=\"16\" /\u003e Solid.js\u003c/a\u003e | ![Solid.js Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-solid.svg) | ![Solid.js Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-solid.svg) | ![Solid.js Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-solid.svg) |\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/qwik\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/qwik.png\" width=\"16\" /\u003e Qwik\u003c/a\u003e | ![Qwik Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-qwik.svg) | ![Qwik Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-qwik.svg) | ![Qwik Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-qwik.svg) |\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/vue\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/vue.png\" width=\"16\" /\u003e Vue 3\u003c/a\u003e | ![Vue 3 Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-vue.svg) | ![Vue 3 Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-vue.svg) | ![Vue 3 Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-vue.svg) |\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/jquery\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/jquery.png\" width=\"16\" /\u003e jQuery\u003c/a\u003e | ![jQuery Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-jquery.svg) | ![jQuery Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-jquery.svg) | ![jQuery Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-jquery.svg) |\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/alpine\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/alpine.png\" width=\"16\" /\u003e Alpine.js\u003c/a\u003e | ![Alpine.js Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-alpine.svg) | ![Alpine.js Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-alpine.svg) | ![Alpine.js Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-alpine.svg) |\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/lit\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/lit.png\" width=\"16\" /\u003e Lit\u003c/a\u003e | ![Lit Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-lit.svg) | ![Lit Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-lit.svg) | ![Lit Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-lit.svg) |\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/vanjs\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/vanjs.png\" width=\"16\" /\u003e VanJS\u003c/a\u003e | ![VanJS Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-vanjs.svg) | ![VanJS Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-vanjs.svg) | ![VanJS Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-vanjs.svg) |\n| \u003ca href=\"https://github.com/lissy93/framework-benchmarks/tree/main/apps/vanilla\"\u003e\u003cimg src=\"https://storage.googleapis.com/as93-screenshots/frontend-benchmarks/framework-logos/javascript.png\" width=\"16\" /\u003e Vanilla JavaScript\u003c/a\u003e | ![Vanilla JavaScript Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-vanilla.svg) | ![Vanilla JavaScript Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-vanilla.svg) | ![Vanilla JavaScript Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-vanilla.svg) |\n\u003c!-- end_all_status --\u003e\n\n---\n\n## Attributions\n\n### Sponsors\n\n![Sponsors](https://readme-contribs.as93.net/sponsors/lissy93?avatarSize=80\u0026perRow=10)\n\n### Contributors\n\n![Contributors](https://readme-contribs.as93.net/contributors/lissy93/framework-benchmarks?avatarSize=80\u0026perRow=10)\n\n\n### Stargzers\n\n![Stargazers](https://readme-contribs.as93.net/stargazers/lissy93/framework-benchmarks?perRow=16\u0026limit=64)\n\n---\n\n## License\n\n\n\u003e _**[lissy93/framework-benchmarks](https://github.com/lissy93/framework-benchmarks)** is licensed under [MIT](https://github.com/lissy93/framework-benchmarks/blob/HEAD/LICENSE) © [Alicia Sykes](https://aliciasykes.com) 2025._\u003cbr\u003e\n\u003e \u003csup align=\"right\"\u003eFor information, see \u003ca href=\"https://tldrlegal.com/license/mit-license\"\u003eTLDR Legal \u003e MIT\u003c/a\u003e\u003c/sup\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eExpand License\u003c/summary\u003e\n\n```\nThe MIT License (MIT)\nCopyright (c) Alicia Sykes \u003calicia@omg.com\u003e \n\nPermission is hereby granted, free of charge, to any person obtaining a copy \nof this software and associated documentation files (the \"Software\"), to deal \nin the Software without restriction, including without limitation the rights \nto use, copy, modify, merge, publish, distribute, sub-license, and/or sell \ncopies of the Software, and to permit persons to whom the Software is furnished \nto do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included install \ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,\nINCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANT ABILITY, FITNESS FOR A\nPARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n```\n\n\u003c/details\u003e\n\n\u003c!-- License + Copyright --\u003e\n\u003cp  align=\"center\"\u003e\n  \u003ci\u003e© \u003ca href=\"https://aliciasykes.com\"\u003eAlicia Sykes\u003c/a\u003e 2025\u003c/i\u003e\u003cbr\u003e\n  \u003ci\u003eLicensed under \u003ca href=\"https://gist.github.com/Lissy93/143d2ee01ccc5c052a17\"\u003eMIT\u003c/a\u003e\u003c/i\u003e\u003cbr\u003e\n  \u003ca href=\"https://github.com/lissy93\"\u003e\u003cimg src=\"https://i.ibb.co/4KtpYxb/octocat-clean-mini.png\" /\u003e\u003c/a\u003e\u003cbr\u003e\n  \u003csup\u003eThanks for visiting :)\u003c/sup\u003e\n\u003c/p\u003e\n\n\u003c!-- Dinosaurs are Awesome --\u003e\n\u003c!-- \n                        . - ~ ~ ~ - .\n      ..     _      .-~               ~-.\n     //|     \\ `..~                      `.\n    || |      }  }              /       \\  \\\n(\\   \\\\ \\~^..'                 |         }  \\\n \\`.-~  o      /       }       |        /    \\\n (__          |       /        |       /      `.\n  `- - ~ ~ -._|      /_ - ~ ~ ^|      /- _      `.\n              |     /          |     /     ~-.     ~- _\n              |_____|          |_____|         ~ - . _ _~_-_\n--\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flissy93%2Fframework-benchmarks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flissy93%2Fframework-benchmarks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flissy93%2Fframework-benchmarks/lists"}