Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

CodeSignal

Svelte: Advanced Concepts

via CodeSignal

Go to class Write review

Overview

This course covers advanced Svelte concepts including async rendering, optimized lists, and lifecycle management. Learn to use #await for async operations, keyed #each blocks for efficient rendering, and create reusable snippets. Master component lifecycle with $effect and synchronize updates using tick() to build high-performance applications.

Syllabus

  • Unit 1: Handling Asynchronous Data with `#await` in Svelte
    • Fetch and Display API Data
    • Extend the Await Block
    • Dynamic Post Loader
    • Dynamic Post ID Input
    • Fetch and Display User Data
  • Unit 2: Reusable Code Blocks with Snippets in Svelte
    • Create a Greeting Snippet
    • Filter and Render Admin Greetings
    • Dynamic Styling for User Roles
    • # OUTPUT Render Multiple Snippets Together
    • # OUTPUT Combine Multiple Snippets Together
  • Unit 3: Handling Lifecycle Effects with onMount and onDestroy
    • Log Component Lifecycle Messages
    • Timer Lifecycle Management
    • Fetch and Cleanup User Data
  • Unit 4: Waiting for DOM Updates with `tick()`
    • Scroll Messages with Tick
    • Measure Message Height with Tick
  • Unit 5: Routing with Svelte
    • Create Your First Static Route
    • Dynamic Route for User Profiles
    • Search Page with Query Parameters
    • Link Static and Dynamic Routes
    • Link Profile to Search Route

Reviews

Start your review of Svelte: Advanced Concepts

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.