{"id":49628912,"url":"https://github.com/analisaperlengkapan/frontend-benchmark","last_synced_at":"2026-05-05T09:31:04.618Z","repository":{"id":322174444,"uuid":"1088437146","full_name":"analisaperlengkapan/frontend-benchmark","owner":"analisaperlengkapan","description":"A comprehensive benchmark comparing various frontend frameworks","archived":false,"fork":false,"pushed_at":"2026-04-20T20:21:12.000Z","size":251,"stargazers_count":0,"open_issues_count":13,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-20T22:08:47.220Z","etag":null,"topics":["angular","benchmark","blade","dioxus","leptos","react","vue","yew"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/analisaperlengkapan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"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}},"created_at":"2025-11-03T00:25:32.000Z","updated_at":"2026-02-26T16:11:36.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/analisaperlengkapan/frontend-benchmark","commit_stats":null,"previous_names":["analisaperlengkapan/frontend-benchmark"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/analisaperlengkapan/frontend-benchmark","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/analisaperlengkapan%2Ffrontend-benchmark","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/analisaperlengkapan%2Ffrontend-benchmark/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/analisaperlengkapan%2Ffrontend-benchmark/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/analisaperlengkapan%2Ffrontend-benchmark/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/analisaperlengkapan","download_url":"https://codeload.github.com/analisaperlengkapan/frontend-benchmark/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/analisaperlengkapan%2Ffrontend-benchmark/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32643444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"online","status_checked_at":"2026-05-05T02:00:06.033Z","response_time":54,"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":["angular","benchmark","blade","dioxus","leptos","react","vue","yew"],"created_at":"2026-05-05T09:31:01.847Z","updated_at":"2026-05-05T09:31:04.594Z","avatar_url":"https://github.com/analisaperlengkapan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Framework Benchmark\n\nA comprehensive benchmark comparing various frontend frameworks including React, Vue.js, Angular, Leptos, Yew, Dioxus, and Blade.php.\n\n## Overview\n\nThis project implements the same Todo List application across multiple frontend frameworks to provide objective performance comparisons and developer experience insights.\n\n## Frameworks Included\n\n### JavaScript/TypeScript\n- **React** - Popular declarative UI library\n- **Vue.js** - Progressive JavaScript framework\n- **Angular** - Full-featured TypeScript framework\n\n### Rust WebAssembly (CSR)\n- **Leptos** - Fine-grained reactivity Rust framework\n- **Yew** - Component-based Rust framework\n- **Dioxus** - React-like Rust framework\n\n### Server-Side\n- **Blade.php** - Laravel's templating engine\n\n## Project Structure\n\n```\nfrontend-benchmark/\n├── implementations/\n│   ├── react/           # React implementation\n│   ├── vue/             # Vue.js implementation\n│   ├── angular/         # Angular implementation\n│   ├── leptos/          # Leptos (Rust) implementation\n│   ├── yew/             # Yew (Rust) implementation\n│   ├── dioxus/          # Dioxus (Rust) implementation\n│   └── blade/           # Laravel Blade implementation\n├── benchmarks/\n│   ├── scripts/         # Benchmark automation scripts\n│   ├── results/         # Benchmark results and data\n│   └── tools/           # Custom measurement tools\n├── shared/\n│   └── styles/          # Common CSS styles\n└── BENCHMARK_SPEC.md    # Detailed specification\n```\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+ (for JS frameworks)\n- Rust 1.70+ (for Rust frameworks)\n- PHP 8.1+ and Composer (for Blade)\n- Modern web browser (Chrome recommended for testing)\n\n### Running Implementations\n\nEach implementation has its own directory with specific instructions. See the README in each implementation folder.\n\n#### React\n```bash\ncd implementations/react\nnpm install\nnpm run dev\n```\n\n#### Vue.js\n```bash\ncd implementations/vue\nnpm install\nnpm run dev\n```\n\n#### Angular\n```bash\ncd implementations/angular\nnpm install\nnpm start\n```\n\n#### Leptos\n```bash\ncd implementations/leptos\ntrunk serve\n```\n\n#### Yew\n```bash\ncd implementations/yew\ntrunk serve\n```\n\n#### Dioxus\n```bash\ncd implementations/dioxus\ndx serve\n```\n\n#### Blade\n```bash\ncd implementations/blade\ncomposer install\nphp artisan serve\n```\n\n## Running Benchmarks\n\n### Local Benchmarks\n\n```bash\ncd benchmarks/scripts\nnpm install\nnpm run benchmark:all\n```\n\n### Docker-based Benchmarks\n\nFor consistent, isolated benchmarking using Docker containers:\n\n```bash\ncd benchmarks/scripts\nnpm install\n\n# Quick benchmark (JS frameworks only, ~30 min)\nnpm run benchmark:docker\n\n# Comprehensive benchmark (ALL frameworks including Rust, ~2 hours)\n# Includes: CPU usage, RAM usage, performance metrics\nnpm run benchmark:docker:full\n```\n\nSee [DOCKER.md](DOCKER.md) for Docker setup and [BENCHMARK_GUIDE.md](BENCHMARK_GUIDE.md) for comprehensive benchmarking guide.\n\n## Benchmark Results\n\n*Last updated: 2026-02-24*\n\n### Quick Highlights\n\n- **Top Lighthouse score:** react (100/100)\n- **Smallest gzipped bundle:** blade (~1.32 KB)\n- **Highest measured throughput:** yew (38,499 req/s peak)\n\n**Notes:**\n- Dioxus Lighthouse audit produced NaN values; rebuild and re-run Lighthouse in idle conditions (no concurrent stress test).\n\n- Top throughput (top 3): yew (38,499 req/s), dioxus (36,243 req/s), leptos (35,047 req/s)\n- Top Lighthouse (top 3): react (100/100), vue (100/100), angular (100/100)\n- Smallest bundles (top 3): blade (1.32 KB), dioxus (13.75 KB), vue (25.91 KB)\n\n---\n\n### Summary (at-a-glance)\n\n#### Bundle Sizes (gzipped)\n\n| Framework | Bundle (gzipped) | Total Size |\n|-----------|------------------:|-----------:|\n| blade | 1.32 KB | 4.01 KB |\n| dioxus | 13.75 KB | 43.63 KB |\n| vue | 25.91 KB | 65.18 KB |\n| react | 61.27 KB | 195.46 KB |\n| angular | 62.06 KB | 190.41 KB |\n| leptos | 75.73 KB | 244.77 KB |\n| yew | 79.89 KB | 219.04 KB |\n\n#### Lighthouse Performance\n\n| Framework | Perf | FCP | LCP | TTI |\n|-----------|-----:|----:|----:|----:|\n| react | 100/100 | 1203ms | 1354ms | 1203ms |\n| vue | 100/100 | 1053ms | 1204ms | 1179ms |\n| angular | 100/100 | 1212ms | 1589ms | 1394ms |\n| leptos | 100/100 | 906ms | 1582ms | 1244ms |\n| yew | 100/100 | 903ms | 1579ms | 1612ms |\n| blade | 87/100 | 751ms | 751ms | 751ms |\n| dioxus | 0/100 | N/A | N/A | N/A |\n\n#### Throughput\n\n| Framework | Peak Avg Req/s | p50 | p90 | p99 | Errors |\n|-----------|---------------:|----:|----:|----:|------:|\n| **Yew** | 38,499 | 211ms | 412ms | 3902ms | 233 |\n| **Dioxus** | 36,243 | 194ms | 245ms | 1997ms | 466 |\n| **Leptos** | 35,047 | 214ms | 403ms | 3893ms | 256 |\n| **Angular** | 31,591 | 202ms | 284ms | 3914ms | 267 |\n| **React** | 30,237 | 196ms | 295ms | 3892ms | 256 |\n| **Vue** | 29,949 | 201ms | 380ms | 3887ms | 384 |\n| **Blade** | 807* | N/A | N/A | N/A | 0 |\n\n*\\*Note: Blade results are NOT directly comparable. Benchmarked locally with single-threaded `php -S` at lower concurrency (50) due to Docker environment constraints. Previous broken implementation scored 309 req/s with high errors.*\n\n---\n\n### Stress Test Summary\n\n| Framework | Peak Avg Req/s | Peak Concurrency | p50 | p90 | p99 | Errors | Non-2xx |\n|-----------|---------------:|----------------:|----:|----:|----:|------:|-------:|\n| yew | 38,499 | 2000 | 211ms | 412ms | 3902ms | 233 | 0 |\n| dioxus | 36,243 | 2000 | 194ms | 245ms | 1997ms | 466 | 0 |\n| leptos | 35,047 | 2000 | 214ms | 403ms | 3893ms | 256 | 0 |\n| angular | 31,591 | 2000 | 202ms | 284ms | 3914ms | 267 | 0 |\n| react | 30,237 | 2000 | 196ms | 295ms | 3892ms | 256 | 0 |\n| vue | 29,949 | 2000 | 201ms | 380ms | 3887ms | 384 | 0 |\n| blade | 807 | 50 | N/A | N/A | N/A | 0 | 0 |\n\n---\n\n### Testing Methodology\n\nAll tests were performed using the included `benchmarks/scripts` runner and are reproducible with the Docker-based setup. Results will vary by environment.\n\nFor detailed per-framework analysis and complete methodology, see [BENCHMARK_GUIDE.md](BENCHMARK_GUIDE.md).\n\n## Contributing\n\nContributions are welcome! Please read the [BENCHMARK_SPEC.md](BENCHMARK_SPEC.md) for implementation guidelines.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanalisaperlengkapan%2Ffrontend-benchmark","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanalisaperlengkapan%2Ffrontend-benchmark","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanalisaperlengkapan%2Ffrontend-benchmark/lists"}