About the course
This three-day course is a hands-on introduction to building dynamic, component-driven user interfaces with Svelte.
Unlike frameworks that run in the browser, Svelte shifts the work into a compile step, resulting in smaller bundles and incredibly fast runtimes. We will cover the core concepts of Svelte, from basic components and reactivity to state management and transitions.
By the end of this course, you will have built a functional single-page application and gained a solid understanding of how to leverage Svelte's unique approach to front-end development.
Instructor-led online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.
-
- Understand Svelte's Core Philosophy: Explain how Svelte's compile-time approach differs from traditional frameworks and why it leads to superior performance.
- Build Reusable Components: Create and structure .svelte components, managing their logic, styles, and markup in a single file.
- Implement Reactivity: Use Svelte's built-in reactivity features to create dynamic user interfaces that automatically update in response to state changes.
- Manage Component Communication: Pass data between components using props and events.
- Handle Application State: Use Svelte's built-in stores to manage and share state across an entire application.
- Animate User Interfaces: Apply Svelte's built-in transition and animation tools to create smooth and engaging user experiences.
- Leverage SvelteKit: Understand the fundamentals of Svelte's official application framework for building production-ready applications with routing and server-side rendering.
- Develop a Complete Web App: Independently build a functional, multi-component single-page application from scratch.
-
This course is ideal for front-end developers with experience in other frameworks like React, Angular, or Vue who want to explore a new, performance-oriented paradigm. It is also suitable for back-end developers with an interest in building their own front-end user interfaces.
-
Attendees should have attended our Modern JavaScript (ES6+) training course or have equivalent experience, and also good knowledge of HTML and CSS. While experience with other frameworks is helpful, it is not required. No prior experience with Svelte is needed.
-
This Svelte course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
Components and Reactivity
Svelte's Core Concepts
Introduction to Svelte: How Svelte's compile-time approach differs from other frameworks.
Setup: Setting up a new Svelte project and understanding the project structure.
Your First Component: Creating and rendering a simple .svelte component.
Component Structure: The separation of <script>, <style>, and HTML in a single file.
State and Logic
Reactivity: Understanding Svelte's automatic reactivity and how it updates the DOM.
Variables and Expressions: Declaring reactive variables and using them in your markup.
Event Handling: Responding to user input with event listeners.
Conditionals and Loops: Using the #if and #each blocks to control what is rendered.
Hands-on Lab: To-Do List Application
A guided, hands-on lab to build a simple To-Do List application. Participants will practice creating components, handling state, and managing lists with loops.
Advanced Component Patterns and Application Architecture
Component Communication and Props
Props: Passing data from a parent component to a child component.
Event Dispatching: Sending events from a child component back to a parent.
Two-way Binding: Simplifying form handling with bind:value.
Slots: Creating reusable components with customizable content.
Stores and State Management
Introduction to Stores: Svelte's built-in solution for managing application state.
Readable and Writable Stores: Creating and subscribing to stores.
Derived Stores: Deriving new values from existing store data.
Context API: An alternative for passing data to deeply nested components.
Hands-on Lab: E-Commerce Product Viewer
A guided, hands-on lab to build an E-Commerce product viewer. Participants will manage state using stores and practice communicating between multiple components.
Transitions and SvelteKit
Animations, Transitions, and Actions
Transitions: Applying elegant entry and exit animations to elements.
Actions: Creating reusable element-level behaviors.
Lifecycle Functions: Using onMount and other functions to run code at specific times.
Putting It All Together: A Multi-Page Web App
A final project where you will build a complete, multi-component application that incorporates all the skills learned throughout the course, including routing with SvelteKit. This will involve working with mock APIs, creating a more complex data flow, and styling a full user interface.
-
Svelte Official Documentation:
SvelteKit Documentation: As the official framework for building applications with Svelte, SvelteKit is essential for anyone looking to build production-ready web apps.
Svelte Society: This is a global network of Svelte enthusiasts that provides a central index of events, packages, recipes, and a link to the official community Discord.
Svelte GitHub Repository: For those interested in the inner workings of the framework, the official GitHub repository is an invaluable resource for exploring the source code and contributing to the project.
MDN Web Docs: The Mozilla Developer Network provides a comprehensive and vendor-neutral guide to Svelte, which is great for understanding how it fits into the broader web development ecosystem.
Trusted by
