Tantangan dan Kesulitan sebagai Frontend Dev

Setiap pekerjaan memiliki tantangan atau kesulitan yang ditemui. Tidak terkecuali seorang Frontend Developer atau Pengembang Antarmuka. Yah, istilah pengembang antarmuka mungkin bagi sebagian orang masih asing. Namun, pengembang antarmuka ini merupakan terjemahan bahasa Indonesia dari Frontend Dev.

Walaupun pengalamanku masih minim di industri, namun banyak hal yang saya rasakan selama pengalaman bekerja di industri. Kesulitan yang saya hadapi, tantangan yang saya rasakan. Meskipun, bagi sebagian hal ini bukanlah kesulitan, namun bagi saya sendiri ya cukup mengganggu dan sebuah masalah yang harus dicarikan solusinya.

Desain Tanpa Grid

Saya sering bertemu desainer yang tidak menggunakan Grid. Sehingga desainnya tidak presisi sesuai dengan grid sistem. Hal ini tentu saja menyulitkan pemrogram atau saya sendiri. Mungkin desainernya sudah bisa berimajinasi dan berekspektasi. Namun, dalam dunia Frontend. Semua dihitung dengan angka. Tidak imajinasi. Tanpa adanya grid, kami kesulitan untuk bisa memastikan jarak antar komponen. Tidak hanya itu saja, melainkan bilapun sukses memastikan jarak antar komponen tanpa grid. Bagaimana dengan responsivenya? Kita juga harus memikirkan hal tersebut bukan?

Desain Tanpa Responsive

Desainer biasanya hanya membuatkan versi Dekstop saja dengan resolusi 1440px. Sehingga kita selalu yang memjadikannya responsive, entah untuk perangkat

• >1024px
• >900px
• >480px
• >360px
• dst

Nah, bagi saya sendiri kadang tidak masalah. Namun, kalau desainnya terlalu bagus, saya kesulitan untuk berimajinasi sendiri bagaimana penerapannya bila dalam versi mobile / tablet. Saya takut, malah hasilnya tidak sesuai dengan yang di dekstop. Merubah experience penggunanya jadi berbeda.

Tidak hanya itu, tanpa grid pun akan semakin sulit juga mengetahui, versi mobile atau tablet nanti, komponen mana saja yang bisa dikecilkan? Seberapa besar yang perlu dikecilkan? dihilangkan?

Desain Tanpa Animasi

Tidak mungkin bukan, saat pengguna membuka website yang kita buat tidak ada animasi sama sekali? Pasti ada. Nah, salah satu tantangan kita adalah bagaimana membuat animasi, menyesuaikan dengan tampilan dan pengguna merasa tidak bosan terhadap animasi yang telah kita buat.

Desain Tanpa Flow

Figma, Zeplin, Adobe XD memberikan fitur demo pada desain. Flow pada desain sehingga kita tahu, apakah desain ini merupakan button? ataukan hanya url saja? Karena ini nanti akan berpengaruh kepada semantic, jenis tag HTML. Sehingga desain tanpa flow akan membingungkan kita untuk bisa mengetahui fungsi setiap komponen, setiap desain. Walaupun harusnya hal ini dibicarakan saat briefing proyek. Kalau kita tahu flow desain, user story. Maka kita bisa membuatkan komponen, alert atau pesan bila sukses.

Desain Tanpa Styleguide

Styleguide itu penting. Ini yang saya rasakan pada akhir-akhir ini.  Karena itu sebagai pondasi awal dalam proses pembuatan website.Karena, awal pembuatannya,  Bila tidak ada styleguide maka hal seperti ini yang akan terjadi :

Mungkin kalau ada styleguide, saya bisa membuatnya menjadi "mudah dibaca". Misal

• Primary Color
• Secondary Color
• Primary Dark Color
• Primary Light Color
• Black Font Color
• dst

Sehingga memudahkan saya atau siapapun untuk mengetahui fungsi warna-warna tersebut. Bila tidak, akan banyak sekali warna warna yang membingungkan. Ini warna untuk apa? Ini warna pakai warna abu-abu apa? dst

Itu hanya masalah warna. Belum Font, Button, dst. Walaupun mungkin kedepan, saya bisa menganti nama-nama tersebut menjadi warna yang lainnya.

Penyesuaian Browser

Baru saja kemarin saya diberi laporan sama teman bahwa salah satu situs yang kami kerjakan tidak sesuai. Padahal, sama-sama menggunakan Firefox versi terbaru. Bedanya, saya test menggunakan Firefox versi Developer dan teman saya yang biasa. Ini masih belum tahu, letak permasalahan dimana. Padahal juga sudah menggunakan Normalize CSS di Tailwind 💆‍♂️

Namun, setelah dicari tahu, itu karena saya belum melakukan pengecekatan pada browser dengan screensize 1024px di firefox.  Memang ada baiknya ada Timeline tersendiri untuk melakukan testing Browser compatibility dan Device compatibility. Itu padahal masih antar dekstop. Belum dengan perangkat mobile yang beragam jenis ukuran.

Untung saja Internet Explorer sudah dimatikan walaupun banyak pengguna yang masih menggunakan. Itu belum melawan safari pula yang sering tidak compatible. Makanya, sering sekali situs menyarankan pengguna menggunakan Chrome untuk hasil yang maksimal.

Error Tracking dan CORS

Cross-Origin Resource Sharing (CORS)

Sering sekali saya temukan dalam konsumsi API yaitu CORS. Pernah 2 hari debugging, ternyata yang masalah di backend karena CORS. Bukan di frontendnya 🤦‍♂️ Parahnya,error yang saya dapat hanyalah "Network Failed". Sepengelaman dan pengetahuan saya, Network Failed artinya ada jaringan yang bermasalah disisi client. Berarti saya dong yang salah? Namun, nyatanya itu ada di CORS. Lantas kenapa dikatakan Network Failed? Yah, mungkin pemahaman saya terkait dengan networking masih kurang banyak.

Itu di Javascript. CSS? Setiap pixel itu berpengaruh terhadap komponen lain. Ada komponen yang pixelnya melebihi desain, akan berpengaruh terhadap lokasi element lain. Hingga berakhir dengan element yang lebih lebar/lebih tinggi.

Terima Kasih kepada Firefox Developer Tools, yang benar benar membantu dalam proses pengembangan karena benar-benar membantu saya dalam indentifikasi setiap element. Misalnya

Saya jadi tahu apa saja yang mempengaruhi Komponen tersebut. Karena ada "Layout" , dan Hightlight display yang membantu dalam mengindentifikasi setiap element / komponen html tersebut.

State Management

Kapan state / nilai variable ini disimpan di Global? Siapa saja yang bisa aksesnya? Apakah child component / parent?

Simpan di Cookies? Localstorage? atau variable?

Redux? atau Context?

Itu hal yang harus kita pikirkan dalam pembuatan Web Apps berbasis ReactJS. Karena benar-benar menguras tenaga dan banyak corat coret karena memikirkan setiap statenya. Saya sendiri memang masih belajar JS dan kebingungan dalam menghandle state di ReactJS. Masih belum yakin, apakah cara yang selama ini saya lakukan sudah benar atau tidak. Makanya sering saya melihat kode orang lain untuk tahu, cara mereka dalam menyimpan state management.

Yah, itu aja sih curhatanku mengenai  tantangan dan kesulitan sebagai pengembang antarmuka , mungkin bagi sebagian orang apa yang saya rasakan ini bukan kesulitan. Namun, setidaknya hal hal tersebutlah yang harus kita antisipasi di proyek - proyek selanjutnya. Setidaknya, saya harus bisa belajar dari masalah tersebut.