Wie wir die Site erstellen und die Webkomponenten verwenden

9. April 2020

Esta es la primera publicación en el Blog de ingeniería de Netz.dev. En los próximos meses, esperamos compartir información útil de nuestro trabajo, ¡así que esté atento a las publicaciones con la etiqueta de Blog de ingeniería! Aquí cubriremos el proceso de construcción de nuestro sitio estático y el JavaScript (¡opcional!) Detrás de nuestros componentes web.

web.dev proporciona Inhalt sobre la creación de experiencias web modernas y le permite medir el rendimiento de su sitio. Los usuarios inteligentes pueden haberse dado cuenta de que nuestra página de medidas es solo una interfaz para Leuchtturm, das auch in den DevTools von Chrome verfügbar ist. Wenn Sie sich bei web.dev anmelden, können Sie regelmäßige Lighthouse-Audits auf Ihrer Website durchführen, um zu sehen, wie sich Ihre Punktzahl im Laufe der Zeit ändert. Ich werde die Seite "Messungen" etwas später erneut besuchen, da wir der Meinung sind, dass dies etwas ganz Besonderes ist. 🎊

Einführung

Grundsätzlich ist web.dev eine statische Site, die aus einer Sammlung von Markdown-Dateien generiert wird. Wir haben uns für die Verwendung entschieden Elf porque es una herramienta pulida y extensible que facilita la Umwandlung de Markdown en HTML.

También utilizamos paquetes de JavaScript modernos que solo servimos a Browser compatibles Typ = "Modul", was beinhaltet asynchron y erwarten. Gerne verwenden wir auch Funktionen, die mit mehrjährigen Browsern kompatibel sind, jedoch nicht mit einer Minderheit älterer Versionen. Da wir eine statische Site sind, ist JavaScript einfach nicht nötig um unseren Inhalt zu lesen.

Una vez que se completa el proceso de compilación, que implica generar HTML estático y empaquetar nuestro JavaScript con Rollup, web.dev se puede alojar con un Server estático simple para realizar pruebas. El sitio es fast completamente estático, pero tenemos algunas necesidades especiales que aún se benefician de un servidor Node.js personalizado. Estos incluyen redireccionamientos para dominios no válidos, así como código para analizar el idioma preferido de un Nutzername para una próxima función de internacionalización.

Statische Erzeugung

Jede Seite auf web.dev ist in Markdown geschrieben. Alle Seiten enthalten Hauptproblem, que describe los Metadaten de cada publicación. Estos metadatos se incorporan al diseño de cada página, creando Überschriften, etiquetas, etc. He aquí un ejemplo:

---
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...

Mit diesem vorläufigen Material können wir beliebige Eigenschaften wie Autor (en), Veröffentlichungsdatum und Tags definieren. Elf legt die vordere Ausgabe bequem als dar Daten In fast allen Plugins, Vorlagen oder anderen Kontexten, in denen wir etwas Kluges tun möchten. Das Datenobjekt enthält auch das, was Eleventy als das beschreibt Datenkaskade: Eine Vielzahl von Daten, die aus jeder einzelnen Seite extrahiert wurden, das Layout, das die Seite verwendet, und die Daten, die in der hierarchischen Ordnerstruktur gefunden wurden.

Jedes einzigartige Design beschreibt eine andere Art von Inhalt und kann erben von andere Designs. Bei web.dev verwenden wir diese Funktion, um verschiedene Arten von Inhalten (z. B. Posts und Codelabors) ordnungsgemäß einzurahmen und gleichzeitig ein HTML-Layout der obersten Ebene freizugeben.

Sammlungen

Eleventy proporciona una forma programática de crear colecciones arbitrarias de contenido. Esto nos ha permitido crear soporte de paginación y generar páginas virtuales (páginas que no tienen un archivo Markdown coincidente en el disco) para los autores de publicaciones. Por ejemplo, construimos las páginas de nuestros autores usando una plantilla que contiene una expresión para su enlace permanente (por lo que la plantilla se vuelve a representar para cada autor) y una colección de respaldo.

Dies führt beispielsweise zu einer einfachen Seite, die alle Beiträge von Addy enthält.

Einschränkungen

Im Moment können wir uns nicht einfach mit dem Eleventy-Bauprozess verbinden, weil es so ist deklarativ, lieber als Imperativ- Beschreibt, was Sie wollen, anstatt wie Sie es wollen. Es ist schwierig, Eleventy als Teil eines größeren Build-Tools auszuführen, da es nur über die Befehlszeilenschnittstelle aufgerufen werden kann.

Vorlagen

web.dev verwendet die Nunjucks Vorlagensystem ursprünglich von Mozilla entwickelt. Nunjucks hat die typischen Merkmale von Vorlagen wie Schleifen und Bedingungen, aber es ermöglicht uns auch zu definieren Shortcodes die mehr HTML generieren oder andere Logik aufrufen.

Wie die meisten Teams, die Websites mit statischen Inhalten erstellen, haben wir mit kleinen Shortcodes begonnen und im Laufe der Zeit Shortcodes hinzugefügt - bisher etwa 20. Die meisten davon generieren nur mehr HTML (einschließlich unserer benutzerdefinierten Webkomponenten). Hier ist ein Beispiel:

{% Aside %}
[See how Asides work in the web.dev codebase](/handbook/web-dev-components/#asides)
{% endAside %}

Es wird am Ende so aussehen:

Aber Sie erstellen tatsächlich HTML, das so aussieht:

<div Klasse="w-aside w-aside--note">
<p><zu href="/handbook/web-dev-components/#asides">See how Asides work in the web.dev codebase</zu></p>
</div>

Si bien está fuera del Umfang de esta publicación, web.dev también usa códigos cortos como un tipo de lenguaje de metaprogramación. Los códigos cortos aceptan argumentos, uno de los cuales es el contenido contenido. No es necesario que los códigos cortos devuelvan nada, por lo que se pueden usar para generar un estado o activar algún otro comportamiento. 🤔💭

Skripting

Wie oben erwähnt, kann web.dev, da es sich um eine statische Site handelt, ohne JavaScript und mit älteren Browsern, die dies nicht unterstützen, bereitgestellt und verwendet werden Typ = "Modul" o nuestro otro código moderno. Esta es una parte increíblemente importante de nuestro enfoque para hacer que web.dev Sein accesible para todos.

Unser Code für moderne Browser besteht jedoch aus zwei Hauptteilen:

1. Bootstrap-Code, einschließlich Code für den globalen SPA-Status, das Parsen und das Routing
2. Código y CSS para componentes web que mejoran progresivamente el sitio

Der Bootstrap-Code ist ziemlich einfach: web.dev kann neue Seiten als Single-Page-Anwendung (SPA) laden. Daher haben wir einen globalen Listener installiert, der lokal auf Klicks wartet. <a href="/de/.../"> Elemente. Das SPA-Modell hilft uns dabei, den globalen Status während der aktuellen Benutzersitzung beizubehalten. Andernfalls würde jede neue Seitenladung Aufrufe an Firebase auslösen, um auf den Anmeldestatus eines Benutzers zuzugreifen.

También especificamos un par de puntos de entrada diferentes a nuestro sitio en función de la Url que haya accedido, y cargamos la correcta utilizando Dynamic importieren (). Dies reduziert die Anzahl der Bytes, die unsere Benutzer benötigen, bevor die Site mit Code erweitert wird.

Webkomponenten

Webkomponenten
sind benutzerdefinierte Elemente, die die in JavaScript bereitgestellten Laufzeitfunktionen kapseln und durch benutzerdefinierte Namen wie gekennzeichnet sind . El diseño se presta bien a sitios en gran medida estáticos como web.dev: su Browser gestiona el ciclo de vida de un elemento a medida que se actualiza el HTML de un sitio, informando correctamente cualquier elemento cuando se adjunta o desconecta de la página. Y los navegadores anticuados simplemente ignoran los componentes web por completo y renderizan lo que queda en el DOM.

Jede Webkomponente ist eine Klasse mit folgenden Methoden ConnectedCallback (), connectedCallback ()y attributeChangedCallback (). Die benutzerdefinierten Elemente von web.dev erben hauptsächlich von LitElement, die eine einfache Basis für komplexe Komponenten bietet.

Während web.dev auf vielen Seiten Webkomponenten verwendet, ist dies nirgendwo notwendiger als auf der Messseite. Zwei Elemente bieten die meisten Funktionen, die Sie auf dieser Seite sehen:

<web-url-chooser-container></web-url-chooser-container>
<web-lighthouse-scores-container></web-lighthouse-scores-container>

Estos elementos crean otros elementos que proporcionan más funcionalidad. Es importante destacar que estos elementos son solo parte de nuestro Quellcode regular de Markdown, y nuestro equipo de contenido puede agregar funcionalidad extendida a etwas Seite, nicht nur die nodejs Measure.

Unsere Webkomponenten werden am häufigsten verwendet Containerkomponente Modell, von React populär gemacht, obwohl dieses Modell jetzt ist es ein bisschen altmodisch. Jeder -Container Element verbindet sich mit unserem globalen Zustand (bereitgestellt von rückgängig machen) und rendert dann ein visuelles Element, das wiederum tatsächliche DOM-Knoten mit Stil oder anderen integrierten Funktionen rendert.

Unsere komplexesten Webkomponenten dienen zur Visualisierung globaler Aktionen und Zustände. Mit web.dev können Sie beispielsweise Ihre Lieblingssite prüfen und dann von der Seite "Messen" weg navigieren. Wenn Sie zurückgehen, werden Sie feststellen, dass die Aufgabe noch ausgeführt wird.

Unsere einfachen Komponenten verbessern lediglich den statischen Inhalt oder erstellen beeindruckende Visualisierungen (zum Beispiel ist jedes Liniendiagramm ein eigenes ), die keine Beziehung zum globalen Staat hat.

Lass uns schreiben

Das Engineering-Team von web.dev (Stehlen, Ewa, Michaely Sam) wird bald mit mehr technischen Tieftauchgängen fortfahren.

Esperamos que escuchar cómo hacemos las cosas te haya dado algunas ideas para tus propios proyectos. ¡Contáctenos en Twitter si tiene preguntas o solicitudes de temas para este blog!