The Joy of Svelte is a crash course for experienced web developers who want to learn Svelte quickly.
You won't just learn the basics. You'll learn how to take full advantage of Svelte's innovative reactive
programming paradigm to develop elegant, well organised web applications. And you'll learn how to get
started using Svelte in your legacy projects today.
Course Contents
#1 Getting started with Svelte
What is Svelte?
Svelte documentation & tutorials
The Svelte REPL
Hello world!
Svelte compiler output
Updating state in a click event listener
Downloading your REPL code to your computer
Setting up a new Svelte web site project
Setting up a new Svelte component project
Review
#2 Using templating syntax to render data
Introduction
Using {#await} to fetch data
Using {#each} to loop over lists
Using {#if} to branch on conditions
Using {@html} to render raw html
Review
#3 Data fetching strategies for components
Introduction
Refactoring into child components
Adding props to a component
Using component slots to provide data
Refactoring code into separate JavaScript files
Sharing state across components
Reactive statements that update with state changes
Using functions as an alternative to reactive statements
Techniques to ensure Svelte re-renders when necessary
Review
#4 Using components to simplify complex web user interfaces
Introduction
Using components to simplify the user interface
Advantages and challenges of using two-way data binding
Using simple UI components to achieve a consistent design
Using props to pass event handlers to child components
Allowing events to bubble up to parent components
Opening a modal window when a button is clicked
Setting up a form in the modal
Closing the modal by dispatching a custom Svelte event
Fixing a Svelte warning by specifying a prop default
Submitting a form and preventing a page refresh
Passing form data when dispatching a custom events
Adding form validation
Review
#5 Building custom stores for state management
Introduction
What are Svelte stores?
Importing and using a custom store
Writing to a custom store with the set method
Using the Svelte readable store library
Sharing a store between components
Using a custom store for fetched data
Updating a collection in a custom store
Alternative approach to updating a custom store
Filtering data using a derived store
Sending data to the server from a custom store
Review
#6 Integrating Svelte into an existing web application
Introduction
Downloading a project from the Svelte REPL
Developing locally with hot module reloading
Modifying the build process to embed into a site
Rendering a Svelte component on a page
Building Svelte code for production
Adding Svelte CSS to a site
Using a Svelte component inside a React component
Other approaches to using Svelte in your application
SvelteKit - Coming soon!
SvelteKit is still in beta, but shortly after SvelteKit 1.0 is released, you will automatically get access
to additional videos where you can learn how to use SvelteKit!
I've been working as a web developer for two decades, and I've never been this excited about web
development! Svelte is a joy to work with, and I can't wait for you to learn Svelte and
experience the joy for yourself.
A great video course on getting used to using Svelte. Loads of great tips and yet easy to understand.
I've watched it through and love it! @JesseSkinner knows his onions and I'm happy to pay for this!
-
@spences10An excellent video course for getting up to speed with Svelte fast. Packed with information, yet easy
to digest. Very easy to follow and logical, with no fluff or filler. Watched it through a couple of
times now, and dipped back in to refresh my mind on a couple of things too.
-
@ianmjonesWell I’m doing it. I procrastinated so long in learning React, that another JS framework has come along
that has stolen my attention. I’m committing to getting in on the ground floor of @sveltejs and going
all-in. And it started with @JesseSkinner and The Joy of Svelte.
-
@matthewhigley
Learn the Joy of Svelte
You will get access to:
hours of streaming videos that will teach you how to use Svelte
full access to all the source code from the videos
video downloads for offline viewing
free updates with any additional content or revisions in the future
You will learn about:
getting started with Svelte
using templating syntax to render data
data fetching strategies for components
using components to simplify complex web user interfaces
building custom stores for state management
integrating Svelte into an existing web application