Seite 3: Vergleich von Updategeschwindigkeiten

Um die verschiedenen Netzwerkgeschwindigkeiten zu simulieren, verwendet das Beispiel das Netzwerk-Throttling des Google-Chrome-Browsers. Mit Netzwerk Throttling lässt sich simulieren, wie eine Website sich bei unterschiedlichen Netzwerkgeschwindigkeiten verhält.

Um dies selbst auszuprobieren, öffnen Entwicklerinnen und Entwickler zunächst die Browser Developer Tools und wählen dort im Netzwerk-Tab das Throttling-Menü mit dem gewünschten Throttling-Profil aus. Die Updategeschwindigkeit misst im Beispiel der benutzerdefinierte Hook useMeasureTime in der utils.ts-Datei:

import { useEffect, useState } from "react"

export const useMeasureTime = (props: { variableToChange?: number }) => {
  const [time, setTime] = useState<null | number>(null)
  const [timePassed, setTimePassed] = useState<null | number>(null)

  useEffect(() => {
    if (time === null) return

    const end = performance.now()
    setTimePassed(end - time)

    setTime(null)
  }, [props.variableToChange])

  const startMeasuringTime = (t: number) => setTime(t)

  return {
    timePassed,
    startMeasuringTime
  }
}

Der Hook misst mithilfe der JavaScript-Performance-API die Dauer zwischen der Ausführung der startMeasuring-Methode und der Änderung der variableToChange-Property. Als variableToChange verwendet er die Anzahl der Stars.

Die folgende Tabelle vergleicht die Updategeschwindigkeit eines optimistischen Updates mit einem herkömmlichen Update bei verschiedenen Netzwerkgeschwindigkeiten.

Tabelle: Vergleich optimistisches Update vs. Update mit Fast- und Slow-3G-Throttling-Profilen

Hier fällt sofort auf, dass unabhängig von der simulierten Netzwerkgeschwindigkeit optimistische Updates sofort erscheinen (drei Millisekunden). Im Vergleich dazu ist ein gewöhnliches Update deutlich langsamer als ein optimistisches. Der Unterschied verstärkt sich besonders bei langsamen Netzwerkgeschwindigkeiten.

Erheblicher Interaktivitätsgewinn

Optimistische Updates machen das UI somit für Nutzerinnen und Nutzer deutlich interaktiver. Dies fällt bereits bei normalen Netzwerkgeschwindigkeiten auf, verstärkt sich aber umso mehr, je langsamer die Geschwindigkeit ist. Diese deutliche Verbesserung ist mithilfe der Apollo Client Library mit wenig Aufwand zu erreichen. Die möglichen Edge Cases löst die Library dabei automatisch.

Wenn nicht bereits geschehen, empfiehlt es sich, als Entwicklungsteam das Optimistische-Updates-Pattern in die eigene Anwendung zu integrieren und damit den Kunden eine nahtlose Interaktivität zu ermöglichen – unabhängig davon, ob sie in einer Region mit einer langsamen Internetverbindung leben oder häufig Bahn fahren.

(mai)