Skip to content

Svelte

November 2, 2023
December 16, 2019

Svelte is a _compiler_ for frontend applications

TODO: remove Svelte 2 articles prior to 2019-04

Svelte • Cybernetically enhanced web apps
Introduction / Basics • Svelte Tutorial
Introduction / Welcome to Svelte • Svelte Tutorial built with web-container
sveltejs/svelte: Cybernetically enhanced web apps

It does not use virtual-DOM diffing. The generated code requires a thin run-time (think jQuery).
Svelte invalidates variables at build time to trigger a re-render. Have built-in:

Svelte 2 has better DX than React Hook
Svelte 3 adopted idea similar to React Hook
Svelte 5 introduces runes ($) to make Svelte reactivity (compiler magic) more explicit

Frameworks without the framework: why didn't we think of this sooner?
The Philosophy of Svelte

Introduction / Basics • Svelte Tutorial
The Svelte Handbook
Hello world • REPL • Svelte

Svelte Society - YouTube
Rich Harris Teaches ThePrimeagen SvelteKit - YouTube 2023-02

First time using Svelte, let's play Tic Tac Toe! - YouTube

A Guide to the Svelte Framework | Toptal
teimurjan/svelte-login-form

Svelte 5

bete in 2023-09

Introducing runes

Svelte 5 Surprised Me - YouTube
Svelte 5: Introducing Runes... with Rich Harris - YouTube
Don't Sleep on Svelte 5 - YouTube replace store with signals

Commentaries

Vercel and Svelte: A Perfect Match for Web Developers – The New Stack Svelte creator hired by Vercel @2021-12
Why Typescript and Svelte are a match made in heaven

Why Svelte is the most loved JS framework with Rich Harris - YouTube 1:31:23, 2023-05
Animation With Svelte (with Scott Tolinski) — Learn With Jason - YouTube 1:30:40, 2020-12

Svelte is the most beautiful web framework I've ever seen - DEV Community 👩‍💻👨‍💻
Why Svelte won’t kill React. Is status quo to blame for that? Or is… | by Kit Isaev | JavaScript In Plain English | Medium
Should you use Svelte in production? - LogRocket Blog 2022-10

Rich Harris - Annoying Things About Svelte - YouTube 2022-07

Comparison

Why I Moved From React to Svelte and Why Others Will Follow - DZone Web Dev
Svelte vs React: Ending the Debate
I created the exact same app in Vue and Svelte. Here are the differences.

Conference

Svelte Summit Fall 2021 - YouTube

Rich Harris: Futuristic Web Development - YouTube

Actions/Interactivity

Svelte 3: Rethinking reactivity 2019-04, Svelte 3 announcement
Svelte Origins: A JavaScript Documentary - YouTube
Rich Harris - Rethinking reactivity - YouTube
Svelte 3 uses JavaScript label ($:) to declare computed (reactive) variables which makes the code very intuitive and spreadsheet-like. It also resembles React more.
Svelte 3 Reaction & QuickStart Tutorial - YouTube
Getting Started w/ Svelte 3 - YouTube 2021-11
Truly reactive programming with Svelte 3.0 - LogRocket Blog

Introduction to Svelte Actions - LogRocket Blog 2021-11

Store

Stores / Writable stores • Svelte Tutorial
How to work with props in Svelte
Cross-component State Management in Svelte

SvelteKit

Server Side Rendering, Static Site Generation, app framework like Next.js for React

built with Vite

SvelteKit • The fastest way to build Svelte apps
sveltejs/kit: The fastest way to build Svelte apps

What's the deal with SvelteKit?
My Evaluation of SvelteKit for Full-Stack Web App Development - Casey Primozic's Homepage
How I built a blog with Svelte and SvelteKit - Matt Fantinel - Web Developers

Implementing A Svelte Store In Rust
How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust | CSS-Tricks - CSS-Tricks

## Sapper

superseded by SvelteKit

Sapper • The next small thing in web development
Sapper: Towards the ideal web app framework
App framework for Svelte, with routing, SSR, code-splitting
sveltejs/sapper: The next small thing in web development, powered by Svelte

Ecosystem

Svelte Showcase - Made with Svelte

tanepiper/svelte-formula: Zero-Configuration Reactive forms for Svelte

Packaging • Docs • SvelteKit

Skeleton — UI Toolkit for Svelte + Tailwind
Best UI Library for Svelte - YouTube