Timeline

• 2016: first release of Svelte by Rich Harris
• 2019: version 3 brought large changes
• 2020: SvelteKit announced as replacement for Sapper
• 2022: Rich Harris gets hired by Vercel to work on Svelte
• 2022: official SvelteKit 1.0 release in December

Rich Harris

• creator of Ractive.js, Rollup and Svelte
• worked at The Guardian and The New York Times
• now at Vercel, working on Svelte full-time

Core Maintainers

There are now nearly 30 core maintainers working on Svelte in different capacities and areas (list as of January 2022).

Svelte + Vercel ▲

3 of the core members work at Vercel:

• Rich Harris
• Simon Holthausen (author of «Svelte: A Beginner's Guide»)
• Dominic Gannaway (ex-React core member, Inferno, Lexical)

Contrary to Next.js, Svelte is not owned by Vercel or any company.

Some work is financed with donations through Open Collective.

Community

The community is smaller in comparison but very well organised.

A lot of activity is based around «Svelte Society».

Among the events is the biannual Svelte Summit conference.

Smaller talks and events are regularly held on their YouTube channel and in the official Svelte Discord server.

Svelte Sirens focus on supporting women and non-binary people.

Key Concepts of Svelte

• compiled to optimised vanilla JS, no runtime library
• single-file components, with scoped CSS
• syntax close to the native web (HTML, CSS, JS)
• easy reactivity and state management
• little to no boilerplate code

Example

        

        
          Clicked {count}
          {count === 1 ? 'time' : 'times'}
        

        
      

Syntax

Svelte is a superset of the «web»:

• extends HTML by adding JS expressions (curly braces)
• extends CSS by adding scoping mechanisms
• extends JS by making reactivity a language primitive

Fun fact: an empty *.svelte file is already a valid Svelte component.

Examples

a.k.a. «JavaScript full-stack frameworks».

What makes them «meta» is that they include other frameworks:

• Next.js and Remix are built on top of React
• Nuxt combines these concepts with Vue
• SolidStart uses SolidJS
• Astro is even framework-agnostic and allows integration with a whole range of technologies
• SvelteKit is the official way to build Svelte apps

Typical Features

• routing and layouting
• Static Site Generation (SSG) and Server Side Rendering (SSR)
• data fetching, server endpoints
• sensible configuration defaults (zero config)

Use Cases

SSG/SSR are a major selling point for SEO and performance.

But you can easily build single-page applications (SPA) with them and still benefit from other advantages.

My 🔥? take: meta frameworks should be the default in most cases.

SvelteKit is the default way to create Svelte apps now. You don't get any additional complexity or difficulty if you don't need advanced features.

Features

• mix and matching rendering methods for each page
• accessible client-side routing with automatic preloading
• filesystem-based routes with nested layouts
• environment variable handling
• type-safe data loading
• built-in form actions that work with or without JS
• automatic CSRF protection
• can be used for libraries as well as web apps
• deploy anywhere with adapters

Sources

• Wikipedia: Svelte
• GitHub sveltejs members
• Svelte Blog: Accelerating Svelte's Development
• Blog:What is a JavaScript Meta-framework?
• Rich Harris on Twitter
• Group image of some of the core maintainers at Svelte Summit Fall in 2022: Tweet

Additional Resources

• Official Tutorial: learn.svelte.dev
• Official Docs: Svelte, SvelteKit
• Svelte Beginner Course by Vercel
• Svelte Society
• Rich Harris at «You Gotta Love Fontend 2019»: Rethinking Reactivity
• FrontendMasters course: Svelte Fundamentals (by Rich Harris)