Results Summary
Performance
Bundle Size
Build Time
Load Time
Complexity
Performance Metrics
Bundle Analysis
Build Info
About the Vanilla JS Weather Front App
Status
-
Lint
-
Build
-
Test
Links
Usage Instructions
First, follow the repo setup instructions.
Then cd into ./apps/vanilla/
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

Vanilla JS Implementation
ES6 Class Architecture
The weather-app.js
uses ES6 classes to organize functionality, demonstrating how to structure vanilla JavaScript apps without frameworks.
Native DOM APIs
Direct use of document.querySelector()
, createElement()
, addEventListener()
and other native browser APIs. No abstractions - just the platform as designed by browser vendors.
Event-Driven Architecture
Manual event handling with addEventListener()
and custom event patterns. The app manages its own event lifecycle without framework helpers.
Explicit State Management
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.
Modern JavaScript Features
Leverages async/await, destructuring, template literals, and other ES6+ features to write clean vanilla JavaScript without sacrificing readability.
About Vanilla JS
Real-world App
Intro to Vanilla JS
About Vanilla JS
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.
My thoughts on Vanilla JS
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.
Choosing a Framework
Stack Match
Not sure if Vanilla JS is right for your project? Use Stack Match to select your preferences and get a tailored recommendation based on the benchmark data.
