Storybook.js

 







Merupakan sebuah tools open source JavaScript yang berfungsi untuk mendokumentasikan komponen UI(User Interface) yang dikembangkan oleh seorang Frontend dalam sebuah aplikasi website. Selain untuk dokumentasi, fungsi lain dari tools ini adalah untuk testing. Beberapa fitur Storybook.js:

1. Build UIs in isolation

Ketika seorang Frontend membuat komponen UI, biasanya komponen ini dibuat di dalam halaman website tersebut bersamaan dengan fitur yang dibuat saat itu juga. Fitur build in isolation ini memungkinkan seorang Frontend membuat komponen UI secara terpisah tanpa terikat pada aplikasi/fitur aplikasi website yang sedang dikembangkan. Dengan begitu ketika satu fitur dikerjakan oleh beberapa tim Frontend sekalipun tidak akan menganggu proses development yang sedang berjalan. Seorang Frontend juga dengan leluasa mengerjakan bagian dari pekerjaannya tanpa bergantung pada proses development API yang sedang berjalan, pekerjaan development semakin fleksibel karna proses development antara Backend maupun Frontend dilakukan secara pararel.

2. Document use cases as stories

Dokumentasi merupakan salah satu bagian paling penting bagi seorang developer, begitu pula fitur yang ditawarkan oleh Storybook.js ini. Setelah proses membuat komponen sudah selesai, seorang Frontend bisa membuat use case story dari komponen yang sudah dibuat. Ini juga sesuai dengan tujuan dari Component-based UI dalam pengembangan website. Karna pengembangan aplikasi website disisi Frontend saat ini sudah banyak yang menggunakan pendekatan Component-based UI (memisahkan elemen website menjadi bagian yang terkecil seperti button, input text, card, dll) terutama pada framework JavaScript modern, tujuan dari Component-based UI yaitu agar komponen yang dikembangkan reusable dan flexible. Untuk lebih jelasnya mari kita lihat contoh dibawah ini.



Gambar diatas merupakan contoh dari story sebuah komponen button menggunakan framework React.js. Story disini yang dimaksud adalah bagaimana kita menuliskan kode untuk men-generate sebuah button, karna button ini jenisnya banyak, seperti button primary, button secondary dengan tambahan attribute, style dan variabel masing-masing, disinilah story berperan penting.



3. Mock hard to reach use cases

Beberapa case dalam proses development component UI terkadang terdapat kompleksitas karna kebutuhan yang semakin bertambah, maka dari itu perlu dilakukan mocking/testing untuk menghindari bug. Selain mocking data, di Storybook.js kita juga bisa menampilkan view. Beberapa fitur add-ons bawaan dari Storybook.js yaitu:



Actions: untuk menampilkan data yang diterima oleh event handler(klik, scroll, dll) arguments



Viewport: untuk menyesuaikan dimensi layar komponen yang dirender, seperti layar desktop/mobile atau custom.



Controls: GUI untuk berinteraksi dengan argumen pada komponen, disini kita bisa testing bagaimana berbagai macam data.


4. Supercharge your workflow with addons(apilkasi tambahan).



Selain fitur-fitur bawaan dari Storybook.js, kita juga bisa menambahkan addons sesuai dengan kebutuhan kita dalam mengembangkan aplikasi agar semakin mudah dan mendukung produktifitas. Semua addons Storybook.js bisa ditemukan di https://storybook.js.org/addons/.

5. Kesimpulan untuk Storybook.js

1. Proses kolaborasi semakin fleksibel.
2. Memudahkan pembuatan komponen secara terpisah(diluar aplikasi).
3. Sebagian acuan developer, komponen apa saja yang ada.
4. Berfungsi sebagai style guide dan dokumentasi.
5. Memudahkan untuk melakukan testing secara tampilan visual.
6. Komunikasi antar tim Front-end semakin baik karna semua terdokumentasi.
7. Fleksibel digunakan untuk projek saat ini maupun yang akan datang(design system).


References