Muad'Dib
.:.Carpe.Diem.:.
  
Dabei seit: 12.06.2007
Beiträge: 8.301
Herkunft: 51°N/11.5°E Jena/Thuringia
 |
|
 Facebooks Redesign: Mehr als nur Kosmetik |
     |
Facebook bekommt mit FB5 ein komplettes Redesign. Dafür wurde die Plattform komplett neu programmiert.
Mit dem FB5-Design erhält Facebook eine komplett neue Designsprache. Die neue Gestaltung zieht sich in Zukunft von Web bis App durch. Das Design soll Gruppenaktivitäten stärker in den Vordergrund rücken. Die Website wird dann als Single-Page-App arbeiten und soll erheblich schneller und flexibler sein, als die alte Facebook-Seite. Responsiveness und Barrierefreiheit seien auch Teil der neuen Seite. Das neue Design ist laut Facebook in Kürze in der App sichtbar und in einigen Monaten auch auf der Website.
Wie die Entwickler des neuen Designs auf der F8 berichten, setzt die neue Facebook-Seite auf die hauseigenen JavaScript-Frameworks React und Relay sowie GraphQL zum Abruf von Daten. Die Entwickler haben viel Zeit darauf verwendet, das erste Laden der Seite zu beschleunigen und die geladenen Elemente schnellstmöglich Interaktiv zu machen.
Die alte Website war kaum noch in der Lage den Anforderungen an Geschwindigkeit und Flexibilität gerecht zu werden. Clients mussten an die 500 KByte komprimiertes CSS herunterladen, um die Facebook-Seite zu rendern. JavaScript-Code konnte nur noch mit sehr viel Mühe auf das Nötigste reduziert werden. An vielen Stellen wird Code heruntergeladen, der nie zum Einsatz kommt.
Tabula Rasa für mehr Geschwindigkeit
Für das Redesign hat Facebook komplett von vorne begonnen erklärte die Entwicklerin Ashley Watkins.
Die Entwickler haben den React-Code mit Hilfe von Relay so erweitert, dass nur noch Code und Daten heruntergeladen werden, die React wirklich benötigt, um die gewünschte Seite zu rendern. Dabei weiß Relay auch, welche Inhalte innerhalb des aktuellen Viewports liegen und welche nicht. Unsichtbare Inhalte lädt Relay erst später nach.
(Quelle: Facebook)
Relay kann diese Daten auch in verschiedenen Konstellationen wiederverwerten. Wer etwa auf das Profil einer Person klickt, die einen Kommentar unter einem Post hinterlassen hat, bekommt beim Laden der Profilseite mindestens schon Namen und Profilbild der Person angezeigt, während Relay den Rest des Profils im Hintergrund runterlädt und React die Profilseite aufbaut.
Die React-Komponenten wurden so erweitert, dass Relay früher weiß, welche Daten und welcher Code nötig sind um etwa ein Foto-Post zu rendern und interaktiv zu machen. Bislang wurde beispielsweise der Code für Video- und Foto-Posts geladen unabhängig davon, welche Art von Daten der Post enthielt. Damit ist nun Schluss. "Wir behandeln den Code genauso wie Daten", sagte der Entwickler Juan Tejada.
Zudem lädt Relay alle bereits geladenen Daten in den Cache des Browsers. Das soll Seitenabrufe enorm beschleunigen, da die für das Rendern von kürzlich besuchten Seiten nötigen Daten bereits im Cache liegen.
Rücksicht auf langsame Clients und mehr Barrierefreiheit
Welchen Code der Client braucht, will Facebook frühzeitig auf dem Server erkennen. Das Hilft auch dabei leistungsschwache Clients zu entlasten. React muss dann nicht erst auf dem Client entscheiden, welche Daten und Code-Teile für den Rendervorgang notwendig sind. Außerdem kann das Interface Animationen abschalten, wenn der Client nicht schnell gut ist um diese darzustellen. Um Nutzereingaben verzögerungsfrei zu verarbeiten, nutzt Facebook die neue JavaScript-API isInputPending. Die API hat Facebook selbst vorgeschlagen und den nötigen Code zu Chrome beigesteuert. Ob die Schnittstelle sich durchsetzt, bleibt abzuwarten.
Um das Interface flexibler zu machen und Nutzern bessere Anpassungsmöglichkeiten zu geben, wurde das CSS mit Atomic Stylesheets umgesetzt. So können die Entwickler möglichst viel CSS recyceln, selbst wenn die Plattform neue Features bekommt. Dank des neuen CSS passen sich Elemente der Seite dynamischer an die manuellen Änderungen von Schriftgrößen durch Browser-Zooms an. Dafür verwandelt Facebook automatisch alle Schriftgrößen in von absoluten Pixeln (px) in dimensionslose Root-Ems (rem) um.
Für die Barrierefreiheit hat Facebook dynamische und kontextsensitive Header-Elemente eingeführt. Das soll Anwendern mit Sehbehinderungen helfen, die Screenreader einsetzen. Die Überschrift einer Veranstaltung hat auf der Info-Seite zur Veranstaltung höchste Priorität. Im News-Feed ist sie nur eine von vielen. Dies ist jetzt leichter für die Facebook-Entwickler umzusetzen. Damit die Entwickler Probleme bei der Barrierefreiheit schneller bemerken, weist die Facebook-Entwicklerplattform direkt auf Fehler und Probleme hin. (mls)
Quelle: https://heise.de/-4411081
PS: Wer diesen Verbrechern und Wiederholungslügnern auch nur ein Wort glaubt hat es einfach nicht anders verdient........
__________________
| Multifeed Triax Unique 3°e>28°e & motorized FiboStøp120/90/75/55 |
|| VU+ Solo 4K & Blindscan|Mio 4K|Denys H265|S3mini|X-xx0|DVB-Cards ||
Ich bremse nicht für Schnarchroboter. ®²º¹³ Muad'Dib
Alle meine posts stellen meine persönliche und freie Meinungsäußerung dar.
|
|
02.05.2019 09:57 |
|
|
