πŸš€

Solid.js

Fine-grained reactive framework with no virtual DOM and strong performance

Results Summary

Performance

100%
Lighthouse Score

Bundle Size

9.0KB
Gzipped

Build Time

1.3s
Average

Load Time

1.6s
LCP

Complexity

98
Cyclomatic

Performance Metrics

CLS
0.0001
FCP
1254ms
LCP
1601ms
TBT
0ms

Bundle Analysis

Compression
2.9x
File Count
1
JS %
100.0%
Total Size
25.8KB

Build Info

Build Time
1.3s
Output Size
2.2MB
HMR Time
106ms
Dev Startup
1.0s

About the Solid.js Weather Front App

Status

  • Lint
  • Build
  • Test

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
For troubleshooting, use 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:
Chief Snack Officer Logo

Chief Snack Officer

Office snack management app

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 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.

Stack Match Screenshot