A tiny weather app
🚀 Demo ● 📊 Results
This is a simple weather app, built in Preact (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
| Task | Status |
|---|---|
| Test - Executes all e2e and unit tests |  |
| Lint - Verifies code style and quality |  |
| Build - Builds and deploys the app |  |
First, follow the repo setup instructions. Then cd apps/preact and use the following commands:
npm run dev # Start dev server (vite)
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.
Preact provides a nearly identical API to React, using the same hooks (useState, useEffect, useCallback) and patterns but in a much smaller bundle (~3KB vs React's ~42KB).
The useWeatherData hook implements sophisticated race condition prevention using useRef to track the latest request ID, ensuring stale requests don't override newer ones.
Uses import { useState, useEffect } from 'preact/hooks' instead of React's import paths, but otherwise the code is virtually identical to React patterns.
Preact's lightweight nature means the entire weather app compiles to a significantly smaller bundle while maintaining full React compatibility for most use cases.
Modern Preact setup with Vite provides the same fast refresh development experience as React, with instant hot reloading during development.
Preact is a tiny React alternative that’s API-compatible with React in most cases. It’s known for its speed and small bundle size, making it perfect for performance-sensitive projects. Big names like Uber and Lyft have used it in production. The trade-off is that some advanced React features are missing or behave differently.
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.
Since the weather app is very simple, it may be helpful to see a more practical implementation of a Preact app. So, checkout:
Weather-Front is licensed under MIT © Alicia Sykes 2025.
View Attributions for credits, thanks and contributors.