Frontend Dünyasının Parlayan Yıldızı: “Storybook”
Uzun zamandır aklımda olan bu konuyu sonunda yazabiliyorum. Adem ilter’in videolarında tanıştığım ve daha sonraları şirkette de kullanmaya başladığımız efsane bir tool ile karşınızdayım.
Neymiş bu Storybook ?
Benim gibi düzen aşığı bir insansanız bayılacağınızı düşünüyorum. Hem ekip içerisindeki geliştirmelerin daha düzenli olması açısından hem de proje içerisindeki componentlerin organizasyonunun daha kolay yapılabilmesi açısından işleri kolaylaştıran bir stil rehberi kendileri.
Projeniz içerisinde yer alan en küçük yapıları özelleştirdiğiniz, tek başına nasıl çalışacağını görebileceğiniz, event’leri tetikleyebileceğiniz bir yapı sunuyor size.
Kullanmak için sebep ?
Napolyon heralde frontendci olsaydı söyleyeceği şey “Component, Component, Component! “ olurdu.
Frontend tarafında tüm olay componentler üzerinden dönüyor, her şey component. Tüm temel bileşenler component haline getiriliyor.
Storybook, uygulamanız içerisindeki tüm componentlerin bir rehberini oluşturmayı sağlıyor. Ekipler daha sonra bu componentleri inceleyebiliyor ve aynı şekilde ilerleyerek ortak bir yapı oluşturulmuş oluyor. Nasıl bir çıktı alacaklarını görebiliyor.
Ekibe yeni katılmış biri iseniz; neyi, nasıl yapacağınız konusunda faydalanabileceğiniz bir kaynak oluyor ve adaptasyon sürecinizi kısaltıyor. Hangi elementin hangi parametreleri aldığını, nasıl kullanıldığını bilgisine hızlıca sahip olabiliyor, nasıl yazılması gerektiğini görebiliyorsunuz.
Tüm komponentler belli, tüm stiller belli, her yerde aynı yapı kullanılıyor. Bir yerde başka diğer yerde başka bir yapı veya element kullanılmıyor. Kafa rahatt! (Tek bir yerden yönetimi söylememe gerek yok sanırım.)
Elementler arttıkça yönetimin ve organize etmenin zorlaşacağı aşikar. Daha modüler bir yapı ile bunun önüne geçilmesini sağlayarak ekiplere rahatlık sağlıyor.
Componentlerinizi oluştururken soyut düşünmenizi gerektiriyor -yani ister istemez bu yöne doğru evriliyorsunuz- bu da güncellemelerinizi ve üzerine sonradan yapacağınız geliştirmeleri entegre etmeyi kolaylaştırıyor.
Kısaca özetlemek gerekirse ;
Projenizde düzenli, sürdürülebilir, modüler bir yapı inşa etmek, kullanacağınız tüm componentleri tek bir yerden incelemek ve işinizi daha profesyonel seviyeye çıkarmak için kullanabileceğiniz bir araç “storybook”.
E o kadar konuştuk bir de nasıl kullanacağız onu görelim ..
İlk önce react projesini bir oluşturalım. “intro-storybook” adında bir klasör oluşturuyorum. İçine geliyorum ve Git Bash’i açıp react projesini oluşturması için bu komutu yazıyorum.
npx create-react-appŞimdi bir de storybook kuralım.
Eğer daha öne storybook/cli kurmadıysanız sizi şöyle alalım;
npm i @storybook/cliArdından storybook dosyalarımız oluşturalım;
npx sb initYükleme işlemi biraz uzun sürebilir, endişelenmeyin :)
İşlem bittiyse ve bu klasörü gördüyseniz, artık çalıştırabiliriz.
npm run storybookStorybook http://localhost:6006/ portunu kullanıyor.
Açtığınızda örnek olarak hazırlanmış componentler göreceksiniz.
İnceleyecek olursak Canvas ve Docs tabları var. Canvas tabında componentin nasıl gözüktüğünü görüyoruz. Altta bulunan ‘Controls’ kısmında bu componentin aldığı parametreleri görebiliyor ve değiştirebiliyoruz.
Docs tabına geldiğimizde ise bu componenti proje içerisinde nasıl kullanabileceğimizi gösteren kod bloğu yer alıyor.
Örnek olarak bir component de biz oluşturalım.
Input elementi için Input.js ve Input.stories.js adında iki dosya oluşturuyorum.
Kullanılabilecek varyasyonları dokümante edeceğim yer Input.stories.js olacak.
Input.js içerisine gelip arrow function oluşturuyorum. Alacağı property’leri belirtiyorum. Css içinde bir dosya oluşturup sayfaya dahil ettim.
export keyword’ü önemli, koymadığımız taktirde componente erişemediği için storybook tarafında hata alınır.
Gerekli yerlere property’leri de geçtikten sonra Input.stories.js dosyasına geçelim.
Burada aslında tasarladığım kullanım şekillerini belirtiyorum ve buna göre property’leri giriyorum. Password için type kısmını “password” olarak belirtirken eğer label gözükmesini istiyorsam label için değer gönderiyorum.
Componentim için alması gereken belirli property’leri PropTypes ile belirtebiliyorum. Ve hiçbir property belirtilemdiğinde default olarak nasıl olacağını da aynı şekilde belirleyebiliyorum.
import PropTypes from ‘prop-types’; //Sayfaya bunu dahil ediyorum
Storybook tarafına gelecek olursak şu şekilde görünecektir;
Diğerleri de şu şekilde ;
placeholder:PropTypes.string};Input.defaultProps = {type: "text",};
Mini bir örnek yapmış olduk. Tabii ki çok daha fazla çeşitlendirilebilir. İhtiyacınıza göre farklı eklemeler yapabilir, isteğinize göre düzenleyebilirsiniz.
Umarım faydalı olmuştur :)
Projenin kaynak kodunu buraya bırakıyorum.
Kaynaklar :
