Esta es la primera publicación en el blog de ingeniería de web.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 contenido 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 Faro, que también está disponible en DevTools de Chrome. Iniciar sesión en web.dev le permite ejecutar auditorías Lighthouse regulares en su sitio para que pueda ver cómo cambia su puntuación con el tiempo. Volveré a visitar la página de Medidas un poco más tarde, ya que creemos que es bastante especial. 🎊
Introducción
Básicamente, web.dev es un sitio estático que se genera a partir de una colección de archivos Markdown. Hemos elegido usar Once porque es una herramienta pulida y extensible que facilita la conversión de Markdown en HTML.
También utilizamos paquetes de JavaScript modernos que solo servimos a navegadores compatibles type="module", que incluye async y await. También usamos con gusto funciones que son compatibles con los navegadores perennes, pero no con una minoría de versiones anteriores. Como somos un sitio estático, JavaScript es simplemente no es necesario para leer nuestro contenido.
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 servidor estático simple para realizar pruebas. El sitio es casi 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 usuario para una próxima función de internacionalización.
A pesar de ser un producto de Google, web.dev no utiliza ninguna herramienta o proceso interno de Google. Puede consultar nuestro repositorio. Hacemos esto porque el equipo que crea y mantiene web.dev es responsable de abogar dentro de Google en nombre del ecosistema de desarrolladores web más amplio, por lo que tiene más sentido para nosotros tener las mismas herramientas que los desarrolladores web externos.
Generación estática
Cada página de web.dev está escrita en Markdown. Todas las páginas incluyen asunto principal, que describe los metadatos de cada publicación. Estos metadatos se incorporan al diseño de cada página, creando encabezados, 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...
Este material preliminar nos permite definir propiedades arbitrarias como autor (es), fecha de publicación y etiquetas. Once expone convenientemente el asunto del frente como datos en casi todos los complementos, plantillas u otros contextos en los que nos gustaría hacer algo inteligente. El objeto de datos también contiene lo que Eleventy describe como el cascada de datos: Una variedad de datos extraídos de cada página individual, del diseño que utiliza la página y de los datos que se encuentran en la estructura jerárquica de carpetas.
Cada diseño único describe un tipo diferente de contenido y puede heredar de otro diseños. En web.dev, usamos esta función para enmarcar correctamente diferentes tipos de contenido (como publicaciones y laboratorios de código) mientras compartimos un diseño HTML de nivel superior.
Colecciones
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.
Esto da como resultado, por ejemplo, una página simple que contiene todas las publicaciones de Addy.
Limitaciones
En este momento no podemos conectarnos fácilmente al proceso de construcción de Eleventy porque es declarativo, más bien que imperativo: describe lo que quiere, en lugar de cómo lo quiere. Es difícil ejecutar Eleventy como parte de una herramienta de compilación más grande, ya que solo se puede invocar a través de su interfaz de línea de comandos.
Plantillas
web.dev utiliza el Nunjucks sistema de plantillas desarrollado originalmente por Mozilla. Nunjucks tiene las características típicas de las plantillas como bucles y condicionales, pero también nos permite definir códigos cortos que generan más HTML o invocan otra lógica.
Como la mayoría de los equipos que crean sitios de contenido estático, comenzamos con códigos cortos pequeños y agregamos códigos cortos con el tiempo, alrededor de 20 hasta ahora. La mayoría de estos solo generan más HTML (incluidos nuestros componentes web personalizados). He aquí un ejemplo:
{% Aside %}
[See how Asides work in the web.dev codebase](/handbook/web-dev-components/#asides)
{% endAside %}Terminará luciendo así:
Pero en realidad está creando HTML que se ve así:
<div class="w-aside w-aside--note">
<p><a href="/handbook/web-dev-components/#asides">See how Asides work in the web.dev codebase</a></p>
</div>Si bien está fuera del alcance 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
Como se mencionó anteriormente, debido a que web.dev es un sitio estático, se puede servir y usar sin JavaScript y con navegadores más antiguos que no admiten type="module" o nuestro otro código moderno. Esta es una parte increíblemente importante de nuestro enfoque para hacer que web.dev sea accesible para todos.
Sin embargo, nuestro código para navegadores modernos consta de dos partes principales:
- Código Bootstrap, que incluye código para el estado global, análisis y enrutamiento SPA
- Código y CSS para componentes web que mejoran progresivamente el sitio
El código de arranque es bastante sencillo: web.dev puede cargar nuevas páginas como una aplicación de una sola página (SPA), por lo que instalamos un oyente global que escucha los clics en local. <a href="..."> elementos. El modelo SPA nos ayuda a mantener el estado global sobre la sesión actual del usuario, ya que, de lo contrario, cada nueva carga de página activaría llamadas a Firebase para acceder al estado de inicio de sesión de un usuario.
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 import(). Esto reduce la cantidad de bytes que necesitan nuestros usuarios antes de que el sitio se mejore con código.
Componentes Web
Componentes Web
son elementos personalizados que encapsulan la funcionalidad en tiempo de ejecución proporcionada en JavaScript y se identifican mediante nombres personalizados como <web-codelab>. El diseño se presta bien a sitios en gran medida estáticos como web.dev: su navegador 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.
Cada componente web es una clase con métodos que incluyen connectedCallback(), disconnectedCallback()y attributeChangedCallback(). Los elementos personalizados de web.dev heredan principalmente de LitElement, que proporciona una base simple para componentes complejos.
Si bien web.dev utiliza componentes web en muchas páginas, en ninguna parte es más necesario que en la página de medidas. Dos elementos proporcionan la mayor parte de la funcionalidad que ve en esta página:
<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 código fuente regular de Markdown, y nuestro equipo de contenido puede agregar funcionalidad extendida a alguna página, no solo el nodejs Medir.
Nuestros componentes web utilizan más comúnmente Componente contenedor modelo, popularizado por React, aunque este modelo ahora está un poco pasado de moda. Cada -container elemento se conecta a nuestro estado global (proporcionado por deshacer) y luego renderiza un elemento visual, que a su vez pasa a renderizar nodos DOM reales que tienen estilo u otra funcionalidad incorporada.
Nuestros componentes web más complejos existen para visualizar acciones y estados globales. Por ejemplo, web.dev le permite auditar su sitio favorito y luego navegar fuera de la página Medir. Si regresa, verá que la tarea aún está en curso.
Nuestros componentes simples mejoran puramente el contenido estático o crean visualizaciones asombrosas (por ejemplo, cada gráfico de líneas es propio <web-sparkline-chart>), que no tiene relación con el estado global.
Charlemos
El equipo de ingeniería de web.dev (Robar, Ewa, Miguely Sam) pronto continuará con inmersiones profundas más técnicas.
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!
