Svelte Essentials
Duration
3 days
Description
This Svelte Essentials course is designed for programming 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 and asynchronous data 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.
Prerequisites
All students must have JavaScript and HTML programming experience. Experience with CSS is helpful but not required.
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.
Outline
- 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
- Conclusion