Comment nous construisons le site et utilisons les composants Web

9 avril 2020

Esta es la primera publicación en el Blog de ingeniería de la toile.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 Contenu 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 Phare, qui est également disponible dans les DevTools de Chrome. La connexion à web.dev vous permet d'exécuter régulièrement des audits Lighthouse sur votre site afin que vous puissiez voir comment votre score évolue au fil du temps. Je reviendrai un peu plus tard sur la page Mesures, car nous pensons que c'est assez spécial. 🎊

Présentation

Fondamentalement, web.dev est un site statique généré à partir d'une collection de fichiers Markdown. Nous avons choisi d'utiliser Onze porque es una herramienta pulida y extensible que facilita la conversion de Markdown en HTML.

También utilizamos paquetes de JavaScript modernos que solo servimos a navigateurs compatibles type = "module", qui inclus asynchrone y attendre. Nous utilisons également volontiers des fonctionnalités compatibles avec les navigateurs pérennes, mais pas avec une minorité d'anciennes versions. Puisque nous sommes un site statique, JavaScript est juste pas nécessaire pour lire notre contenu.

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 serveur estático simple para realizar pruebas. El sitio es presque 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 Nom d'utilisateur para una próxima función de internacionalización.

Génération statique

Chaque page sur web.dev est écrite en Markdown. Toutes les pages comprennent problème principal, que describe los métadonnées de cada publicación. Estos metadatos se incorporan al diseño de cada página, creando en-têtes, etiquetas, etc. He aquí un ejemplo:

---
layout: Publier
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...

Ce matériel préliminaire nous permet de définir des propriétés arbitraires telles que l'auteur (s), la date de publication et les balises. Eleven présente commodément le problème avant comme Les données dans presque tous les plugins, modèles ou autres contextes où nous aimerions faire quelque chose d'intelligent. L'objet de données contient également ce qu'Eleventy décrit comme le cascade de données: Une variété de données extraites de chaque page individuelle, la mise en page utilisée par la page et les données trouvées dans la structure hiérarchique des dossiers.

Chaque conception unique décrit un type de contenu différent et peut hériter de autre dessins. Chez web.dev, nous utilisons cette fonctionnalité pour encadrer correctement différents types de contenu (tels que des publications et des laboratoires de code) tout en partageant une mise en page HTML de premier niveau.

Les collections

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.

Il en résulte, par exemple, une page simple contenant tous les articles d'Addy.

Limites

À l'heure actuelle, nous ne pouvons pas facilement nous connecter au processus de construction Eleventy car il est déclaratif, plutôt que impératif- Décrit ce que vous voulez, plutôt que comment vous le voulez. Il est difficile d'exécuter Eleventy dans le cadre d'un outil de construction plus grand car il ne peut être appelé que via son interface de ligne de commande.

Modèles

web.dev utilise le Nunjucks système de template développé à l'origine par Mozilla. Nunjucks a les caractéristiques typiques des modèles tels que les boucles et les conditions, mais il nous permet également de définir codes courts qui génèrent plus de HTML ou invoquent une autre logique.

Comme la plupart des équipes qui créent des sites de contenu statique, nous avons commencé avec de petits codes courts et avons ajouté des codes courts au fil du temps - environ 20 jusqu'à présent. La plupart d'entre eux génèrent simplement plus de HTML (y compris nos composants Web personnalisés). Voici un exemple:

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

Cela finira par ressembler à ceci:

Mais vous créez en fait du HTML qui ressemble à ceci:

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

Si bien está fuera del portée 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. 🤔💭

Scripting

Comme mentionné ci-dessus, étant donné que web.dev est un site statique, il peut être diffusé et utilisé sans JavaScript et avec des navigateurs plus anciens qui ne prennent pas en charge type = "module" o nuestro otro código moderno. Esta es una parte increíblemente importante de nuestro enfoque para hacer que web.dev être accesible para todos.

Cependant, notre code pour les navigateurs modernes se compose de deux parties principales:

1. Code d'amorçage, y compris le code pour l'état global du SPA, l'analyse et le routage
2. Código y CSS para componentes web que mejoran progresivamente el sitio

Le code d'amorçage est assez simple: web.dev peut charger de nouvelles pages en tant qu'application d'une seule page (SPA), nous avons donc installé un écouteur global qui écoute les clics localement. <a href="/fr/.../"> éléments. Le modèle SPA nous aide à maintenir l'état global sur la session utilisateur actuelle, sinon chaque nouveau chargement de page déclencherait des appels à Firebase pour accéder à l'état de connexion d'un utilisateur.

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 importer (). Cela réduit le nombre d'octets dont nos utilisateurs ont besoin avant que le site ne soit amélioré avec du code.

Composants Web

Composants Web
sont des éléments personnalisés qui encapsulent la fonctionnalité d'exécution fournie dans JavaScript et sont identifiés par des noms personnalisés tels que . El diseño se presta bien a sitios en gran medida estáticos como web.dev: su le navigateur 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.

Chaque composant Web est une classe avec des méthodes qui incluent connectedCallback (), déconnectéCallback ()y attributChangedCallback (). Les éléments personnalisés de web.dev héritent principalement de LitElement, qui fournit une base simple pour les composants complexes.

Bien que web.dev utilise des composants Web sur de nombreuses pages, cela n'est nulle part plus nécessaire que sur la page de mesure. Deux éléments fournissent la plupart des fonctionnalités que vous voyez sur cette page:

<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 code source regular de Markdown, y nuestro equipo de contenido puede agregar funcionalidad extendida a quelque page, pas seulement la mesure nodejs.

Nos composants Web utilisent le plus couramment Composant de conteneur modèle, popularisé par React, bien que ce modèle maintenant c'est un peu démodé. Chaque -récipient élément se connecte à notre état global (fourni par annuler), puis restitue un élément visuel, qui à son tour restitue les nœuds DOM réels qui ont un style ou d'autres fonctionnalités intégrées.

Nos composants Web les plus complexes existent pour visualiser les actions et les états globaux. Par exemple, web.dev vous permet d'auditer votre site préféré, puis de quitter la page Mesurer. Si vous revenez en arrière, vous verrez que la tâche est toujours en cours.

Nos composants simples améliorent purement le contenu statique ou créent des visualisations époustouflantes (par exemple, chaque graphique linéaire est le sien ), qui n'a aucun rapport avec l'état global.

Parlons

L'équipe d'ingénierie de web.dev (Voler, Ewa, Miguely Sam) se poursuivra bientôt avec des plongées plus techniques.

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!