Why Svelte exists - See It in Action

Understanding Why Svelte Exists

📖 Scenario: You are learning about modern web development frameworks. You want to understand why Svelte was created and what problem it solves compared to other frameworks.

🎯 Goal: Build a simple Svelte component that explains why Svelte exists by showing a short message on the page.

📋 What You'll Learn

Create a Svelte component with a message variable

Add a configuration variable to control message visibility

Use Svelte's reactive syntax to show or hide the message

Complete the component with semantic HTML and accessibility

💡 Why This Matters

🌍 Real World

Understanding why Svelte exists helps you appreciate its design choices and how it improves web app performance and simplicity.

💼 Career

Knowing the motivation behind frameworks like Svelte is useful for frontend developers to choose the right tools and explain their choices to teams or clients.

1

DATA SETUP: Create a message variable

Create a Svelte component and declare a variable called message with the exact text: "Svelte exists to make web apps faster and simpler."

Svelte

// Declare the message variable
// Your code here

Need a hint?

Use let message = "..."; inside the <script> tag.

2

CONFIGURATION: Add a visibility flag

Add a boolean variable called showMessage and set it to true inside the <script> tag.

Svelte

  let message = "Svelte exists to make web apps faster and simpler.";
  // Add showMessage variable here
  // Your code here

Need a hint?

Declare let showMessage = true; inside the <script> tag.

3

CORE LOGIC: Use Svelte's if block to show the message

Use Svelte's {#if showMessage} block to display the message inside a <p> tag only when showMessage is true.

Svelte

  let message = "Svelte exists to make web apps faster and simpler.";
  let showMessage = true;

Need a hint?

Wrap the <p> tag with {#if showMessage} and {/if}.

4

COMPLETION: Add semantic and accessible HTML

Wrap the message inside a <main> tag and add an aria-label attribute with the value "Why Svelte exists message" to the <main> tag.

Svelte

  let message = "Svelte exists to make web apps faster and simpler.";
  let showMessage = true;


 with aria-label -->

Need a hint?

Use a <main> tag with aria-label="Why Svelte exists message" wrapping the if block.