A tiny weather app
🚀 Demo ● 📊 Results
This is a simple weather app, built in Vanilla JavaScript (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/vanilla and use the following commands:
npm run dev # Start dev server (python3 -m http.server 3000 || python -m http.server 3000)
npm test # Run tests
npm run lint # Run lint checks
npm build # Build for production (echo 'No build step required')
npm start # Serve built prod app (from ./dist)For troubleshooting, use npm run verify from the root of the project.
The weather-app.js uses ES6 classes to organize functionality, demonstrating how to structure vanilla JavaScript apps without frameworks.
Direct use of document.querySelector(), createElement(), addEventListener() and other native browser APIs. No abstractions - just the platform as designed by browser vendors.
Manual event handling with addEventListener() and custom event patterns. The app manages its own event lifecycle without framework helpers.
State is manually managed through object properties and explicit DOM updates. When data changes, you must manually call update methods to reflect changes in the UI.
Leverages async/await, destructuring, template literals, and other ES6+ features to write clean vanilla JavaScript without sacrificing readability.
Vanilla JS just means plain JavaScript, using modern ES6+ features like classes, modules, promises and async/await. Most things frameworks used to solve can now be done natively. It’s often the best choice for small projects where adding a framework is overkill. Plus, it ensures you really understand the language itself.
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.
Since the weather app is very simple, it may be helpful to see a more practical implementation of a Vanilla JavaScript app. So, checkout:
Weather-Front is licensed under MIT © Alicia Sykes 2025.
View Attributions for credits, thanks and contributors.