https://github.com/lissy93/framework-benchmarks
๐ The same app built in 10 different frontend frameworks. For automated performance benchmarking
https://github.com/lissy93/framework-benchmarks
Last synced: 9 months ago
JSON representation
๐ The same app built in 10 different frontend frameworks. For automated performance benchmarking
- Host: GitHub
- URL: https://github.com/lissy93/framework-benchmarks
- Owner: Lissy93
- License: mit
- Created: 2025-08-06T09:21:53.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-27T06:10:29.000Z (9 months ago)
- Last Synced: 2025-09-27T07:06:34.362Z (9 months ago)
- Language: Python
- Homepage: https://framework-benchmarks.as93.net/
- Size: 25.8 MB
- Stars: 17
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: .github/README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
๐ Framework Benchmarks
The same weather app built in 10 different frontend frameworks
For automated cross-framework web performance benchmarking

๐ View Results โข
๐ฏ Choose a Framework
### Intro
I've built the same weather app in 10 different frontend web frameworks.
Along with automated scripts to benchmark each of their performance, quality and capabilities.
To finally answer the age-old question: "Which is the _best_* frontend framework?"
So, without further ado, let's see how every framework weathers the storm! โ๏ธ
#### Why?
1. To objectively compare frontend frameworks in an automated way
2. Because I have no life, and like building the same thing 10 times
#### What does _best_ mean?
- Smallest bundle size and best compression
- Fastest load time _(FCP, LCP, TTI, TTFB, etc)_
- Lowest resource consumption _(CPU & memory usage, etc)_
- Most maintainable _(least verbose, complex and repetitive code)_
- Quickest build time _(prod compile, dev server HMR latency, etc)_
#### Contents
- [Frameworks Covered](#frameworks-covered)
- [Usage Guide](#usage)
- [Project Outline](#project-outline)
- [Requirement Spec](#requirement-spec)
- [Benchmarking](#benchmarking)
- [Results](#results)
- [Real-world Applications](#side-note)
- [Status](#status)
- [Attributions and License](#attributions)
---
## Frameworks Covered
Click a framework to view info, test/lint/build/etc statuses, and to preview the demo app
---
## Usage
### Prerequisites
You'll need to ensure you've got
Git, Node (LTS or v22+), Python (3.10) and uv installed
### Setup
```bash
git clone git@github.com:lissy93/framework-benchmarks.git
cd framework-benchmarks
npm install
pip install -r scripts/requirements.txt
npm run setup
```
### Developing
Run `npm run dev:[app-name]`
Or, you can: `cd ./apps/[app-name]` then `npm i` and `npm run dev`
### Testing
All apps are tested with the same shared test suite, to ensure they all conform to the same requirements, and are fully functional.
Tests 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.
Either 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`).
You should also verify the lint checks pass, with `npm run lint` or `npm run lint:[app]`.
### Deploying
Build the app for production, with `npm run build:[app-name]`
Then upload `./apps/[app-name]/dist/` to any web server, CDN or static hosting provider
### Adding a Framework
1. Create app directory: `apps/your-framework/` with `package.json`, `vite.config.js`, and a `src/` dir
2. Build your app (ensuring it meets the [requirements spec](#requirement-spec) above)
3. Update [`frameworks.json`](https://github.com/lissy93/framework-benchmarks/blob/main/frameworks.json)
4. Add a test config file in `tests/config/`
6. Them run `node scripts/setup/generate-scripts.js` and `node scripts/setup/sync-assets.js`
---
## Project Outline
### Directory Structure
```
framework-benchmarks
โโโ scripts # Scripts for managing the app (syncing assets, generating mocks, etc)
โโโ assets # These are shared across all apps for consistency
โ โโโ icons # SVG icons, used by all apps
โ โโโ styles # CSS classes and variables, used by all apps
โ โโโ mocks # Mocked data, used by apps when running benchmarks
โโโ tests # Test suit
โโโ apps # Directory for each app as a standalone project
โโโ react/
โโโ svelte/
โโโ angular/
โโโ ...
```
### Scripts
The **[`scripts/`](https://github.com/lissy93/framework-benchmarks/tree/main/scripts)** directory contains
everything for managing the project (setup, testing, benchmarking, reporting, etc).
You can view a list of scripts by running `npm run help`.
### Shared Assets
To keep things uniform, all apps will share certain assets
- **[`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
- **[`assets/`](https://github.com/lissy93/framework-benchmarks/tree/main/assets)** - Same static assets (icons, fonts, styles, meta, etc)
- **[`assets/styles/`](https://github.com/lissy93/framework-benchmarks/tree/main/assets/styles)** - Same styles for all apps, and theming is done with CSS variables
### Third Parties
- **Dependencies**: Beyond their framework code, none of the apps use any additional dependencies, libraries or third-party "stuff"
- **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.
### Commands
- `npm run setup` - Creates mock data, syncs assets, updates scripts and installs dependencies
- `npm run test` - Runs the test suite for all apps, or a specific app
- `npm run lint` - Runs the linter for all apps, or a specific app
- `npm run check` - Verifies the project is correctly setup and ready to go
- `npm run build` - Builds all apps, or a specific app for production
- `npm run start` - Starts the demo server, which serves up all built apps
- `npm run help` - Displays a list of all available commands
See the [`package.json`](https://github.com/lissy93/framework-benchmarks/blob/main/package.json) for all commands
Note 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).
---
## Requirement Spec
Every 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.
### Technical Requirements
Why a weather app? Because it enables us to use all the critical features of any frontend framework, including:
- Binding user input and validation
- Fetching external data asynchronously
- Basic state management of components
- Handling fallback views (loading, errors)
- Using browser features (location, storage, etc)
- Logic blocks, for iterative content and conditionals
- Lifecycle methods (mounting, updating, unmounting)
### Functional Requirements
For our app to be somewhat complete and useful, it must do the following:
- On initial load, the user should see weather for their current GPS location
- The user should be able to search for a city, and view it's weather
- And the user's city should be stored in localstorage for next time
- The app should show a detailed view of the current weather
- And a summary 7-day forecast, where days can be expanded for more details
### Quality Requirements
There's certain standards every app should follow, and we want to use best practices, so:
- Theming: The app should support both light and dark mode, based on the user's preferences
- Internationalization: The copy should be extracted out of the code, so that it is translatable
- Accessibility: The app should meet AA standard of accessibility
- Mobile: The app should be fully responsive and optimized for mobile
- Performance: The app should be efficiently coded as best as the framework allows
- Testing: The app should meet 90% test coverage
- Error Handling: Errors should be handled, correctly surfaced, and tracible
- Quality: The code should be linted for consistent formatting
- Security: Inputs must be validated, data via HTTPS, and no known vulnerabilities
- SEO: Basic meta and og tags, SSR where possible,
- CI: Automated tests, lints and validation should ensure all changes are compliant
### Benchmarking Requirements
To compare the frameworks, we need to measure:
- Bundle size & output
- Load metrics: FCP, LCP, CLS, TTI, interaction latency
- Hydration/SSR cost, CPU & memory
- Cold vs. warm cache behaviour
- Memory usage: idle, post-flow, leak delta
- Build time & dev server HMR latency
### UI Requirements
The interface is simple, but must be identical arcorss all apps. As validated by the snapshots in the tests.
The screenshots will all look like this:

---
## Benchmarking
---
## Results
A summary of results can be viewed in [`summary.tsv`](https://github.com/Lissy93/framework-benchmarks/blob/main/results/summary.tsv).
Full, detailed results can be found in the [`results`](https://github.com/Lissy93/framework-benchmarks/tree/results) branch,
or attached as an artifact in the GitHub Actions benchmarking workflow runs.
For slightly more interactive reports, you can view the website at [framework-benchmarks.as93.net](https://framework-benchmarks.as93.net),
and also view a stats on a per-framework basis.
### Summary
The following charts show live data from the latest benchmark run. See the web version for interactive charts.
### Community Info
| Framework | Stars | Downloads | Size | Contributors | Age | Last updated | License |
|---|---|---|---|---|---|---|---|
|
[**React**](https://github.com/facebook/react) | 239.4k | 194.4M | 1138.3 MB | 1.9k | 12.3y | 4 hours ago | MIT |
|
[**Angular**](https://github.com/angular/angular) | 99k | 17.9M | 557.7 MB | 2.5k | 11.0y | 8 hours ago | MIT |
|
[**Svelte**](https://github.com/sveltejs/svelte) | 84.3k | 9.8M | 114.0 MB | 867 | 8.9y | 14 hours ago | MIT |
|
[**Preact**](https://github.com/preactjs/preact) | 38k | 37.6M | 17.8 MB | 364 | 10.1y | 2 days ago | MIT |
|
[**Solid.js**](https://github.com/solidjs/solid) | 34.3k | 3.7M | 13.8 MB | 177 | 7.4y | 1 month ago | MIT |
|
[**Qwik**](https://github.com/QwikDev/qwik) | 21.7k | 104.2k | 59.8 MB | 616 | 4.6y | 18 hours ago | MIT |
|
[**Vue 3**](https://github.com/vuejs/core) | 51.7k | 32.7M | 36.6 MB | 576 | 7.0y | 1 week ago | MIT |
|
[**jQuery**](https://github.com/jquery/jquery) | 59.6k | 67.6M | 34.1 MB | 344 | 19.5y | 1 week ago | MIT |
|
[**Alpine.js**](https://github.com/alpinejs/alpine) | 30.4k | 1.3M | 8.8 MB | 295 | 5.9y | 3 days ago | MIT |
|
[**Lit**](https://github.com/lit/lit) | 20.4k | 15M | 59.1 MB | 206 | 8.3y | 1 day ago | BSD-3-Clause |
|
[**VanJS**](https://github.com/vanjs-org/van) | 4.2k | 8.1k | 3.8 MB | 24 | 2.4y | 1 week ago | MIT |
---
## Side note
Different frameworks shine in different ways, and therefore have very different usecases.
So, in order to let each one shine, I have I have built real-world apps in each framework.
| Project | Framework | GitHub | Website |
|---|---|---|---|
| [
Web Check](https://github.com/Lissy93/web-check) - All-in-one OSINT tool for analyzing any site | [](https://react.dev/) | [](https://github.com/Lissy93/web-check) | [๐ web-check.xyz](https://web-check.xyz) |
| [
Dashy](https://github.com/Lissy93/dashy) - Highly configurable self-hostable server dashboard | [](https://vuejs.org/) | [](https://github.com/Lissy93/dashy) | [๐ dashy.to](https://dashy.to) |
| [
Digital Defense](https://github.com/Lissy93/personal-security-checklist) - Interactive personal security checklist | [](https://qwik.builder.io/) | [](https://github.com/Lissy93/personal-security-checklist) | [๐ digital-defense.io](https://digital-defense.io) |
| [
Portainer Templates](https://github.com/Lissy93/portainer-templates) - Automated Docker deployment specs | [](https://svelte.dev/) | [](https://github.com/Lissy93/portainer-templates) | [๐ portainer-templates](https://portainer-templates.as93.net/) |
| [
Domain Locker](https://github.com/Lissy93/domain-locker) - Domain name portfolio manager | [](https://angular.io/) | [](https://github.com/Lissy93/domain-locker) | [๐ domain-locker.com](https://domain-locker.com) |
| [
Email Comparison](https://github.com/Lissy93/email-comparison) - Objective testing of mail providers | [](https://lit.dev/) | [](https://github.com/Lissy93/email-comparison) | [๐ email-comparison](https://email-comparison.as93.net/) |
| [
Who Dat](https://github.com/Lissy93/who-dat) - WHOIS lookup for domain registration info | [](https://alpinejs.dev/) | [](https://github.com/Lissy93/who-dat) | [๐ who-dat.as93.net](https://who-dat.as93.net) |
| [
Chief Snack Officer](https://github.com/Lissy93/cso) - Office snack management app | [](https://www.solidjs.com/) | [](https://github.com/Lissy93/cso) | [๐ N/A](https://lissy93.github.io/cso) |
| [
Awesome Privacy](https://github.com/Lissy93/awesome-privacy) - Curated directory of respectful apps | [](https://astro.build/) | [](https://github.com/Lissy93/awesome-privacy) | [๐ awesome-privacy.xyz](https://awesome-privacy.xyz/) |
| [
RAID Calculator](https://github.com/Lissy93/raid-calculator) - RAID array capacity and fault tolerance | [](https://vanjs.org/) | [](https://github.com/Lissy93/raid-calculator) | [๐ raid-calculator](https://raid-calculator.as93.net/) |
| [
Permissionator](https://github.com/Lissy93/permissionator) - Generating Linux file permissions | [](https://markojs.com/) | [](https://github.com/Lissy93/permissionator) | [๐ permissionator](https://permissionator.as93.net) |
---
## Status
Each 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.
| Workflow | Status |
|---|---|
| **Build**: Compiles each app for deployment | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/build.yml) |
| **Test**: Runs all unit and integration tests | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/test.yml) |
| **Lint**: Ensures lint/consistency checks pass | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/lint.yml) |
| **Benchmark**: Executes all app benchmarks | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/benchmark.yml) |
| **Transform**: Formats and publishes results | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/transform-results.yml) |
| **Docker**: Builds and publishes the image | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/docker.yml) |
| **Docs**: Updates dynamic info in markdown | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/update-docs.yml) |
| **Mirror**: Syncs repo to Codeberg mirror | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/mirror.yml) |
| App | Build | Test | Lint |
|---|---|---|---|
|
React |  |  |  |
|
Angular |  |  |  |
|
Svelte |  |  |  |
|
Preact |  |  |  |
|
Solid.js |  |  |  |
|
Qwik |  |  |  |
|
Vue 3 |  |  |  |
|
jQuery |  |  |  |
|
Alpine.js |  |  |  |
|
Lit |  |  |  |
|
VanJS |  |  |  |
|
Vanilla JavaScript |  |  |  |
---
## Attributions
### Sponsors

### Contributors

### Stargzers

---
## License
> _**[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._
> For information, see TLDR Legal > MIT
Expand License
```
The MIT License (MIT)
Copyright (c) Alicia Sykes
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sub-license, and/or sell
copies of the Software, and to permit persons to whom the Software is furnished
to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included install
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANT ABILITY, FITNESS FOR A
PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```
ยฉ Alicia Sykes 2025
Licensed under MIT

Thanks for visiting :)