Highlights
- Explore forms and data binding in Svelte 5.
- Learn state management techniques and build effective data models.
- Utilize Svelte actions to create powerful, reusable interactions.
- Learn to consume web services and integrate secure API workflows.
- Explore routing, navigation, and SSR with SvelteKit.
- Learn robust application architecture and error-handling techniques.
- Master testing Svelte applications with modern tooling.
- Explore development workflow and tooling for efficient Svelte projects.
- Learn deployment strategies and security best practices for SvelteKit.
- Build a full capstone project that applies all course concepts.
Course Details
1. Introduction to Svelte & SvelteKit
- What makes Svelte different (compiler vs. virtual DOM)
- Svelte 5 overview: Runes, performance, ecosystem changes
- When to use Svelte alone vs. SvelteKit
- Hands-on: Setup via npm create svelte@latest
- Project tour: file structure, routing, server vs client modules
2. Svelte Syntax & Fundamentals (Runes-based)
- The Svelte language: markup, script, and style blocks
- Reactivity with Svelte 5 runes
- $state, $derived, $effect, $props
- Comparison with Svelte 3’s $: reactive declarations
- Compact syntax & readability
- Hands-on: Convert a traditional reactive component to runes
3. Components: Architecture & Composition
- Breaking problems down into components
- Creating components, exports, and props using $props
- Events & event forwarding (on:click, createEventDispatcher → now via runes)
- Component lifecycle hooks (onMount, beforeUpdate, afterUpdate, onDestroy)
- Slots, named slots, slot props, and advanced composition patterns
- Styling:
- Scoped CSS
- Global styles
- Class & style directives
- Hands-on: Build a reusable card, modal, and form input component suite
4. Forms & Data Binding (Svelte 5)
- $state for two-way binding
- Form elements: text, checkbox, radio, select, custom bindings
- Validation strategies:
- Client-side validation
- Server-side validation using SvelteKit Form Actions
- Handling complex form objects with $derived
- Hands-on: Build a multi-step form with validation & progress state
5. State Management & Data Models
- When to use local component state vs. shared state
- Stores in Svelte 5
- Writable, readable, derived
- spring and tweened
- Stores vs. Context: When to use each
- Structuring domain data models
- Hands-on:
- Create global app stores (auth, theme, cart, etc.)
- Build a real-time store-driven UI
6. Svelte Actions
- What Actions are & when to use them
- Creating and reusing advanced Actions
- Event listeners
- Intersection observer
- Drag & drop
- Tooltip / popover behavior
- Passing data via parameters
- Sharing Actions between components
- Hands-on: Build a custom Action library
7. Consuming Web Services
- Using fetch on client vs server
- Using SvelteKit server functions (+server.js)
- API error handling strategies
- Transforming and normalizing data
- Calling 3rd-party APIs securely
- Hands-on: Build a service module for CRUD operations
8. Routing, Navigation & SSR with SvelteKit
- Filesystem routing: +page.svelte, +page.js, +layout.svelte etc.
- Nested layouts, layouts with server data
- Server-side rendering vs CSR vs SPA mode
- Load functions: load, server load, and the new universal data flow
- Lazy loading components and pages
- Prefetching and streaming data
- Keeping stores in sync with navigation
- Hands-on: Build a multi-page app with layouts, parallel routes, and prefetching
9. Robust Application Architecture
- Separation of concerns in SvelteKit
- Error handling:
- +error.svelte
- throw error() in load/server modules
- Handling form errors in form actions
- Defensive programming in components
- Hands-on: Create a global error boundary & user-friendly error UI
10. Testing Svelte Applications
- Unit tests with Vitest
- Component testing with Testing Library
- Mocking fetch, stores, and form actions
- Snapshot testing
- End-to-end testing with Playwright
- Hands-on: Write a test suite for a component-driven feature
11. Development Workflow & Tooling
- The Svelte compiler: how it works, what it outputs
- Development vs production builds
- Vite configuration & optimization
- Debugging:
- Svelte DevTools
- Source maps and compiler warnings
- Managing environment variables securely
12. Deployment & Security
- Building & deploying SvelteKit apps:
- Node adapter
- Static adapter
- Serverless / Edge environments
- Docker
- Caching strategies & CDN configuration
- Protecting APIs and sensitive data
- Authentication strategies:
- Cookies
- OAuth
- JWT (server-only usage)
- Hands-on: Deploy to Netlify, Vercel, or cloud of choice
13. Capstone Project
A full hands-on build combining all course concepts:
Example projects
- A full CRUD dashboard with authentication
- A marketplace with cart + checkout
- A knowledge base with search & pagination
- A real-time collaborative board using WebSockets
Includes:
- Full component library
- Server functions & API consumption
- Forms with validation
- Routing + layouts
- Stores & global state
- Deployment pipeline
Who should attend
This course introduces Svelte.js for efficient code and performant frontend applications and user interfaces.
Through hands-on examples delegates will gain a really good foundation to build their Svelte apps upon. Some HTML, CSS and basic JavaScript experience is expected to get the most from this course.
Feedback
4.8 out of 5 average
" I found the material on Redux extremely useful. There was a definite moment of clarity. The instructor was engaging + knowledgeable on topic. Even if it was off topic question was able to provide answer with examples that you could relate to for learning. Great instructor, great course."
LB, Software Engineer, React, April 2021
“JBI did a great job of customizing their syllabus to suit our business needs and also bringing our team up to speed on the current best practices. Our teams varied widely in terms of experience and the Instructor handled this particularly well - very impressive”
Brian F, Team Lead, RBS, Data Analysis Course, 20 April 2022