Svelte Fundamentals

5 hours, 2 minutes CC
Svelte Fundamentals

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
Close

Course Details

Published: June 12, 2023

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 4 minutes
  • Introduction
    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
  • Svelte Basics
    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.
  • Reactivity
    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.
  • Declaring Props
    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.
  • Logic
    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.
  • Events
    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.
  • Bindings
    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.
  • Lifecycle
    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.
  • Lifecycle Q&A
    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.
  • Stores
    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.
  • Stores Q&A
    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

The Emoji Matching Game

Section Duration: 1 hour, 40 minutes

Wrapping Up

Section Duration: 4 minutes
  • Wrapping Up
    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.
Exploring Svelte Fundamentals from Rich Harris on Frontend Masters and I'm loving the simplicity and efficiency.
Meet Vaghasiya

Meet Vaghasiya

Meet734

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now