Svelte-Features, die du kennen solltest!

enterJS 2026 | Nils Röhrig

Zu meiner Person

Nils Röhrig, 40
Svelte-Nutzer seit 2019
Hauptberuflich Software Engineer @ Loql
Nebenberuflich Speaker, Trainer & Autor

Agenda

Was ist neu seit Svelte 5?
Wie nutze ich die Neuerungen?
Wo lohnt sich SvelteKit am meisten?

Johann »Schäng« Jupp

Kölsches Orgenal
Inhaber und Wirt der »Veedelsweetschaff«
Traditionsbewusst
Progressiv

Kölsch vom Fass – gebracht von Köbesen und Köbinen

Regionale Küche – traditionelle Hausmannskost

Rheinische Gastfreundschaft – Jede*r ist willkommen

Website

Mehr Gäste gewinnen

Tischreservierung

Speisekarte präsentieren

Website

Statisch gerendert

Dynamisch gerendert

Form Action

Demo der Website

Prerendering der Startseite

Rezeptdetails
»Himmel un Ääd«

Tischreservierung

Drei Anwendungsfälle

Die Startseite

Rein statisches Markup
Keine load-Funktion
HTML beim Build wird beim Build erstellt

// src/routes/+page.ts
export const prerender = true;

<!-- src/routes/+page.svelte (Auszug) -->
<section class="hero is-veedel is-large">
  <h1 class="title is-1">Veedelsweetschaff</h1>
  <p class="subtitle is-4">Et kölsche Orgenal – Hätzlich Wellkumme!</p>
  <!-- … -->
</section>

Rezeptdetails »Himmel un Ääd«

load() sammelt Daten und baut das ViewModel
getMenuItemBySlug() läd Rezeptdetails aus der DB
marked() übersetzt Markdown in HTML
Das ViewModel steh als Prop data auf der Seite bereit

// src/lib/server/db/menu.ts
export async function getMenuItemBySlug(db: Db, slug: string) {
  return db.query.menuItems.findFirst({
    where: (items, { eq }) => eq(items.slug, slug),
    with: { section: true }
  });
}

// src/routes/speisen/[slug]/+page.server.ts
export const load = async ({ params, platform }) => {
  const item = await getMenuItemBySlug(db, params.slug);
  if (!item) error(404, '…');
  return { 	item, 
  			beschreibungHtml: await marked(item.beschreibung) 
         };
};

Tischreservierung

use:enhance für
Progressive Enhancement
fail() für behebbare Formularfehler
error() für Abbruchfehler
POJO mit Bestätigung im Erfolgsfall

<!-- src/routes/reservierung/+page.svelte (Auszug) -->
<form method="POST" use:enhance>
  {#if form?.availabilityError}
    <div class="notification is-danger">
      {form.availabilityError}
    </div>
  {/if}
  <!-- … Felder … -->
</form>

// src/routes/reservierung/+page.server.ts (Auszug)
if (Object.keys(fieldErrors).length > 0)
  return fail(422, { fieldErrors, values });
if (slotDate <= new Date())
  error(400, 'Zeitpunkt in der Vergangenheit.');
if (tablesAvailable < tablesNeeded)
  return fail(409, { availabilityError: '…' });

// ...

return { success: true, confirmation: { ... }}

Schängs Wünsche

Wetter bei Reservierung (Biergarten)
Sterne-Rating auf Speisekarte & Detail
Tooltips für Mundartbegriffe

Wetter-Informationen

Delegation an externes Wetter-API i.F.v. fetchWeatherForDate
Definition der Remote Function getWeatherForecast (Typ Query)
await Expression und Aufruf der Query in einer Komponente
Async-Handling mit
einer <svelte:boundary>

// src/routes/reservierung/weather.remote.ts (Auszug)
import { query } from '$app/server';
// ...
export const getWeatherForecast = 
	query(dateSchema, async (date) => {
  		return fetchWeatherForDate(date);
	});

<!-- src/lib/components/WeatherForecast.svelte (Auszug) -->
<input type="date" bind:value={date} />
{#key date}
  <svelte:boundary>
    {#snippet pending()}
    	Wettervorhersage wird geladen…
    {/snippet}
    {@const forecast = await getWeatherForecast(date)}
    {#if forecast}<div>{forecast.summary}</div>{/if}
  </svelte:boundary>
{/key}

Wetter-Informationen

Sterne-Rating

Rating aktualisieren mit upsertRating
Definition der Remote Functions
submitRating (Typ Command) und getRating (Typ Query)
Erneute Ausführung von getRating im Erfolgsfall mit requested

// src/routes/speisen/ratings.remote.ts (Auszug)

import { 
  query, command, requested 
} from '$app/server';

// ...

export const submitRating = command(
  submitRatingSchema, 
  async (input) => {
    const result = await upsertRating(...);
    await requested(getRating, 1).refreshAll();
    return result;
  });

export const getRating = query(...);

Optimistisches Update via .updates()
Wiederverwendbare StarRating-Komponente
Nutzbar auf Speisekarte + Detailseite

<!-- src/lib/components/StarRating.svelte (Auszug) -->
<script>
  async function rate(star: number) {
    submitting = true;
	  try {
	    await submitRating(...).updates(
		  getRating(...)
            .withOverride(
              (current) => optimisticRating(current, star)
            )
        );
      } finally {
        submitting = false;
      }
  }
</script>

<button
  type="button"
  aria-label="{star} von 5 Sternen"
  onclick={() => rate(star)}
  >★</button>

Sterne-Rating

Tooltips für Mundartbegriffe

Zentrales Glossar mit Übersetzungen
Anwendung via Definition des Attachments dialectTooltip
Anwendung via {@attach dialectTooltip} auf Begriffen

// src/lib/attachments/dialect-tooltip.ts
export const dialectTooltip: Attachment = (element) => {
  const explanation = lookupGlossary(nodeText(element));
  if (!explanation) return;
  return tooltip(explanation)(element);
};

<span class="dialect-term" {@attach dialectTooltip}>
	Veedel
</span>

Demo der Website nach den Änderungen

Ein paar Wochen später

Schäng ist sehr zufrieden mit den Ergebnissen
Der Biergarten ist bei passendem Wetter immer gut besucht
Das Feedback der Gäste ist durchweg positiv

Schäng gibt es leider nicht

Die Veedelsweetschaff auch nicht
Köln ist trotzdem einen Besuch wert
Wichtiger ist aber, was wir heute besprochen haben

Boundaries

<svelte:boundary>
	<p>{await delayed(...)}</p>

	{#snippet pending()}...{/snippet}
    {#snippet failed()}...{/snippet}
</svelte:boundary>

»Einzäunung« bestimmer Programmteile zur Behandlung unterliegender Rendering-Fehler

Darstellung von Ladezuständen
unterliegender Await Expressions

Ungeeignet für die Behandlung von Fehlern außerhalb des Renderings (z.B. Event-Handler)

Await Expressions

<script>
  let derived = $derived(await asyncStuff());
  
  async function doAsyncWork() { ... };
</script>

<p>{await doAsyncWork()}</p>

Nutzung des await-Keywords in Top-Level-Script einer Komponente

Nutzung des await-Keywords im Template einer Komponente

Sollte durch eine Boundary eingezäunt sein

Remote Functions

// someFunctions.remote.js
import {  query, command } 
	from "$app/server";

export const getSomething = query(
  async () => { ... }
);

export const doSomething = command(
  z.string().min(1), (str) => {...}
);

// ...later
await getSomething().refresh();
await doSomething().updates(
  getSomething().withOverride(...)
);

Nutzung überall möglich: Komponenten, Seiten, andere Module, ...

Queries sind reaktiv und können aktualisiert oder optimistisch überschrieben werden

Argumente können durch Standard-Schema validiert werden (Zod, Valibot, ...)

Attachements

<script>
  function attachment(nodeOrComponent) {
    if (nodeOrComponent instanceof Element) { 
      doNodeStuff(); }
    else {
      doComponentStuff(); }
  
    return () => cleanStuffUp()
  }
</script>

<p {@attach attachement}>Some Text</p>
<Component {@attach attachement} />

Ersatz für Svelte Actions und use:-Direktive

Können sowohl auf Komponenten als auch auf DOM-Elemente angewendet werden

Werden bei Aktualisierung reaktiver Abhängigkeiten erneuert

Vielen Dank!

Bluesky:

LinkedIn:

E-Mail:

nilsroehrig

info@nilsroehrig.de

@nilsroehrig.dev

Namensnennung / Attribution

Generiert mit ChatGPT

Image by rawpixel.com on Magnific

Lucide Icons

ISC License

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

The following Lucide icons are derived from the Feather project:

airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out

The MIT License (MIT) (for the icons listed above)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.