Frontend einer interaktiven Webapplikation realisieren

Statische Seiten kennst du bereits. Jetzt bringst du Logik in den Browser: Du reagierst mit JavaScript auf Klicks und Eingaben, lädst Daten asynchron von einer REST-Schnittstelle und zeigst sie dynamisch an. Danach steigst du auf ein Komponenten-Framework wie React oder Vue um, zerlegst die Oberfläche in wiederverwendbare Bausteine und verwaltest den Zustand der Anwendung. Am Ende steht eine kleine Single-Page-Applikation mit mehreren Ansichten, Formularen und sauberer Fehlerbehandlung.

Das sind die Fähigkeiten, die am Ende des Moduls sitzen sollten. Jedes Ziel mit einem Beispiel aus dem Lehrbetrieb.

1. 1

   Die Seite mit JavaScript auf Benutzeraktionen reagieren lassen

   Kompetenz A

   Du wählst Elemente im DOM aus, hängst Event-Listener an und veränderst Inhalte, Klassen und Attribute. So entstehen Filter, aufklappbare Bereiche oder Live-Suchen ohne Neuladen der Seite.

   Situation

   Im Intranet einer Logistikfirma in Härkingen gibt es eine lange Telefonliste mit 400 Mitarbeitenden als HTML-Tabelle.

   Deine Aufgabe

   Baue ein Suchfeld, das die Tabelle während des Tippens filtert.

   Gutes Ergebnis

   Ein 'input'-Event-Listener liest den Suchbegriff, wandelt ihn in Kleinbuchstaben um und blendet jede Tabellenzeile aus, deren Name oder Abteilung den Begriff nicht enthält. Bei 0 Treffern erscheint der Text 'Keine Person gefunden'.

   DOMquerySelectoraddEventListenerEvent-ObjektclassListEvent-Delegation
2. 2

   Daten asynchron von einer REST-API laden und anzeigen

   Kompetenz B

   Du rufst mit fetch und async/await Endpunkte auf, wertest den HTTP-Status aus und wandelst die JSON-Antwort in eine Darstellung um. Dabei zeigst du einen Ladezustand und eine verständliche Meldung, wenn etwas schiefgeht.

   Situation

   Eine Gemeinde möchte auf ihrer Website die nächsten Abfuhrtermine anzeigen. Die Daten liegen in einer JSON-API unter /api/abfuhr?plz=5430.

   Deine Aufgabe

   Lade die Termine für die eingegebene Postleitzahl und zeige sie als Liste nach Datum sortiert.

   Gutes Ergebnis

   Eine async-Funktion ruft die API auf, prüft 'response.ok', sortiert die Einträge nach Datum und rendert sie als Liste ('Di, 14.10.: Karton'). Während des Ladens erscheint 'Termine werden geladen...', bei Status 404 'Für diese PLZ gibt es keine Daten'.

   fetchPromiseasync / awaitJSONHTTP-StatuscodesCORS
3. 3

   Die Oberfläche in wiederverwendbare Komponenten zerlegen

   Kompetenz C

   Du erkennst wiederkehrende Teile einer Oberfläche und baust daraus Komponenten mit klar definierten Eingaben (Props). Eine Komponente ist für genau einen Teil der Anzeige zuständig und lässt sich an mehreren Orten einsetzen.

   Situation

   Ein Detailhändler mit 25 Filialen baut eine interne App, in der Filialleitende Bestellungen beim Zentrallager auslösen.

   Deine Aufgabe

   Zerlege die Bestellmaske in Komponenten.

   Gutes Ergebnis

   Komponenten 'ArtikelSuche', 'ArtikelKarte' (Props: Name, Preis in CHF, Bestand), 'Bestellliste' und 'BestellZusammenfassung'. Die ArtikelKarte wird in der Suche und in den Favoriten wiederverwendet.

   KomponentePropsJSX bzw. TemplateKomponentenbaumWiederverwendung
4. 4

   Den Zustand der Anwendung gezielt verwalten

   Kompetenz C

   Du entscheidest, wo ein Wert gespeichert wird: lokal in einer Komponente oder weiter oben, damit mehrere Komponenten ihn teilen. Änderungen am Zustand lösen automatisch ein Neuzeichnen der betroffenen Teile aus.

   Situation

   In der Filial-Bestell-App soll die Anzahl Artikel im Warenkorb oben in der Kopfzeile angezeigt werden, während man unten Artikel hinzufügt.

   Deine Aufgabe

   Sorge dafür, dass Kopfzeile und Bestellliste immer denselben Stand anzeigen.

   Gutes Ergebnis

   Der Warenkorb liegt als State in der gemeinsamen Elternkomponente. 'hinzufuegen(artikel)' wird als Funktion an die ArtikelKarten übergeben. Kopfzeile und Liste lesen denselben State und zeigen sofort '3 Positionen, CHF 412.50'.

   StateuseState / refState nach oben hebenunveränderliche Updatesabgeleitete Werte
5. 5

   Formulare validieren und Daten an eine API senden

   Kompetenz D

   Du prüfst Eingaben schon im Browser, zeigst Fehler direkt beim betroffenen Feld an und sendest gültige Daten per POST oder PUT an das Backend. Fehlermeldungen vom Server stellst du ebenfalls verständlich dar.

   Situation

   Die Spitex Region Baden erfasst Einsatzrapporte bisher auf Papier. Neu sollen Pflegende sie im Browser auf dem Tablet ausfüllen.

   Deine Aufgabe

   Baue das Formular mit Klient-Nr., Datum, Start- und Endzeit sowie Leistungen und sende es an /api/rapporte.

   Gutes Ergebnis

   Die Endzeit muss nach der Startzeit liegen, sonst erscheint 'Endzeit liegt vor Startzeit' unter dem Feld. Der Speichern-Button ist während des Sendens deaktiviert. Antwortet der Server mit 400, werden seine Feldfehler beim jeweiligen Feld angezeigt.

   kontrollierte Eingabenclientseitige ValidierungPOST / PUT mit JSONFehlerdarstellungDoppelklick-Schutz
6. 6

   Eine Single-Page-Applikation mit Routing aufbauen und ausliefern

   Kompetenz E

   Du richtest mit Vite ein Projekt ein, verteilst die App auf mehrere Ansichten mit eigenen URLs und erstellst einen optimierten Build. Konfigurationswerte wie die API-Adresse hältst du in Umgebungsvariablen.

   Situation

   Die Filial-Bestell-App braucht die Ansichten Artikel, Warenkorb, Bestellhistorie und Detail einer Bestellung.

   Deine Aufgabe

   Richte Routing ein, sodass jede Ansicht eine eigene URL hat und die Detailansicht die Bestellnummer aus der URL liest.

   Gutes Ergebnis

   Routen '/artikel', '/warenkorb', '/bestellungen' und '/bestellungen/:id'. Der Zurück-Button des Browsers funktioniert. 'npm run build' erzeugt einen dist-Ordner, die API-URL kommt aus der Datei .env.production.

   Single-Page-ApplicationClient-RoutingRoutenparameterVite / npm-ScriptsUmgebungsvariablenBuild

Die Kompetenzmatrix zerlegt das Modul in Themenstränge und drei Stufen. Für den Kompetenznachweis solltest du überall mindestens Stufe 2 erreichen. Dein Stand bleibt in diesem Browser gespeichert und färbt Lernweg und Übungen ein.

Lorena ist im 2. Lehrjahr als Informatikerin Applikationsentwicklung bei der Linguaplus Sprachschulen AG in St. Gallen, die mit 60 Mitarbeitenden Sprachkurse an vier Standorten anbietet. Der Kurskatalog ist heute ein PDF mit über 300 Kursen, und Anmeldungen kommen per E-Mail. Das Backend-Team hat eine REST-API gebaut, und Lorena soll das Frontend dafür entwickeln.

1. Kapitel 1

   Suchen, während man tippt

   Lorena baut zuerst einen Prototyp in reinem JavaScript mit einer Kursliste und einer Live-Suche. Bei jedem Tastendruck wird die ganze Liste mit 300 Kursen neu aufgebaut, und die Seite ruckelt spürbar. Sie verzögert die Suche mit einem Debounce von 250 Millisekunden und behandelt Klicks auf die Kurskarten über einen einzigen Listener mit Event-Delegation. Danach reagiert die Suche flüssig, auch auf einem älteren Laptop.

   Ziel 1

2. Kapitel 2

   Die API antwortet nicht immer

   Beim ersten fetch auf /api/kurse zeigt die Konsole einen CORS-Fehler, weil die API auf einem anderen Port läuft, was Lorena mit einem Proxy in der Vite-Konfiguration löst. Sie ergänzt einen Ladeindikator, den Leerzustand "Keine Kurse gefunden" und eine Fehlermeldung mit Knopf zum erneuten Versuchen. Beim schnellen Tippen erscheinen manchmal veraltete Ergebnisse, weil eine langsame Antwort eine schnellere überholt. Mit einem AbortController bricht sie die alte Anfrage ab, sobald eine neue startet.

   Ziel 2

3. Kapitel 3

   Umzug nach React

   Lorena zeichnet einen Komponentenbaum mit KursSuche, FilterLeiste, KursListe und KursKarte und setzt ihn in React um. Zuerst liegt der Filterzustand für Sprache, Niveau und Wochentag in der FilterLeiste, doch die KursListe braucht ihn ebenfalls. Sie hebt den State in die gemeinsame Elternkomponente und gibt ihn per Props weiter. Zusätzlich schreibt sie die Filter in die URL, damit das Marketing gefilterte Links in Newslettern verschicken kann.

   Ziel 3Ziel 4

4. Kapitel 4

   Anmelden ohne Frust

   Das Anmeldeformular fragt Name, E-Mail, Geburtsdatum und eine Selbsteinschätzung des Niveaus ab und prüft unter anderem das Mindestalter von 16 Jahren. Im Test klickt eine Kollegin zweimal auf Senden und ist danach doppelt angemeldet. Lorena deaktiviert den Button während des Sendens und zeigt einen Hinweis an. Meldet der Server den Status 409 für einen ausgebuchten Kurs, erscheint eine klare Meldung mit Link zur Warteliste.

   Ziel 5

5. Kapitel 5

   Live auf dem Webserver

   Lorena richtet mit React Router die Routen /kurse, /kurse/:id und /kurse/:id/anmelden ein und erzeugt mit Vite einen Build von 180 KB. Auf dem Nginx-Testserver liefert ein direkter Link auf /kurse/42 einen Fehler 404. Sie konfiguriert einen Fallback auf index.html und hinterlegt die API-Adresse über VITE_API_URL, damit Test und Produktion getrennt bleiben. In der Demo vor dem Marketing funktionieren Suche, Filter, Anmeldung und geteilte Links auf Anhieb.

   Ziel 6

1. 1

   Modernes JavaScript auffrischen

   ca. 4 Std.

   Du festigst die Sprachgrundlagen, die du im Frontend ständig brauchst: Arrow-Functions, Destructuring, Template-Strings und Array-Methoden.

   • Eine Liste von 20 Produkten mit map, filter und reduce auswerten
   • Code aus einem alten Tutorial mit var und function auf const, let und Arrow-Functions umschreiben
   • Im Debugger der DevTools Breakpoints setzen und Variablen beobachten

   Trainiert Kompetenz A1

   Lernziel1

2. 2

   DOM und Events

   ca. 4 Std.

   Du baust interaktive Elemente direkt mit JavaScript, ohne Framework, damit du verstehst, was Frameworks später für dich übernehmen.

   • Eine Live-Suche und eine Akkordeon-Navigation umsetzen
   • Eine To-do-Liste mit Hinzufügen, Abhaken und Löschen per Event-Delegation bauen

   Trainiert Kompetenz A1A2

   Lernziel1

3. 3

   Asynchrone Daten aus APIs

   ca. 5 Std.

   Du lernst Promises und async/await und rufst echte öffentliche APIs auf, z.B. die Fahrplan-API transport.opendata.ch.

   • Die nächsten Abfahrten einer Haltestelle laden und anzeigen
   • Lade- und Fehlerzustände gezielt provozieren, z.B. mit 'Offline' im Network-Tab
   • Im Network-Tab Request, Statuscode und Antwort analysieren

   Trainiert Kompetenz B1B2B3

   Lernziel2

4. 4

   Einstieg ins Framework

   ca. 6 Std.

   Du setzt ein Vite-Projekt mit React oder Vue auf und baust die ersten Komponenten mit Props und lokalem State.

   • Die Fahrplan-App aus dem letzten Schritt in Komponenten zerlegen
   • Einen Komponentenbaum auf Papier skizzieren und festlegen, wo welcher State liegt
   • React DevTools bzw. Vue DevTools installieren und Props live untersuchen

   Trainiert Kompetenz C1C2

   Lernziel34

5. 5

   Formulare und Datenänderungen

   ca. 5 Std.

   Du baust Erfassungs- und Bearbeitungsmasken, validierst Eingaben und schickst Daten an ein Backend, z.B. einen lokalen json-server.

   • Mit json-server eine Fake-API für Kunden aufsetzen
   • Ein Formular zum Erfassen und Bearbeiten von Kunden mit Validierung umsetzen
   • Serverfehler simulieren und die Anzeige im Formular testen

   Trainiert Kompetenz D1D2B2

   Lernziel52

6. 6

   Mini-SPA mit Routing

   ca. 6 Std.

   Du verbindest alles zu einer kleinen Applikation mit mehreren Ansichten und erstellst einen Produktions-Build.

   • Liste, Detail und Bearbeiten als eigene Routen umsetzen
   • Build erstellen und auf Netlify oder einem lokalen Webserver testen
   • Die App einer Kollegin vorführen und ihre Bedienprobleme notieren

   Trainiert Kompetenz E1E2C3

   Lernziel634

DOM

Document Object Model: Baumstruktur der Seite im Browser, die per JavaScript gelesen und verändert werden kann.

Event

Ereignis wie Klick, Tastendruck oder Formularabsendung, auf das ein Programm reagiert.

Promise

Objekt, das das spätere Ergebnis einer asynchronen Operation darstellt.

REST-API

Schnittstelle, über die Ressourcen mit HTTP-Methoden wie GET, POST, PUT und DELETE gelesen und geändert werden.

Komponente

Wiederverwendbarer Baustein der Oberfläche mit eigener Darstellung und Logik.

State

Daten, die sich während der Nutzung ändern und die Anzeige bestimmen.

Single-Page-Application

Webapplikation, die einmal geladen wird und Ansichten danach im Browser wechselt, ohne die ganze Seite neu zu laden.

Build

Vorgang, bei dem Quellcode in optimierte Dateien für den Betrieb umgewandelt wird.

Passende Module