Tips Kolaborasi Back-end x Front-end untuk Meningkatkan Produktivitas

Perbedaan skillset yang dibutuhkan untuk masing-masing spesialisasi posisi programmer ini yang menyebabkan industri secara sadar maupun tidak sadar seringkali memisahkan kedua posisi tersebut sehingga dalam dunia programming hal ini seperti dua jurusan bagi para programmer untuk menentukan perminatan mereka. Programmer yang memiliki minat dengan sisi Back-end biasanya akan banyak fokus dengan hal-hal yang berkaitan dengan Back-end seperti database, optimization response speed, caching, generate reporting dan banyak hal lainnya. Programmer yang memiliki ketertarikan dengan Front-end juga sebaliknya biasanya akan meninggalkan hal-hal yang berkaitan dengan Back-end dan fokus dengan berbagai teknologi yang mendukung untuk visualisasi tampilan.

Pada dunia nyata, kedua posisi spesialisasi dalam programming ini akan sangat sering bekerja bersama untuk sama-sama menyelesaikan sebuah projek sampai selesai. Dan parahnya ada banyak programmer yang mengeluh karena hal ini, mereka saling salah-menyalahkan ketika sebuah projek atau produk gagal mereka selesaikan tepat pada waktunya. Orang Back-end akan menyalahkan bagian Front-end karena mereka telah menyelesaikan bagian mereka dan orang Front-end akan menyalahkan bagian Back-end karena terlalu lama menyelesaikan pekerjaan mereka sehingga membuat mundur starting point bagi mereka untuk memulai bekerja.

Pada tulisan kali ini saya akan coba berbagi tips bagaimana berkolaborasi antara Back-end dengan Front-end agar meningkatkan produktivitas dari keduanya bagi sebuah tim projek maupun produk berdasarkan pengalaman saya selama di Blibli.com, berikut beberapa diantaranya :

1. Back-end x Front-end sama-sama memahami bussiness flow

Memang logika bussiness flow lebih banyak dikerjakan oleh orang Back-end dengan berbagai data yang diolah, namun pendapat bahwa orang Front-end bisa tiba-tiba datang di tengah-tengah projek yang sedang berjalan tanpa mengikuti berbagai meeting di awal projek yang biasanya akan membahas berbagai bussiness flow dan juga berbagai requirement adalah jelas-jelas salah.

Saya sendiri adalah salah satu Front-end developer yang berperan seperti tentara bayaran di Blibli.com, sering berpindah-pindah dari satu team ke team lain, dari satu projek ke projek lainnya. Beberapa kesempatan saya bisa mengikuti sebuah projek dari awal kick-off, ini kondisi ideal dan tidak ada masalah. Namun di beberapa kesempatan saya juga harus terlambat bergabung dengan sebuah projek yang artinya melewatkan fase penting seperti yang disebutkan di awal tadi. Ini bukanlah kondisi ideal dan sangat besar kemungkinan bahwa produktivitas saya tidak bisa sebagus ketika berada di kondisi ideal.

Jadi tips pertama dari saya adalah pastikan semua anggota team baik itu Back-end maupun Front-end memiliki pemahaman yang sama dan cukup mengenai berbagai seluk-beluk sebuah projek yang dikerjakan, mulai dari latar belakang, tujuan yang ingin dicapai, bussiness flow, requirement dan lain-lain. Dengan begini komunikasi akan lebih berjalan efektif dan tepat sasaran antara Back-end x Front-end.

2. Pembuatan kontrak API sebelum memulai pekerjaan

 

openasset.com

Back-end yang memproduksi API dan tidak memiliki dokumentasi mengenai apa yang dia kerjakan adalah awal dari segala malapetaka kekacauan. Dokumentasi API juga bukan sesuatu yang dibuat di akhir setelah API tersebut jadi. Dokumentasi yang saya maksud juga bukan dokumentasi yang memanfaatkan tools untuk men-generate-nya seperti swagger dan teman-teman. Dokumentasi yang diinginkan disini adalah sebuah kontrak perjanjian yang disepakati oleh bagian Back-end dan Front-end di awal sebelum pekerjaan dimulai.

Pada fase ini orang Back-end dan Front-end harus duduk bersama untuk sama-sama merumuskan API apa saja yang tersedia, seperti apa bentuk request yang dibutuhkan, serta seperti apa bentuk response yang akan dikembalikan. Kontrak ini akan dijadikan panduan bagi Back-end dan Front-end untuk mengerjakan pekerjaan mereka, setiap perubahan yang terjadi di tengah projek pun harus diinformasikan dan dengan memperbarui kontrak yang telah dibuat sebelumnya.

Jadi tips kedua, bila di tempat Anda sebuah API hanya dirumuskan oleh orang Back-end tanpa ada kontrak dengan orang Front-end maka sudah saatnya mencoba hal ini. Back-end dan Front-end harus sama-sama terlibat dalam merumuskan API dan membuat kesepakatan segala bentuk request-response yang akan dibuat.

3. Front-end membuat API mocking

Pada tahap ini kontrak API sudah dibuat dan orang Back-end akan bekerja untuk menghasilkan API seperti yang telah disepakati. Pada tahapan ini orang Front-end juga perlu mengimplementasikan satu cara agar tidak perlu menunggu suatu API jadi dan melakukan pemanggilan API secara nyata ke sebuah End-Point API yang dibuat oleh Back-end. Salah satu caranya adalah melakukan mocking terhadap semua API yang terdapat pada kontrak di awal, dalam bahasa lainnya bahwa orang Front-end perlu membuat suatu simulasi agar setiap End-Point yang dipanggil pada saat development tidak langsung mengarah ke Back-end melainkan ke sebuah data tiruan yang menyerupai Back-end.

Tahap mocking ini menjadi krusial apalagi dengan timeline projek yang singkat, karena bisa memangkas banyak waktu menunggu sebuah API jadi, free bug, dan siap digunakan. Dengan melakukan mocking maka orang Front-end bisa berjalan beriringan dengan pekerjaan orang Back-end tanpa harus ada saling tunggu satu sama lain.

Jadi tips ketiga adalah meng-improve metode pekerjaan orang Front-end agar bisa melakukan mocking terhadap API yang dibuat oleh Back-end.

4. Back-end ikut terlibat dalam Front-end finishing

Sebenarnya hal ini bisa dihindarkan jika saja pada proses pembuatan kontrak API semua hal nya sudah jelas terdeskripsikan dengan baik namun ada kalanya sebuah kontrak API tidak mampu menjelaskan fungsinya dan bagian-bagian di dalamnya secara detail sehingga yang terjadi adalah kesalahan implementasi dari Front-end terhadap API yang sudah dibuat. Seperti contoh kasus sederhana saja, sebuah API akan memproduksi 3 fieldyakni price, discount, dan total. Namun pada kontrak tidak pernah dijelaskan field price itu harga yang seperti apa, harga yang sebelum discount atau setelah discount begitu juga dengan field total, total yang dimaksud itu total yang seperti apa.

Orang Back-end adalah salah satu yang paling paham dengan fungsi dari masing-masing field yang ada di dalam API karena mereka yang tau field itu didapatkan dari mana. Maka dari itu keterlibatan Back-end dalam finishing suatu Front-end kerapkali dibutuhkan baik sebagai orang yang menjelaskan berbagai kesimpangsiuran data ataupun bisa langsung terjun untuk menempelkan data pada tempat yang sudah disediakan oleh bagian Front-end.

Jadi tips ketiga adalah mengurangi ke-haram-an orang Back-end untuk memegang sedikit bagian di tahap finishing Front-end.

5. Komunikasi Back-end x Front-end

Bagian terakhir namun bisa menjadi kunci dari semua hal di atas adalah komunikasi. Komunikasi yang baik antara Back-end dan Front-end adalah mutlak menjadi keharusan apalagi dalam projek dengan timeline yang singkat. Segala issue yang melibatkan cross responsibility harus secepatnya di komunikasikan untuk mencari solusi terbaik. Duduk dalam tempat yang berdekatan mungkin menjadi solusi bilamana online communication belum bisa berjalan dengan baik di perusahaan Anda.

Chemistry antara Back-end x Front-end di dalam satu team perlu dibangun setiap bagian memiliki kepemilikan terhadap terhadap sebuah projek, ketika sebuah projek delay itu artinya keseluruhan team gagal dan bukan kesalahan satu bagian saja, setiap bagian memiliki peranan masing-masing dan tidak ada salahnya untuk cross-function untuk saling membantu menyelesaikan berbagai masalah dalam satu projek.