Intro and Advanced Svelte Training Overview
This beginner to advanced Svelte course begins with an introduction to Svelte and then delves into the core features of SvelteKit, including routing, server-side rendering, and unit testing. Participants learn how to create static and dynamic pages, work with template reactivity, and use Svelte components. This course also covers event handling, forms, lifecycle, state management, and routing. Attendees then learn more advanced topics, including 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. By the end of this comprehensive training, participants confidently use Svelte to build robust, high-performance web applications.
Location and Pricing
Accelebrate offers instructor-led enterprise training for groups of 3 or more online or at your site. Most Accelebrate classes can be flexibly scheduled for your group, including delivery in half-day segments across a week or set of weeks. To receive a customized proposal and price quote for private corporate training on-site or online, please contact us.
In addition, some courses are available as live, instructor-led training from one of our partners.
Objectives
- Understand the fundamentals of Svelte and how it compares to other frameworks
- Set up a development environment for Svelte using SvelteKit and work with Svelte files and extensions for popular IDEs
- Work with 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
- Compose Svelte components, props, and events
- 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
- Use 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.
- 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.
- Use hooks in Svelte and handle hook requests and errors
- Master advanced topics such as server-side rendering, client-side rendering, pre-rendering, links, and unit testing in Svelte
Prerequisites
All students must have JavaScript and HTML programming experience. Experience with CSS is helpful but not required.
Outline
Expand All | Collapse All
Introduction
- What is Svelte?
- What problem does Svelte solve?
- Svelte vs. Other Frameworks
- 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 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
Template Reactivity
- Principles
- Changing Data through Assignments
- Reactive Statements
- Updating Arrays and Objects
Component Basics
- What is a Component?
- What problem does it solve?
- Calling Components vs HTML Elements
- Component File Structure
- Component Props
- Component Events
Component Composition
- What is Component Composition?
- What problem does it solve?
- Nested Components
- Passing Data to Child Components
- Handling Events and Receiving Data from Child Components
- Component Tree Best Practices
Event Handling
- Event Handling Element Directives
- DOM Events
- Adding Event Handlers
- In-line Handlers
- Event Modifiers
- Dispatching Component Events
- Forwarding Events
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
- Mount
- Destroy
- Before Update
- After Update
- Tick
State Management
- Stores
- Writable Stores
- Auto-subscriptions
- Readable Stores
- Derived Stores
- Custom Stores
- Store Bindings
- Page Store
- Navigation Store
- Updated Store
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 & async/await
- Fetching data from a REST API
- Subscriptions
- Stores
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
- Slots
- Named Slots
- Slot Fallbacks
- Slot Props
- Slot Content
- Module Context
- Context API
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
Conclusion
Training Materials
All Svelte training students receive comprehensive courseware covering all topics in the course. The instructor distributes courseware via GitHub. The courseware includes documentation and extensive code samples.
Software Requirements
Students need a free, personal GitHub account to access the courseware and permission to install .NET SDK, Node.js, and Visual Studio Code on their computers. They also need permission to install NuGet Packages, NPM Packages and Visual Studio Extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.
