Description #
Svelte is a modern JavaScript framework that shifts much of the work to compile time, producing highly optimized, minimal JavaScript code with no virtual DOM. It simplifies frontend development by allowing developers to write components in plain HTML, CSS, and JS while achieving excellent performance and small bundle sizes.
History #
Svelte was created by Rich Harris and introduced in 2016, with version 3 (released in 2019) gaining significant traction. Unlike traditional frameworks like React or Vue, Svelte compiles components into native JavaScript during build time, making runtime performance faster and applications lighter.
Hello World Code #
<!-- App.svelte -->
<h1>Hello, World!</h1>How to Run #
Option 1: Online
- Svelte REPL – Interactive editor
- StackBlitz – Svelte Starter
Option 2: Local
- Install template and dependencies:
npx degit sveltejs/template hello-world
cd hello-world
npm install
npm run dev- Edit
App.svelte - Visit:
http://localhost:5173or the default port
Key Concepts #
- Compile-time optimization
- No virtual DOM
- Reactive assignments with
let - Component-based structure
- Scoped CSS in components
- Minimal bundle size
- Built-in stores for state management
- Transitions and animations out of the box
- Single-file components
- Ideal for both small apps and large-scale projects
Try It Online #
Fun Facts #
- Svelte is sometimes called the “disappearing framework.”
- Used by The New York Times for performance-critical features.
- Rich Harris, its creator, also works on the Rollup bundler.
