diff --git a/.github/docs/apps.md b/.github/docs/apps.md index 8f93a467f..7dc35e72f 100644 --- a/.github/docs/apps.md +++ b/.github/docs/apps.md @@ -1,6 +1,6 @@ # Framework Applications -This project contains the same weather application built using 14 different JavaScript frameworks. Each implementation provides identical functionality but uses the specific patterns and approaches of its framework. +This project contains the same weather application built using 15 different JavaScript frameworks. Each implementation provides identical functionality but uses the specific patterns and approaches of its framework. ## Available Frameworks @@ -19,6 +19,7 @@ The project includes implementations for: **VanJS** - Ultra-small vanilla framework **Lume.js** - Minimal reactive state library with no build step **Astro** - Static-first with zero JavaScript by default and opt-in islands +**Gea** - Compiler-first reactive framework with surgical DOM updates **Vanilla** - Pure JavaScript without any framework Each app lives in its own directory under `apps/{framework}/` and can be developed, built, and tested independently. diff --git a/apps/geajs/README.md b/apps/geajs/README.md new file mode 100644 index 000000000..ad2d29fcd --- /dev/null +++ b/apps/geajs/README.md @@ -0,0 +1,97 @@ + +

๐ŸŒ Weather Front - Gea.js

+ +

+
+ A tiny weather app +
+ ๐Ÿš€ Demo โ— ๐Ÿ“Š Results +

+ + + +

+ + + + +## About + + + +This is a simple weather app, built in [Gea.js](https://geajs.com/) (as well as also [10 other frontend frameworks](/)) in order to review, compare and benchmark frontend web frameworks. + +- ๐ŸŒฆ๏ธ Live weather conditions +- ๐Ÿ“… 7-day weather forecast +- ๐Ÿ” City search functionality +- ๐Ÿ“ Geolocation support +- ๐Ÿ’พ Persistent location storage +- ๐Ÿ“ฑ Responsive design +- โ™ฟ Accessible interface +- ๐ŸŽจ Multi-theme support +- ๐Ÿงช Fully unit tested +- ๐ŸŒ Internationalized + + + + + +## Status + +| Task | Status | +|---|---| +| **Test** - Executes all e2e and unit tests | [![Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/refs/heads/badges/test-geajs.svg)](https://github.com/lissy93/framework-benchmarks/actions/workflows/test.yml) | +| **Lint** - Verifies code style and quality | [![Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/refs/heads/badges/lint-geajs.svg)](https://github.com/lissy93/framework-benchmarks/actions/workflows/lint.yml) | +| **Build** - Builds and deploys the app | [![Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/refs/heads/badges/build-geajs.svg)](https://github.com/lissy93/framework-benchmarks/actions/workflows/build.yml) | + + + + + +## Usage + +First, follow the [repo setup instructions](https://github.com/lissy93/framework-benchmarks?tab=readme-ov-file#usage). Then `cd apps/geajs` and use the following commands: + +```bash +npm run dev # Start dev server (vite --port 3000) +npm test # Run tests +npm run lint # Run lint checks +npm build # Build for production (vite build) +npm start # Serve built prod app (from ./dist) +``` + +For troubleshooting, use `npm run verify` from the root of the project. + + + + +#### Compiler-Wired Reactivity +Gea doesn't use signals, hooks, dependency arrays, or a virtual DOM. Components are ordinary JavaScript โ€” classes with state and methods, getters for computed values โ€” and [`@geajs/vite-plugin`](https://www.npmjs.com/package/@geajs/vite-plugin) analyses the JSX at build time, works out which DOM nodes depend on which state paths, and generates the reactive wiring. At runtime only the affected nodes are patched. + +#### A Proxy-Based Store +[`weather-store.js`](https://github.com/Lissy93/framework-benchmarks/blob/main/apps/geajs/src/weather-store.js) is a singleton class extending `Store`. Its fields (`searchQuery`, `isLoading`, `hasError`, `weatherData`, `activeForecastIndex`) are made reactive through a deep Proxy, so mutations are plain assignments like `this.isLoading = true`. + +#### Getters as Computed Values +Derived state such as `showContent`, `locationLabel`, `currentTemperature` and `forecastDays` are ordinary JavaScript getters on the store. The compiler tracks which state paths each getter reads and re-evaluates the dependent DOM bindings when those paths change. + +#### Class and Function Components +Each UI piece, like [`SearchForm.jsx`](https://github.com/Lissy93/framework-benchmarks/blob/main/apps/geajs/src/components/SearchForm.jsx) and [`CurrentWeather.jsx`](https://github.com/Lissy93/framework-benchmarks/blob/main/apps/geajs/src/components/CurrentWeather.jsx), extends `Component` and returns JSX from `template()`, using HTML-style attributes (`class`, `for`) and native-style event bindings (`click={...}`, `submit={...}`) wired through document-level event delegation. Stateless UI like [`LoadingState.jsx`](https://github.com/Lissy93/framework-benchmarks/blob/main/apps/geajs/src/components/LoadingState.jsx) is a plain function which the compiler converts to a class component at build time. + +#### Conditional Rendering and Keyed Lists +`{condition && }` in [`WeatherDisplay.jsx`](https://github.com/Lissy93/framework-benchmarks/blob/main/apps/geajs/src/components/WeatherDisplay.jsx) compiles into `