Skip to main content

Memudahkan kerja pengaturcara backend

·713 words·4 mins
rsmn
Author
rsmn
Software Engineer in Bangi

Analyst

Secara ideal kita memerlukan peranan-peranan yang berikut sekurang-kurangnya dalam sebuah syarikat yang menghasilkan aplikasi:

  1. Pembangun/Pengaturcara (Developer/Programmer)
  2. Pereka UI/UX atau Pereka Produk (UI/UX Designer/Product Designer)
  3. Pengurus Produk atau Penganalisa Perniagaan (Product Manager/Business Analyst)

(Boleh rujuk hantaran 3 tahun lepas)

Bagi syarikat yang bermodal kecil dan baru sahaja memulakan perniagaan, menggajikan seorang staf adalah suatu yang besar dan memerlukan perkiraan yang terperinci. Apatah lagi nak menggajikan 3 orang.

Jadi apa yang berlaku selalunya adalah syarikat akan menggajikan 1 orang sahaja dan ketiga-tiga peranan tersebut perlu diisi dan dimainkan olehnya. Belanja ikut kemampuan jadi ia tindakan yang logik.

Satu lagi pemerhatian saya adalah kebiasaannya pengaturcara tidak mempunyai kemahiran mereka bentuk yang baik. Dari segi UI/UX secara lalai (by default) selalunya tidak up to standard. Saya tidak menyalahkan sesiapa dan hanya menyatakan pemerhatian sahaja. Ia adalah pemerhatian yang adil kerana bakat mereka bentuk memang amat sukar dicari. Dalam satu kelas waktu kita di bangku sekolah dahulu boleh kira dengan jari kawan-kawan yang pandai melukis.

Namun tidak perlu dibimbangkan kerana di luar sana terdapat jalan pintas (shortcut) yang boleh diambil.

Berikut saya senaraikan jalan pintas berdasarkan pengalaman saya:

1. Pustaka CSS
#

Shortcut pertama adalah pustaka CSS.

Mujurlah ada kerangka dan pustaka CSS seperti Bootstrap. Dengan hanya menggunakan senarai class yang disediakan, anda boleh menjadikan elemen HTML anda tampak lebih kemas.

Perbezaan Button dengan Bootstrap CSS
Perbezaan Button dengan Bootstrap CSS


2. Tema (Theme) dan Templat (Template) yang dibina berasaskan pustaka CSS
#

Shortcut kedua adalah tema/templat yang dibina berasaskan pustaka CSS.

Jika anda pernah mendengar tentang laman web seperti Themeforest, anda akan dapati pembangun frontend di serata dunia banyak menghasilkan theme berasaskan Bootstrap yang sedia boleh diguna pakai oleh pembangun backend yang buta reka bentuk.

Harga untuk setiap templat yang ditawarkan biasanya sekitar USD30-60. Pada pendapat saya ia adalah harga yang agak berpatutan berbanding nilai keseluruhan projek, atau pun berbanding duit yang anda perlu keluarkan untuk menggajikan seorang Pereka Produk (Product Designer).

Contoh tangkap layar templat OneUI
Contoh tangkap layar templat OneUI

Dengan tersedianya komponen-komponen UI, kerja yang tinggal adalah menyusun komponen-komponen tersebut sehingga mencapai UX yang tidak menyakitkan hati.


3. Pustaka komponen dan pattern
#

Shortcut ketiga (kadangkala ada dalam tema/templat tapi tak banyak atau tak cukup) adalah membina komponen dan pattern library sendiri.

Anda boleh mengambil inspirasi daripada laman-laman web pemain-pemain besar dalam industri. Saya juga biasa menggunakan perkhidmatan aggregator untuk mempelajari pattern yang biasa digunakan untuk mencapai sesuatu tujuan UX.

Antara laman pengumpul (aggregator) yang saya sarankan:

  1. nicelydone.club - Mengumpul pattern SaaS yang biasanya anda hanya boleh akses apabila anda melanggan SaaS tersebut. Dengan melanggan nicelydone, saya tak perlu langgan setiap SaaS tersebut untuk mempelajari pattern yang mereka gunakan.
  2. pageflows.com - Mengumpul pattern SaaS dalam bentuk video. Idea ni bagus. Mereka rakam skrin mereka untuk setiap flow yang biasa wujud dalam sesebuah SaaS. Jadi berbanding anda melihat gambar statik seperti nicelydone, anda boleh tengok video. Lagi banyak maklumat anda boleh perolehi dengan menonton video berbanding dengan melihat gambar.
  3. pttrns.com - Sama seperti nicelydone tapi nampak macam lebih memberi fokus kepada aplikasi mudah alih (mobile).
  4. mobbin.design - Sama seperti pttrns.

Para pembangun boleh menggunakan koleksi pattern UI/UX sedia ada dalam senarai di atas untuk mengelakkan penghasilan UX yang menyakitkan hati. Dan saya juga menyarankan anda kumpul sebanyak mungkin koleksi pattern ini dan bila tiba masa kita boleh cherry pick sahaja daripadanya.

4. Code Snippets
#

Shortcut keempat adalah dengan mengguna pakai fungsi code snippet dalam IDE (VSCode, Sublime Text, Vim etc) kegemaran anda.

Sekiranya anda mempunyai koleksi komponen UI dan pattern sendiri, adalah lebih pantas sekiranya anda dapat menterjemahkan komponen-komponen tersebut kepada code snippet.

Bagi yang tidak biasa dengan fungsi ini, code snippet adalah satu fungsi di mana anda hanya perlu menaip shortcut huruf sahaja dan kemudian anda hanya perlu menekan butang tab dan IDE anda akan terus mengeluarkan kod penuh yang telah anda tetapkan. Ibarat menggunakan fungsi autocomplete pada enjin carian Google.

Emmet
Contoh code snippet Emmet yang biasa terdapat dalam IDE


Dengan memanfaatkan jalan pintas yang telah saya senaraikan tadi, saya harap ia dapat membantu sedikit sebanyak mengurangkan kepenatan para pembangun backend dalam usaha memerah otak untuk menghasilkan UI/UX yang tidak menyakitkan hati.

Nanti bila syarikat dah berkembang lebih besar, ada duit lebih sikit maka lebih baik gajikan staf tambahan untuk menampung tugasan-tugasan lain yang dipikul oleh pembangun tadi.

p/s: Kalau ada pereka produk yang nak menyertai syarikat kami boleh hantar resume ke rusman@technerve.my