Hands-on with the Svelte JavaScript framework

<script>
  const mindBendingMovies = [
    { id: 1, title: "Inception", director: "Christopher Nolan", year: 2010, themes: ["dream manipulation", "layered reality", "subconscious trauma"] },
    { id: 2, title: "Time Bandits", director: "Terry Gilliam", year: 1981, themes: ["time travel", "chaos vs order", "childhood imagination"] },
    { id: 3, title: "Fantastic Planet", director: "René Laloux", year: 1973, themes: ["alien societies", "subjugation", "transcendence"] },
    { id: 4, title: "Naked Lunch", director: "David Cronenberg", year: 1991, themes: ["hallucination", "addiction", "subversion of reality"] },
    { id: 5, title: "Waking Life", director: "Richard Linklater", year: 2001, themes: ["lucid dreaming", "philosophy", "existentialism"] }
  ];
</script>

<style>
  /* Styles hidden for brevity */
</style>

<div class="container">
  <h1>Weird Movie List</h1>

  <ul class="movie-list">
    {#each mindBendingMovies as movie (movie.id)}
      <li class="movie-item">
        <div class="movie-title">{movie.title}</div>
        <div class="movie-director">Directed by {movie.director} ({movie.year})</div>
        <div class="movie-themes">
          {#each movie.themes as theme}
            <span>{theme}</span>
          {/each}
        </div>
      </li>
    {/each}
  </ul>
</div>

The first thing to notice about the page is how minimalist it is. The three sections—script, style, and markup—represent each essential aspect of the UI. This page will become a Svelte component, with those elements driving its behavior.

Here’s a look at the page so far:

Matthew Tyson

The only script we need right now is the definition of the mindBendingMovies array. We loop over the array in the markup: {#each mindBendingMovies as movie (movie.id)}. The relevant contents are displayed using the exposed iterator variable, movie.