Ceci est le premier article sur le blog d'ingénierie web.dev. Dans les mois à venir, nous sommes impatients de partager des informations utiles sur notre travail, alors gardez un œil sur les articles tagués Engineering Blog! Ici, nous allons couvrir le processus de construction de notre site statique et le JavaScript (facultatif!) Derrière nos composants Web.
web.dev fournit du contenu sur la création d'expériences Web modernes et vous permet de mesurer les performances de votre site. Les utilisateurs intelligents ont peut-être réalisé que notre page de mesure n'est qu'une interface pour 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 car il s'agit d'un outil perfectionné et extensible qui facilite la conversion de Markdown en HTML.
Nous utilisons également des packages JavaScript modernes qui ne servent que les navigateurs pris en charge 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.
Une fois le processus de construction terminé, ce qui implique la génération de HTML statique et l'empaquetage de notre JavaScript avec Rollup, web.dev peut être hébergé avec un simple serveur statique à des fins de test. Le site est presque complètement statique, mais nous avons des besoins spéciaux qui bénéficient toujours d'un serveur Node.js personnalisé. Il s'agit notamment des redirections pour les domaines non valides, ainsi que du code pour analyser la langue préférée d'un utilisateur pour une fonctionnalité d'internationalisation à venir.
Bien qu'il s'agisse d'un produit Google, web.dev n'utilise aucun outil ou processus interne de Google. Vous pouvez consulter notre référentiel. Nous faisons cela parce que l'équipe qui crée et gère web.dev est chargée de défendre au sein de Google au nom de l'écosystème plus large des développeurs Web, il est donc plus logique pour nous de disposer des mêmes outils que les développeurs Web externes.
Génération statique
Chaque page sur web.dev est écrite en Markdown. Toutes les pages comprennent problème principal, qui décrit les métadonnées de chaque publication. Ces métadonnées sont intégrées dans la conception de chaque page, créant des en-têtes, des étiquettes, etc. Voici un exemple:
---
mise en page: poste
title: Qu'est-ce que la fiabilité du réseau et comment la mesurez-vous?
auteurs:
- jeffposnick
date: 2018-11-05
description: |
Le Web moderne est apprécié par un large éventail de personnes ...
--- Le Web moderne est apprécié par un large éventail de [ personnes ] (https://www.youtube.com/watch?v=dQw4w9WgXcQ) , utilisant une gamme de différents appareils et types de connexions réseau.
Vos créations peuvent toucher des utilisateurs du monde entier ...
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 fournit un moyen par programme de créer des collections arbitraires de contenu. Cela nous a permis de créer un support de 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 publication. Par exemple, nous construisons les pages de nos auteurs en utilisant un modèle qui contient une expression pour leur permalien (le modèle est donc re-rendu pour chaque auteur) et une collection de support.
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:
{% en plus de %}
[Voir comment fonctionne Asides dans la base de code web.dev] (/ handbook / web-dev-components / #asides)
{% endAside %}Cela finira par ressembler à ceci:
Mais vous créez en fait du HTML qui ressemble à ceci:
< div class = " w-side w-apart - note " >
<P> <a href = "/ handbook / web-dev-components / #asides"> Découvrez comment fonctionne Asides dans la base de code web.dev a > p >
div >Bien que cela n'entre pas dans le cadre de cet article, web.dev utilise également des codes courts comme une sorte de langage de métaprogrammation. Les codes courts acceptent des arguments, dont l'un est le contenu contenu. Les shortcodes n'ont pas besoin de renvoyer quoi que ce soit, ils peuvent donc être utilisés pour générer un état ou déclencher un autre comportement. 🤔💭
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" ou notre autre code moderne. C'est une partie extrêmement importante de notre approche visant à rendre web.dev accessible à tous.
Cependant, notre code pour les navigateurs modernes se compose de deux parties principales:
- Code d'amorçage, y compris le code pour l'état global du SPA, l'analyse et le routage
- 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 d'une seule page (SPA), nous avons donc installé un écouteur global qui écoute les clics localement. é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.
Nous spécifions également quelques points d'entrée différents sur notre site en fonction de l'URL à laquelle vous avez accédé, et chargeons le bon à l'aide de 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
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:
< conteneur-de-sélection-d'url-web > conteneur-de-sélection-d'url-web >
< web-lighthouse-scores-container > conteneur-de-scores-de-phare-web >Ces éléments créent d'autres éléments qui fournissent plus de fonctionnalités. Surtout, ces éléments ne sont qu'une partie de notre code source normal de Markdown, et notre équipe de contenu peut ajouter des fonctionnalités étendues à 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
Parlons
L'équipe d'ingénierie de web.dev (Voler, Ewa, Miguely Sam) se poursuivra bientôt avec des plongées plus techniques.
Nous espérons qu'écouter comment nous faisons les choses vous a donné quelques idées pour vos propres projets. Contactez-nous sur Twitter si vous avez des questions ou des demandes de sujets pour ce blog!
