Ini adalah postingan pertama di blog engineering web.dev. Dalam beberapa bulan ke depan, kami berharap dapat membagikan hasil analisis yang bisa ditindaklanjuti dari pekerjaan kami. Jadi, nantikan postingan dengan tag Blog Engineering. Di sini kita akan membahas proses pembuatan untuk situs statis dan (opsional!) JavaScript di balik komponen web.
web.dev menyediakan konten tentang cara membuat pengalaman web yang modern dan memungkinkan Anda mengukur performa situs Anda. Pengguna cerdas mungkin telah menyadari bahwa halaman Measure 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 sehingga Anda dapat melihat perubahan skornya dari waktu ke waktu. Saya akan meninjau kembali halaman Ukur nanti, karena menurut kami halaman ini cukup istimewa. 🎊
Pengantar
Pada dasarnya, web.dev adalah situs statis yang dihasilkan dari sekumpulan file Markdown. Kami telah memilih untuk menggunakan Eleventy karena ini adalah 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 ada, tetapi tidak oleh sebagian kecil versi yang lebih lama.
Karena kita adalah situs statis, JavaScript tidak diperlukan untuk membaca konten kita.
Setelah proses build—yang melibatkan pembuatan HTML statis dan pemaketan JavaScript dengan Rollup—selesai, web.dev dapat dihosting dengan server statis sederhana untuk pengujian. Situs ini hampir sepenuhnya statis, namun kami memiliki beberapa kebutuhan khusus yang masih dapat memanfaatkan server Node.js kustom. Hal ini mencakup pengalihan untuk domain yang tidak valid, serta kode untuk menguraikan bahasa pilihan pengguna untuk fitur internasionalisasi mendatang.
Pembuatan statis
Setiap halaman pada web.dev ditulis dalam Markdown. Semua halaman menyertakan hal utama, yang menjelaskan metadata tentang setiap postingan. Metadata ini diserap ke dalam tata letak setiap halaman, 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...
Masalah awal ini memungkinkan kita menentukan properti arbitrer seperti penulis, tanggal publikasi, dan tag. Eleventy dengan mudah mengekspos materi depan 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 penurunan data—berbagai data yang diambil dari setiap halaman individu, 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 mewarisi dari tata letak lainnya. Di web.dev, kami menggunakan fitur ini untuk membingkai berbagai jenis konten dengan benar (seperti postingan dan codelab) sambil tetap berbagi satu tata letak HTML tingkat atas.
Koleksi
Eleventy menyediakan cara terprogram untuk membuat koleksi konten arbitrer. Ini memungkinkan kita membangun dukungan penomoran halaman dan menghasilkan halaman virtual (halaman yang tidak memiliki file Markdown yang cocok pada disk) untuk penulis postingan. Misalnya, kami membuat halaman penulis menggunakan template yang berisi ekspresi untuk permalinknya (sehingga template dirender ulang untuk setiap penulis) dan koleksi pendukung.
Hal ini menghasilkan, misalnya, halaman sederhana yang berisi semua postingan Addy.
Batasan
Saat ini, kami tidak dapat dengan mudah memahami proses build Eleventy karena bersifat deklaratif, bukan imperatif: Anda mendeskripsikan hal yang diinginkan, bukan cara yang Anda inginkan. 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 template yang khas seperti loop dan kondisional, tetapi juga memungkinkan kita menentukan shortcode yang menghasilkan HTML lebih lanjut atau memanggil logika lainnya.
Seperti kebanyakan tim yang membuat situs konten statis, kami memulai dari kecil dan menambahkan kode pendek dari waktu ke waktu—sejauh ini, sekitar 20 situs. Sebagian besar hanya menghasilkan HTML lebih lanjut (termasuk komponen web khusus kami). Berikut contohnya:
{% Aside %}
See how Asides work in the web.dev codebase
{% endAside %}
Hasilnya akan terlihat seperti ini:
Tetapi ini sebenarnya 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>
Di luar cakupan postingan ini, web.dev juga menggunakan {i>shortcode<i} sebagai salah satu jenis bahasa {i>metaprogramming<i}. Kode singkat menerima argumen, dengan salah satu argumennya adalah konten yang ditampung. Shortcode tidak perlu menampilkan apa pun, sehingga dapat digunakan untuk membangun 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 kami lainnya.
Hal ini merupakan 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 progresif meningkatkan situs
Kode bootstrap cukup mudah: web.dev dapat memuat halaman baru sebagai aplikasi web satu halaman (SPA), jadi kami menginstal pemroses global yang memproses klik pada elemen <a href="..."> lokal.
Model SPA membantu kita 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 buka, dan memuat URL yang benar menggunakan import() dinamis.
Hal ini mengurangi jumlah byte yang dibutuhkan pengguna sebelum situs disempurnakan dengan kode.
Komponen Web
Komponen Web
adalah elemen kustom yang merangkum fungsi runtime yang disediakan dalam JavaScript, dan diidentifikasi oleh nama kustom seperti <web-codelab>.
Desainnya sangat sesuai untuk situs yang sebagian besar statis seperti web.dev: browser Anda mengelola siklus proses suatu elemen saat HTML situs diupdate, sehingga menginformasikan elemen apa pun dengan benar saat elemen tersebut terpasang atau dilepas dari halaman.
Dan browser lama 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().
Elemen kustom web.dev sebagian besar mewarisi dari LitElement, yang menyediakan dasar sederhana untuk komponen yang kompleks.
Meskipun web.dev menggunakan Komponen Web di banyak halaman, tidak ada hal yang lebih penting selain di halaman Measure. 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-elemen ini membuat elemen-elemen lebih lanjut yang menyediakan lebih banyak fungsi. Yang penting, elemen-elemen ini merupakan bagian dari kode sumber Markdown reguler kami—dan tim konten kami dapat menambahkan fungsi yang diperluas ke halaman mana pun, bukan hanya node Measure.
Komponen Web kami paling sering menggunakan model Komponen Container yang dipopulerkan oleh React, meskipun model ini sekarang sudah agak usang.
Setiap elemen -container terhubung ke status global (disediakan oleh unistore), lalu merender elemen visual, yang kemudian akan merender node DOM sebenarnya yang memiliki gaya atau fungsi bawaan lainnya.
Komponen Web kami yang paling kompleks hadir untuk memvisualisasikan tindakan dan status global. Misalnya, web.dev memungkinkan Anda mengaudit situs favorit Anda, lalu keluar dari halaman Measure. Jika kembali, Anda akan melihat bahwa tugas masih berlangsung.
Komponen sederhana kami semata-mata meningkatkan konten statis atau membuat visualisasi yang luar biasa (misalnya, setiap grafik garis memiliki <web-sparkline-chart> sendiri), yang tidak memiliki hubungan dengan status global.
Ayo mengobrol
Tim engineering web.dev (Rob, Ewa, Michael, dan Sam) akan segera menindaklanjuti dengan pembahasan teknis yang lebih mendalam.
Kami harap mendengar tentang cara kami melakukan berbagai hal dapat memberi Anda beberapa ide untuk proyek Anda sendiri. Hubungi kami di Twitter jika Anda memiliki pertanyaan atau permintaan topik untuk blog ini.