Feature Flag ve Unleash Kullanımı

Özellik bayrağı (feature flag) kullanımı basit bir söylem ile son kullanıcıya sunulan yeni geliştirmelerin kontrollü bir şekilde belirlenen filtrelere göre aktarılma sürecidir.

Geliştirme sürecinde tamamlanan işlerin son kullanıcılara ne zaman ve hangi şartlar ile beraber çıkacağı farklı birimlerin organize olması ve onayı ile gerçekleştirilir. Bu teknik, biz geliştiricilerin gerekli onay sürecini beklemeyip kendi görevlerine devam edebilmesi açısından önemlidir. Bayrak kullanımı sadece geliştiriciler ve mühendisler için değildir. Satış ve müşteri ekipleri, ürün yönetim ve kullanıcı deneyimi ekipleri, test ekipleri de bu özelliği kullanabilmektedir. Yapılan bir geliştirme son kullanıcılara kullanıcı kimliği (userId), IP, host ve mail adresleri gibi çeşitli filtreler ile özelleştirilip sunulabilmektedir.

Örnek kullanıcı grupları. 1- Ekip içerisindeki kullanıcılar, 2- Test kullanıcıları, 3- Projeyi kullanan tüm kullanıcılar

Yeni ürünleşen projelerde özellik bayrağı kullanımı bir ihtiyaçtır. Üstteki görselde bölgelere ayrılmış kullanıcı grupları bulunmakta olup grupların sayısı ihtiyaca göre artırılabilir. İlk olarak, geliştirilen bir özellik öncelikle ekip içerisinde kullanıma açılmaktadır(1). Yeterli geri dönüş ve veri toplandıktan sonra hataların da giderilmesi ile güncellenmiş yapı, üst katman olan ve gerçek kullanıcıları(ürünü satın alan) kapsayan grup için aktif edilmektedir(2). Bu aşamada gerçek kullanıcılar ile veriler elde edinilmiş olup bu kullanıcılardan ilk izlenimleri ve ilerleyen süreçte bu geliştirmelerin kendilerini nasıl etkilediği hakkında geri dönüşler alınır. Gerekli görülen güncellemeler ve geliştirmeler ile projenin tamamına yayılma işlemi gerçekleştirilir(3). Tüm bu aşamalarda; kullanıcı grubu, deployment ortamı, ip adresi, mail adresi gibi çeşitli özelleştirmeler ile kontroller sağlanmaktadır.

Özellik bayrağının bize sağladığı artılardan bahsetmek gerekirse;
→ Kod üzerinde daha az geriye alma işlemi ve daha az hata olması,
→ Yeni geliştirilen modülleri ve geliştirmeleri kademeli olarak son kullanıcılara aktarabilme yeteneği,
→ Versiyon güncellemelerinin küçük kullanıcı gruplarına bölünüp minimum hata ile çalışabilmesi,
→ A/B test süreçleriyle müşteri ihtiyacına yönelik daha sağlıklı geri dönüşler alınabilmesi.
Daha fazlası için tıklayınız.

Unleash platformu yapılan geliştirmeleri bize CI/CD süreçlerinde development, pre-production ve production ortamlarına özel kontrollü bir geçiş yapabilme kolaylığı sağlamaktadır. Bu platform sayesinde geliştirmeler daha düşük maliyet, risk ve zaman ile son kullanıcılara sunulmaktadır. Her bir ortam için özel bayraklar yaratılıp kullanıcılar için A/B testleri yapılabilmektedir.

React projelerinde bayrak kullanımı ile alakalı bir örnek ile devam edelim. Oluşturduğumuz react projesine aşağıdaki komut ile paketimizi kuralım.

npm install @unleash/proxy-client-react unleash-proxy-client

Oluşturulan react projesinde index.js içerisinde aşağıdaki görselde yer alan konfigürasyonları da ekliyoruz.

config dosyası üzerinde yer alan parametrelerin neler olduğuna gelirsek;
url: Ayarların sistemde kullanılabilmesi için istek yapılan proxy url’i,
clientKey: İstek yapılırken kullanılacak key değeri,
refreshInterval: Periyodik olarak ne kadar sıklıkta istek atılmasının değeri (saniye cinsinden),
appName: unleash üzerinde oluşturulan projenin adı,
environment: Uygulamanın hangi platformda çalıştığı (development, pre-prod, production),
Diğer konfigürasyon ayarları için tıklayınız.

Genel ayarlamalardan sonra nasıl kullanılacağımıza geçelim ve özel bir hook yazalım.

.env dosyaları ile bulunduğumuz environment için gerekli ayarlar yukarıda yer almaktadır. Bu hook ile App.js içerisinde bir render işlemi gerçekleştirelim.

Custom hook ile feature flag kullanımı

Bayrak kullanımına göre ekranda render olan içerikler

Örnek kodun çıktısı yukarıdaki gibidir. Unleash sunucumuzda yer alan bayrağın aktifliğine göre render edilecek içerik değişmekte olup farklı environmentlarda da kontrolü yukarıda gösterildiği gibi yapılmaktadır.

Sizlere özellik bayrağı(feature flag) ve unleash kullanımından bahsetmek istedim. Umarım faydası olur. Okuduğunuz için teşekkürler. ✌️

Bu makalede yararlandığım kaynaklar;

• https://docs.getunleash.io/sdks/proxy-react
• https://github.com/Unleash/unleash
• https://nepcodex.com/2022/01/feature-flag-and-toggle-with-unleash/
• https://www.claimcompass.eu/blog/feature-flags-in-react-with-unleash/
• https://martinfowler.com/articles/feature-toggles.html
• https://learn.microsoft.com/en-us/devops/operate/progressive-experimentation-feature-flags