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 Engineering Blog. 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 secara rutin di situs Anda sehingga Anda dapat melihat perubahan skornya dari waktu ke waktu. Saya akan meninjau kembali halaman Ukur nanti, karena menurut kami ini cukup spesial. 🎊
Pengantar
Pada dasarnya, web.dev adalah situs statis yang dihasilkan dari sekumpulan {i>file<i} Markdown. Kita telah memilih untuk menggunakan Eleventy karena merupakan alat yang diperluas 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, yang 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 masalah utama sebagai data di hampir setiap plugin, template, atau konteks lain tempat kami 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 resource tersebut 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 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 membangun status atau memicu 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 kami yang lain.
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:
- Kode bootstrap, yang mencakup kode untuk status global, Analytics, dan perutean SPA
- 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 dalam situs kami berdasarkan URL yang Anda klik, dan memuat titik masuk 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.
Dan browser kuno hanya mengabaikan Komponen Web sama sekali dan merender apa pun yang tersisa di DOM.
Setiap Komponen Web adalah class dengan metode yang mencakup connectedCallback(), disconnectedCallback(), dan attributeChangedCallback().
Sebagian besar elemen kustom web.dev mewarisi dari LitElement, yang memberikan dasar sederhana untuk komponen kompleks.
Meskipun web.dev menggunakan Komponen Web di banyak halaman, cara ini lebih penting daripada di halaman Mengukur. 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 (disediakan oleh unistore), lalu merender elemen visual, yang selanjutnya merender node DOM sebenarnya yang memiliki gaya visual atau fungsi bawaan lainnya.
Komponen Web kita yang paling kompleks dibuat 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.