Results Summary
Performance
100%
Lighthouse Score
Bundle Size
9.9KB
Gzipped
Build Time
0.9s
Average
Load Time
1.6s
LCP
Complexity
101
Cyclomatic
Performance Metrics
CLS
0.0001
FCP
1261ms
LCP
1568ms
TBT
0ms
Bundle Analysis
Compression
2.7x
File Count
1
JS %
100.0%
Total Size
27.0KB
Build Info
Build Time
0.9s
Output Size
2.2MB
HMR Time
105ms
Dev Startup
1.0s
About the Preact Weather Front App
Status
-
Lint
-
Build
-
Test
Links
Usage Instructions
First, follow the repo setup instructions.
Then cd into ./apps/preact/
and and use the following commands:
- Dev Command npm run dev
- Test Command npm run test
- Lint Command npm run lint
- Build Command npm run build
- Start npm start
npm run verify from the root of the project.
App Requirements
The purpose of this project, was to build the same identical app in every frontend framework, in order to benchmark and compare their performance. As such, each app is built to meet identical requirements, which are then verified with the test suite.
Technical Requirements
- Binding user input and validation
- Fetching external data asynchronously
- Basic state management of components
- Handling fallback views (loading, errors)
- Using browser features (location, storage, etc)
- Logic blocks, for iterative content and conditionals
- Lifecycle methods (mounting, updating, unmounting)
Feature Requirements
- 🌦️ 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
Preact Implementation
React API Compatibility
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).
Race Condition Handling
The useWeatherData hook implements sophisticated race condition prevention using useRef to track the latest request ID, ensuring stale requests don't override newer ones.
Import from preact/hooks
Uses import { useState, useEffect } from 'preact/hooks' instead of React's import paths, but otherwise the code is virtually identical to React patterns.
Smaller Bundle Size
Preact's lightweight nature means the entire weather app compiles to a significantly smaller bundle while maintaining full React compatibility for most use cases.
Fast Refresh Support
Modern Preact setup with Vite provides the same fast refresh development experience as React, with instant hot reloading during development.
About Preact
Real-world App
Coming soon...
Intro to Preact
About Preact
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.
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.
Choosing a Framework
Stack Match
Not sure if Preact is right for your project? Use Stack Match to select your preferences and get a tailored recommendation based on the benchmark data.
