4 Tips Mengembangkan Component System dalam Pengembangan Website
Ketika membuat suatu fitur atau komponen pada website, sering kali Front End Developer mengacu pada Design System yang sudah dibuat oleh Desainer UI. Dengan memakai tools seperti Zeplin dan Avocode, Front End Developer dapat mengembangkan tampilan visual yang apik pada halaman web yang dibuat.
Ketika fitur yang dikerjakan masih sedikit dan desain yang diterima tidak terlalu kompleks, semuanya terasa mudah. Namun, tantangan dan masalah umumnya datang ketika desain yang dijadikan patokan semakin variatif dan saat harus menyeimbangkan dengan fitur yang kian kompleks.
Belum lagi kalau di tengah proses ada perubahan desain yang membuat kepala semakin pening. Mungkin karena tidak paham kode yang dibuat atau paham kodenya tapi styling-nya terpencar-pencar sehingga harus mengubah kodenya satu per satu, dan karena masalah lainnya.
Nah, berikut beberapa tips untuk Front End Developer agar dapat membuat tampilan visual yang lebih futureproof dan tidak menjadi penghambat saat membuat suatu fitur.
1. Belajar HTML dan CSS
Sudah bukan rahasia umum lagi, kalau Front End tidak jauh-jauh dari HTML, CSS, dan Javascript. Dengan banyaknya Framework Javascript seperti React, Vue, dan Angular, tetap lebih banyak Front End yang mendalami Javascript, tetapi tidak memperdalam HTML dan CSS. Padahal, bagian fitur-fitur canggih hanya setengah dari Front End sendiri, setengahnya lagi adalah tampilan dan estetika desain.
Untuk membuat tampilan yang ciamik pada website, seperti pada desain, HTML, terutama CSS juga perlu diperdalam ilmunya agar jika desain yang diterima terlihat kompleks, developer bisa menerapkannya dengan baik pada website yang dibuat.
2. CDD (Component-Driven Development)
Salah satu keuntungan memakai framework adalah memudahkan dalam membuat komponen web. Komponen web yaitu elemen atau bagian dari suatu website yang dapat dipakai berulang-ulang.
Contoh elemen web adalah Button, Tabel, atau Form. Dari sisi development, komponen sangat membantu dalam pengembangan web sehingga komponen yang sejenis tidak duplikat dan menyulitkan dalam pengubahan aturan. Kalau dalam desain, ini mirip dengan Design System.
Dengan membuat pengembangan dasar website menjadi komponen kecil, akan memudahkan ketika ada perubahan, terutama perubahan desain. Jadi, tidak harus mengubah satu per satu elemen yang tersebar di seluruh bagian halaman web.
Kemudian untuk komponen sendiri, tidak harus bagian kecil seperti button atau input. Bisa juga di skala yang lebih besar, seperti satu page profil pelanggan biasa dan pelanggan VIP 90% terdiri dari bagian yang sama. Kamu bisa atur keduanya cukup memakai satu komponen saja. Dengan begitu, kalau ada perubahan pun yang diubah cukup satu saja. Lalu, kalau hanya ada perubahan di satu bagian saja, kamu sudah mempersiapkannya.
3. Mempelajari Desain yang Dibuat oleh Desainer
Mempelajari yang dimaksud di sini adalah memerhatikan pola-pola pada komponen yang sejenis. Ini bisa didapatkan dari dua hal yaitu dengan mempelajari styleguide dan mempelajari komponen atau pola pada desain yang tidak memiliki styleguide.
- Dengan styleguide
Styleguide bahasa sederhananya adalah standarisasi atau panduan pada komponen yang dibuat, misal pada button. Dengan adanya standarisasi ini, kamu bisa tahu di button ini ada style apa saja, padding-nya berapa, warna pada state-state tertentu ada apa saja, serta persyaratan-persyaratan lainnya.
Jadi, apabila desain pada suatu komponen sudah ada styleguide, tinggal mengikuti styleguide tersebut dan menyesuaikannya dalam komponen yang dibuat.
- Tanpa styleguide
Seringnya, desain yang dibuat tidak ada styleguide, hanya ada desain dari page-nya yang ada komponen di dalamnya. Jika sudah begini, kita membuat style-nya manual satu per satu untuk tiap page. Apalagi jika ada komponen yang sama, tetapi untuk tiap page berbeda implementasinya.
Contoh, button di page A dan C width-nya 100px, tetapi di screen B width-nya 223px. Nah karena berbeda, terkadang membuat style-nya di tiap page berbeda juga dan alhasil manajemen style komponennya berantakan karena styling yang terpecah-pecah.
Sebenarnya, walau tidak ada styleguide, desain komponen pada tiap page pun umumnya tetap memiliki pola karena komponen yang dibuat bersumber dari satu komponen lain.
Misalnya pada contoh Button di paragraf sebelumnya, tiap page memang berbeda, tetapi ketika diperhatikan lebih seksama, sebagian besar width button-nya 100px. Hanya ada di satu screen yang width button-nya berbeda, dan width-nya pasti di atas 100px. Dari sini bisa disimpulkan, kalau minimum width button itu 100px dan teksnya melebihi width button minimal, dia akan memanjang.
4. Komunikasi
Terakhir dan tidak kalah pentingnya dengan tips-tips teknis di atas, tetap kedepankan komunikasi dua arah antara Desainer dan Front End Developer.
Designer bisa bertanya-tanya kepada Front End Developer untuk memastikan kemungkinan komponen yang didesain itu dibuat atau tidak, dan seberapa besar effort yang dibutuhkan. Begitu juga dengan Front End Developer, dapat bertanya ke Desainer bila ada pola yang kurang jelas, atau cara kerja suatu komponen yang dibuat tidak jelas.
Terkadang kami Front End Developer di CODEX juga sering bertanya ke Desainer bila ada desain yang tidak mengikuti pola yang ada, untuk memastikan agar tidak ada miss dari desain komponen-komponen lain.
Ingat, desainer juga manusia, yang bisa melakukan salah.
Jadi begitulah 4 tips untuk memudahkan membuat komponen pada Front End. Kalau teman-teman ada tips lain, bisa ditambahkan di kolom komentar yaa! Terima kasih :)
