Svelte in Depth

Class Duration

5 days

Target Audience

All students must have JavaScript and HTML programming experience. Experience with CSS is helpful but not required.

Description

This Svelte in Depth course is designed for professionals who want to master this innovative JavaScript framework. The course begins with an introduction to Svelte, its advantages over other frameworks, and how to set up a development environment. It then delves into the core features of SvelteKit, including routing, server-side rendering, and unit testing. Participants will learn how to create static and dynamic pages, understand template reactivity, and work with Svelte components. The course also covers event handling, forms, lifecycle, state management, and routing. Advanced topics such as error handling, asynchronous data, environment variables, advanced bindings, advanced component composition, advanced routing, actions, UI special effects, special elements, hooks, pages and layout, links, and unit testing are also explored. By the end of this course, participants will have a solid understanding of Svelte and be able to build robust, high-performance web applications.

Objectives

Understand the fundamentals of Svelte and how it compares to other frameworks.
Set up a development environment for Svelte using SvelteKit and familiarize with Svelte files and extensions for popular IDEs.
Learn about SvelteKit's features including Vite tooling, routing, server-side rendering, and unit testing.
Create static and dynamic pages in Svelte, understanding their structure, content, and functionality.
Master Svelte's template reactivity and understand how to change data through assignments and reactive statements.
Learn about Svelte components, their structure, props, events, and how to compose them effectively.
Understand event handling in Svelte, including DOM events, event handlers, modifiers, and dispatching component events.
Explore advanced Svelte topics such as forms, lifecycle, state management, routing, error handling, and asynchronous data.
Understand the use of environment variables in Svelte and advanced bindings including content-editable, each block bindings, media elements, and more.
Master advanced component composition techniques such as slots, named slots, slot fallbacks, and the context API.
Learn advanced routing techniques including optional parameters, REST parameters, param matchers, and route groups.
Understand actions in Svelte, their uses, element-level lifecycle functions, and how to interface with 3rd party libraries.
Learn to create UI special effects using motion, transitions, key blocks, and animations directives.
Understand the use of special elements in Svelte such as Svelte Self, Svelte Component, Svelte Element, and more.
Learn about hooks in Svelte, how they are used, and how to handle hook requests and errors.
Master advanced topics such as server-side rendering, client-side rendering, pre-rendering, links, and unit testing in Svelte.

Training Materials

All students receive comprehensive courseware covering all topics in the course. The instructor distributes courseware via GitHub. The courseware includes documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Students need permission to install Node.js and Visual Studio Code on their computers. Also, students will need permission to install NPM Packages and Visual Studio Extensions. We will provide a cloud-based environment if students cannot configure a local environment.

Training Topics

Introduction to Svelte 5

What is Svelte? What problem does it solve?
Svelte 5 vs. Svelte 4: what changed and why runes
Svelte vs. React, Vue, and Angular reactivity models
The Svelte compiler

Development Environment

Requirements
SvelteKit
Svelte Files
Svelte Extension for Visual Studio Code
Run/Debug Svelte App in Visual Studio Code
Svelte Extension for WebStorm
Run/Debug Svelte App in WebStorm

SvelteKit 2 Overview

Vite Tooling
Development Server
Routing
Deployment
Server-side rendering
Unit Testing

Getting Started

Exploring the REPL
Svelte Layout
Svelte Page
Svelte Component
Svelte Architecture
Svelte Element Directives
Compiling Svelte Files

Static Pages

What is a Static Page?
What problem do Static Pages solve?
Static Page File Structure
Setting Head Content
HTML Content
CSS Content
Comments
Scoped CSS
Handling Images
Hot Module Reloading
Server Pre-rendering
Page Routing

Dynamic Pages

What is a Dynamic Page?
What problem do Dynamic Pages solve?
Client-Side Rendering
Dynamic Page File Structure
JavaScript Content
Using Variables
Using Expressions
Data Binding
Class and Style Directive
Event Binding
Logic Blocks
Debug Tag

Reactivity with Runes (Svelte 5)

The four runes: $state, $derived, $effect, $props
$state for mutable reactive state
$derived for computed values (replacing $: reactive statements)
$effect for side effects and DOM interaction
Updating arrays and objects with deep reactivity
Reading legacy $: and migrating

Component Basics

What is a Component?
Component file structure
Component props with $props() and TypeScript types
Bindable props with $bindable()
Component callbacks (replacing event dispatching)

Component Composition

Nested components
Snippets ({#snippet} / {@render}) — the modern slot replacement
Passing data and callbacks to children
Component tree best practices

Event Handling (Svelte 5)

Standard DOM event attributes (onclick, oninput)
Event modifiers via wrapper functions (legacy on:click|preventDefault deprecated)
Callback props (replacing createEventDispatcher)
Forwarding behavior with spread props

Data binding

Top-down data binding by default
Communication with props and events
Using two-way data binding

Forms

HTML Form Element
Named Form Actions
Form Validation
Form Submission
Progressive Enhancement

Lifecycle and Effects

$effect and $effect.pre (the modern approach)
onMount and onDestroy (still available)
tick() for awaiting DOM updates
Effect cleanup functions

State Management (Svelte 5)

Reactive primitives with $state (the modern default)
Sharing reactive state via context
Stores in Svelte 5 (writable, readable, derived) — when they still make sense
Migrating store-heavy code to runes
Page, navigation, and updated stores in SvelteKit 2

Routing

What is Routing?
What problem does Routing solve?
Pages
Layout
Route Parameters
API Routes

Errors and Redirects

Handling Errors and Redirects
Error Pages
Fallback Errors
Redirects

Asynchronous Data

Promises and async/await in {#await}
SvelteKit 2 server load functions returning promises
Streaming with deferred data
Async (preview)

Environment Variables

Advanced Bindings

Content-Editable
Each Block Bindings
Media Elements
Readonly Element Dimensions
This Bind
Bind to Components Props
Bind to Component Instances

Advanced Component Composition

Snippets and {#snippet} / {@render}
Multiple snippet props for "named slot" patterns
Snippet fallbacks and parameters
Reading legacy <slot> codebases
Module context
Context API with reactive state

Advanced Routing

Optional Parameters
REST Parameters
Param Matchers
Route Groups
Organize Layouts and Routes

Actions

What are Actions?
How are Actions used?
Element-Level Lifecycle Functions
Customizing Reusable Events
Interface with 3rd Party Libraries

UI Special Effects

Motion: Tweens & Spring
Transitions Directive
Parameters
In and Out
Custom CSS/JS Transitions
Transition Events
Key Blocks
Global & Deferred Transitions
Animations Directive

Special Elements

Svelte Self
Svelte Component
Svelte Element
Svelte Window & Bindings
Svelte Body
Svelte Document
Svelte Head
Svelte Options
Svelte Fragment

Hooks

What is Hook?
How are Hooks used?
Handle Hook
Request Event
Handle Fetch & Error

Pages and Layout

Server-Side Rendering
Client-Side Rendering
Pre-Rendering
Trailing Slash
Universal Loading
Invalidation

Unit Testing

What is Unit Testing?
Why Unit Test Svelte?
Unit Testing Framework
Testing Svelte components
Testing Svelte stores
Testing SvelteKit