kompas.id

Situs berita berbasis langganan berbayar dari harian Kompas.

1 Oktober 2016 - kini

https://kompas.id

Situs berita digital berbasis langganan berbayar dari harian Kompas, surat kabar terkemuka dan paling berpengaruh di Indonesia yang sering menjadi rujukan bagi para pengambil keputusan seperti politikus dan pemimpin perusahaan. Situs ini berbeda dari saudaranya, kompas.com dan kompas.tv.

Tahap 1 - 2016: Tahun dimulainya pengembangan situs ini menggunakan perangkat lunak kode sumber terbuka untuk sistem pengelolaan konten dan niaga elektronik. Saya berkontribusi dalam pengembangan tema (theme) WordPress untuk mengakomodasi kebutuhan perusahaan. Selain itu untuk mendukung tema tersebut, saya juga membuat beberapa plugin yang bisa diaktifkan maupun dinonaktifkan kapan pun tanpa mengganggu kode utama di tema.

Tahap 2 - 2019: Sebagai akibat dari sering berubahnya desain dan permintaan klien, terdapat tumpukan kode baik yang terpakai maupun tidak sehingga pengembang mengalami kesulitan dalam perawatan. Saya memutuskan untuk merestrukturisasi kode tanpa mengubah fungsi dan perilaku yang sudah ada. Restrukturisasi kode PHP untuk memisahkan antara logika dan template, kode CSS untuk mereduksi ukurannya, dan kode Javascript untuk memberi jalan bagi pustaka/kerangka kerja modern.

Tema restrukturisasi ini tidak dibangun menggunakan standar WordPress (contoh the loop). Saya menginginkannya dengan gaya Laravel: pemisahan logika dan template, namespace PHP, dan paket Composer. Dengan Timber, pengembang fokus pada penyediaan data dan logika di berkas PHP dan fokus pada tampilan dengan mesin template Twig.

Kerangka kerja Tailwind CSS yang konfigurasinya mudah diubah suai mempercepat pembuatan kelas-kelas CSS. Pengembang tak perlu lagi membuang waktu memikirkan nama yang tepat untuk kelas CSS dan tak perlu khawatir apabila ada kelas ganda dengan nama berbeda tapi fungsinya sama. Hasilnya adalah ukuran berkas CSS sebesar 43kB setelah kelas-kelas tak terpakai dibuang, pengurangan luar biasa bila dibandingan dengan ukuran (sudah dirampingkan) sebelumnya sebesar 300-an kB.

Vue.js emnjadi kerangka kerja Javascript menggantikan jQuery. jQuery sebenarnya bagus hanya saja susah untuk membuat dan mengelola elemen-elemen kompleks. Dengan Vue, pengembang bisa memecah elemen-elemen antarmuka pengguna menjadi sejumlah komponen berkas tunggal yang lebih kecil dan bisa dipakai ulang. Tiap komponen memiliki template, skrip, dan gaya yang pemaiaiannya bisa dibikin terbatas di lingkup komponen tersebut.

Tahap 3 - 2020: Tantangan lain mengemuka dan membuat kami berpikir ulang mengenai cara membuat halaman-halaman situs bisa disesuaikan dengan kebutuhan pengguna dan model bisnis sekaligus, jika memungkinkan, mempercepat waktu muat dan meningkatkan performa halaman. Tak ada alasan bagi saya untuk tidak menggunakan Nuxt.js, apalagi setelah pengalaman baik yang diperoleh ketika membangun search.kompas.id.

Situs ini dibangun terpisah dari Wordpress dan sepenuhnya menggunakan Javascript.

#twig #timber #redis #node.js #tailwind css #wordpress #nuxt.js #vuex #vue.js

Terbikin dengan penuh 🤔 oleh Yosef Yudha Wijaya