Kisah Pembangunan Ulang Tech Stack Facebook

Facebook, yang dimulai dengan PHP sederhana, menceritakan proses dan pelajaran saat beralih ke React + Relay (GraphQL) agar sesuai dengan desain baru kali ini

Menerapkan prinsip dasar untuk aplikasi yang cepat pada masing-masing CSS, JS, Data, dan Navigation

1. Kirim hanya resource yang diperlukan secepat mungkin

2. Pengalaman engineering untuk pengalaman pengguna

CSS

• Mengurangi CSS hingga 80% dengan Atomic CSS, dan diubah agar tidak mengunduh CSS yang tidak diperlukan

• Menggunakan rems demi aksesibilitas, dan untuk mengurangi bug saat konversi manual px → rems, build tool mengubahnya secara otomatis

• Menggunakan variabel CSS untuk Theming (mode gelap)

• Menggunakan Inline SVG untuk mencegah flicker (alih-alih memasukkan file SVG ke img). Ini juga memungkinkan perubahan warna saat runtime

JS

• Mengirim JS yang sudah di-code-splitting dalam 3 tahap secara bertahap

Tier 1. Layout dasar untuk menampilkan UI skeleton dengan cepat saat loading

Tier 2. JS untuk merender sepenuhnya semua konten yang terlihat di layar. Harus sudah bisa digunakan sepenuhnya, dan meskipun kode dimuat setelah Tier 2, komposisi layar tidak boleh berubah

Tier 3. Semua hal yang diperlukan setelah layar ditampilkan. Kode logging, subscription update real-time, dll.

• 500KB JS dibagi menjadi 50KB Tier 1, 150KB Tier 2, 300KB Tier 3 → menghasilkan loading dan tampilan layar yang selesai sangat cepat

• Berkat pemisahan ini, saat A/B test juga memungkinkan pengaturan agar masing-masing sisi hanya menerima kode yang dibutuhkan

• Memanfaatkan fitur Relay yang membantu membuat aplikasi React berbasis data, sehingga hanya komponen yang diperlukan sesuai data yang akan diambil yang dimuat

• Memperkenalkan sistem JS Budget per produk. Budget ditetapkan berdasarkan target performa, batasan teknis, dan pertimbangan produk. Mencegah kode terus bertambah seiring waktu.

Data

• Menggunakan Relay untuk menstandarkan semua data fetching agar memakai GraphQL

• Berkat Relay, data yang dibutuhkan dapat diunduh lebih dulu secara paralel sejak tahap permintaan halaman. Memungkinkan tampilan layar lebih cepat

• Menggunakan @stream, ekstensi internal GraphQL, agar hal seperti news feed dapat mengirim data secara bertahap dalam satu query tanpa beberapa round trip

• Dengan @defer + React Suspense, data yang tidak langsung diperlukan dimuat belakangan

Navigation

• Saat navigasi SPA, membangun Route Map untuk mengurangi waktu loading resource dan round trip saat memuat halaman baru

• Memecah dan memuat informasi route ke Route Map secepat mungkin saat dibutuhkan

• Melakukan prefetch resource terlebih dahulu secepat mungkin (prefetch saat hover, mengambil kode dan data saat mouse down, lalu mengubah state React saat klik terjadi)

• Alih-alih menampilkan layar kosong di antara navigasi, memanfaatkan transisi React Suspense untuk tetap menampilkan route lama sebelum route baru diambil

• Menggunakan EntryPoints (file kecil yang membungkus titik percabangan kode dan data query) untuk memparalelkan unduhan kode dan data

[xguru]

Hal-hal yang saya ketahui dari CSS pada desain baru Facebook https://id.news.hada.io/topic?id=1819

Akan lebih baik jika Anda juga merujuk pada artikelnya.

[xguru]

Relay - Klien GraphQL siap-produksi untuk React https://relay.dev/