kompas.id

Teknologi: WordPress, WooCommerce, Timber/Twig, Nuxt.js, Vue.js, Vuex, Tailwind CSS, Redis, Jest, Storybook

Ringkasan

Saya memimpin arsitektur frontend kompas.id—platform berita berbayar milik harian Kompas—melalui tiga fase transformasi besar selama lima tahun. Platform ini berhasil mengonversi para pengambil keputusan di Indonesia (politisi, eksekutif, dan profesional) menjadi pelanggan setia jurnalisme berkualitas.

Data dan Fakta:

• 3.295 commit di dua codebase (1.228 di WordPress, 2.067 di Nuxt.js)—bukti kepemilikan arsitektur jangka panjang, bukan sekadar menyelesaikan tiket tugas.

• Kontributor utama di kedua platform—memiliki jumlah commit tertinggi di antara seluruh pengembang.

• Author of record pada package.json Nuxt.js—arsitek sekaligus pembangun fondasi awal.

• 85% reduksi ukuran CSS (300KB → 43KB)—berdampak langsung pada performa di telepon seluler di jaringan internet Indonesia.

• Membangun @kompas/ui—pustaka komponen (component library) yang digunakan di berbagai produk digital Kompas (kontributor utama dengan 117 commit).

Fase 1 (2016–2017): Fondasi Sistem Langganan

~410 commit. Membangun mesin pendapatan dari nol.

Saat proyek dimulai pada Oktober 2016, Kompas membutuhkan platform digital premium yang berbeda dari kompas.com atau kompas.tv yang bersifat gratis. Belajar dari pengalaman kompasprint.com, kompas.id dirancang sebagai rumah bagi konten berbayar. Saya ditugaskan membangun fondasi teknisnya.

Solusi yang Saya Bangun

Arsitektur Plugin Modular: Saya merancang tema WordPress dengan sistem plugin yang bisa diaktifkan secara independen. Tim editorial bisa menyalakan/mematikan fitur tanpa bantuan pengembang. Tim pemasaran bisa melakukan A/B testing tanpa risiko merusak stabilitas situs. Ini bukan sekadar over-engineering, melainkan kebutuhan bisnis agar ruang redaksi bisa bereksperimen dengan cepat.

Logika Paywall: Sistem ini menentukan siapa yang bisa mengakses konten—apakah artikel gratis, premium, atau cuplikan (freemium teaser). Saya menangani berbagai skenario kritis yang berdampak langsung pada pendapatan, mulai langganan kedaluwarsa, masa tenggang (grace period), hingga akses promosi. Kesalahan logis di sini berarti kehilangan pendapatan atau memblokir pelanggan yang sudah membayar.

Bilah Otentikasi (State Machine): Komponen header yang merefleksikan status keanggotaan secara waktu-nyata untuk empat tipe pengguna, yakni tamu, pengguna terdaftar non-pelanggan, pelanggan aktif, dan pelanggan kedaluwarsa. Tiap status memicu antarmuka dan ajakan yang berbeda tanpa perlu memuat ulang halaman. Ini adalah fitur krusial saat pembaca membuka banyak tab artikel sekaligus.

Sistem Email Transaksional: Saya mengustomisasi siklus email WooCommerce, yakni konfirmasi pesanan, notifikasi pengembalian dana, pengingat perpanjangan, hingga peringatan pembayaran gagal. Titik sentuh inilah yang menentukan apakah pelanggan akan lanjut berlangganan atau berhenti.

Realita di Lapangan

Saya tetap bekerja meski sedang berlibur akhir tahun 2016. Ini adalah peluncuran platform dengan tenggat yang sangat ketat. Ada uang nyata dan pelanggan nyata di sini. Saya tetap melakukan deployment saat hari libur karena kebutuhan bisnis tidak bisa menunggu.

Fase 2 (2018–2020): Refaktorisasi di Tengah Operasional

~810 commit. Melunasi utang teknis sambil menjaga arus pendapatan.

Pada 2018, kode mulai menumpuk beban teknis. Perubahan desain yang konstan dan pengembangan fitur yang cepat menciptakan kompleksitas berisiko. Setiap fitur baru berpotensi memicu bug di fitur lama.

Saya mendorong strategi refaktorisasi, bukan penulisan ulang total. Menulis ulang dari nol adalah pertaruhan yang mahal. Refaktorisasi memungkinkan kami merilis perbaikan secara bertahap sambil menjaga situs tetap aktif dan pendapatan tetap mengalir.

Perubahan Arsitektur

Separasi Timber/Twig: Saya membangun ulang lapisan PHP untuk memisahkan logika bisnis dari tampilan. PHP menangani data; template Twig menangani tampilan. Pola ini mengadopsi struktur Laravel ke dalam batasan WordPress. Kelas seperti Kompas\Pages\Meta menggantikan kode prosedural yang berantakan.

Migrasi Tailwind CSS: Stylesheet sebelumnya membengkak hingga ~300KB karena tumpukan CSS selama bertahun-tahun. Saya bermigrasi ke Tailwind dengan PurgeCSS, memangkas ukuran CSS produksi menjadi ~43KB. Di jaringan 3G Indonesia dengan perangkat kelas menengah, reduksi 85% ini sangat berpengaruh pada bounce rate.

Vue.js Islands: Saya memperkenalkan Vue.js bukan sebagai SPA total, melainkan sebagai komponen terisolasi untuk interaksi kompleks: AuthBar.vue, Paywall.vue, dan VideosPlaylist.vue. Hasilnya, HTML tetap di-render server untuk SEO, sementara interaktivitas ditangani oleh Vue.

Diplomasi Teknis

Meyakinkan pemangku kepentingan untuk berinvestasi pada refaktorisasi tidaklah mudah. Saya harus memberikan argumentasi kuat bahwa biaya pemeliharaan semakin mahal dan kecepatan rilis fitur baru semakin melambat. Refaktorisasi mungkin tidak terlihat dalam pengumuman fitur baru, tetapi ia terlihat nyata pada kecepatan tim dalam mengeksekusi ide.

Fase 3 (2020–2021): Migrasi ke Nuxt.js

2.067 commit. Pembangunan ulang platform di bawah batasan produksi.

Pada pertengahan 2020, WordPress mulai menjadi penghambat. Bisnis membutuhkan iterasi lebih cepat dan performa lebih baik. Saya memimpin migrasi ke Nuxt.js. Ini sebuah perombakan frontend total yang terlepas dari WordPress.

Arsitektur Utama

Server-Side Rendering (SSR): Menggunakan Nuxt.js agar mesin pencari (Google) tetap bisa mengindeks konten tanpa menjalankan JavaScript. Logika paywall dijalankan di sisi server sebelum halaman sampai ke peramban pengguna.

Lapisan API: Frontend mengonsumsi berbagai layanan backend: APIKID untuk konten, APIGEN untuk data pengguna, dan layanan akun untuk otentikasi. Saya membangun middleware Express untuk menangani perutean, alur otentikasi, dan transformasi respons.

Tembolok Redis: Konten statis seperti daftar kategori dan menu disimpan di lapisan middleware menggunakan Redis.

Budaya Rekayasa ("Engineering")

Pengujian Testing dan Dokumentasi: Uji unit dijalankan sejak hari pertama menggunakan Jest melalui GitHub Actions. Saya juga menggunakan Storybook untuk mendokumentasikan komponen secara terisolasi sehingga pengembang lain bisa melihat perilaku komponen tanpa perlu menjalankan aplikasi secara utuh.

Sistem Desain @kompas/ui: Saya membangun pustaka komponen standar untuk tombol, input, navigasi, hingga tipografi. Meski awalnya ada tantangan dalam menyamakan standar antar tim, saya berhasil membuktikan bahwa komponen bersama mempercepat pengembangan dan menjaga konsistensi visual.

Apa yang Akan Saya Lakukan secara Berbeda

TypeScript sejak hari pertama. Saat itu, adopsi TypeScript di tim kami masih lemah. Basis kode Nuxt.js tersebut menggunakan JavaScript murni. Setiap kali melakukan refaktorisasi kompleks, saya diingatkan betapa pentingnya static typing. Jika saya bisa mengulang Fase 3, penggunaan TypeScript akan menjadi harga mati.

Dampak dan Hasil Akhir

• Fase 1: Membangun infrastruktur langganan dari nol dan memastikan logika akses konten aman.

• Fase 2: Reduksi CSS sebesar 85% meningkatkan performa di telepon seluler; pola arsitektur enterprise mempercepat onboarding pengembang baru.

• Fase 3: Migrasi platform total tanpa mengganggu stabilitas produksi; menetapkan standar pengujian dan dokumentasi yang bertahan lama.

Masih Berjalan

Hingga tahun 2026, kompas.id masih berjalan di atas fondasi Nuxt.js yang saya bangun. Jejak arsitektur seperti SSR, pola caching, dan batasan komponen yang saya tetapkan masih menjadi inti dari platform ini meskipun teknologinya terus berevolusi.