Svelte 5 and the Full Stack SvelteKit Course: Embracing the Future

Hey folks! Justin here, and I've got some exciting news about the upcoming Full Stack SvelteKit course. After careful consideration and valuable feedback from our waitlist members, I've decided to go all-in with Svelte 5 for the course content.

Let me break down why this is such a big deal and why I believe it's the right move for all of us.

Svelte 5: The Future is Now

First things first: Svelte 5 is the future , and the future is looking bright!

The new reactivity system, runes, snippets, and event forwarding aren't just fancy new features – they're game-changers that will revolutionize how we build Svelte applications.

Let's dive into some complex examples to see how Svelte 5 improves upon Svelte 4, with added TypeScript support and styling.

Runes: A New Era of Reactivity

Runes introduce a powerful set of primitives for controlling reactivity inside your Svelte components. Let's look at a complex example of a task management system:

Svelte 4

<script lang="ts">
  type Task = {
    id: number;
    text: string;
    completed: boolean;
  };

  type TaskStats = {
    total: number;
    active: number;
    completed: number;
  };

  let tasks: Task[] = [];
  let filter: 'all' | 'active' | 'completed' = 'all';
  let newTaskText = '';

  $: filteredTasks = tasks.filter((task: Task) => {
    if (filter === 'all') return true;
    if (filter === 'active') return !task.completed;
    if (filter === 'completed') return task.completed;
  });

  $: taskStats = {
    total: tasks.length,
    active: tasks.filter((t) => !t.completed).length,
    completed: tasks.filter((t) => t.completed).length
  } satisfies TaskStats;

  function addTask(text: string): void {
    tasks = [...tasks, { id: Date.now(), text, completed: false }];
    newTaskText = '';
  }

  function toggleTask(id: number): void {
    tasks = tasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task));
  }

  function removeTask(id: number): void {
    tasks = tasks.filter((task) => task.id !== id);
  }
</script>

<!-- Markup -->

Svelte 5

<script lang="ts">
  type Task = {
    id: number;
    text: string;
    completed: boolean;
  };

  type TaskStats = {
    total: number;
    active: number;
    completed: number;
  };

  let tasks = $state<Task[]>([]);
  let filter = $state<'all' | 'active' | 'completed'>('all');
  let newTaskText = $state('');

    $inspect(filter)

  let filteredTasks = $derived(
    tasks.filter((task) => {
      if (filter === 'all') return true;
      if (filter === 'active') return !task.completed;
      if (filter === 'completed') return task.completed;
    })
  );

  let taskStats = $derived<TaskStats>({
    total: tasks.length,
    active: tasks.filter((t) => !t.completed).length,
    completed: tasks.filter((t) => t.completed).length
  });

  function addTask(text: string): void {
    tasks.push({ id: Date.now(), text, completed: false });
    newTaskText = '';
  }

  function toggleTask(id: number): void {
    const task = tasks.find((t) => t.id === id);
    if (task) task.completed = !task.completed;
  }

  function removeTask(id: number): void {
    const index = tasks.findIndex((t) => t.id === id);
    if (index !== -1) tasks.splice(index, 1);
  }

  $effect(() => {
    console.log('Task stats updated:', taskStats);
  });
</script>

<!-- Markup -->

The Svelte 5 version showcases several improvements over Svelte 4:

1. Explicit Reactivity : The use of $state makes it immediately clear which variables are reactive. In Svelte 4, any let declaration could potentially be reactive, which could lead to confusion.

2. Simplified Derived Values : The $derived rune in Svelte 5 is more intuitive than Svelte 4's $: syntax. It clearly indicates that a value is derived from other state, improving code readability.

3. Fine-grained Updates : In Svelte 5, we can directly mutate the tasks array (e.g., tasks.push() ) instead of creating a new array. This leads to more efficient updates and is closer to how we naturally think about modifying data.

4. Type Safety : The $state and $derived runes work seamlessly with TypeScript, providing better type inference and catching potential errors at compile-time.

5. Side Effect Handling : The $effect rune provides a clear and isolated way to handle side effects, replacing the less intuitive $: syntax for effects in Svelte 4.

6. Event Handling : In Svelte 5, event handlers are regular attributes (e.g., onclick instead of on:click ), which is more consistent with standard HTML and easier for newcomers to understand.

These improvements make the code more readable, maintainable, and less prone to errors, especially as the application grows in complexity.

Snippets: Reusable UI Chunks

Snippets allow us to create reusable chunks of markup inside our components. This is particularly useful for complex UIs. Let's look at a more intricate example of a data table with sorting and filtering:

Svelte 4

<script lang="ts">
  type DataItem = {
    [key: string]: string | number;
  };

  type Column = {
    key: string;
    label: string;
  };

  export let data: DataItem[] = [];
  export let columns: Column[] = [];
  let sortColumn = '';
  let sortDirection: 'asc' | 'desc' = 'asc';
  let filterText = '';

  $: sortedAndFilteredData = data
    .filter((item) =>
      columns.some((col) => String(item[col.key]).toLowerCase().includes(filterText.toLowerCase()))
    )
    .sort((a, b) => {
      if (!sortColumn) return 0;
      const aVal = String(a[sortColumn]);
      const bVal = String(b[sortColumn]);
      return sortDirection === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
    });

  function handleSort(column: string): void {
    if (sortColumn === column) {
      sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
    } else {
      sortColumn = column;
      sortDirection = 'asc';
    }
  }
</script>

<div class="data-table">
  <input bind:value={filterText} placeholder="Filter..." class="filter-input" />
  <table>
    <thead>
      <tr>
        {#each columns as column}
          <th on:click={() => handleSort(column.key)}>
            {column.label}
            {#if sortColumn === column.key}
              <span class="sort-indicator">{sortDirection === 'asc' ? '▲' : '▼'}</span>
            {/if}
          </th>
        {/each}
      </tr>
    </thead>
    <tbody>
      {#each sortedAndFilteredData as row}
        <tr>
          {#each columns as column}
            <td>{row[column.key]}</td>
          {/each}
        </tr>
      {/each}
    </tbody>
  </table>
</div>

Svelte 5

<!-- DataTable.svelte -->
<script lang="ts">
    import type { Snippet } from 'svelte';

    type DataItem = {
        [key: string]: string | number;
    };

    type Column = {
        key: string;
        label: string;
    };

    let { data = $state<DataItem[]>([]), columns = $state<Column[]>([]) } = $props();
    let sortColumn = $state<string>('');
    let sortDirection = $state<'asc' | 'desc'>('asc');
    let filterText = $state<string>('');

    let sortedAndFilteredData = $derived(() => {
        return data
            .filter(item =>
                columns.some(col =>
                    String(item[col.key]).toLowerCase().includes(filterText.toLowerCase())
                )
            )
            .sort((a, b) => {
                if (!sortColumn) return 0;
                const aVal = String(a[sortColumn]);
                const bVal = String(b[sortColumn]);
                return sortDirection === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
            });
    });

    function handleSort(column: string): void {
        if (sortColumn === column) {
            sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            sortColumn = column;
            sortDirection = 'asc';
        }
    }
</script>

{#snippet tableHeader() : Snippet}
    <thead>
        <tr>
            {#each columns as column}
                <th onclick={() => handleSort(column.key)}>
                    {column.label}
                    {#if sortColumn === column.key}
                        <span class="sort-indicator">{sortDirection === 'asc' ? '▲' : '▼'}</span>
                    {/if}
                </th>
            {/each}
        </tr>
    </thead>
{/snippet}

{#snippet tableBody() : Snippet}
    <tbody>
        {#each sortedAndFilteredData as row}
            <tr>
                {#each columns as column}
                    <td>{row[column.key]}</td>
                {/each}
            </tr>
        {/each}
    </tbody>
{/snippet}

<div class="data-table">
    <input bind:value={filterText} placeholder="Filter..." class="filter-input">
    <table>
        {@render tableHeader()}
        {@render tableBody()}
    </table>
</div>

The Svelte 5 approach with snippets offers several advantages over the Svelte 4 approach:

1. Modularity : Snippets allow us to break down complex UI components into smaller, reusable pieces. This improves code organization and makes it easier to maintain and update the UI.

2. Reusability : Snippets can be easily reused within the same component or even shared across different components, promoting DRY (Don't Repeat Yourself) principles.

3. Readability : By separating the table header and body into snippets, the main component template becomes cleaner and easier to understand at a glance.

4. Flexibility : Snippets can accept parameters, allowing for more dynamic and flexible UI components. This is particularly useful for creating variations of a UI element based on different data or states.

5. Type Safety : When used with TypeScript, snippets can be properly typed, ensuring that the correct data is passed to them and reducing the chance of runtime errors.

These improvements make it easier to build and maintain complex UIs, especially in larger applications, where component complexity can quickly become a challenge. The parent component remains largely the same in both versions, showcasing how Svelte 5 maintains backwards compatibility while offering new features.

Event Forwarding: Simplified Component Communication

In Svelte 5, event handlers are just regular attributes. This simplifies event forwarding and makes our component APIs more intuitive.

<!-- Form.svelte -->

<script lang="ts">
  type Props = {
    onclick?: () => void;
  };

  let { onclick }: Props = $props();
</script>

<button {onclick}> Click me! </button>

<!-- ParentComponent -->

<script>
  import Form from './Form.svelte';
</script>

<Form onclick={() => console.log('clicked')} />

This new approach allows us to easily forward all events and props, something that wasn't possible in previous versions of Svelte.

The Growing Pains of Large-Scale Svelte Apps

Having worked extensively with Svelte 4 on large-scale projects like Updraft and Apespace, I've personally bumped into its limitations. Don't get me wrong, Svelte 4 is great, but when your project starts to grow, things can get… interesting.

Component Obesity

As applications grow, components tend to become bloated and harder to manage. In Svelte 4, it's common to end up with components that handle too many responsibilities, making them difficult to maintain and reuse.

State Management Headaches

Complex state management in Svelte 4 can become challenging as your application grows. The lack of fine-grained reactivity can lead to unnecessary re-renders and convoluted state update logic.

Side Effect Chaos

In larger Svelte 4 applications, managing side effects can become a real challenge. The reliance on lifecycle functions like onMount and afterUpdate can lead to scattered and hard-to-track side effects throughout your codebase.

Svelte 5: Addressing Real-World Challenges

Svelte 5 isn't just an incremental update; it's a thoughtful evolution designed to address the pain points developers face when building large-scale applications.

Fine-Grained Reactivity

One of the most significant improvements in Svelte 5 is its fine-grained reactivity system. Let's look at an example:

<script lang="ts">
  type Todo = {
    done: boolean;
    text: string;
  };

  let todos = $state<Todo[]>([]);

  function remaining(todos: Todo[]) {
    console.log('recalculating');
    return todos.filter((todo) => !todo.done).length;
  }

  function addTodo(event: KeyboardEvent) {
    const target = event.target as HTMLInputElement;

    if (event.key !== 'Enter') return;

    todos.push({
      done: false,
      text: target.value
    });
    target.value = '';
  }
</script>

<input onkeydown={addTodo} />

{#each todos as todo}
  <div>
    <input bind:value={todo.text} />
    <input type="checkbox" bind:checked={todo.done} />
  </div>
{/each}

<p>{remaining(todos)} remaining</p>

In this example, editing the text of a to-do won't cause unrelated parts of the UI to update. This level of granular reactivity leads to more efficient and performant applications, especially as they scale.

Cleaner Component Structure

With snippets and the new prop system, Svelte 5 encourages a cleaner component structure. This helps keep components focused and easier to maintain, even as your application grows.

Predictable Side Effects

The $effect rune provides a more predictable and manageable way to handle side effects. It runs after the DOM has been updated and allows for easy cleanup, addressing many of the challenges faced with side effect management in larger applications.

What This Means for the Full Stack SvelteKit Course

By centering the course around Svelte 5, we're ensuring that the Full Stack SvelteKit course isn't just relevant today – it's setting you up for success in the future. We'll dive deep into how to leverage these new features to build scalable, maintainable, and performant applications.

You'll learn:

• How to harness the power of runes for crystal-clear reactivity

• Techniques for keeping your components slim and efficient with snippets

• Strategies for managing complex state that won't make your brain hurt

• Best practices for building large-scale applications with Svelte 5 and SvelteKit

Wrapping Up

Choosing Svelte 5 for our course wasn't just a decision – it's a statement. We're committed to providing you with the most up-to-date, practical, and future-proof knowledge in the Svelte ecosystem.

I'm incredibly excited about this journey we're about to embark on together. Svelte 5 is opening up new possibilities for what we can achieve with SvelteKit, and I can't wait to explore them with you in the Full Stack SvelteKit course.

Stay tuned for more updates, and as always, happy coding!