@kompas/ui

Teknologi: Vue.js, Tailwind CSS, Rollup, Storybook

Masalah yang Sering Diabaikan

Sekilas, ini tampak seperti masalah ketidakkonsistenan visual biasa. Kenyataannya tidak sesederhana itu. Ini adalah masalah struktural organisasi.

Setiap tim di Kompas membangun tombol, kartu (card), dan komponen mereka sendiri. Setiap produk, mulai dari kompas.id, bebas.kompas.id, hingga sistem internal, memiliki nuansa biru yang berbeda, radius sudut (border-radius) yang tidak seragam, dan detail kecil lainnya yang bertabrakan.

Tim desainer terus mengirimkan berkas rancangan, sementara pengembang mengira-ngira kode warna hex secara manual. Setiap kali dibutuhkan komponen kartu sederhana, pengembang akan menyalin-tempel kode (copy-paste) dari proyek mana pun yang sedang mereka buka saat itu.

Tanpa sistem terpusat, setiap tim mungkin bisa merilis fitur dengan cepat di produk masing-masing. Namun, mereka justru saling menghambat di level perusahaan. Inkonsistensi antarmuka (UI drift) meningkatkan beban pemeliharaan, tinjauan desain menjadi debat subjektif yang berlarut-larut, dan proses adaptasi (onboarding) pengembang baru menjadi lambat karena mereka harus mempelajari ulang pola yang berbeda-beda.

Yang kami butuhkan sebenarnya adalah infrastruktur frontend bersama. Sesuatu yang bisa dipasang sekali oleh tim dan tidak perlu dipikirkan lagi.

Kepemilikan Teknis

Saya memegang kendali penuh atas arah teknis secara menyeluruh, mulai dari arsitektur, pemilihan alat (tooling), API komponen, hingga bagaimana versi dirilis dan digunakan.

Adopsi sistem ini di seluruh tim bersifat sukarela (opt-in). Tidak ada mandat dari manajemen atas. Artinya, sistem ini harus membuktikan nilai gunanya sendiri agar mau diadopsi. Tidak ada yang dipaksa untuk menggunakannya. Batasan ini membentuk setiap keputusan yang saya ambil, mulai dari kesederhanaan API hingga kualitas dokumentasi.

Membangun dari Nol

Commit pertama dilakukan pada Juli 2019 dan hanya berisi kode dasar (boilerplate). Ini semacam initial commit optimistis yang belum menghasilkan apa-apa selain pernyataan niat.

Pengerjaan sesungguhnya baru dimulai pada Februari 2020. Saya merombak seluruh struktur: Vue.js sebagai kerangka kerja komponen, Rollup untuk pengemasan (bundling), dan Tailwind CSS untuk gaya visual.

Saya memilih Rollup ketimbang Webpack karena alasan sederhana. Untuk sebuah pustaka (library) yang akan digunakan proyek lain, Rollup menghasilkan output lebih bersih melalui pemangkasan kode yang lebih efisien (tree-shaking), dukungan modul ES asli, dan ukuran paket yang lebih kecil. Webpack memang sangat hebat untuk aplikasi, tetapi Rollup diciptakan untuk pustaka.

Menghubungkan Tailwind dengan Storybook dengan benar memakan waktu lebih lama dari yang seharusnya. Commit dengan pesan "css modules & postcss run on Storybook.. yay"? Itu adalah hasil dari "neraka konfigurasi" selama tiga hari—berkutat dengan versi PostCSS, pengaturan purge, dan kerumitan lainnya.

Komponen-Komponen Utama

Sepuluh komponen membentuk fondasi dasar, cukup untuk mencakup sebagian besar kebutuhan antarmuka tanpa membuat pustaka ini menjadi terlalu berat (over-engineered):

• kButton – Titik awal yang jelas. Menangani aksi klik, berbagai varian, dan status nonaktif.

• kCard – Ternyata cukup kompleks. Harus bisa berfungsi sebagai div biasa, tautan (link), router-link, hingga nuxt-link tergantung pada properti yang diberikan.

• kImg – Menjaga rasio aspek, pemuatan malas (lazy loading), dan dukungan srcset. Ini sangat krusial untuk situs media.

• kChip – Untuk label dan tag. Bisa ditutup atau permanen.

• kAvatar – Foto profil dengan tampilan cadangan berupa inisial.

• kBar – Bilah navigasi atas.

• kBreadcrumb – Jejak navigasi (breadcrumb).

• kProgress – Indikator pemuatan dengan efek kilau (shimmer).

• kDialog – Modal. Semua orang butuh modal.

• kAlert – Notifikasi dan peringatan.

Setiap komponen dirilis lengkap dengan dokumentasi interaktif di Storybook dan pengujian unit dasar. Dokumentasi ini berjalan di server pengembangan internal Kompas UI dan diperbarui secara otomatis setiap kali ada perubahan di cabang utama (main branch).

Token Desain

Satu hari di bulan Februari 2020 menceritakan segalanya: empat commit terpisah dalam sehari hanya untuk warna, font, margin, dan bayangan (box shadows). Itulah hari ketika kami membakukan bahasa visual Kompas ke dalam konfigurasi Tailwind.

JavaScript

brand: {
  1: '#00559A',
  2: '#00447B'
}

Dua warna biru itu adalah biru khas surat kabar. Mereka sekarang terkunci dalam kode, bukan lagi sekadar perkiraan di berkas desain seseorang. Berkas konfigurasi tersebut akhirnya menjadi lebih berharga daripada komponen individu mana pun. Saat branding perlu diperbarui, kami cukup mengubah satu berkas, dan setiap produk yang menggunakan sistem ini akan mendapatkan pembaruan secara otomatis.

Keputusan Terkait Lodash

Pada satu titik, ukuran paket (bundle size) mulai membengkak. Penyebabnya? Lodash. Kami mengimpor seluruh pustaka hanya untuk menggunakan sekitar tiga fungsi utilitas.

Pesan commit-nya tertulis jelas: "bikin helper sendiri pengganti lodash". Saya menulis utilitas khusus hanya untuk fungsi yang benar-benar kami butuhkan. Ukuran paket langsung turun seketika.

Untuk situs berita yang pembacanys mungkin menggunakan ponsel Android kelas menengah dengan koneksi seluler Indonesia yang tidak stabil, setiap kilobyte sangatlah berarti. Bagi kami, performa bukanlah sekadar "pelengkap", melainkan standar minimum.

Keputusan Terkait Tailwind

Satu pesan commit: "balikin ke tailwind sori hen bolak balik gini."

Saya sempat mencoba beralih ke CSS modules untuk cakupan gaya yang lebih terisolasi. Secara teknis berhasil, tetapi itu berarti kami harus meninggalkan utility classes Tailwind. Padahal, tim sudah sangat nyaman menggunakannya.

Saya memilih mengutamakan pengalaman pengembang (developer experience) daripada kerapian teknis. Sistem desain yang tidak ingin digunakan oleh siapa pun adalah sistem desain yang gagal. Terkadang, keputusan yang tepat bukanlah arsitektur yang paling murni secara teknis, melainkan arsitektur yang benar-benar akan digunakan oleh tim.

Hasil Akhir

Pustaka ini dipublikasikan ke npm sebagai @kompas/ui. Cukup pasang dengan npm i -D @kompas/ui, impor komponennya, selesai.

Hingga masa tugas saya berakhir, pustaka ini telah menyokong:

• kompas.id (produk langganan utama)

• Alat editorial internal

• Halaman kampanye pemasaran

Setidaknya ada 117 commit selama lebih kurang dua tahun. Sepuluh komponen yang akhirnya memberikan Kompas bahasa visual yang konsisten di berbagai produk.

Dampak Nyata

Budaya salin-tempel kode hampir sepenuhnya hilang. Saat pengembang butuh tombol, mereka memasang paket tersebut alih-alih mencari-cari di proyek lama. Keputusan UI bukan lagi debat subjektif, melainkan sebuah kesepakatan teknis.

Desainer kini memiliki referensi yang hidup. Alih-alih bertanya "apakah warnanya sudah benar?", mereka bisa mengarahkan pengembang ke server pengembangan internal dan berkata "gunakan kButton dengan varian primary." Desain menjadi bersifat instruktif, bukan lagi sekadar saran.

Proyek-proyek baru tidak lagi dimulai dari nol. Tim pemasaran bisa meluncurkan halaman kampanye tanpa harus menunggu seseorang membangun ulang elemen dasar antarmuka. Tim alat editorial berhenti menciptakan kembali kartu dan chip yang sama berulang kali.

Lebih penting lagi, hal ini mengubah cara tim bekerja sama setiap harinya. Pekerjaan frontend bergeser dari "menciptakan kembali fondasi" menjadi "menyusun komponen." Ini mengurangi beban kognitif bagi pengembang dan kelelahan pengambilan keputusan bagi desainer.

Secara kolektif, hal ini memangkas waktu pengembangan antarmuka untuk proyek baru hingga lebih dari separo.

Bagi bisnis berita berbasis langganan, konsistensi, performa, dan kecepatan bukanlah detail estetika. Hal-hal tersebut berpengaruh langsung pada kepercayaan, konversi, dan retensi pengguna.

Pelajaran yang Dipetik

Saya belajar bahwa membangun komponen adalah bagian yang mudah. Menyelaraskan banyak orang adalah pekerjaan yang sesungguhnya. Tantangan terbesarnya adalah bagaimana membuat tim mengadopsi sistem ini tanpa adanya paksaan.

Ukuran paket berperan seperti sebuah fitur, terlepas dari apakah Anda memperlakukannya demikian atau tidak. Ini terutama ketika pembaca Anda tersebar di seluruh nusantara dengan konektivitas yang beragam.

Konfigurasi Tailwind akhirnya menjadi infrastruktur, bukan sekadar pengaturan. Konfigurasi Tailwind dengan token desain Kompas adalah sumber referensi tunggal (source of truth) yang membuat segalanya berjalan selaras.

Adopsi mengikuti pengalaman pengembang, bukan kemegahan arsitektur. Saya memilih Tailwind daripada CSS modules karena tim memang akan menggunakannya. Kemurnian teknis tidak ada artinya jika tidak ada yang merilis produk menggunakan sistem Anda.