React
+
---
@@ -209,31 +210,28 @@ The screenshots will all look like this:
---
-## 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/weather-front/actions) via GitHub Actions.
-
-
-
-| App | Build | Test | Lint |
-|---|---|---|---|
-| React |  |  |  |
-| 
Angular |  |  |  |
-| 
Svelte |  |  |  |
-| 
Preact |  |  |  |
-| 
Solid.js |  |  |  |
-| 
Qwik |  |  |  |
-| 
Vue 3 |  |  |  |
-| 
jQuery |  |  |  |
-| 
Alpine.js |  |  |  |
-| 
Lit |  |  |  |
-| 
VanJS |  |  |  |
-| 
Vanilla JavaScript |  |  |  |
-
+## Results
----
+A summary of results can be viewed in [`summary.tsv`](https://github.com/Lissy93/framework-benchmarks/blob/main/results/summary.tsv).
+
+
+
+
+
+
+
+
+
+
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 |
+|---|---|
+| **Benchmark**: Executes all app benchmarks | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/benchmark.yml) |
+| **Build**: Compiles each app for deployment | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/build.yml) |
+| **Lint**: Ensures lint/consistency checks pass | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Mirror**: Syncs repo to Codeberg mirror | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/mirror.yml) |
+| **Test**: Runs all unit and integration tests | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Transform**: Formats and publishes results | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/transform-results.yml) |
+| **Update readme**: Updates dynamic info in docs | [](https://github.com/Lissy93/framework-benchmarks/actions/workflows/update-docs.yml) |
+
+
+
+
+| App | Build | Test | Lint |
+|---|---|---|---|
+| React |  |  |  |
+| Angular |  |  |  |
+| Svelte |  |  |  |
+| Preact |  |  |  |
+| Solid.js |  |  |  |
+| Qwik |  |  |  |
+| Vue 3 |  |  |  |
+| jQuery |  |  |  |
+| Alpine.js |  |  |  |
+| Lit |  |  |  |
+| VanJS |  |  |  |
+| Vanilla JavaScript |  |  |  |
+
---
@@ -285,19 +317,19 @@ So, in order to let each one shine, I have I have built real-world apps in each
### Contributors
-
+
### Stargzers
-
+
---
## License
-> _**[Lissy93/Weather-Front](https://github.com/Lissy93/weather-front)** is licensed under [MIT](https://github.com/Lissy93/weather-front/blob/HEAD/LICENSE) © [Alicia Sykes](https://aliciasykes.com) 2025._
- 
+ 
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [Alpine.js](https://alpinejs.dev/) (as we
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [Alpine.js](https://alpinejs.dev/) (as we
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/alpine` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/alpine` and use the following commands:
```bash
npm run dev # Start dev server (python3 -m http.server 3000 || python -m http.server 3000)
@@ -67,13 +67,29 @@ For troubleshooting, use `npm run verify` from the root of the project.
## Alpine Implementation
-### Notable files
- `index.html` - Main HTML with Alpine directives sprinkled in
- `js/weather-app.js` - Alpine data and methods for weather logic
- `js/weather-service.js` - API calls integrated with Alpine reactivity
- `js/weather-utils.js` - Utility functions for data formatting
+## About Alpine
+
+
+
+## My Thoughts on Alpine
+
+
+Alpine.js is like jQuery had a baby with Vue and decided to live directly in your HTML. It's refreshingly simple - you sprinkle a few `x-` attributes into your markup and suddenly you have reactive behavior. No build tools, no bundlers, no complexity. Just add a script tag and start building.
+
+The approach feels intuitive once you get it. `x-data` sets up your reactive state, `x-show` handles conditional rendering, and `x-for` loops through arrays. Our weather app's forecast list is just `
-
+
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [Angular](https://angular.io/) (as well a
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [Angular](https://angular.io/) (as well a
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/angular` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/angular` and use the following commands:
```bash
npm run dev # Start dev server (ng serve --port 3000)
@@ -64,10 +64,12 @@ For troubleshooting, use `npm run verify` from the root of the project.
-## Angular Implementation
+## About Angular
+
+
+## Angular Implementation
-### Notable files
- `src/app/app.component.ts` - Root component with weather state management
- `src/app/services/weather.service.ts` - Injectable service using Angular's HttpClient
- `src/app/services/weather-state.service.ts` - Centralized state with RxJS observables
@@ -75,6 +77,19 @@ For troubleshooting, use `npm run verify` from the root of the project.
- `src/app/types/weather.types.ts` - TypeScript interfaces for type safety
+## My Thoughts on Angular
+
+Angular isn't the cool kid anymore, but it's incredibly solid and ships with absolutely everything you need. TypeScript from day one, dependency injection, forms, HTTP client, routing, testing utilities - it's all there, officially maintained and deeply integrated. No need to cobble together a stack from random npm packages.
+
+For our weather app, Angular did kinda feel like using a sledgehammer to crack a nut. Using the newer standalone components (no more `NgModule` boilerplate!) made things cleaner, but I was still writing a lot more code than I needed in Svelte or Vue. That said, everything does just works, and the TypeScript integration is phenomenal.
+
+The dependency injection system was quite nice for having `WeatherService` automatically injected into components. And RxJS observables handle all the async weather data very nicley, though they do add a learning curve if you're not familiar with reactive programming.
+
+Angular's template syntax with `*ngIf`, `*ngFor`, and `(click)` feels natural once you get used to it. Change detection just works without thinking about it (unlike React where you're constantly memoizing things).
+
+For a simple weather app, we really didn't need any of Angular's big or flagship features (like guards, resolvers, or lazy loading). But I recently build [Domain Locker](https://github.com/lissy93/domain-locker) using Angular, and it was a great fit for the complexity of that project, As the structure, type safety, and tooling made it easy to manage a large codebase with multiple features.
+
+
@@ -94,7 +109,7 @@ Since the weather app is very simple, it may be helpful to see a more practical
## License
-Weather-Front is licensed under [MIT](https://github.com/Lissy93/weather-front/blob/main/LICENSE) © Alicia Sykes 2025.
-View [Attributions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#attributions) for credits, thanks and contributors.
+Weather-Front is licensed under [MIT](https://github.com/lissy93/framework-benchmarks/blob/main/LICENSE) © Alicia Sykes 2025.
+View [Attributions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#attributions) for credits, thanks and contributors.
diff --git a/apps/jquery/README.md b/apps/jquery/README.md
index b60e1445..564cfccc 100644
--- a/apps/jquery/README.md
+++ b/apps/jquery/README.md
@@ -2,7 +2,7 @@
-
+
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [jQuery](https://jquery.com/) (as well as
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [jQuery](https://jquery.com/) (as well as
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/jquery` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/jquery` and use the following commands:
```bash
npm run dev # Start dev server (vite --port 3000)
@@ -67,13 +67,28 @@ For troubleshooting, use `npm run verify` from the root of the project.
## jQuery Implementation
-### Notable files
- `src/main.js` - Application initialization and jQuery setup
- `src/components/weather-ui.js` - Manual DOM management and event handling
- `src/services/weather-service.js` - API calls with `$.ajax()`
- `index.html` - Plain HTML structure with jQuery CDN
+## About jQuery
+
+
+
+## My Thoughts on jQuery
+
+Let's be honest - building a modern app with jQuery in 2024 feels like showing up to a Formula 1 race with a vintage car. It'll get you there, but everyone will wonder what the f*ck you are on. Still, jQuery powered the web for over a decade, and is still actually very widley used (thanks WordPress), so it's worth understanding what made it so dominant. Nowadays pertty much everything jQuery could do, is implemented into ES6+ natively, so there's little point in jQuery (unless u r supporting IE11).
+
+The TL;DR of jQuery's magic was always in the simplicity. `$('#weather-display').html(weatherHtml)` just *works*. No virtual DOM, no component lifecycle, no build process - just select elements and manipulate them. The method chaining is genuinely elegant: `$('.forecast-item').addClass('active').fadeIn(300)` reads like English.
+
+For our weather app, jQuery actually handles the basic functionality fine. Event delegation with `$(document).on('click', '.forecast-toggle', handler)` works perfectly, and `$.ajax()` fetches weather data without fuss. But you quickly realize you're manually managing everything React or Vue handles automatically - state updates, DOM synchronization, component organization.
+
+The imperative style becomes tedious fast. Want to update the temperature display? Manually find the element and change its text. Need to show/hide loading states? Manually toggle CSS classes. It works, but you'll write 3x more code than you would in Svelte.
+
+jQuery still has its place for simple enhancements to static sites, but for anything interactive, modern frameworks or even vanilla JS, are just better. The ecosystem and community have largely moved on, and you'll spend more time fighting against jQuery's limitations than building features.
+
@@ -82,7 +97,7 @@ For troubleshooting, use `npm run verify` from the root of the project.
## License
-Weather-Front is licensed under [MIT](https://github.com/Lissy93/weather-front/blob/main/LICENSE) © Alicia Sykes 2025.
-View [Attributions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#attributions) for credits, thanks and contributors.
+Weather-Front is licensed under [MIT](https://github.com/lissy93/framework-benchmarks/blob/main/LICENSE) © Alicia Sykes 2025.
+View [Attributions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#attributions) for credits, thanks and contributors.
diff --git a/apps/lit/README.md b/apps/lit/README.md
index b891b6f2..41c61752 100644
--- a/apps/lit/README.md
+++ b/apps/lit/README.md
@@ -2,7 +2,7 @@
-
+
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [Lit](https://lit.dev/) (as well as also
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [Lit](https://lit.dev/) (as well as also
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/lit` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/lit` and use the following commands:
```bash
npm run dev # Start dev server (vite --port 3000)
@@ -66,13 +66,28 @@ For troubleshooting, use `npm run verify` from the root of the project.
## Lit Implementation
-### Notable files
- `src/weather-app.js` - Main application as a custom element
- `src/weather-display.js` - Weather data display component
- `src/weather-forecast.js` - Forecast list with lit-html templates
- `src/weather-search.js` - Search form component with event binding
+## About Lit
+
+
+
+## My Thoughts on Lit
+
+Lit can feel like stepping back into the old React class component days, but actually the cohesion to web standards makes Lit pretty... lit. It's built around Web Components, which is both its greatest strength and biggest frustration. Everything is properly encapsulated and framework-agnostic, but the developer experience feels surprisingly verbose for 2025.
+
+The weird expression syntax has caught me out a lot. Want to bind a property? Use `.value="${this.temp}"`. A boolean attribute? `?disabled="${this.loading}"`. An event listener? `@click="${this.handleClick}"`. It's functional once you memorize the symbols, but it breaks the flow when you're trying to think about business logic.
+
+Class-based components can feel outdated after years of hooks and functional patterns. Creating a simple weather display requires extending `LitElement`, defining `@property` decorators, implementing `render()`, and handling lifecycle methods manually. It works, but feels like unnecessary ceremony.
+
+The shadow DOM isolation is cool in theory - your styles can't leak, global CSS can't interfere. But in practice, it creates more problems than it solves. Want to style components consistently? Good luck getting your design system to work across shadow boundaries. Because of this, I really struggled to get the shared weather styles working across the Lit app. If you want to submit a PR to fix this, please do!
+
+But Lit really does shine for design systems and component libraries where you need true framework-agnostic components. I did build [Email Comparison](https://email-comparison.as93.net/) in Lit, but in heindsite, I think that was a mistake!
+
@@ -92,7 +107,7 @@ Since the weather app is very simple, it may be helpful to see a more practical
## License
-Weather-Front is licensed under [MIT](https://github.com/Lissy93/weather-front/blob/main/LICENSE) © Alicia Sykes 2025.
-View [Attributions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#attributions) for credits, thanks and contributors.
+Weather-Front is licensed under [MIT](https://github.com/lissy93/framework-benchmarks/blob/main/LICENSE) © Alicia Sykes 2025.
+View [Attributions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#attributions) for credits, thanks and contributors.
diff --git a/apps/preact/README.md b/apps/preact/README.md
index d529e4a2..2c3e0866 100644
--- a/apps/preact/README.md
+++ b/apps/preact/README.md
@@ -2,7 +2,7 @@
-
+
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [Preact](https://preactjs.com/) (as well
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [Preact](https://preactjs.com/) (as well
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/preact` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/preact` and use the following commands:
```bash
npm run dev # Start dev server (vite)
@@ -66,7 +66,6 @@ For troubleshooting, use `npm run verify` from the root of the project.
## Preact Implementation
-### Notable files
- `src/App.jsx` - Main component with familiar React-style hooks
- `src/hooks/useWeatherData.js` - Custom hook for weather state and API calls
- `src/components/` - Standard functional components with hooks
@@ -74,6 +73,24 @@ For troubleshooting, use `npm run verify` from the root of the project.
+## About Preact
+
+
+
+## My Thoughts on Preact
+
+If you love React but hate the bundle size, Preact is your best friend. It's essentially React, but 3KB instead of 40KB. Same hooks, same JSX, same mental model - just way more efficient. You can literally take a React component, change the import from `react` to `preact`, and it'll work.
+
+For our weather app, switching from React to Preact required basically zero changes. The `useWeatherData` custom hook works identically, functional components behave the same, and `useState` does exactly what you'd expect. But the compiled bundle is drastically smaller and noticeably faster.
+
+Preact's secret sauce is smart optimizations under the hood. It skips unnecessary work that React's virtual DOM usually does, and includes automatic component memoization that you'd have to add manually in React with `memo()`. The reconciliation algorithm is also more direct, making updates snappier.
+
+The developer experience is identical to React. Hot refresh works perfectly, the dev tools are solid, and you can use most React libraries via `preact/compat`. Really, the only difference is your bundle analyzer will make you smile.
+
+I didn't need Preact's router or state management libraries for this simple app, but they follow the same lightweight philosophy. For anything bigger, you'd probably reach for the React ecosystem anyway via the compat layer.
+
+
+
## Real-World App
@@ -92,7 +109,7 @@ Since the weather app is very simple, it may be helpful to see a more practical
## License
-Weather-Front is licensed under [MIT](https://github.com/Lissy93/weather-front/blob/main/LICENSE) © Alicia Sykes 2025.
-View [Attributions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#attributions) for credits, thanks and contributors.
+Weather-Front is licensed under [MIT](https://github.com/lissy93/framework-benchmarks/blob/main/LICENSE) © Alicia Sykes 2025.
+View [Attributions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#attributions) for credits, thanks and contributors.
diff --git a/apps/qwik/README.md b/apps/qwik/README.md
index 76bf3357..1f9fcbfd 100644
--- a/apps/qwik/README.md
+++ b/apps/qwik/README.md
@@ -2,7 +2,7 @@
-
+
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [Qwik](https://qwik.builder.io/) (as well
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [Qwik](https://qwik.builder.io/) (as well
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/qwik` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/qwik` and use the following commands:
```bash
npm run dev # Start dev server (vite --port 3000)
@@ -66,13 +66,29 @@ For troubleshooting, use `npm run verify` from the root of the project.
## Qwik Implementation
-### Notable files
- `src/App.tsx` - Main component with resumable state
- `src/stores/weatherStore.ts` - Qwik stores that serialize automatically
- `src/services/WeatherService.ts` - API calls with progressive loading
- `src/components/` - Components that wake up on demand
+## About Qwik
+
+
+
+## My Thoughts on Qwik
+
+Qwik is kinda wild. It completely rethinks how web apps work by doing something called "resumability" - your page loads instantly with zero JavaScript, then individual components wake up only when you interact with them. It's like having a webpage that's asleep until you poke it.
+
+The secret is those `$` symbols everywhere. `component$()`, `useTask$()`, `onClick$()` - these aren't just weird syntax, they're lazy loading boundaries. Each `$` tells Qwik "this code can be loaded later when needed." So clicking a button doesn't load the entire app, it just loads that specific button's handler.
+
+For our weather app, this means the initial page render is lightning fast - just HTML and CSS. Search for a city, and only *then* does the search logic get loaded. Click to expand a forecast day, and only the expansion code gets fetched. It's incremental interactivity taken to its logical extreme.
+
+The state management feels familiar but with superpowers. Qwik stores automatically serialize to HTML, so when components resume, they pick up exactly where they left off. No hydration mismatch, no loading spinners, just seamless continuation. For that reason, I used Qwik to build the interactive stuff on my [Digital Defense](https://digital-defense.io/) website.
+
+The trade-off is developer complexity - all those `$` symbols take getting used to, and debugging can be tricky when code loads on-demand. But for performance-critical apps, especially content-heavy sites, Qwik's approach is genuinely revolutionary. Your Core Web Vitals scores will thank you.
+
+
@@ -92,7 +108,7 @@ Since the weather app is very simple, it may be helpful to see a more practical
## License
-Weather-Front is licensed under [MIT](https://github.com/Lissy93/weather-front/blob/main/LICENSE) © Alicia Sykes 2025.
-View [Attributions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#attributions) for credits, thanks and contributors.
+Weather-Front is licensed under [MIT](https://github.com/lissy93/framework-benchmarks/blob/main/LICENSE) © Alicia Sykes 2025.
+View [Attributions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#attributions) for credits, thanks and contributors.
diff --git a/apps/react/README.md b/apps/react/README.md
index 93a40738..92d69a4e 100644
--- a/apps/react/README.md
+++ b/apps/react/README.md
@@ -2,7 +2,7 @@
-
+
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [React](https://react.dev/) (as well as a
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [React](https://react.dev/) (as well as a
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/react` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/react` and use the following commands:
```bash
npm run dev # Start dev server (vite)
@@ -66,13 +66,29 @@ For troubleshooting, use `npm run verify` from the root of the project.
## React Implementation
-### Notable files
- `src/App.jsx` - Main component with hooks-based state management
- `src/hooks/useWeatherData.js` - Custom hook for weather logic and API calls
- `src/components/ErrorBoundary.jsx` - Error boundary for crash protection
- `src/components/` - Modular functional components
+## About React
+
+
+
+## My Thoughts on React
+
+React is everywhere, powering millions of websites and used by every major tech company. It's been around for over 12 years, and both React and its tooling are incredibly mature. There's a reason it became the default choice for so many teams - the ecosystem is massive, jobs are plentiful, and you can build basically anything.
+
+But it's not perfect. Our weather app showcases both React's strengths and frustrations. The component model is elegant, `useState` and `useEffect` work fine for simple state, and the custom `useWeatherData` hook abstracts the weather logic nicely. But you're constantly thinking about re-renders, dependency arrays, and manual memoization.
+
+The virtual DOM adds overhead that other frameworks avoid entirely. Need to optimize performance? Time to sprinkle `React.memo`, `useCallback`, and `useMemo` everywhere. Coming from Svelte or Solid, all this manual work feels tedious. But the developer tooling is exceptional and the community support is unmatched.
+
+The JSX syntax is familiar once you get used to the quirks - `className` instead of `class`, self-closing tags, and JavaScript expressions in curly braces. Controlled components with `value` and `onChange` work well for forms, though they're more verbose than Vue's `v-model`.
+
+React really shines for complex applications where the ecosystem matters. We didn't need Redux, React Query, or code splitting for this simple weather app, but for something like [Web Check](https://github.com/lissy93/web-check), these tools become essential. The flexibility to choose your own architecture is both React's blessing and curse.
+
+
@@ -92,7 +108,7 @@ Since the weather app is very simple, it may be helpful to see a more practical
## License
-Weather-Front is licensed under [MIT](https://github.com/Lissy93/weather-front/blob/main/LICENSE) © Alicia Sykes 2025.
-View [Attributions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#attributions) for credits, thanks and contributors.
+Weather-Front is licensed under [MIT](https://github.com/lissy93/framework-benchmarks/blob/main/LICENSE) © Alicia Sykes 2025.
+View [Attributions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#attributions) for credits, thanks and contributors.
diff --git a/apps/solid/README.md b/apps/solid/README.md
index c369b4e0..b660e84b 100644
--- a/apps/solid/README.md
+++ b/apps/solid/README.md
@@ -2,7 +2,7 @@
-
-
-
-
-
+
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [Solid.js](https://www.solidjs.com/) (as
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [Solid.js](https://www.solidjs.com/) (as
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/solid` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/solid` and use the following commands:
```bash
npm run dev # Start dev server (vite)
@@ -67,13 +67,28 @@ For troubleshooting, use `npm run verify` from the root of the project.
## Solid Implementation
-### Notable files
- `src/App.jsx` - Main component using Solid's reactive primitives
- `src/stores/weatherStore.js` - Global state with `createStore`
- `src/services/WeatherService.js` - API integration with `createResource`
- `src/components/` - Reactive components that update precisely
+## About Solid
+
+
+
+## My Thoughts on Solid
+
+Solid feels like React, but *actually* reactive. It looks like JSX, but underneath it's magic. While React re-renders entire component trees, Solid surgically updates only the exact DOM nodes that need to change. The result is performance that makes other frameworks look sluggish.
+
+The mental shift from React is subtle but profound. Instead of thinking about re-renders and memoization, you think about signals and reactivity. `createSignal` returns a getter and setter - call `temperature()` to read, `setTemperature(25)` to update, and everything that depends on it automatically updates.
+
+Our weather app showcases this, as the temperature display, the weather icon, the styling - they all react independently when the weather data changes. No `useEffect`, no dependency arrays, no `useMemo` - just pure reactive programming that actually works.
+
+The JSX looks familiar, but `}` patterns. These aren't just syntactic sugar - they're compiled into efficient conditional rendering that only updates when necessary.
+
+`createResource` handles async data elegantly, giving you loading states, error handling, and refetching without the usual ceremony. For our simple weather app, we didn't need Solid's more advanced features like stores or effects, but for something complex, the fine-grained reactivity becomes essential.
+
@@ -93,7 +108,7 @@ Since the weather app is very simple, it may be helpful to see a more practical
## License
-Weather-Front is licensed under [MIT](https://github.com/Lissy93/weather-front/blob/main/LICENSE) © Alicia Sykes 2025.
-View [Attributions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#attributions) for credits, thanks and contributors.
+Weather-Front is licensed under [MIT](https://github.com/lissy93/framework-benchmarks/blob/main/LICENSE) © Alicia Sykes 2025.
+View [Attributions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#attributions) for credits, thanks and contributors.
diff --git a/apps/svelte/README.md b/apps/svelte/README.md
index 8639499e..f959539b 100644
--- a/apps/svelte/README.md
+++ b/apps/svelte/README.md
@@ -2,7 +2,7 @@
🔥 Weather Front - Svelte
+
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [Svelte](https://svelte.dev/) (as well as
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [Svelte](https://svelte.dev/) (as well as
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/svelte` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/svelte` and use the following commands:
```bash
npm run dev # Start dev server (vite dev --port 3000)
@@ -66,13 +66,29 @@ For troubleshooting, use `npm run verify` from the root of the project.
## Svelte Implementation
-### Notable files
- `src/routes/+page.svelte` - Main page using SvelteKit's file-based routing
- `src/lib/stores/weather-store.js` - Global state with Svelte writable stores
- `src/lib/services/weather-service.js` - API calls integrated with stores
- `src/lib/components/` - Single-file components with scoped styles
+## About Svelte
+
+
+
+## My Thoughts on Svelte
+
+Svelte is just *fun*. There's something magical about writing `count += 1` and having the UI automatically update. No `useState`, no `useEffect`, no `ref()` - just assign to a variable and it reacts. This is how UI frameworks should work.
+
+Unlike React or Vue, Svelte doesn't ship a runtime. Your components get compiled into highly optimized vanilla JavaScript at build time. The result? Tiny bundles, blazing fast performance, and surprisingly readable compiled output. Our weather app compiles down to around 15KB, which is frankly ridiculous for a full-featured application.
+
+The `$:` reactive statements are brilliant for computed values - `$: tempDisplay = `${temp}°C`` just works and updates whenever `temp` changes. Svelte stores handle global state beautifully, and the automatic subscription cleanup means you never have to worry about memory leaks.
+
+The template syntax feels natural - `{#if}`, `{#each}`, and `{#await}` blocks handle conditional rendering and async data elegantly. Two-way binding with `bind:value` eliminates the usual form boilerplate you'd write in React.
+
+For our simple weather app, we didn't need Svelte's built-in animations or transitions. But Svelte is my go to choice for nearly all my personal projects, as these features become incredibly powerful. The `transition:` and `animate:` directives can make your UI feel incredibly polished with minimal code.
+
+
@@ -92,7 +108,7 @@ Since the weather app is very simple, it may be helpful to see a more practical
## License
-Weather-Front is licensed under [MIT](https://github.com/Lissy93/weather-front/blob/main/LICENSE) © Alicia Sykes 2025.
-View [Attributions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#attributions) for credits, thanks and contributors.
+Weather-Front is licensed under [MIT](https://github.com/lissy93/framework-benchmarks/blob/main/LICENSE) © Alicia Sykes 2025.
+View [Attributions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#attributions) for credits, thanks and contributors.
diff --git a/apps/vanilla/README.md b/apps/vanilla/README.md
index 4bb99b08..f03123d8 100644
--- a/apps/vanilla/README.md
+++ b/apps/vanilla/README.md
@@ -2,7 +2,7 @@
🧪 Weather Front - Vanilla JavaScript
+
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [Vanilla JavaScript](https://developer.mo
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [Vanilla JavaScript](https://developer.mo
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/vanilla` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/vanilla` and use the following commands:
```bash
npm run dev # Start dev server (python3 -m http.server 3000 || python -m http.server 3000)
@@ -67,13 +67,29 @@ For troubleshooting, use `npm run verify` from the root of the project.
## Vanilla JavaScript Implementation
-### Notable files
- `src/main.js` - Application initialization and DOM manipulation
- `src/weather-service.js` - API calls using native fetch
- `src/weather-utils.js` - Utility functions for data processing
- `index.html` - Pure HTML structure without framework dependencies
+## About JavaScript
+
+
+
+## My Thoughts on JavaScript
+
+Sometimes the best framework is no framework. Vanilla JavaScript forces you to understand what's actually happening under the hood of all those fancy abstractions. No magic, no build steps, no dependency hell - just the web platform as intended.
+
+For our weather app, vanilla JS is surprisingly capable. `fetch()` handles API calls, `document.querySelector()` finds elements, and `addEventListener()` manages interactions. Modern browser APIs like `localStorage`, `geolocation`, and CSS custom properties give you most of what you need without any external dependencies.
+
+The challenge is organization and state management. Without a framework's structure, you're responsible for everything - keeping the DOM in sync with data, organizing code sensibly, and avoiding spaghetti. Our weather app uses a simple pub/sub pattern and functional organization, but it requires discipline.
+
+The performance is excellent since there's no framework overhead, and the bundle size is minimal. Everything loads fast, and you're not shipping someone else's code to your users. For simple applications or when performance is critical, vanilla JS can be the right choice.
+
+But you'll miss the conveniences of modern frameworks - automatic updates, component organization, and developer experience. What takes one line in React might take ten in vanilla JS. It's a trade-off between control and convenience.
+
+
@@ -93,7 +109,7 @@ Since the weather app is very simple, it may be helpful to see a more practical
## License
-Weather-Front is licensed under [MIT](https://github.com/Lissy93/weather-front/blob/main/LICENSE) © Alicia Sykes 2025.
-View [Attributions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#attributions) for credits, thanks and contributors.
+Weather-Front is licensed under [MIT](https://github.com/lissy93/framework-benchmarks/blob/main/LICENSE) © Alicia Sykes 2025.
+View [Attributions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#attributions) for credits, thanks and contributors.
diff --git a/apps/vanjs/README.md b/apps/vanjs/README.md
index d5f679a7..bfe936cc 100644
--- a/apps/vanjs/README.md
+++ b/apps/vanjs/README.md
@@ -2,7 +2,7 @@
🚐 Weather Front - VanJS
+
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [VanJS](https://vanjs.org/) (as well as a
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [VanJS](https://vanjs.org/) (as well as a
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/vanjs` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/vanjs` and use the following commands:
```bash
npm run dev # Start dev server (vite --port 3000)
@@ -66,13 +66,29 @@ For troubleshooting, use `npm run verify` from the root of the project.
## VanJS Implementation
-### Notable files
- `src/main.js` - Application logic with VanJS state and DOM creation
- `src/weather-service.js` - API calls that update VanJS reactive state
- `src/weather-utils.js` - Utility functions for data processing
- `index.html` - Minimal HTML with VanJS script tag
+## About Van
+
+
+
+## My Thoughts on Van
+
+VanJS is impressively tiny - just 1KB of runtime with zero dependencies. It's basically "what if we took the reactive parts of modern frameworks and stripped away everything else?" The result is surprisingly elegant for simple applications, but you'll quickly bump into its limitations.
+
+The functional approach is refreshing after dealing with classes and complex component lifecycles. `van.state(initialValue)` creates reactive state, `van.tags.div()` creates DOM elements, and everything just works. Our weather app's temperature display is literally `van.tags.span(temperature)` - when `temperature` changes, the DOM updates automatically.
+
+But the simplicity comes with trade-offs. There's no component abstraction beyond functions, no templating system, no event system. You're essentially building a reactive version of vanilla DOM manipulation. It works for basic interactivity but gets unwieldy fast.
+
+The DOM creation syntax is functional but verbose: `van.tags.div({class: "weather-card"}, van.tags.h2("Weather"))`. Coming from JSX or template languages, it feels like writing assembly code. You'll miss the declarative nature of modern frameworks.
+
+VanJS works well for simple enhancements where you need just a touch of reactivity without the framework overhead. I've used it for mini apps, like [raid-calculator](https://github.com/lissy93/raid-calculator). But for anything substantial, you'll spend more time fighting the limitations than building features. It's an interesting experiment in minimalism, but modern frameworks exist for good reasons.
+
+
@@ -92,7 +108,7 @@ Since the weather app is very simple, it may be helpful to see a more practical
## License
-Weather-Front is licensed under [MIT](https://github.com/Lissy93/weather-front/blob/main/LICENSE) © Alicia Sykes 2025.
-View [Attributions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#attributions) for credits, thanks and contributors.
+Weather-Front is licensed under [MIT](https://github.com/lissy93/framework-benchmarks/blob/main/LICENSE) © Alicia Sykes 2025.
+View [Attributions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#attributions) for credits, thanks and contributors.
diff --git a/apps/vue/README.md b/apps/vue/README.md
index 4c2364c9..cf6f8730 100644
--- a/apps/vue/README.md
+++ b/apps/vue/README.md
@@ -2,7 +2,7 @@
💚 Weather Front - Vue 3
+
A tiny weather app
🚀 Demo ● 📊 Results
@@ -40,9 +40,9 @@ This is a simple weather app, built in [Vue 3](https://vuejs.org/) (as well as a
| Task | Status |
|---|---|
-| **Test** - Executes all e2e and unit tests | [](https://github.com/Lissy93/weather-front/actions/workflows/test.yml) |
-| **Lint** - Verifies code style and quality | [](https://github.com/Lissy93/weather-front/actions/workflows/lint.yml) |
-| **Build** - Builds and deploys the app | [](https://github.com/Lissy93/weather-front/actions/workflows/build.yml) |
+| **Test** - Executes all e2e and unit tests | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) |
+| **Lint** - Verifies code style and quality | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) |
+| **Build** - Builds and deploys the app | [](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) |
@@ -50,7 +50,7 @@ This is a simple weather app, built in [Vue 3](https://vuejs.org/) (as well as a
## Usage
-First, follow the [repo setup instructions](https://github.com/Lissy93/weather-front?tab=readme-ov-file#usage). Then `cd apps/vue` and use the following commands:
+First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/vue` and use the following commands:
```bash
npm run dev # Start dev server (vite --port 3000)
@@ -67,13 +67,32 @@ For troubleshooting, use `npm run verify` from the root of the project.
## Vue Implementation
-### Notable files
- `src/App.vue` - Main component using Vue's Composition API
- `src/services/weatherService.js` - API integration with Vue's reactive patterns
- `src/components/` - Single File Components with scoped styles
- `src/utils/weatherUtils.js` - Utility functions for data processing
+## About Vue
+
+TEST123
+
+
+## My Thoughts on Vue
+
+Vue sits in the Goldilocks zone - not as minimal as Alpine, not as opinionated as Angular, just right for most projects. It feels like the framework that actually learned from React's mistakes while keeping the good parts. Single File Components are brilliant, the template syntax is intuitive, and reactivity just works without the mental gymnastics of `useEffect`.
+
+For our weather app, Vue felt natural and productive. The `v-if`, `v-for`, and `v-model` directives handle conditional rendering, lists, and form inputs elegantly. No weird JSX quirks, no manual event handling - just HTML that does what you expect. The Composition API gives you React-style logic organization when you need it, but Options API is still there for simpler components.
+
+The reactivity system using Proxies is genuinely impressive. Change a data property and everything dependent on it updates automatically. No `useState`, no memoization hell, no stale closures. Vue tracks dependencies behind the scenes and updates only what needs to change.
+
+The Single File Component format is perfect - template, script, and styles all in one file with proper scoping. `