🔥

Svelte

Compile-time optimized framework with no runtime overhead and small bundles

Results Summary

Performance

98%
Lighthouse Score

Bundle Size

37.4KB
Gzipped

Build Time

4.0s
Average

Load Time

2.0s
LCP

Complexity

101
Cyclomatic

Performance Metrics

CLS
0.0000
FCP
1711ms
LCP
2034ms
TBT
0ms

Bundle Analysis

Compression
3.0x
File Count
11
JS %
69.9%
Total Size
112.8KB

Build Info

Build Time
4.0s
Output Size
2.3MB
HMR Time
125ms
Dev Startup
2.5s

About the Svelte Weather Front App

Status

  • Lint
  • Build
  • Test

Usage Instructions

First, follow the repo setup instructions.
Then cd into ./apps/svelte/ 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

Svelte Implementation

Svelte Stores

The weather-store.js uses Svelte's writable stores for global state management. Store actions are grouped in an object, providing a clean API for weather operations.

Reactivity Without Framework Runtime

Svelte compiles away at build time, meaning no virtual DOM or framework code ships to the browser. Reactive statements using $: syntax automatically recompute when dependencies change.

Built-in State Management

No external state management library needed - Svelte's stores handle global state with automatic reactivity. Components can subscribe to stores using the $store syntax.

SvelteKit Integration

Uses SvelteKit's file-based routing with +page.svelte and +layout.svelte. The $app/environment module provides SSR-safe environment detection with the browser check.

Simplified Component Syntax

Svelte components use <script>, <template>, and <style> sections, but with less boilerplate than other frameworks - no need for explicit return statements or render functions.

About Svelte

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 Svelte app. So, checkout:
Portainer Templates Logo

Portainer Templates

Automated Docker deployment specs

Intro to Svelte

About Svelte

Svelte compiles your code at build time into minimal JS with no runtime framework. That makes it very fast, with tiny bundle sizes. It’s one of the most loved frameworks in surveys like Stack Overflow’s. The syntax is simple and elegant, and it feels closer to writing plain HTML, CSS and JS. The main drawback is a smaller ecosystem compared to React or Vue.

My thoughts on Svelte

Svelte is just fun. There's something magical about writing count += 1 and having the UI automatically update. No useState, no useEffect, no ref() - just assign to a variable and it reacts. This is how UI frameworks should work.

Unlike React or Vue, Svelte doesn't ship a runtime. Your components get compiled into highly optimized vanilla JavaScript at build time. The result? Tiny bundles, blazing fast performance, and surprisingly readable compiled output. Our weather app compiles down to around 15KB, which is frankly ridiculous for a full-featured application.

The $: reactive statements are brilliant for computed values - $: tempDisplay =${temp}°C` just works and updates whenevertemp` changes. Svelte stores handle global state beautifully, and the automatic subscription cleanup means you never have to worry about memory leaks.

The template syntax feels natural - {#if}, {#each}, and {#await} blocks handle conditional rendering and async data elegantly. Two-way binding with bind:value eliminates the usual form boilerplate you'd write in React.

For our simple weather app, we didn't need Svelte's built-in animations or transitions. But Svelte is my go to choice for nearly all my personal projects, as these features become incredibly powerful. The transition: and animate: directives can make your UI feel incredibly polished with minimal code.

Choosing a Framework

Stack Match Stack Match

Not sure if Svelte 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