Die Geschichte vom Neuaufbau des Tech-Stacks von Facebook

 (engineering.fb.com)
15 Punkte von xguru 2020-05-09 | 2 Kommentare | Auf WhatsApp teilen

Wie Facebook, das mit einfachem PHP begann, im Zuge des neuen Designs auf React + Relay (GraphQL) umgestellt wurde – und welche Erkenntnisse dabei gewonnen wurden.

Für CSS, JS, Daten und Navigation wurden jeweils Grundprinzipien für eine schnelle App angewendet:

  1. Nur die wirklich benötigten Ressourcen so schnell wie möglich übertragen

  2. Engineering-Erfahrung im Dienst der User Experience

CSS

  • Mit Atomic CSS wurde die CSS-Menge um 80 % reduziert und sichergestellt, dass kein unnötiges CSS heruntergeladen wird

  • Für Barrierefreiheit werden rem verwendet; um Fehler bei der manuellen Umwandlung von px in rem zu verringern, übernimmt das Build-Tool diese Konvertierung automatisch

  • Für Theming (Dark Mode) werden CSS-Variablen verwendet

  • Um Flackern zu vermeiden, werden Inline-SVGs verwendet (statt SVG-Dateien in img einzubinden). Dadurch lassen sich Farben auch zur Laufzeit ändern

JS

  • In drei Stufen aufgeteiltes JS wird schrittweise ausgeliefert

Tier 1. Ein Basis-Layout, damit beim Laden schnell ein UI-Skeleton sichtbar wird

Tier 2. JS, das nötig ist, um alle auf dem Bildschirm sichtbaren Inhalte vollständig zu rendern. Die Seite muss danach vollständig funktionsfähig sein, und selbst wenn nach Tier 2 weiterer Code geladen wird, darf sich das Layout nicht mehr verändern

Tier 3. Alles, was nach der Darstellung des Bildschirms benötigt wird: Logging-Code, Subscriptions für Echtzeit-Updates usw.

  • 500 KB JS wurden in 50 KB Tier 1, 150 KB Tier 2 und 300 KB Tier 3 aufgeteilt → dadurch sind Laden und erste Darstellung sehr schnell abgeschlossen

  • Durch die Aufteilung lässt sich bei A/B-Tests einstellen, dass beide Varianten nur den jeweils benötigten Code erhalten

  • Mithilfe von Relay-Funktionen zur Erstellung datengetriebener React-Apps wurde die Anwendung so geändert, dass je nach den abzurufenden Daten nur die benötigten Komponenten geladen werden

  • Einführung eines JS-Budget-Systems pro Produkt. Das Budget wird anhand von Performance-Zielen, technischen Einschränkungen und Produktanforderungen festgelegt. So wird verhindert, dass der Code mit der Zeit immer weiter anwächst

Data

  • Mit Relay wurde standardisiert, dass sämtliches Data Fetching über GraphQL erfolgt

  • Dank Relay werden bereits in der Phase der Seitenanfrage die zuerst benötigten Daten parallel heruntergeladen. So kann der Inhalt schneller angezeigt werden

  • Mit @stream, einer internen Erweiterung von GraphQL, können Daten wie etwa der News Feed in einer einzigen Query schrittweise übertragen werden, ohne mehrere Roundtrips

  • Mit @defer + React Suspense werden Daten, die nicht sofort benötigt werden, später geladen

Navigation

  • Für SPA-Navigation wurde eine Route Map aufgebaut, um beim Laden neuer Seiten Ladezeiten für Ressourcen und Roundtrips zu verringern

  • Route-Informationen werden bei Bedarf so früh wie möglich in aufgeteilter Form aus der Route Map geladen

  • Ressourcen werden, wenn möglich, frühzeitig prefetched (Prefetch bei Hover, Laden von Code und Daten bei Mouse-Down, Änderung des React-Status beim Klick)

  • Statt bei der Navigation zwischen Seiten einen leeren Bildschirm zu zeigen, wird mit React-Suspense-Transitions die bisherige Route weiter angezeigt, bis die neue Route geladen ist

  • Mit EntryPoints (kleine Dateien, die Code-Split-Punkte und Daten-Queries kapseln) werden Code- und Daten-Downloads parallelisiert

Verwandte Beiträge

2 Kommentare

 
xguru 2020-05-10

Was ich aus dem CSS des neuen Facebook-Designs gelernt habe: https://de.news.hada.io/topic?id=1819

Es ist gut, auch den Artikel dazu zu lesen.
 
xguru 2020-05-09

Relay – der produktionsreife GraphQL-Client für React https://relay.dev/