Svelte 5 vs Svelte 4: A Comprehensive Comparison

This website is powered by ItGalaxy.io

In this article, we’ll explore the key differences between Svelte 5 and Svelte 4, focusing on reactivity, templating, component composition, and other core features. Svelte 5 introduces significant changes to reactivity with its new runes system while maintaining the simplicity and efficiency that Svelte is known for.

Table of Contents

  1. Reactivity
  2. Templating
  3. Component Composition
  4. Form Handling
  5. Lifecycle Management
  6. Context and State Management
  7. Web App Features

Reactivity

The most significant change in Svelte 5 is the introduction of runes for reactivity management.

Declaring State

Svelte 5

<script>
  let name = $state("John");
</script>

<h1>Hello {name}</h1>

Svelte 4

<script>
  let name = "John";
</script>

<h1>Hello {name}</h1>

Updating State

Svelte 5

<script>
  let name = $state("John");
  name = "Jane";
</script>

<h1>Hello {name}</h1>

Svelte 4

<script>
  let name = "John";
  name = "Jane";
</script>

<h1>Hello {name}</h1>

Computed State

Svelte 5

<script>
  let count = $state(10);
  const doubleCount = $derived(count * 2);
</script>

<div>{doubleCount}</div>

Svelte 4

<script>
  let count = 10;
  $: doubleCount = count * 2;
</script>

<div>{doubleCount}</div>

Templating

Basic Templates

Both versions maintain similar templating syntax:

Svelte 5 & 4

<h1>Hello world</h1>

Styling

CSS styling remains consistent across versions:

<h1 class="title">I am red</h1>
<button style="font-size: 10rem;">I am a button</button>

<style>
  .title {
    color: red;
  }
</style>

Loops

The iteration syntax remains unchanged:

<script>
  const colors = ["red", "green", "blue"];
</script>

<ul>
  {#each colors as color (color)}
    <li>{color}</li>
  {/each}
</ul>

Event Handling

Svelte 5

<script>
  let count = $state(0);

  function incrementCount() {
    count++;
  }
</script>

<p>Counter: {count}</p>
<button onclick={incrementCount}>+1</button>

Svelte 4

<script>
  let count = 0;

  function incrementCount() {
    count++;
  }
</script>

<p>Counter: {count}</p>
<button on:click={incrementCount}>+1</button>

Component Composition

Props

Props handling remains similar in both versions:

<UserProfile
  name="John"
  age={20}
  favouriteColors={["green", "blue", "red"]}
  isAvailable
/>

Event Emission

Svelte 5

<script>
  let isHappy = $state(true);

  function onAnswerNo() {
    isHappy = false;
  }

  function onAnswerYes() {
    isHappy = true;
  }
</script>

<AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />

Svelte 4

<script>
  let isHappy = true;

  function onAnswerNo() {
    isHappy = false;
  }

  function onAnswerYes() {
    isHappy = true;
  }
</script>

<AnswerButton on:yes={onAnswerYes} on:no={onAnswerNo} />

Form Handling

Text Input

Svelte 5

<script>
  let text = $state("Hello World");
</script>

<input bind:value={text} />

Svelte 4

<script>
  let text = "Hello World";
</script>

<input bind:value={text} />

Checkboxes

Svelte 5

<script>
  let isAvailable = $state(false);
</script>

<input type="checkbox" bind:checked={isAvailable} />

Svelte 4

<script>
  let isAvailable = false;
</script>

<input type="checkbox" bind:checked={isAvailable} />

Lifecycle Management

Component Mounting

Svelte 5

<script>
  let pageTitle = $state("");

  $effect(() => {
    pageTitle = document.title;
  });
</script>

Svelte 4

<script>
  import { onMount } from "svelte";
  let pageTitle = "";

  onMount(() => {
    pageTitle = document.title;
  });
</script>

Cleanup

Svelte 5

<script>
  let time = $state(new Date().toLocaleTimeString());

  $effect(() => {
    const timer = setInterval(() => {
      time = new Date().toLocaleTimeString();
    }, 1000);

    return () => clearInterval(timer);
  });
</script>

Svelte 4

<script>
  import { onDestroy } from "svelte";
  let time = new Date().toLocaleTimeString();

  const timer = setInterval(() => {
    time = new Date().toLocaleTimeString();
  }, 1000);

  onDestroy(() => clearInterval(timer));
</script>

Context and State Management

Context API

Svelte 5

<script>
  import { setContext } from "svelte";

  const user = createUserState({
    id: 1,
    username: "unicorn42"
  });

  setContext("user", user);
</script>

Svelte 4

<script>
  import { setContext } from "svelte";

  const userStore = createUserStore({
    id: 1,
    username: "unicorn42"
  });

  setContext("user", userStore);
</script>

Web App Features

Data Fetching

Svelte 5

<script>
  const response = useFetchUsers();
</script>

{#if response.isLoading}
  <p>Loading...</p>
{:else if response.error}
  <p>Error: {response.error}</p>
{:else}
  <ul>
    {#each response.users as user}
      <li>{user.name}</li>
    {/each}
  </ul>
{/if}

Svelte 4

<script>
  const { isLoading, error, data: users } = useFetchUsers();
</script>

{#if $isLoading}
  <p>Loading...</p>
{:else if $error}
  <p>Error: {$error}</p>
{:else}
  <ul>
    {#each $users as user}
      <li>{user.name}</li>
    {/each}
  </ul>
{/if}

Key Differences Summary

  1. Reactivity System

    • Svelte 5 introduces $state and $derived runes
    • Svelte 4 uses reactive declarations with $:

  2. Effects

    • Svelte 5 uses $effect for side effects
    • Svelte 4 uses lifecycle functions (onMount, onDestroy)

  3. Event Handling

    • Svelte 5 uses onclick style events
    • Svelte 4 uses on:click style events

  4. State Management

    • Svelte 5 simplifies state with runes
    • Svelte 4 relies on reactive assignments

Conclusion

Svelte 5 represents a significant evolution in Svelte’s reactivity system while maintaining the framework’s core principles of simplicity and efficiency. The introduction of runes provides a more explicit and intuitive way to handle state and side effects, though it may require some adjustment for developers familiar with Svelte 4’s reactive declarations.

Key considerations when choosing between versions:

  • Svelte 5

    • More explicit reactivity with runes
    • Simplified effect management
    • Modern event handling syntax
    • Better TypeScript integration

  • Svelte 4

    • Mature ecosystem
    • Familiar reactive declarations
    • Established patterns
    • Stable production usage

The choice between Svelte 5 and 4 often depends on project requirements and team familiarity. Svelte 5’s runes system offers a more intuitive approach to reactivity, while Svelte 4 provides a battle-tested solution with a mature ecosystem.





Decouvrez plus d’Offres de la plateform ItGalaxy.io :

Découvrez notre gamme complète de services et formations pour accélérer votre carrière.

1. Nous contactez

  • Description: Besoin de Formation et des Solutions cloud complètes pour vos applications
  • Links:

2. Infra as a Service

  • Description: Infrastructure cloud évolutive et sécurisée
  • Links:

3. Projets Développeurs

4. Développeurs

5. Formations Complètes

6. Marketplace

7. Blogs

This website is powered by ItGalaxy.io