Ceci est le premier article du blog d'ingénierie de web.dev. Au cours des prochains mois, nous espérons partager des informations exploitables tirées de notre travail. Ne manquez pas les articles comportant le tag du blog sur l'ingénierie ! Nous aborderons ici le processus de création de notre site statique et, si vous le souhaitez, le code JavaScript à la base de nos composants Web.
web.dev fournit des informations sur la création d'expériences Web modernes et vous permet de mesurer les performances de votre site. Les utilisateurs expérimentés se sont peut-être rendu compte que la page "Mesurer" n'était qu'une interface de Lighthouse, également disponible dans les outils pour les développeurs Chrome. En vous connectant à web.dev, vous pouvez exécuter régulièrement des audits Lighthouse sur votre site afin de suivre l'évolution de son score au fil du temps. Je reviendrai sur la page "Mesurer" un peu plus tard, car nous pensons qu'elle est assez spéciale. 🎊
Introduction
Fondamentalement, web.dev est un site statique qui est généré à partir d'une collection de fichiers Markdown. Nous avons choisi d'utiliser Eleventy, car il s'agit d'un outil soigné et extensible qui permet de convertir facilement Markdown en HTML.
Nous utilisons également des bundles JavaScript modernes que nous ne diffusons que sur les navigateurs compatibles avec type="module", y compris async et await.
Par ailleurs, nous exploitons volontiers des fonctionnalités compatibles avec les navigateurs permanents, mais pas par une minorité d'anciennes versions.
Notre site étant statique, JavaScript n'est tout simplement pas nécessaire pour lire notre contenu.
Une fois le processus de compilation terminé, qui implique la génération de code HTML statique et le regroupement de notre code JavaScript avec le rattachement, le site web.dev peut être hébergé sur un serveur statique simple à des fins de test. Le site est presque complètement statique, mais nous avons quelques besoins particuliers qui nécessitent encore un serveur Node.js personnalisé. Ceux-ci incluent des redirections pour des domaines non valides, ainsi que du code permettant d'analyser la langue préférée de l'utilisateur en vue d'une prochaine fonctionnalité d'internationalisation.
Génération statique
Chaque page sur web.dev est écrite en Markdown. Toutes les pages comprennent un contenu en première ligne, qui décrit les métadonnées relatives à chaque article. Ces métadonnées sont ingérées dans la mise en page de chaque page, créant ainsi des titres, des balises, etc. Exemple :
---
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...
Ce premier élément nous permet de définir des propriétés arbitraires telles que les auteurs, la date de publication et les balises. Eleventy présente le devant de la scène sous forme de données dans presque tous les plug-ins, modèles ou autres contextes dans lesquels nous aimerions faire quelque chose d'intelligent. L'objet de données contient également ce qu'Eleventy décrit comme la cascade de données, c'est-à-dire une variété de données extraites de chaque page individuelle, de la mise en page utilisée par la page et des données trouvées dans la structure hiérarchique des dossiers.
Chaque mise en page décrit un type de contenu différent et peut hériter d'autres mises en page. Sur web.dev, nous utilisons cette fonctionnalité pour encadrer correctement différents types de contenu (comme les posts et les ateliers de programmation) tout en partageant une mise en page HTML de premier niveau.
Collections
Eleventy offre un moyen programmatique de créer des collections de contenu arbitraires. Cela nous a permis de prendre en charge la pagination et de générer des pages virtuelles (pages qui n'ont pas de fichier Markdown correspondant sur le disque) pour les auteurs de messages. Par exemple, nous construisons nos pages d'auteur à l'aide d'un modèle contenant une expression pour son lien permanent (de sorte que le modèle est de nouveau affiché pour chaque auteur) et d'une collection de sauvegarde.
Vous obtiendrez, par exemple, une simple page contenant tous les posts d'Addy !
Limites
Pour le moment, il est difficile de nous connecter au processus de compilation d'Eleven, car il est déclaratif plutôt que impératif: vous décrivez ce que vous voulez, et non comment vous le voulez. Il est difficile d'exécuter Eleventy dans le cadre d'un outil de compilation plus vaste, car il ne peut être appelé que via son interface de ligne de commande.
Modèles
web.dev utilise le système de création de modèles Nunjucks développé à l'origine par Mozilla. Nunjucks dispose des fonctionnalités de création de modèles classiques telles que les boucles et les instructions conditionnelles, mais nous permet également de définir des codes courts qui génèrent davantage de code HTML ou qui invoquent d'autres logiques.
Comme la plupart des équipes qui créent des sites de contenu statique, nous avons commencé petit et ajouté progressivement des codes courts (environ 20 jusqu'à présent). La plupart de ces éléments génèrent simplement du code HTML supplémentaire (y compris nos composants Web personnalisés). Exemple :
{% Aside %}
See how Asides work in the web.dev codebase
{% endAside %}
Voici à quoi elle ressemblera:
Mais elle crée en fait du code HTML qui ressemble à ceci:
<div class="aside color-state-info-text">
<p>See how Asides work in the web.dev codebase</p>
</div>
Bien que cela ne soit pas abordé dans cet article, web.dev utilise également des codes courts en tant que type de langage de métaprogrammation. Les codes courts acceptent des arguments, dont l'un correspond au contenu contenu. Il n'est pas nécessaire que les codes courts renvoient quoi que ce soit. Ils peuvent donc être utilisés pour créer un état ou déclencher un autre comportement. 🤔💭
Script
Comme indiqué précédemment, étant donné que web.dev est un site statique, il peut être diffusé et utilisé sans JavaScript et par les anciens navigateurs qui ne sont pas compatibles avec type="module" ni avec notre autre code moderne.
Il s'agit d'un aspect incroyablement important de notre approche pour rendre web.dev accessible à tous.
Cependant, pour les navigateurs récents, le code se compose de deux parties principales:
- Le code d'amorçage, qui inclut le code pour l'état global, Analytics et le routage SPA
- Code et CSS pour les composants Web, qui améliorent progressivement le site
Le code d'amorçage est assez simple: web.dev peut charger de nouvelles pages en tant qu'application monopage (SPA). Nous installons donc un écouteur global qui écoute les clics sur les éléments <a href="..."> locaux.
Le modèle SPA nous aide à maintenir l'état global de la session actuelle de l'utilisateur. Sinon, chaque nouveau chargement de page déclenche des appels à Firebase pour accéder à l'état de connexion d'un utilisateur.
Nous spécifions également quelques points d'entrée différents sur notre site en fonction de l'URL que vous avez atteinte, et nous chargeons celle qui convient à l'aide d'une import() dynamique.
Cela réduit le nombre d'octets dont nos utilisateurs ont besoin pour que le site soit amélioré avec du code.
Composants Web
Les composants Web sont des éléments personnalisés qui encapsulent les fonctionnalités d'exécution fournies en JavaScript. Ils sont identifiés par des noms personnalisés tels que <web-codelab>.
La conception se prête bien aux sites principalement statiques comme web.dev: votre navigateur gère le cycle de vie d'un élément à mesure que le code HTML du site est mis à jour, informant correctement tous les éléments lorsqu'ils sont associés ou détachés de la page.
De plus, les navigateurs obsolètes ignorent complètement les composants Web et affichent ce qui reste dans le DOM.
Chaque composant Web est une classe dotée de méthodes telles que connectedCallback(), disconnectedCallback() et attributeChangedCallback().
Les éléments personnalisés de web.dev héritent principalement de LitElement, qui fournit une base simple pour des composants complexes.
Bien que web.dev utilise des composants Web sur de nombreuses pages, rien n'est plus nécessaire que sur la page Mesurer. L'essentiel des fonctionnalités de cette page se compose de deux éléments:
<web-url-chooser-container></web-url-chooser-container>
<web-lighthouse-scores-container></web-lighthouse-scores-container>
Ces éléments créent des éléments supplémentaires qui offrent plus de fonctionnalités. Il est important de noter que ces éléments font simplement partie de notre code source Markdown standard. Notre équipe chargée du contenu peut ajouter des fonctionnalités étendues à n'importe quelle page, et pas seulement au nœud de mesure.
Nos composants Web utilisent le plus souvent le modèle Composant de conteneur, populaire par React, bien que ce modèle soit désormais un peu dépassé.
Chaque élément -container se connecte à notre état global (fourni par unistore), puis affiche un élément visuel, qui, à son tour, affiche des nœuds DOM réels qui intègrent des styles ou d'autres fonctionnalités.
Nos composants Web les plus complexes permettent de visualiser les actions et l'état globaux. Par exemple, web.dev vous permet d'auditer votre site préféré, puis de quitter la page "Mesurer". Si vous revenez sur cette page, vous constaterez que la tâche est toujours en cours.
Nos composants simples améliorent purement du contenu statique ou créent des visualisations incroyables (par exemple, chaque graphique linéaire possède son propre <web-sparkline-chart>), qui n'a aucun lien avec l'état global.
Parlons-en ensemble
L'équipe d'ingénieurs web.dev (Rob, Ewa, Michael et Sam) vous recontactera bientôt avec des présentations plus techniques plus approfondies.
Nous espérons que votre expérience vous aura donné des idées pour vos propres projets. Si vous avez des questions ou des demandes concernant ce blog, contactez-nous sur Twitter !