Blog engineering web.dev #1: Cara kami membangun situs dan menggunakan Komponen Web

Ini adalah postingan pertama di blog engineering web.dev. Dalam beberapa bulan mendatang, kami berharap dapat membagikan insight yang bisa ditindaklanjuti dari pekerjaan kami. Jadi, nantikan postingan dengan tag Blog Engineering. Di sini, kita akan membahas proses build untuk situs statis dan (opsional!) JavaScript di balik komponen web kita.

web.dev menyediakan konten tentang cara membuat pengalaman web modern dan memungkinkan Anda mengukur performa situs. Pengguna yang cerdas mungkin menyadari bahwa halaman Ukur kami hanyalah antarmuka untuk Lighthouse, yang juga tersedia di DevTools Chrome. Dengan login ke web.dev, Anda dapat menjalankan audit Lighthouse reguler di situs Anda sehingga dapat melihat perubahan skornya dari waktu ke waktu. Saya akan mengunjungi kembali halaman Ukur nanti, karena kami menganggapnya cukup istimewa. 🎊

Pengantar

Pada dasarnya, web.dev adalah situs statis yang dibuat dari kumpulan file Markdown. Kami telah memilih untuk menggunakan Eleventy karena merupakan alat yang canggih dan dapat diperluas yang memudahkan untuk mengubah Markdown menjadi HTML.

Kami juga menggunakan paket JavaScript modern yang hanya kami tayangkan ke browser yang mendukung type="module", yang mencakup async dan await. Kami juga senang menggunakan fitur yang didukung oleh browser yang selalu diperbarui, tetapi tidak didukung oleh sebagian kecil versi lama. Karena kami adalah situs statis, JavaScript tidak diperlukan untuk membaca konten kami.

Setelah proses build—yang melibatkan pembuatan HTML statis dan menggabungkan JavaScript dengan Rollup—selesai, web.dev dapat dihosting dengan server statis sederhana untuk pengujian. Situs ini hampir sepenuhnya statis, tetapi kami memiliki beberapa kebutuhan khusus yang masih mendapatkan manfaat dari server Node.js kustom. Hal ini mencakup pengalihan untuk domain yang tidak valid, serta kode untuk mengurai bahasa pilihan pengguna untuk fitur internasionalisasi mendatang.

Pembuatan statis

Setiap halaman di web.dev ditulis dalam Markdown. Semua halaman menyertakan bagian awal, yang menjelaskan metadata tentang setiap postingan. Metadata ini diserap ke dalam tata letak setiap halaman, sehingga membuat judul, tag, dan sebagainya. Berikut contohnya:

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

Bagian awal ini memungkinkan kita menentukan properti arbitrer seperti penulis, tanggal publikasi, dan tag. Eleventy dengan mudah mengekspos materi awal sebagai data di hampir setiap plugin, template, atau konteks lain tempat kita ingin melakukan sesuatu yang cerdas. Objek data juga berisi apa yang dijelaskan Eleventy sebagai cascade data—berbagai data yang diambil dari setiap halaman, dari tata letak yang digunakan halaman, dan dari data yang ditemukan dalam struktur folder hierarkis.

Setiap tata letak unik menjelaskan jenis konten yang berbeda dan dapat diwarisi dari tata letak lain. Di web.dev, kami menggunakan fitur ini untuk membingkai berbagai jenis konten (seperti postingan dan codelab) dengan benar sambil tetap menggunakan satu tata letak HTML tingkat atas.

Koleksi

Eleventy menyediakan cara terprogram untuk membuat koleksi konten arbitrer. Hal ini memungkinkan kami membuat dukungan penomoran halaman dan membuat halaman virtual (halaman yang tidak memiliki file Markdown yang cocok di disk) untuk penulis postingan. Misalnya, kita membuat halaman penulis menggunakan template yang berisi ekspresi untuk permalink-nya (sehingga template dirender ulang untuk setiap penulis) dan koleksi pendukung.

Hal ini akan menghasilkan, misalnya, halaman sederhana yang berisi semua postingan Addy.

Batasan

Saat ini, kita tidak dapat dengan mudah terhubung ke proses build Eleventy karena bersifat deklaratif, bukan imperatif: Anda mendeskripsikan apa yang Anda inginkan, bukan bagaimana Anda menginginkannya. Sulit untuk menjalankan Eleventy sebagai bagian dari alat build yang lebih besar, karena hanya dapat dipanggil melalui antarmuka command line-nya.

Pembuatan Template

web.dev menggunakan sistem template Nunjucks yang awalnya dikembangkan oleh Mozilla. Nunjucks memiliki fitur pembuatan template standar seperti loop dan kondisional, tetapi juga memungkinkan kita menentukan shortcode yang menghasilkan HTML lebih lanjut atau memanggil logika lain.

Seperti kebanyakan tim yang membuat situs konten statis, kami memulai dari yang kecil dan menambahkan shortcode dari waktu ke waktu—hingga saat ini ada sekitar 20 shortcode. Sebagian besar hanya menghasilkan HTML lebih lanjut (termasuk komponen web kustom kami). Berikut contohnya:

{% Aside %}
See how Asides work in the web.dev codebase
{% endAside %}

Hasilnya akan terlihat seperti ini:

Namun, sebenarnya kode ini membuat HTML yang terlihat seperti ini:

<div class="aside color-state-info-text">
<p>See how Asides work in the web.dev codebase</p>
</div>

Meskipun berada di luar cakupan postingan ini, web.dev juga menggunakan shortcode sebagai jenis bahasa meta-pemrograman. Shortcode menerima argumen, dengan salah satu argumennya adalah konten yang dimuat. Shortcode tidak perlu menampilkan apa pun, sehingga dapat digunakan untuk membuat status atau memicu beberapa perilaku lainnya. 🤔💭

Pembuatan Naskah

Seperti yang disebutkan sebelumnya, karena web.dev adalah situs statis, situs ini dapat ditayangkan dan digunakan tanpa JavaScript dan oleh browser lama yang tidak mendukung type="module" atau kode modern lainnya. Hal ini adalah bagian yang sangat penting dari pendekatan kami untuk membuat web.dev dapat diakses oleh semua orang.

Namun, kode kami untuk browser modern terdiri dari dua bagian utama:

  1. Kode bootstrap, yang mencakup kode untuk status global, Analytics, dan perutean SPA
  2. Kode dan CSS untuk Komponen Web yang secara bertahap meningkatkan kualitas situs

Kode bootstrap cukup mudah: web.dev dapat memuat halaman baru sebagai aplikasi web satu halaman (SPA), sehingga kita menginstal pemroses global yang memproses klik pada elemen <a href="..."> lokal. Model SPA membantu kami mempertahankan status global tentang sesi pengguna saat ini, karena jika tidak, setiap pemuatan halaman baru akan memicu panggilan ke Firebase untuk mengakses status login pengguna.

Kami juga menentukan beberapa titik entri yang berbeda ke situs kami berdasarkan URL yang Anda buka, dan memuat URL yang benar menggunakan import() dinamis. Hal ini mengurangi jumlah byte yang diperlukan pengguna sebelum situs ditingkatkan dengan kode.

Komponen Web

Komponen Web adalah elemen kustom yang mengenkapsulasi fungsi runtime yang disediakan dalam JavaScript, dan diidentifikasi dengan nama kustom seperti <web-codelab>. Desain ini sangat cocok untuk situs yang sebagian besar statis seperti web.dev: browser Anda mengelola siklus proses elemen saat HTML situs diperbarui, yang memberi tahu elemen dengan benar saat dilampirkan atau dilepas dari halaman. Selain itu, browser lama mengabaikan Komponen Web sepenuhnya dan merender apa pun yang tersisa di DOM.

Setiap Komponen Web adalah class dengan metode yang mencakup connectedCallback(), disconnectedCallback(), dan attributeChangedCallback(). Elemen kustom web.dev sebagian besar diwarisi dari LitElement, yang menyediakan dasar sederhana untuk komponen kompleks.

Meskipun web.dev menggunakan Komponen Web di banyak halaman, penggunaannya paling diperlukan di halaman Ukur. Dua elemen menyediakan sebagian besar fungsi yang Anda lihat di halaman ini:

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

Elemen ini membuat elemen lebih lanjut yang memberikan lebih banyak fungsi. Yang penting, elemen ini hanyalah bagian dari kode sumber Markdown reguler kami—dan tim konten kami dapat menambahkan fungsi yang diperluas ke halaman mana pun, bukan hanya node Ukur.

Komponen Web kami paling sering menggunakan model Komponen Penampung, yang dipopulerkan oleh React, meskipun model ini sekarang sudah agak ketinggalan zaman. Setiap elemen -container terhubung ke status global kita (disediakan oleh unistore), lalu merender elemen visual, yang pada akhirnya akan merender node DOM sebenarnya yang memiliki gaya visual atau fungsi bawaan lainnya.

Diagram yang menunjukkan hubungan antara status global dan elemen HTML yang menggunakannya.
Status global dan Komponen Web

Komponen Web kami yang paling kompleks ada untuk memvisualisasikan tindakan dan status global. Misalnya, web.dev memungkinkan Anda mengaudit situs favorit, lalu keluar dari halaman Ukur. Jika kembali, Anda akan melihat bahwa tugas masih berlangsung.

Komponen sederhana kami murni meningkatkan konten statis atau membuat visualisasi yang luar biasa (misalnya, setiap grafik garis adalah <web-sparkline-chart>-nya sendiri), yang tidak memiliki hubungan dengan status global.

Ayo mengobrol

Tim engineer web.dev (Rob, Ewa, Michael, dan Sam) akan segera menindaklanjuti dengan pembahasan mendalam yang lebih teknis.

Semoga dengan mengetahui cara kami melakukan sesuatu, Anda mendapatkan beberapa ide untuk project Anda sendiri. Hubungi kami di Twitter jika ada pertanyaan atau permintaan topik untuk blog ini.