Apabila Reka Bentuk memenuhi Kejuruteraan di Traveloka

Ini bukan cerita cinta biasa.

Nota: Ini adalah salah satu daripada interaksi antara Reka Bentuk dan Kejuruteraan. Saya bercakap dari satu spektrum kecil semua interaksi antara Design and Engineering di Traveloka. Dan ini kisah saya.

Seperti masa berlalu, Traveloka telah wujud selama 6 tahun. Dalam perjalanan ini, kami mengakui bahawa kami mempunyai banyak bug visual yang berada di sana untuk beberapa ketika, seperti warna oren yang berbeza untuk butang atau margin tidak konsisten di antara kad.

Pasukan reka bentuk memulakan usaha untuk menyeragamkan bahasa visual kita dengan membina kit reka bentuk kita sendiri untuk mengelakkan sebarang anomali visual baru yang menyimpang dari standard kita. Kami cuba, tetapi entah bagaimana masalah ini tidak pernah diselesaikan. Walaupun kita mempunyai kit reka bentuk kita sendiri, kita masih melihat ketidakkonsistenan visual pada produk kami.

Sebaliknya, jurutera kami perlu bekerja dengan lebih cekap. Mereka lebih suka untuk membina komponen yang sama dari awal dan tidak mencari komponen yang sama untuk digunakan semula. Kerana mencari komponen ini adalah geseran dalam alur kerja semasa mereka.

Sepanjang masa ini, pasukan Rekabentuk dan pasukan Kejuruteraan cuba menyelesaikan masalah mereka sendiri tanpa berkomunikasi antara satu sama lain. Ia menimbulkan persoalan tentang kemungkinan Reka Bentuk dan Kejuruteraan bekerja bersama untuk menyelesaikan masalah yang kita hadapi setiap hari. Siapa tahu bahawa Reka Bentuk dan Kejuruteraan boleh berjalan dengan tangan dan mengembangkan cinta dalam proses itu?

Bilakah mereka pertama kali bertemu?

Rundingan ini bermula pada awal tahun 2018 apabila pasukan Kejuruteraan melakukan penyelidikan mengenai React Native and React Native Web (React Native adalah kerangka untuk membina aplikasi mudah alih menggunakan JavaScript). Apabila kajian ini dimulakan, Pengembang Web UI dari pasukan Reka Bentuk terlibat.

Semasa proses ini, pasukan Kejuruteraan mempunyai idea untuk menggunakan React Native sebagai asas bagi pembangunan lintas platform. Ini termasuk pembangunan Web Bergerak di mana Pemaju UI Web boleh melibatkan diri untuk membuat komponen di atasnya.

Apabila inisiatif ini bermula, kami sangat teruja untuk belajar React Native dan membuat yang terbaik daripada itu kerana kami boleh membuat impak yang lebih penting dan membuat komponen untuk semua platform yang tersedia dari satu punca kod. Dan di sinilah kita mula mengenali satu sama lain.

Bagaimana cinta itu berkembang?

Kami bertemu antara satu sama lain beberapa kali selepas itu, tetapi tidak ada yang mencetuskan hati kita. Tetapi kemudian, percikan api muncul apabila kita mempunyai pelatih ini. Semuanya bermula semudah projek dalaman.

Pelatih ini adalah jurutera React Native dan ditugaskan untuk membina apa sahaja yang dapat melancarkan kerjasama antara Reka Bentuk dan Kejuruteraan. Beliau mula membina perpustakaan komponen, beberapa sketsa sketsa untuk pereka, dan penyelidikan kemungkinan kerjasama antara Reka Bentuk dan Kejuruteraan.

Selain daripada itu, pasukan Reka Bentuk juga mempunyai inisiatif untuk membuat sumber kebenaran tunggal (SSOT) berasaskan kod untuk token dan komponen reka bentuk. Kedua gerakan ini memberi inspirasi kepada kami untuk bekerjasama dalam misi ini. Di sinilah percikan kasih sayang, dan kami percaya bahawa kami akan menjadi masa depan yang lebih cerah bersama-sama.

Di mana cinta itu membawa kita?

Selepas beberapa kali bertarikh (baca: mesyuarat), kami akhirnya bersetuju untuk mengambil hubungan kami dengan tahap seterusnya. Ia bukan mudah untuk berjalan kaki, tetapi kami percaya bahawa ini adalah yang tepat untuk kami. Memahami satu sama lain adalah kunci penting untuk hubungan yang baik, bukan? Dan itulah yang kami lakukan ketika kami memutuskan untuk bekerjasama.

Kami bermula dengan memahami bagaimana satu sama lain berfungsi. Dan setelah malam-malam ini penuh mimpi buruk dan jalan raya penuh dengan halangan, akhirnya kami menuju ke arah kerjasama yang lebih baik. Berikut adalah komitmen kami untuk mencapai kerjasama yang lebih baik antara Reka Bentuk dan Kejuruteraan:

1. Sistem reka bentuk berasaskan kod.

Kerjasama antara Reka Bentuk dan Kejuruteraan agak mencabar. Jambatan antara reka bentuk dan kod tidak cukup kuat dan ia menjadikan kerja menjadi sukar di antara kita.

Kami kemudian mendapat idea untuk mencipta sistem reka bentuk berasaskan kod. Kami meletakkan token reka bentuk kami dalam JavaScript, yang merupakan cara termudah untuk jurutera untuk digunakan, namun masih cukup mudah bagi pereka untuk mengurus.

Kami bekerjasama untuk membina komponen buatan tangan kami sendiri yang memenuhi piawaian Rekabentuk dan Kejuruteraan. Komponen tersebut akan digunakan pada semua platform untuk mewujudkan konsistensi pada reka bentuk kami.

2. Pelukis lakaran.

Plugin Lirik ini berfungsi seperti jambatan antara reka bentuk dan kod. Di bahagian Reka bentuk, ini menjadikan kerjasama lebih mudah kerana pereka tidak perlu menghasilkan komponen yang sama berulang kali. Ini juga akan membantu pereka untuk membina antara muka pengguna berdasarkan komponen standard.

Di sisi Kejuruteraan, plugin ini akan menterjemah antara muka pengguna ke dalam kod yang dapat dengan mudah diterapkan oleh jurutera. Ini akan mengurangkan masa kerja jurutera kerana mereka tidak perlu mencari komponen sedia ada dari reka bentuk terdahulu.

3. Rekabentuk linter dan ujian visual bersepadu.

Setelah bekerja dengan antara muka pengguna dan kod, langkah seterusnya adalah memastikan kedua-duanya diseragamkan. Di sinilah reka bentuk linter dan pengujian visual bersepadu. Kami sedang meneliti kemungkinan untuk membangunkan pencipta reka bentuk dan ujian visual bersepadu untuk bekerja seperti sebagai jaring keselamatan untuk kedua-dua antara muka pengguna dan kod kami. Dari sisi reka bentuk, linter reka bentuk akan menggalakkan UI Designer untuk menggunakan komponen yang standard. Sementara itu dari sisi kejuruteraan, ujian visual akan mengurangkan kemungkinan anomali visual apabila produk dibebaskan. Ini akan menjadikan kehidupan pereka dan jurutera menjadi lebih mudah pada masa akan datang.

4. Dokumentasi sistem reka bentuk.

Apabila berkolaborasi dengan pasukan yang berlainan, sangat baik untuk mempunyai pedoman yang anda boleh merujuk kepada. Dokumentasi sistem reka bentuk berfungsi sebagai bible reka bentuk yang boleh diakses oleh semua pemegang kepentingan, termasuk Pengurus Produk, jurutera dan rakan pereka. Ini penting untuk memastikan semua orang berada di papan yang sama tentang mengapa keputusan reka bentuk dibuat. Ini juga akan membantu untuk mengelakkan sebarang perselisihan reka bentuk di antara pasukan itu kerana setiap reka bentuk dipertimbangkan dengan teliti.

Ilustrasi oleh Ralistu Hayu Pratiwi

Dengan semua langkah bayi ini, kami percaya bahawa kami dapat membuat kolaborasi dan integrasi masa depan yang lebih baik antara satu sama lain. Kerjasama itu juga membuka kemungkinan untuk menghasilkan produk yang lebih baik.

Akhirnya, mereka bentuk produk bukan sekadar menjadikannya cantik dan menarik. Terdapat banyak usaha kejuruteraan untuk membuat reka bentuk berfungsi dengan sempurna. Ini menggambarkan kepentingan kerjasama antara Reka Bentuk dan Kejuruteraan; kerana kita tidak boleh hidup tanpa membina satu produk yang baik. Seperti kata Steve Jobs,

"Reka bentuk bukan sekadar apa yang kelihatan dan dirasai. Reka bentuk adalah cara ia berfungsi. "