Modul 11a: Mit Svelte starten

lock
Bevorstehend

Baue deine erste interaktive App mit Svelte - dem einsteigerfreundlichsten Framework

Ziele dieses Moduls
  • Sie koennen eine einfache interaktive Web-App mit Svelte erstellen und verstehen reaktive Programmierung
    Kreieren

Svelte ist anders als andere Frameworks: Es kompiliert deine App zur Build-Zeit, was sie super schnell macht. Der Code ist einfach und intuitiv - perfekt fĂĽr Einsteiger!

Warum Svelte?

Vorteile:

  • âś… Sehr einfache Syntax - HTML, CSS und JS in einer Datei
  • âś… Keine komplexe Build-Setup nötig (mit REPL)
  • âś… Sehr performant (kompiliert zu purem JavaScript)
  • âś… Kleinere App-Grösse als React/Vue

Wo wird Svelte verwendet? The New York Times, Apple, Spotify, und viele moderne Startups.

Schritt 1: Svelte REPL erkunden

Ă–ffne svelte.dev/repl - das ist ein Online-Editor, wo du sofort loslegen kannst (ohne Installation!).

Eine einfache Svelte-Komponente:

<script>
  let name = 'Welt';
  let count = 0;

  function increment() {
    count = count + 1;  // Svelte aktualisiert UI automatisch!
  }
</script>

<h1>Hallo {name}!</h1>
<p>Du hast {count} mal geklickt.</p>
<button on:click={increment}>+1</button>

<style>
  h1 {
    color: #ff3e00;
  }
  button {
    padding: 10px 20px;
    font-size: 16px;
  }
</style>

Das Besondere an Svelte:

  • Reaktivität: Wenn sich count ändert, aktualisiert Svelte automatisch das UI
  • Alles in einer Datei: HTML, CSS, JS zusammen (wie bei Vue)
  • Event-Handling: on:click={function} statt onclick
  • Interpolation: {variable} statt {{variable}}

Challenge

Projekt: Meine Lieblingsfilme-App

Baue eine App, wo du Filme verwalten kannst:

Features:

  • Liste von Filmen anzeigen (Titel, Jahr, Genre)
  • Film hinzufĂĽgen (Formular)
  • Film löschen (Button bei jedem Film)
  • Nach Genre filtern (Dropdown oder Buttons)
  • Responsive Design (dein CSS-Wissen!)

Starter-Daten: Beginne mit 5 Filmen hardcoded, später kannst du neue hinzufügen.

<script>
  let movies = [
    { id: 1, title: 'Inception', year: 2010, genre: 'Sci-Fi' },
    { id: 2, title: 'The Matrix', year: 1999, genre: 'Sci-Fi' },
    { id: 3, title: 'Pulp Fiction', year: 1994, genre: 'Crime' },
  ];

  let newTitle = '';
  let newYear = '';
  let newGenre = 'Sci-Fi';
  let filterGenre = 'Alle';

  function addMovie() {
    if (newTitle && newYear) {
      movies = [...movies, {
        id: Date.now(),
        title: newTitle,
        year: parseInt(newYear),
        genre: newGenre
      }];
      newTitle = '';
      newYear = '';
    }
  }

  function deleteMovie(id) {
    movies = movies.filter(m => m.id !== id);
  }

  $: filteredMovies = filterGenre === 'Alle' 
    ? movies 
    : movies.filter(m => m.genre === filterGenre);
</script>

<h1>Meine Lieblingsfilme</h1>

<div class="filter">
  <label>
    Genre: 
    <select bind:value={filterGenre}>
      <option>Alle</option>
      <option>Sci-Fi</option>
      <option>Crime</option>
      <option>Drama</option>
    </select>
  </label>
</div>

<div class="movies">
  {#each filteredMovies as movie (movie.id)}
    <div class="movie-card">
      <h3>{movie.title}</h3>
      <p>{movie.year} • {movie.genre}</p>
      <button on:click={() => deleteMovie(movie.id)}>Löschen</button>
    </div>
  {/each}
</div>

<form on:submit|preventDefault={addMovie}>
  <h2>Film hinzufĂĽgen</h2>
  <input bind:value={newTitle} placeholder="Titel" required>
  <input bind:value={newYear} type="number" placeholder="Jahr" required>
  <select bind:value={newGenre}>
    <option>Sci-Fi</option>
    <option>Crime</option>
    <option>Drama</option>
  </select>
  <button type="submit">HinzufĂĽgen</button>
</form>

<style>
  /* Dein CSS hier! Nutze Grid fĂĽr die Film-Cards */
</style>

Note

Svelte-Spezialitäten im Code:

  • {#each} - Loop ĂĽber Arrays
  • bind:value - Two-way Data Binding (Input ↔ Variable)
  • $: - Reactive Statement (wird automatisch neu berechnet)
  • on:submit|preventDefault - Event + Modifier

Tutorial: Arbeite das offizielle Svelte-Tutorial durch: learn.svelte.dev (ca. 1-2 Stunden)