Das sind die wichtigsten Neuerungen des Facebook Tech Stacks

Seit Mai gibt es eine neue Version von Facebook. Dabei wurde das gesamte Frontend umfangreich geändert. Das hat Facebook unter anderem mit der JavaScript Library React und dem dafür entwickelten GraphQL Client Relay getan. Das Ziel der neuen Version ist es, Facebook schneller sowie auch interaktiver zu gestalten. Dabei war die Priorität jene, eine nachhaltige Lösung für viele Jahre zu entwickeln.

Facebook legte dabei großen Wert darauf, dass der neue Tech Stack Usern am Frontend eine generell bessere Erfahrung bietet. Um dieses Ziel zu erreichen, wurden 4 Kernelemente verändert. Welche das sind, erfährst Du natürlich hier bei uns.

CSS neu gedacht

Insbesondere CSS wurde im neuen Facebook maßgeblich verändert. So wurde beim alten Facebook bereits beim Aufrufen der Startseite etwa 400 kB komprimiertes und 2 MB unkomprimiertes CSS geladen. Nur 10 % davon sind für das erste Rendering verwendet worden. Mit jedem neuen Feature kam auch mehr CSS hinzu. Nur relativ selten wurde es wieder weniger. Facebook suchte nach einer Lösung und hat diese auch gefunden.

Denn beim neuen Facebook Tech Stack verwendet das Unternehmen nun Atomic CSS. Damit können Module wiederverwertet und das gesamte System somit schlanker gestaltet werden. Mit Atomic CSS hat Facebook im neuen Tech Stack eine Lösung gefunden, mit der alle CSS der gesamten Seite in einem einzigen geteilten Style Sheet kombiniert werden können. 

Das Resultat? Es werden etwa 80 % weniger CSS im Gegensatz zum alten Facebook beim Aufrufen der Startseite geladen. Somit gestaltet sich der gesamte Prozess schneller und es kann in weiterer Folge eine bessere Nutzererfahrung geboten werden.

Änderungen bei JavaScript

SVG

Im alten Facebook war es so, dass SVGs in <img> Tags verwendet worden sind. Sollten Symbole erst nach dem Laden der restlichen Seite angezeigt worden sein, dann dies zumeist nicht direkt vollständig. Das wurde bei der neuen Facebook Version vom Entwicklerteam verändert. Denn im neuen Tech Stack verwenden die SVGs statt den <img> die effizienteren <svg> Tags und werden somit gemeinsam mit dem restlichen Content sofort angezeigt. 

Obwohl manche Komponenten dadurch eventuell eine etwas längere Ladezeit haben, werden Symbole mit dieser Lösung direkt und ohne Probleme visualisiert. Dadurch soll die Nutzererfahrung deutlich verbessert werden. 

Code-Splitting

Das ist aber nicht das einzige, was das Facebook Development Team in JavaScript geändert hat. Denn in weiterer Folge wurde auch die Größe des Codes schlanker und somit nutzerfreundlicher gestaltet. Denn diese ist natürlich auch eng mit den Ladezeiten unterschiedlicher Inhalte verbunden.

Facebook verwendete dabei den Grundsatz: As little as possible, as early as possible.

Um das zu erreichen, wurden einige neue APIs implementiert. Facebook greift dabei auf ein Code-Splitting System zurück. Das für den ersten Ladevorgang notwendige JavaScript wird dabei in drei unterschiedliche Stufen unterteilt. 

Tier 1:

Tier 1 umfasst das Layout aller Inhalte, die danach angezeigt werden sollen. Das ist im Grunde genommen das Skelett der Webseite. 

Hier wird folgender Source Code verwendet: 

import ModuleA from 'ModuleA';

Tier 2:

Im Tier 2 ist das JavaScript enthalten, das notwendig ist, um den gesamten Content zu rendern. Wenn der Nutzer in diesem Schritt keine Interaktion ausführt, dann finden auch keine Änderungen auf der Seite statt. Sollte der Nutzer bereits in diesem Schritt mit der Webseite interagieren, wird der darauffolgende Schritt mittels einem Skelett dargestellt. Der Nutzer bekommt also direktes Feedback.

Der hier angewandte Code gestaltet sich folgendermaßen: 

importForDisplay ModuleBDeferred from 'ModuleB';

Tier 3:

Tier 3 umfasst dann schließlich alle Inhalte, die erst nach den wichtigsten Anzeigen gebraucht werden und die aktuellen Pixel am Bildschirm nicht beeinflussen. Dazu gehören auch der Logging-Code sowie etwaige Abonnements für Live-Aktualisierungsdaten von Usern.

Hier wird der Code "importForAfterDisplay" verwendet. Alle damit gekennzeichneten Codes werden erst im dritten Schritt des Prozesses ausgeführt. 

Das Ergebnis dieses innovativen Stufensystems? Die Facebook Webseite wird schneller gerendert und somit auch geladen. Das verbessert natürlich in erster Linie die Nutzererfahrung. Denn diese können anschließend auch schneller mit der Webseite interagieren.

A/B-Testing mit UIs

Auch beim A/B-Testing mit unterschiedlichen UIs hat Facebook Lösungen gefunden, mit der nicht mehr beide Versionen für alle User heruntergeladen werden. Das Ergebnis ist eine deklarative API, bei welcher der Server beim Laden der Seite überprüft, welche Version tatsächlich an den jeweiligen Nutzer gesendet werden soll.

Das wird mit folgendem Code erreicht:

const Composer = importCond('NewComposerExperiment', {
true: 'NewComposer',
false: 'OldComposer',
});

Komponentenbereitstellung

Eine ähnliche Änderung wurde auch bei den Komponenten vorgenommen, die beim Rendering bestimmter Inhalte geliefert werden. Denn bei Fotos, Videos sowie Locations und weiteren Möglichkeiten werden unterschiedliche Komponenten verwendet.

Damit nicht mehr alle diese Komponenten automatisch gesendet werden, sondern nur noch jene, die tatsächlich gebraucht werden, hat Facebook folgenden Code implementiert, um nur die notwendigen Werkzeuge zu laden und somit einen schnelleren Vorgang zu ermöglichen:

... on Post {
... on PhotoPost {
@module('PhotoComponent.js')
photo_data
}
... on VideoPost {
@module('VideoComponent.js')
video_data
}
}

So werden stets nur jene Komponenten geladen, die auch wirklich für den Ladeprozess notwendig sind. Komponenten können zudem auch in Fragmenten geladen werden. Das wird je nach den verwendeten Daten entschieden.

JavaScript Budget

Jede Facebook Seite hat ein bestimmtes JavaScript Budget, das nicht überschritten werden soll. Diesbezüglich hat Facebook einige Werkzeuge entwickelt, um die Größe des Codes zu überwachen und die Entwickler zu benachrichtigen, sollte der Code größer als ein Limit sein. 

Zudem wurden auch Tools für die Darstellung interaktiver Graphen und Dashboards entwickelt.

Vorladen von Daten

Während viele Web-Apps zuerst JavaScript herunterladen sowie aktivieren und erst danach die Daten vom Server anfordern, macht es der neue Facebook Stack nicht so. Denn mittels Relay weiß das System bereits im Vorhinein, welche Daten gebraucht werden und kann diese somit direkt anfordern, wenn eine Seite aufgerufen wird. So kann die endgültige Seite gänzlich schneller gerendert und angezeigt werden.

Daten verschieben

Manche Inhalte brauchen im Gegensatz zu anderen länger, um angezeigt zu werden. Wenn man auf ein Profil klickt, dann werden etwa der Name sowie Fotos und anderer Content schneller angezeigt, als das für die gesamte Timeline zutreffend ist. Mit dem GraphQL Werkzeug defer können jedoch alle diese Daten mit einer einzigen Anfrage vom Server geholt und sobald diese bereit sind, auch visualisiert werden. So kann eine einwandfreie Erfahrung beim Aufrufen von Seiten ermöglicht werden.

Folgender Code wird dazu verwendet:

fragment ProfileData on User {  name  profile_picture { ... }  ...AdditionalData @defer}

Schnellere Navigation

Für das schnellere Navigieren von Facebook hat das Unternehmen eine Route Map entwickelt. In dieser enthalten sind alle Ressourcen, die für das Rendering bestimmter Seiten gebraucht werden. Mit der neuen Lösung werden Ressourcen bereits vor dem Klicken eines Links angefordert. Das funktioniert mit sogenanntem Pre-Loading während ein User lediglich auf einem Link verweilt, ohne diesen bisher aufgerufen zu haben.

Das wird unter anderem auch mit React suspense tranitions erreicht. Dadurch sind Skelette der vorherigen und auch der nächsten Seiten sofort vorhanden. 

Parallelisierendes Herunterladen von Code und Daten

Facebook verwendet eine Menge an Lazy Loading auf deren neuer Webseite. Sollte Facebook jedoch den Code für eine Route mittels Lazy Loading mit dem Code für den Datenabruf darin aufrufen, dann ist der Ablauf nicht effizient genug, da das Rendering zweimal, nach dem Codeabruf und nach dem Datenabruf, stattfindet.

Um das Problem zu lösen, hat Facebook Dateien erstellt, die einen Code-Split-Punkt beinhalten und Eingaben in Abfragen umwandeln. Daten und Code werden dabei parallel abgerufen und das Rendering findet somit auch nur einmal und dementsprechend schneller statt.

Der neue Facebook Stack: Eine tolle Innovation der Plattform

Zusammengefasst lässt sich sagen, dass Facebook tolle Arbeit geleistet und deutliche Verbesserungen der Nutzererfahrung erzielt hat. Mittels innovativer implementierter Lösungen konnten mehrere Verbesserungen des Facebook Tech Stacks erreicht und somit ein besseres Gesamterlebnis mit der Social Media Plattform erreicht werden. 

Das sind die aktuellsten Modifikationen von Facebook an deren Tech Stack. Es wird äußerst interessant sein, welche weiteren Änderungen Facebook in Zukunft durchführen wird.