Vercel
Svelte Fundamentals
5 hours, 2 minutes
CC
Course Description
Learn the Svelte framework from the creator himself, Rich Harris! Get hands-on with all the fundamentals of Svelte: reactivity, props, events, data binding, lifecycle functions, and stores. Plus advanced APIs like animations, transitions, slots, and context. Finally, build a full project from scratch with Svelte, an Emoji Matching Game! This course is compatible with Svelte versions 3 and 4.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
Exploring Svelte Fundamentals from Rich Harris on Frontend Masters and I'm loving the simplicity and efficiency.
Meet Vaghasiya
Meet734
Course Details
Published: June 12, 2023
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 4 minutes
Rich Harris introduces the course by providing some personal background and discusses how and why Svelte was created. Who this course is for and course prerequisites are also covered in this segment. This course is compatible with Svelte versions 3 and 4.
Basics
Section Duration: 1 hour, 43 minutes
Rich walks through the website that will be used throughout the course and discusses the composition of a Svelte component. Demonstrations of declaring variables, utilizing JavaScript shorthand attributes, and styling with CSS are also covered in this segment.
Rich demonstrates reactivity in Svelte, keeping the DOM in sync with the application state by building an event handler with an increment function. Reactive declarations, grouping statements, and updating arrays and objects are also covered in this segment.
Rich walks through passing data from components to their children by declaring properties. Specifying default values for props and using spread props to send packages of props is also covered in this segment.
Rich discusses using logic to render HTML conditionally, including if, else, else-if, each, keyed each, and await blocks. How race conditions are handled, and student questions regarding if "each" is a reserved keyword and what happens if the keys aren't unique.
Rich discusses listening to DOM events and demonstrates inline event handlers, event modifiers, component events, event forwarding, and DOM event forwarding. Student questions regarding if forwarding works with callbacks and how to know if an event needs to be forwarded are also covered in this segment.
Rich demonstrates using bindings to keep a variable's value and an input's value in sync. Inputs, including text, numeric, checkbox, select, group, multi-select, and textarea inputs are also covered in this segment.
Rich discusses functions that run during key moments of a component's lifecycle, including onMount, beforeUpdate, afterUpdate, and tick. Any function that is returned from onMount() will be called when the component has been destroyed. The tick function can be called at any time while the onMount, beforeUpdate, and afterUpdate functions have to be called while the component is initializing.
Rich answers student questions regarding if bindings are synchronous, how await differs from onMount, how onMount impacts performance, ways to organize multiple await blocks, and if there is a way to use Promise.all for multiple await blocks. A more in-depth explanation of tick and what the this keyword is referring to are also covered in this segment.
Rich demonstrates handling state that does not belong to a specific component using stores. Writeable stores, auto subscriptions, readable stores, derived stores, custom stores, and binding to stores are covered in this segment.
Rich answers student questions regarding fetching data directly in a readable store, recommended ways to persist store data, and how store differentiates from Redux or React context. Opinions on the size of a store's scope and if Svelte has something similar to useEffect for function clean up are also covered in this segment.
Advanced APIs
Section Duration: 1 hour, 29 minutes
Rich discusses using motion stores, easing functions, the spring function, and transitions to update values gradually for smoother animations. Creating custom CSS transitions, custom JavaScript transitions, transition events, and local transitions are covered in this segment.
Rich answers student questions regarding Sveltes animation limitations, using third-party libraries for animations, and using transitions for hidden DOM elements.
Rich demonstrates replacing the contents of key blocks on value change, coordinating transitions between multiple elements by deferring transitions, and applying motion to elements that are not transitioning using animate.
Rich discusses interfacing with third-party libraries, lazy-loading images, tooltips, and adding custom event handles with element-level lifecycle functions called actions.
Rich demonstrates some more advanced uses of binding, including content-editable elements, inside each blocks, media elements, dimensions of block-level elements, this, component bindings, and component instances.
Rich walks through specifying classes, shorthand classes, inline styles, and component styles. Student questions regarding adding multiple classes and binding to multiple elements are also covered in this segment.
Rich discusses using and naming slot elements to define where child components are accepted. Slot fallbacks, slot props, and checking slot content are also covered in this segment.
Rich demonstrates using the context API to communicate between components without passing data or dispatching many events.
Rich walks through a variety of Svelte's built-in elements, including self, component, element, window, body, document, head, options, and fragment. Binding to properties of window is also demonstrated in this segment.
Rich demonstrates implementing and exporting context in script blocks, which will run the inside code once the module evaluates. Adding a debugging statement inside the component markup using the debug tag is also covered in this segment.
The Emoji Matching Game
Section Duration: 1 hour, 40 minutes
Rich demonstrates a finished version of the emactchi game and walks through how to set up a base Svelte project in VS Code.
Rich walks through creating a Game component with a rough mock-up of the game UI and styling the interface. Importing global stylesheets into a JavaScript module is a feature provided by Vite.
Rich walks through defining the styles for the game board grid, including implementing a responsive board size.
Rich demonstrates defining the interface and parameters for the easy level of the emoji-matching game. The module contains level objects defined using TypeScript.
Rich walks through passing in and implementing the data for the game's easy difficulty level into the game. Rendering and centering a random array of emoji pairs is also covered in this segment.
Rich implements logic for selecting squares, including resetting the selection if the contained emojis don't match and resetting the incorrect selection timeout to avoid interaction errors.
Rich walks through handling correct matches and randomly shuffling the emoji array. Updating the game state, removing the matched emojis from the grid, and displaying the matched emojis outside the grid are also covered in this segment.
Rich demonstrates creating a countdown timer component and displaying the countdown above the grid. Animating the countdown with the time remaining is also covered in this segment.
Rich walks through replacing the emojis with SVGs from Twemoji to maintain stable styling and emoji consistency across browsers and platforms.
Rich walks through adding transform animations to the emoji cards, which will allow the cards to be flipped over to hide and reveal the image. Keeping the matched cards revealed is also covered in this segment.
Rich demonstrates adding transitions to the matched emojis so they combine when moving into the found array.
Rich walks through implementing the various game states, including win, lose, and pause. Adding a modal welcome screen and defining the medium and hard levels are also covered in this segment.
Rich demonstrates implementing the logic to switch between the game states and difficulty levels discussed in the previous lesson. Updating the CSS styling to automatically change the grid size based on the difficulty level is also covered in this segment.
Rich walks through adding a burst of confetti for when the user wins the game using the Neoconfetti package.
Wrapping Up
Section Duration: 4 minutes
Rich wraps up the course by briefly discussing Svelte concepts used in building the ematchi game and answering some student questions. Questions regarding repeat infinite animations or transitions, how dispatch and event handlers work, and catching missing declarations for derived values of component props are covered in this segment.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops