## TL;DR - **Svelte** compiles your components into highly efficient vanilla JavaScript—no runtime framework overhead. - It’s **reactive by design**, meaning state changes automatically update the DOM without virtual DOM diffing. - You’ll learn how to **build, test, and deploy** a Svelte app from scratch. - We’ll explore **performance, security, scalability**, and **real‑world production insights**. - Includes **runnable examples**, **pitfalls**, and **troubleshooting** tips. --- ## What You’ll Learn By the end of this guide, you’ll understand: 1. What makes Svelte different from React, Vue, and Angular. 2. How to set up a modern Svelte environment in under 5 minutes. 3. How reactivity and stores work under the hood. 4. How to optimize, test, and monitor Svelte apps in production. 5. When to use (and not use) Svelte in real projects. --- ## Prerequisites You’ll get the most out of this article if you: - Know basic **HTML, CSS, and JavaScript**. - Have used a frontend framework like React or Vue. - Have **Node.js v18+** installed[^1]. --- ## Introduction: Why Svelte Matters Today Svelte isn’t just another JavaScript framework—it’s a **compiler**. Instead of shipping a large runtime like React or Vue, Svelte turns your components into highly optimized JavaScript at build time[^2]. The result? Smaller bundles, faster startup times, and less complexity. Svelte 5 launched on October 19, 2024[^9] and introduced **runes**—an explicit reactivity model built on `$state`, `$derived`, `$effect`, and `$props`. This guide uses the runes syntax throughout because that's the current, recommended way to write Svelte. Legacy Svelte 4 syntax (`export let`, `$:` reactive declarations) still works, but the migration path is clear: runes are the future, and they're already the default for new projects. Svelte was created by **Rich Harris**, originally for interactive news graphics at *The Guardian*, where performance and load time were critical[^3]. Since then, it’s evolved into a production‑ready framework used by major companies such as *Square Enix* and *Rakuten*[^4]. Let’s unpack what makes Svelte so compelling. --- ## How Svelte Differs from Other Frameworks Here’s a quick conceptual comparison: | Feature | React | Vue | Svelte | |----------|--------|------|---------| | Rendering | Virtual DOM diffing | Virtual DOM diffing | Compiles to vanilla JS updates | | Runtime Size (Hello World, gzipped) | ~42–45 KB | ~30 KB | ~3–5 KB[^6] | | Learning Curve | Moderate | Moderate | Easy | | TypeScript Support | Excellent | Excellent | Built-in (Svelte 5+) | | State Management | Hooks / Context | Pinia | Runes (`$state`) + reactive stores | | SSR Support | Next.js | Nuxt | SvelteKit | Svelte’s biggest innovation is **compilation**. Instead of interpreting your app at runtime, Svelte preprocesses it, generating efficient DOM operations. --- ## Getting Started: Your First Svelte App ### Step 1: Create a New Project The official Svelte CLI is `sv`. It replaces the older `create-svelte` package and bundles tooling for formatting, linting, testing, databases, and auth as opt-in add-ons[^10]. ```bash npx sv create my-svelte-app cd my-svelte-app npm install npm run dev ``` Pick the **Svelte** (component-only) or **SvelteKit** (full-stack) template when prompted. Open `http://localhost:5173` and you’ll see your first Svelte app running. ### Step 2: Understand the File Structure ``` my-svelte-app/ ├── src/ │ ├── App.svelte │ ├── main.js │ └── lib/ ├── package.json └── vite.config.js ``` - **App.svelte** – your root component. - **main.js** – bootstraps the app. - **lib/** – reusable components. ### Step 3: Your First Component ```svelte

Hello {name}!

``` The `$state` rune marks `name` as reactive. Any read of `name` in the template (or in a `$derived` / `$effect`) re-runs when it changes—no `useState`, no `setState`, no boilerplate. In Svelte 4 a plain `let` was implicitly reactive; Svelte 5 made reactivity explicit so it works the same way inside `.svelte`, `.svelte.ts`, and `.svelte.js` files[^11]. --- ## Understanding Reactivity in Svelte In Svelte 5, you mark state with the `$state` rune. Assignments to that state then trigger fine-grained DOM updates. ```svelte ``` For computed values, use `$derived`: ```svelte

{count} × 2 = {doubled}

``` For side effects (logging, syncing to localStorage, calling APIs), use `$effect`: ```svelte ``` Compare that to React: ```javascript const [count, setCount] = useState(0); function increment() { setCount(count + 1); } ``` Svelte’s approach eliminates the concept of a virtual DOM entirely[^2]. It knows *exactly* which DOM nodes to update. --- ## State Management: Stores and Context For shared state, Svelte provides **stores**—reactive objects that can be imported anywhere. ### Writable Store Example ```javascript // src/lib/store.js import { writable } from 'svelte/store'; export const user = writable({ name: 'Alice', loggedIn: false }); ``` Usage: ```javascript

{$user.name} is { $user.loggedIn ? 'logged in' : 'logged out' }

``` The `$` prefix auto‑subscribes and unsubscribes from the store—clean and declarative. --- ## SvelteKit: The Full‑Stack Framework For routing, SSR, and API endpoints, SvelteKit is the official solution[^5]. It’s similar in spirit to Next.js. ### Quick Start with SvelteKit ```bash npx sv create my-app cd my-app npm install npm run dev ``` When prompted, choose the **SvelteKit** template[^10]. SvelteKit supports: - **Server‑side rendering (SSR)** - **Static site generation (SSG)** - **API routes** - **File‑based routing** ### Example Route `src/routes/+page.svelte` ```svelte

Welcome {data.name}

``` `src/routes/+page.js` ```javascript export function load() { return { name: 'Svelte Learner' }; } ``` In Svelte 4 the page would have used `export let data`. Svelte 5 replaces `export let` with the `$props` rune, which is a single, explicit destructure for everything the component receives—including SvelteKit's `data` and `params` props[^11]. --- ## Performance Deep Dive Svelte’s compiler‑first design gives it a **performance edge** in several areas: 1. **No virtual DOM diffing** – DOM updates are surgically precise. 2. **Smaller bundles** – typically 30–50% smaller than React equivalents on real apps[^6]. 3. **Faster hydration** – especially in SSR setups. ### Example Benchmark (Typical Range, gzipped) | Framework | Bundle Size (Hello World) | Notes | |------------|---------------------------|-------| | React + ReactDOM | ~42–45 KB | Baseline before any app code[^6] | | Vue | ~30 KB | Includes the runtime | | Svelte | ~3–5 KB | Compiled output; no shared runtime | *The gap on “Hello World” is the largest you’ll ever see. Once you ship routing, forms, and state, real-world apps converge—but Svelte still tends to come in 30–50% lighter[^6]. On the [krausest js-framework-benchmark](https://krausest.github.io/js-framework-benchmark/), Svelte sits in the top tier for create/swap-rows and memory usage.* --- ## When to Use vs When NOT to Use Svelte | Use Svelte When | Avoid Svelte When | |------------------|-------------------| | You want minimal bundle size and fast startup | You rely heavily on third‑party React/Vue libraries | | You prefer compiler‑based simplicity | Your team is deeply invested in React tooling | | You’re building static or SSR apps | You need React Native or cross‑platform support | | You value direct, minimal reactivity | You require large ecosystem integrations | Svelte shines in **small to medium apps**, **dashboards**, and **interactive UIs**. For massive enterprise systems with heavy legacy dependencies, React or Angular may still be safer bets. --- ## Common Pitfalls & Solutions | Pitfall | Cause | Solution | |----------|--------|-----------| | State not updating | Plain `let` instead of `$state` (Svelte 5+) | Wrap reactive variables: `let count = $state(0)` | | Array/object mutation doesn't update UI | Direct mutation (`arr.push(x)`) on a `$state` value | Reassign or use deep-state patterns; see "Common Mistakes" below | | Store not reactive | Didn’t use `$store` auto-subscribe syntax | Prefix with `$` in templates: `{$user.name}` | | Hydration mismatch in SSR | Non‑deterministic data (e.g. `Date.now()` on server) | Ensure server and client render identical output | | TypeScript not working | Old project missing config | Svelte 5+ has built-in TypeScript support; for legacy Svelte 4 projects, add `svelte-preprocess` in `svelte.config.js` | --- ## Error Handling Patterns SvelteKit provides a built‑in `+error.svelte` file for global error boundaries. ### Example `src/routes/+error.svelte` ```svelte

Something went wrong

{page.error?.message}

``` In modern SvelteKit, error details come from the `page` state object rather than an `export let error` prop[^5]. For component‑level errors, use try/catch blocks or error boundaries in logic functions. --- ## Testing Svelte Apps Testing Svelte components is straightforward with **Vitest** or **Playwright**. ### Example Unit Test ```bash npm install -D vitest @testing-library/svelte ``` `App.test.js` ```javascript import { render, screen } from '@testing-library/svelte'; import App from './App.svelte'; test('renders greeting', () => { render(App); expect(screen.getByText('Hello world!')).toBeTruthy(); }); ``` Run tests: ```bash npm run test ``` --- ## Monitoring and Observability In production, you can integrate Svelte apps with monitoring tools like **Sentry**, **Datadog**, or **OpenTelemetry**. ### Example: Sentry Integration ```javascript import * as Sentry from '@sentry/browser'; Sentry.init({ dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0', tracesSampleRate: 1.0, }); ``` SvelteKit supports hooks for logging and tracing requests. --- ## Security Considerations Svelte follows standard web security principles[^7]: - **Escaped HTML by default** – prevents XSS. - **Props are sanitized** unless explicitly marked safe. - **Use `{@html}` cautiously** – only with trusted content. ### Example: Safe vs Unsafe HTML ```javascript

{userInput}

{@html userInput} ``` Follow OWASP recommendations for client‑side security[^8]. --- ## Scalability Insights Svelte scales well for many production apps, but consider: - **Code splitting** via dynamic imports. - **SSR caching** for high‑traffic pages. - **Store modularization** for complex state. Large‑scale teams often use **SvelteKit + Vercel or Netlify** for deployment, benefiting from edge caching and static pre‑rendering. --- ## Real‑World Case Study: Interactive Dashboards A common use case for Svelte is **data visualization dashboards**. Because Svelte compiles to minimal JS, it’s ideal for embedding charts or widgets in performance‑sensitive environments. For example, many analytics teams use Svelte with **D3.js** for reactive charts: ```svelte

``` This example demonstrates how Svelte’s lifecycle hooks integrate seamlessly with third‑party libraries. --- ## Common Mistakes Everyone Makes 1. **Forgetting `$state`** – In Svelte 5, a plain `let count = 0` is *not* reactive. Wrap it: `let count = $state(0)`. Updating it (`count += 1`) then triggers DOM updates automatically. 2. **Mutating arrays/objects without reassigning (Svelte 4 only)** – With Svelte 4's compiler-detected reactivity, `arr.push(x)` doesn't trigger updates—reassign with `arr = [...arr, newItem]`. With Svelte 5's `$state`, deep mutations on the proxy *do* trigger updates, so `arr.push(x)` works for arrays declared with `$state`[^11]. 3. **Mixing DOM manipulation with Svelte bindings** – let Svelte handle DOM updates. 4. **Ignoring accessibility (a11y)** – use semantic HTML and ARIA attributes. 5. **Skipping TypeScript setup** – Svelte 5's type system improves maintainability and is built-in for new projects. --- ## Try It Yourself Challenge Create a small **todo app** with Svelte: 1. Add a writable store for todos. 2. Create components for input and list rendering. 3. Persist data to `localStorage`. 4. Add a filter for completed tasks. Bonus: Deploy it to **Vercel** or **Netlify** using SvelteKit’s adapter. --- ## Troubleshooting Guide | Error | Likely Cause | Fix | |--------|---------------|-----| | `Unexpected token <` | Wrong build path or SSR mismatch | Check `vite.config.js` and ensure correct base path | | `window is not defined` | Server-side code using browser APIs | Guard with `if (browser)` from `$app/environment` | | CSS not applying | Scoped styles missing | Ensure `

#svelte

تعلم Svelte: الدليل الحديث لبناء تطبيقات ويب فائقة السرعة