Dies ist der erste Beitrag im Engineering-Blog von web.dev. In den kommenden Monaten möchten wir umsetzbare Erkenntnisse aus unserer Arbeit teilen. Achtet also auf Beiträge mit dem Tag „Engineering Blog“. Hier erfahren Sie mehr über den Build-Prozess für unsere statische Website und die (optionale!) JavaScript für unsere Webkomponenten.
Auf web.dev finden Sie Inhalte zum Erstellen moderner Websites und können die Leistung Ihrer Website messen. Erfahrene Nutzer haben vielleicht schon bemerkt, dass die Seite „Messen“ nur eine Benutzeroberfläche für Lighthouse ist, die auch in den Chrome DevTools verfügbar ist. Wenn Sie sich in web.dev anmelden, können Sie regelmäßige Lighthouse-Audits auf Ihrer Website ausführen und so sehen, wie sich der Wert im Laufe der Zeit ändert. Ich komme gleich noch einmal auf die Seite „Messen“ zurück, da wir sie für besonders wichtig halten. 🎊
Einführung
Im Grunde ist web.dev eine statische Website, die aus einer Sammlung von Markdown-Dateien generiert wird. Wir haben uns für Eleventy entschieden, weil es ein ausgefeiltes, erweiterbares Tool ist, mit dem sich Markdown-Inhalte ganz einfach in HTML umwandeln lassen.
Außerdem verwenden wir moderne JavaScript-Bundles, die nur für Browser ausgeliefert werden, die type="module"
unterstützen, einschließlich async
und await
.
Wir verwenden auch gerne Funktionen, die von Evergreen-Browsern unterstützt werden, aber von einer Minderheit älterer Versionen nicht.
Da es sich bei uns um eine statische Website handelt, ist JavaScript nicht erforderlich, um unsere Inhalte zu lesen.
Sobald der Build-Prozess abgeschlossen ist, bei dem statische HTML-Seiten generiert und JavaScript mit Rollup gebündelt wird, kann web.dev auf einem einfachen statischen Server für Tests gehostet werden. Die Website ist fast vollständig statisch, aber wir haben einige spezielle Anforderungen, für die ein benutzerdefinierter Node.js-Server sinnvoll ist. Dazu gehören Weiterleitungen zu ungültigen Domains sowie Code zum Parsen der bevorzugten Sprache eines Nutzers für eine bevorstehende Internationalisierungsfunktion.
Statische Generierung
Jede Seite auf web.dev ist in Markdown geschrieben. Alle Seiten enthalten Vorwort, in dem Metadaten zu jedem Beitrag beschrieben werden. Diese Metadaten werden in das Layout jeder Seite aufgenommen, wodurch Überschriften, Tags usw. erstellt werden. Beispiel:
---
layout: post
title: What is network reliability and how do you measure it?
authors:
- jeffposnick
date: 2018-11-05
description: |
The modern web is enjoyed by a wide swath of people…
---
The modern web is enjoyed by a wide swath of [people](https://www.youtube.com/watch?v=dQw4w9WgXcQ), using a range of different devices and types of network connections.
Your creations can reach users all across the world...
In diesem Vorspann können wir beliebige Eigenschaften wie Autoren, Veröffentlichungsdatum und Tags definieren. In Eleventy wird der Vorspann in fast jedem Plug-in, jeder Vorlage oder jedem anderen Kontext, in dem wir etwas Intelligentes tun möchten, als Daten angezeigt. Das Datenobjekt enthält auch die von Eleventy als Datenkaskade bezeichnete Struktur. Dabei handelt es sich um eine Vielzahl von Daten, die von jeder einzelnen Seite, vom verwendeten Layout der Seite und von Daten in der hierarchischen Ordnerstruktur abgerufen werden.
Jedes Layout beschreibt einen anderen Inhaltstyp und kann andere Layouts übernehmen. Auf web.dev verwenden wir diese Funktion, um verschiedene Arten von Inhalten (z. B. Beiträge und Codelabs) korrekt einzurahmen und gleichzeitig ein gemeinsames HTML-Layout auf oberster Ebene zu verwenden.
Sammlungen
Eleventy bietet eine programmatische Möglichkeit, beliebige Inhaltssammlungen zu erstellen. So konnten wir die Paginierung unterstützen und für die Autoren von Beiträgen virtuelle Seiten generieren (Seiten ohne entsprechende Markdown-Datei auf dem Laufwerk). Unsere Autorenseiten werden beispielsweise mit einer Vorlage erstellt, die einen Ausdruck für den Link enthält (die Vorlage wird also für jeden Autor neu gerendert) und eine unterstützende Sammlung.
So entsteht beispielsweise eine einfache Seite mit allen Beiträgen von Addy.
Beschränkungen
Derzeit können wir den Build-Prozess von Eleventy nicht einfach einbinden, da er deklarativ und nicht imperativ ist: Sie beschreiben, was Sie möchten, nicht wie Sie es möchten. Es ist schwierig, Eleventy als Teil eines größeren Build-Tools auszuführen, da es nur über die Befehlszeile aufgerufen werden kann.
Vorlagen
Auf web.dev wird das Nunjucks-Template-System verwendet, das ursprünglich von Mozilla entwickelt wurde. Nunjucks bietet die üblichen Funktionen für Vorlagen wie Schleifen und Bedingungen, aber auch die Möglichkeit, Shortcodes zu definieren, die weiteres HTML generieren oder andere Logik aufrufen.
Wie die meisten Teams, die Websites mit statischen Inhalten erstellen, haben wir klein angefangen und nach und nach shortcodes hinzugefügt – bisher etwa 20. Die meisten davon generieren nur weiteres HTML (einschließlich unserer benutzerdefinierten Webkomponenten). Beispiel:
{% Aside %}
See how Asides work in the web.dev codebase
{% endAside %}
Das Ergebnis sieht dann so aus:
Tatsächlich wird aber folgender HTML-Code erstellt:
<div class="aside color-state-info-text">
<p>See how Asides work in the web.dev codebase</p>
</div>
Auf web.dev werden zwar keine Markdown-Codes verwendet, aber Shortcuts als eine Art Metaprogrammiersprache. Kurzcodes akzeptieren Argumente, wobei einer der Inhalte der enthaltene Inhalt ist. Es ist nicht erforderlich, dass Shortcuts etwas zurückgeben. Sie können also verwendet werden, um den Status zu ändern oder ein anderes Verhalten auszulösen. 🤔💭
Skripting
Wie bereits erwähnt, kann web.dev, da es sich um eine statische Website handelt, ohne JavaScript und von älteren Browsern bereitgestellt und verwendet werden, die type="module"
oder unseren anderen modernen Code nicht unterstützen.
Das ist ein wichtiger Teil unseres Ansatzes, web.dev für alle zugänglich zu machen.
Der Code für moderne Browser besteht jedoch aus zwei Hauptteilen:
- Bootstrap-Code, einschließlich Code für den globalen Status, Analytics und SPA-Routing
- Code und CSS für Webkomponenten, die die Website kontinuierlich verbessern
Der Bootstrap-Code ist ziemlich einfach: web.dev kann neue Seiten als Single-Page-Anwendung (SPA) laden. Daher installieren wir einen globalen Listener, der auf Klicks auf lokale <a href="...">
-Elemente wartet.
Mit dem SPA-Modell können wir den globalen Status der aktuellen Sitzung des Nutzers beibehalten. Andernfalls würden bei jedem neuen Seitenaufbau Aufrufe an Firebase ausgelöst, um auf den Anmeldestatus eines Nutzers zuzugreifen.
Außerdem geben wir je nach aufgerufener URL verschiedene Einstiegspunkte auf unserer Website an und laden den richtigen mithilfe von dynamischen import()
-Werten.
So wird die Anzahl der Bytes reduziert, die unsere Nutzer benötigen, bevor die Website mit Code erweitert wird.
Webkomponenten
Webkomponenten sind benutzerdefinierte Elemente, die Laufzeitfunktionen in JavaScript kapseln. Sie werden durch benutzerdefinierte Namen wie <web-codelab>
identifiziert.
Das Design eignet sich gut für weitgehend statische Websites wie web.dev: Der Browser verwaltet den Lebenszyklus eines Elements, während das HTML einer Website aktualisiert wird, und informiert alle Elemente korrekt, wenn sie an der Seite angehängt oder von ihr getrennt werden.
Und veraltete Browser ignorieren Webkomponenten einfach und rendern nur das, was im DOM übrig bleibt.
Jede Webkomponente ist eine Klasse mit Methoden wie connectedCallback()
, disconnectedCallback()
und attributeChangedCallback()
.
Die benutzerdefinierten Elemente von web.dev werden größtenteils von LitElement abgeleitet, das eine einfache Basis für komplexe Komponenten bietet.
Webkomponenten werden auf vielen Seiten von web.dev verwendet, aber nirgends sind sie wichtiger als auf der Seite Messen. Zwei Elemente bieten den Großteil der Funktionen, die Sie auf dieser Seite sehen:
<web-url-chooser-container></web-url-chooser-container>
<web-lighthouse-scores-container></web-lighthouse-scores-container>
Diese Elemente bilden weitere Elemente, die mehr Funktionen bieten. Wichtig ist, dass diese Elemente nur ein Teil unseres normalen Markdown-Quellcodes sind. Unser Content-Team kann jeder Seite erweiterte Funktionen hinzufügen, nicht nur dem Messknoten.
Unsere Webkomponenten nutzen am häufigsten das Container-Komponenten-Modell, das durch React populär wurde, obwohl dieses Modell jetzt etwas in die Jahre gekommen ist.
Jedes -container
-Element verbindet sich mit unserem globalen Status (von unistore bereitgestellt) und rendert dann ein visuelles Element, das wiederum tatsächliche DOM-Knoten mit Stil oder anderen integrierten Funktionen rendert.
Unsere komplexesten Webkomponenten dienen der Visualisierung globaler Aktionen und Status. Mit web.dev können Sie beispielsweise Ihre Lieblingswebsite analysieren und dann die Seite „Messen“ verlassen. Wenn Sie zurückkehren, sehen Sie, dass die Aufgabe noch nicht abgeschlossen ist.
Unsere einfachen Komponenten dienen dazu, ansonsten statische Inhalte zu ergänzen oder beeindruckende Visualisierungen zu erstellen (z. B. ist jeder Liniendiagramm ein eigenes <web-sparkline-chart>
), die keinen Bezug zum globalen Status haben.
Jetzt chatten
Das web.dev-Entwicklerteam (Rob, Ewa, Michael und Sam) wird demnächst weitere technische Details veröffentlichen.
Wir hoffen, dass Sie durch diesen Einblick in unsere Arbeitsweise einige Ideen für Ihre eigenen Projekte bekommen haben. Wenn ihr Fragen oder Themenvorschläge für diesen Blog habt, könnt ihr euch jederzeit auf Twitter an uns wenden.