Jetpack Compose Side Effects & Effect Handlers -I

Abdullaherzincanli
Huawei Developers - Türkiye
4 min readMar 23, 2023
Source

Giriş

Selamlar🖐, geliştirdiğiniz uygulamalarda donmalar, kasmalar veya uygulamanın çökmesi gibi sorunlarla karşılaştınız mı❔ Peki ya internet veya veri tabanı işlemleri sırasında uygulamanızın kullanımı sizi çok mu yoruyor❔ Size anlatacağım konu bu problemlere sebep veriyor olabilir. Uygulamanızda bu sorunların olup olmadığını anlayabilmek için bu makale işinize yarayabilir.

Bu makalede sizler ile compose için önemli bir yere sahip olan side effects ve bu effectleri yönetme imkanını bizlere veren effect handlers konusuna değineceğiz. Peki biz geliştiriciler için büyük sorunlara yol açabilecek bu etkiler nedir ve biz bunlar ile nasıl savaşabiliriz gelin birlikte bakalım.

Side Effects Nedir

Source

Side effects, composable fonksiyonların dönüş değerinden bağımsız ancak programın işleyişine etkisi bulunabilecek, genel akışın dışında bir değişikliğe sebep olabilecek etkenlere verilen isimdir. Kullanıcı deneyimini ve kullanım etkinliğinin artması için bu side effectlerin etkili bir şekilde yönetilmesi gerekir. Peki biraz daha anlaşılır hale getirelim bu effectler nelerdir ve biz istemeden nasıl bu effectlere maruz kalırız.

Side effects, terim olarak gözümüze yabancı gibi gelse de hepimizin uygulama geliştirirken karşılaştığımız etkilerdir. Örneğin; Geliştirmekte olduğumuz uygulamada bir api üzerinden veri çekiyor olabiliriz. Uygun yapıyı kurmadığımızda api’ye istek atıp, bu isteğe cevap alana kadar kullanıcının UI erişimini istemesekte kısıtlayabiliriz ya da bir veri tabanına veri kaydı yapalım, fonksiyonumuza veriyi yolladık ve işimizin bittiğini düşünüyoruz. Aslında işte tam burada side effects adını verdiğimiz etkiler uygulamamızın kullanıcı deneyimini baltalıyorlar.

Peki biz bu etkiler ile nasıl mücadele edebiliriz❔ Nasıl daha etkili kullanıcı deneyimine sahip olabilir ve uygulamamızın performansını nasıl daha iyi hale getirebiliriz❔ İşte tüm bu sorulara cevap olarak compose bize effect handler türleri sunuyor. Peki nedir bu effect handlers❔ Gelin bakalım.

Effect Handlers Nedir❔

Jetpack Compose, UI’yi inşa etmek için tek yönlü bir veri akışı modeli kullanır. Bu nedenle, UI durumunun güncellenmesi, veri akışının üstündeki durumun değiştirilmesiyle tetiklenir. Buna rağmen, bazen uygulamaların yapması gereken işlemler var ki, bunlar UI durumu ile doğrudan ilgili olmayabilirler. Örneğin, bir API’den veri indirme, dosya okuma/yazma, lokal veritabanı işlemleri gibi işlemler bu kategoriye girer.

Bu işlemleri yapmak için effect handlerlar kullanılmazsa, bu işlemler UI thread’i bloke edebilir ve uygulamanın performansını olumsuz etkileyebilir. Örneğin, bir API isteği yapmak için retrofit veya ktor gibi bir network kütüphanesi kullanılabilir. Ancak, bu kütüphaneler UI thread’i bloke eder ve kullanıcı arayüzünün donmasına neden olabilir.

Effect handlers sayesinde yazılan kodun test edilebilirliği artar, kod bakımını kolaylaşır, yazılan kodun çalışma performansı artar ve yeni kod eklenmensini kolaylaşır.

Launched Effect

Composable bir fonksiyon içinde, UI’nin bir bölümünün durumunu veya davranışını değiştirmek istediğinizde launched effect özelliğini kullanabilirsiniz. Launched effect, Compose tarafından sunulan bir asenkron çalıştırma aracıdır.

Launched effect, suspend fonksiyonları kullanarak asenkron işlemler gerçekleştirmenize olanak tanır. Örneğin, bir dosya indirme işlemi gerçekleştirmek istediğinizde, suspend fonksiyonu kullanarak indirme işlemini gerçekleştirebilirsiniz. Bu, composable fonksiyonunun beklemesini önler ve performansını artırır.

Yukarıda verdiğimiz örneği ufak bir gösterim ile daha detaylı inceleyelim🕵🏼. Diyelim ki ağ isteği ile kullanıcı adlarını çekmeye çalışıyoruz;

Example for Launched Effect

Burada, kullanıcının adını almak için fetchUserDetails() fonksiyonunu launched effect ile çağırıyoruz. İşlem tamamlandığında, sonucu userDetailsState içinde saklıyoruz ve bir Toast mesajı olarak gösteriyoruz.

Kısacası, launched effect, Jetpack Compose’un güçlü bir özelliğidir ve UI durumunu ve davranışını değiştirmek için asenkron işlemler gerçekleştirmenize olanak tanır.

Disposable Effect

Composable bir fonksiyon içinde, bir işlemi başlatmak istediğinizde ve işlem bittiğinde kaynakları serbest bırakmak istediğinizde disposable effect özelliğini kullanabilirsiniz. Disposable effect, Compose tarafından sunulan bir asenkron çalıştırma aracıdır.

Temel amacı işlemi biten composable fonksiyonun arkasında hafıza sızıntısı bırakmayacak şekilde temizlik yapmaktır diyebiliriz. Aynı şekilde onDispose bloğu sayesinde de durdurulan composable fonksiyonda açık kalan verileri temizleyerek onların da sızıntı yapmasına engel olur.

Bu konuya da örnek olarak anime edilen bir text yapalım. Animasyon sırasında işlemimizin kesilebileceğini de düşünerek animasyonun sağlıklı bir şekilde çalışmasını projemize uygulamaya çalışalım.

Example for Disposable Effect

Bu örnekte, disposable effect içinde bir animasyon başlatıyoruz ve animasyonun ilerlemesini bir state içinde saklıyoruz. Daha sonra, onDispose özelliği ile animasyonu durduruyoruz. Son olarak, animasyonun ilerlemesine göre bir metin ekrana basıyoruz.

Side Effect

SideEffect, Composable işlevin içinde herhangi bir yerde tanımlanabilir. Ancak, bir SideEffect işlevi, UI üzerinde herhangi bir değişiklik yapamaz. Yani, bir SideEffect, yalnızca belirli bir etkileşimli olmayan kodu çalıştırır ve UI üzerinde herhangi bir değişiklik yapmaz.

Bir örnek vermek gerekirse, bir uygulamada bir kullanıcının profil fotoğrafı değiştirilirken, yeni fotoğraf sunucudan indirilir ve veritabanına kaydedilir. Bu işlemlerin UI işlemlerinden bağımsız olarak gerçekleştirilmesini sağlar ve performans sorunlarını önler.

Özetle, SideEffect, Jetpack Compose’un deklaratif yapısında etkileşimli olmayan işlemleri gerçekleştirmek için kullanılan bir işlevdir. UI üzerinde herhangi bir değişiklik yapmaz ancak performans sorunlarını önler ve uygulamanın daha hızlı çalışmasını sağlar.

Example for Side Effect

Yukarıdaki örnekte, SideEffect işlevi, veritabanı sorgularının yapılmasını sağlar. UI üzerinde herhangi bir değişiklik yapmaz ancak veritabanı işlemlerinin tamamlanmasını bekler. Sonuç olarak, öğelerin güncellenmesinden sonra bir snackbar görüntülenir. Bu örnekte SideEffect, veritabanı işlemlerinin UI işlemlerinden bağımsız olarak gerçekleştirilmesini sağlar.

Sonuç

Side effects’in uygulamalar üzerindeki etkisini ve bu etkilerle mücadele etmenin yollarını birlikte inceledik🕵️. Bu etkilerin, UI için yazılan kodlardan bağımsız olan işler yüzünden uygulamayı etkilediğini ancak UI’nın engellenerek kullanıcıya kötü bir deneyim yaşattığını, uygulama için kritik öneme sahip bir etken olduğunu sizlere anlatmaya çalıştım.

Akıcı bir uygulama için sizlere verebileceğim ilk fikirler bunlardı. Fark ettiniz mi❔ Aslında ufak farklar ve yapılar katarak uygulamalarımızı daha akıcı hale getirmemiz mümkün. Peki sizlerin yaşadığı problemler yukarıdaki saydıklarımda var mıydı❔ Eğer yoksa bu konu ile ilgili yazdığım ve bu makalenin devamı olan makalemi okumanızı öneririm.

Mutlu günler ve mutlu kodlamalar👨‍💻👩🏼‍💻.

Referanslar

--

--