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

Solid.js Implementation
Fine-Grained Reactivity with Signals
The weatherStore.js
uses SolidJS's createSignal()
for fine-grained reactivity. Unlike React, changes only update specific DOM nodes, not entire component trees.
JSX Without Virtual DOM
SolidJS uses JSX syntax but compiles to real DOM operations. No virtual DOM overhead - changes are tracked at the signal level and update the DOM directly.
Signal Accessors
Signals return getter/setter pairs: const [count, setCount] = createSignal(0)
. The store exposes both getter functions and signal accessors for flexible consumption patterns.
Race Condition Prevention
The store implements request ID tracking (latestRequestId
) to prevent race conditions when multiple async operations are in flight simultaneously.
Reactive Dependencies
SolidJS automatically tracks dependencies, so reactive computations only re-run when their actual dependencies change, not when the entire component re-renders.
About Solid.js
Real-world App
Since the weather app is very simple, and doesn't show of the full features of a framework, it may be helpful to see a more practical implementation of a Solid.js app. So, checkout:Intro to Solid.js
About Solid.js
Solid looks like React on the surface but skips the virtual DOM, updating the DOM directly with fine-grained reactivity. This makes it blazing fast and efficient. It has a smaller community but a lot of buzz among developers chasing performance. If you like Reactβs syntax but hate its runtime overhead, Solid is refreshing.
My thoughts on Solid.js
Solid feels like React, but actually reactive. It looks like JSX, but underneath it's magic. While React re-renders entire component trees, Solid surgically updates only the exact DOM nodes that need to change. The result is performance that makes other frameworks look sluggish.
The mental shift from React is subtle but profound. Instead of thinking about re-renders and memoization, you think about signals and reactivity. createSignal
returns a getter and setter - call temperature()
to read, setTemperature(25)
to update, and everything that depends on it automatically updates.
Our weather app showcases this, as the temperature display, the weather icon, the styling - they all react independently when the weather data changes. No useEffect
, no dependency arrays, no useMemo
- just pure reactive programming that actually works.
The JSX looks familiar, but <Show>
and <For>
components replace your typical {condition && <div>}
patterns. These aren't just syntactic sugar - they're compiled into efficient conditional rendering that only updates when necessary.
createResource
handles async data elegantly, giving you loading states, error handling, and refetching without the usual ceremony. For our simple weather app, we didn't need Solid's more advanced features like stores or effects, but for something complex, the fine-grained reactivity becomes essential.
Choosing a Framework
Stack Match
Not sure if Solid.js is right for your project? Use Stack Match to select your preferences and get a tailored recommendation based on the benchmark data.
