DOM Benchmark Comparison: React vs Angular vs Vue vs Svelte

This repository contains four implementations of the same to-do list application to benchmark DOM manipulation performance across front-end frameworks.

Objective Coverage

The project satisfies the assignment goals:

• CRUD features in each framework:
• Add task (name, priority)
• View all tasks and priorities
• Update task name or priority
• Delete task
• Benchmark operations in each framework:
• Initial render for 100, 500, and 1000 tasks
• Update 50 tasks
• Delete 50 tasks
• Performance metrics:
• Duration in milliseconds (performance.now())
• Memory delta in MB when performance.memory is available

Project Structure

• apps/react-app React implementation (state + components)
• apps/angular-app Angular implementation (*ngFor, *ngIf, [(ngModel)])
• apps/vue-app Vue implementation (reactivity + directives)
• apps/svelte-app Svelte implementation (compile-time reactive updates)
• scripts/benchmark-runner.mjs Automated benchmark collector with Playwright
• scripts/build-results-table.mjs Converts benchmark JSON to Markdown comparison tables
• results/benchmark-results.json Raw benchmark output
• results/benchmark-results.md Benchmark comparison table
• docs/reflection-report.md Reflection report (200–300 words)

Setup

Network access is required to install dependencies.

npm install
npm install --prefix apps/react-app
npm install --prefix apps/angular-app
npm install --prefix apps/vue-app
npm install --prefix apps/svelte-app

Run Apps Individually

npm run dev:react
npm run dev:angular
npm run dev:vue
npm run dev:svelte

Run Benchmarks

benchmark-runner starts each app one at a time, invokes window.runFrameworkBenchmark(), stores JSON, then you generate Markdown table output.

npm run benchmark

Artifacts created/updated:

• results/benchmark-results.json
• results/benchmark-results.md

Suggested Submission Steps

1. Run npm run benchmark on your machine.
2. Review generated results and fastest-by-operation summary in results/benchmark-results.md.
3. Commit all source code, benchmark artifacts, and docs/reflection-report.md.
4. Push to your GitHub repository.