Front-End-Entwicklung: Ladezustände werden zur eigenen Aufgabe

CSS-Tricks beschreibt in einem Beitrag vom 28. November 2018, warum Front-End-Teams die Ladeerfahrung clientseitig gerenderter Anwendungen als eigene Entwicklungsaufgabe behandeln müssen. Eine Seite kann technisch schnell reagieren und trotzdem unfertig wirken, wenn Inhalte nacheinander eintreffen oder Bedienelemente abrupt verschoben werden.

Zum technischen Umfeld gehören laut dem Beitrag Render-Blocking, asynchrone Datenabrufe, Service Worker, Bilder, Schriften und JavaScript. Besonders bei Anwendungen, die zunächst ein leeres Dokument laden und danach Inhalte über Programmierschnittstellen anfordern, entscheidet die Reihenfolge der Antworten über den sichtbaren Aufbau der Oberfläche. Die Frage betrifft damit nicht nur Serverzeiten, sondern auch die Darstellung im Browser.

React Suspense und kontrollierte Ladezustände

Als Beispiel verweist der Beitrag auf React Suspense sowie auf Vorträge von Dan Abramov und Andrew Clark. Der Vortrag zu React Suspense zeigt Platzhalterkomponenten, Zwischenspeicherung und Datenabrufe als Bestandteile einer kontrollierten Ladeanzeige. Ein kurzer Spinner, der erst nach einer Verzögerung erscheint, kann dabei sinnvoller sein als ein sofort sichtbares Symbol bei jedem einzelnen Abruf.

https://www.youtube.com/watch?v=nLF0n9SACd4

Für Webanwendungen und Werkzeuge aus dem Entwicklungsumfeld ist diese Trennung wichtig: Der Browser soll seine Stärken beim Laden von Dokumenten nutzen, während das Front-End den Zustand der nachgeladenen Daten sichtbar macht. Der Ansatz berührt damit dieselbe praktische Ebene wie die Angular- und JavaScript-Unterstützung in WebStorm 2018.3 und die in Unity WebGL dokumentierte Arbeit an kürzeren Ladezeiten.

Bei interaktiven Anwendungen ist die Ladeanzeige Teil der Bedienung. Das betrifft auch Werkzeuge für Spieleentwicklung, Launcher und Weboberflächen rund um digitale Dienste. Der ältere Unity-WebGL-Vergleich zu WebAssembly und asm.js zeigt, dass Laufzeit und Ladeverhalten bereits auf Plattformebene zusammen betrachtet wurden. CSS-Tricks ergänzt diese technische Perspektive um die Gestaltung des sichtbaren Zustands während eines Abrufs.

Weitere News

Weitere News

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein