Jetpack Compose Recomposition
Giriş
Selamlar👋, Jetpack Compose ile gelişen uygulama geliştirme sürecinde, uygulama performansınızı çok etkileyebilecek ama geliştirirken gözünüze o kadar da batmayacak bir konuyla karşınızdayım.
Bu yazımızda recomposition konusunu inceleyeceğiz🕵️♂️. Recomposition’ın doğru şekilde kullanılması durumunda geliştirdiğimiz uygulamaya avantajları, doğru kullanılmadığı durumda ise uygulamamızın omuzlarındaki yükün ne kadar arttığından bahsedeceğiz. Gelin birlikte bakalım neymiş bu recomposition.
Recomposition Nedir❓
Recomposition’ın çalışma prensibi, Composable işlevin herhangi bir öğesi değiştiğinde, Jetpack Compose’un bu öğeyi izleyen tüm işlevleri yeniden hesaplamasıdır. Bu, yalnızca gerekli olan öğelerin yeniden hesaplanmasına izin verir ve performansı artırır💪.
Örneğin, bir Composable işlevi, bir görüntüyü görüntülemek için ImageView öğesini kullanırken, bu işlev, görüntü kaynak değiştiğinde yeniden çalıştırılacaktır. Ancak, Composable işlevi yalnızca ImageView öğesindeki değişiklikler için yeniden çalıştırılacaktır. Bu, kullanıcı arayüzünün her yönü için ayrı ayrı yeniden hesaplamalar yapılması gerektiği eski yöntemlerden daha hızlı ve daha az kaynak tüketen bir yöntemdir.
Recomposition, performansı artırırken aynı zamanda uygulama geliştiricilerine daha az kod yazarak daha fazla işlevsellik sunar. Ancak, gereksiz yere Composable işlevlerinin yeniden hesaplanması performansı düşürebilir, bu nedenle Recomposition kullanırken dikkatli olunması önemlidir.
Recomposition için 4 anahtar kelime karşımıza sıklıkla çıkmaktadır;
- @Composable: Recomposition’ın kullanılacağı Composable fonksiyonlarını tanımlamak için kullanılır.
- remember: Mutable veya immutable bir değeri hafızada saklamak ve Recomposition sırasında kullanmak için kullanılır.
- by: MutableState, MutableStateList veya MutableStateMap gibi Recomposition’ın izlenebilir olması gereken veri türlerini kullanmak için kullanılır.
- key: Bir listede birden fazla öğe varsa ve bu öğelerin her biri aynı Composable fonksiyonunu kullanıyorsa, key özelliği, Recomposition sırasında hangi öğelerin yeniden oluşturulması gerektiğini belirlemek için kullanılabilir.
Compose 3 Aşamadan oluşmaktadır;
1- Composition: Neyin gösterileceğini belirleyen composable ağacı oluşturur.
2- Layout: Composition da belirlenen ağacın nerede gösterileceğini belirler.
3- Draw: Ekrana çizer.
Composition aşamasında hiçbir değişiklik olmadıysa Compose, composition aşamasını atlar ve geliştiriciye performans kazandırabilir.
Recomposition’ın Avantaj ve Dezavantajları
Dezavantajlar
Performans Problemleri: Eğer Composable işlevlerinde gereksiz yeniden hesaplamalar yapılırsa, uygulamanın performansı düşebilir. Bu nedenle, geliştiricilerin Recomposition’u dikkatli bir şekilde kullanması ve gereksiz yeniden hesaplamaları önlemesi gerekir.
Bellek Tüketimi: Composable işlevlerin yeniden hesaplanması gerektiğinde, Jetpack Compose bellek kullanır. Bu, uygulamanın bellek tüketimini artırabilir ve bu da uygulamanın performansını olumsuz etkileyebilir.
Güncelleme Problemleri: Recomposition, bir Composable işlevde bir öğenin değiştiğinde tüm işlevin yeniden hesaplanmasına izin verir. Bu, özellikle büyük uygulamalarda bir öğenin değiştirilmesinin tüm arayüzü etkileyeceği anlamına gelebilir. Bu nedenle, Jetpack Compose geliştiricilerinin, Composable işlevlerini mümkün olduğunca küçük ve spesifik hale getirmeleri önerilir.
Sınırlı Geri Alma Desteği: Recomposition, Composable işlevlerin her zaman doğru bir şekilde geri alınmasını sağlamaz. Bu nedenle, geliştiricilerin, gerektiğinde manuel olarak geri alma işlemleri yapmaları gerekebilir.
Avantajları
Verimlilik: Recomposition, yalnızca değiştirilen bileşenleri yeniden hesaplar. Bu, uygulama içindeki tüm arayüzün yeniden hesaplanmasına gerek olmadığı anlamına gelir. Bu da uygulamanın performansını artırır ve daha verimli hale getirir.
Basitlik: Jetpack Compose, Android arayüzlerini tasarlamak için kullanılan XML kodu gibi geleneksel araçlar yerine, Kotlin dilinde doğrudan kod yazmayı kullanır. Bu, uygulama geliştiricilerinin arayüzleri daha hızlı ve daha kolay bir şekilde oluşturmasını sağlar.
Modülerlik: Composable işlevler, küçük parçalara bölünebilir ve yeniden kullanılabilir. Bu, uygulama geliştiricilerinin arayüzü daha modüler hale getirmelerine izin verir ve böylece kodu daha temiz ve daha okunaklı hale getirir.
Kolay Test Edilebilirlik ve Kolay Bakım: Recomposition, koddaki karmaşıklığı azaltır. Geliştiriciler, herhangi bir öğenin yeniden oluşturulmasına ihtiyaç duyduklarında, yalnızca bu öğeyi belirtmeleri yeterlidir. Bu sayede, kod daha modüler hale gelir ve daha kolay bakım yapılabilir hale gelir.
Animasyonlar: Recomposition, animasyonlar için de kullanılabilir. Animasyonların otomatik olarak yeniden oluşturulması, daha akıcı bir kullanıcı deneyimi sağlar.
Gelin yukarıda konuştuklarımızı bir örnek üzerinden değerlendirelim;
Örneğimizde, bir sayfada gösterilecek bir liste var. Liste öğeleri, bir veri kaynağından gelir ve her bir öğe tıklanabilir. Seçili öğe, farklı bir arka plan rengi ve daha büyük bir yazı tipiyle vurgulanacaktır. Bu özelliklerin her biri Recomposition kullanarak yapılabilir.
ListItem fonksiyonunda, isSelected değişkeni Recomposition kullanılarak oluşturuldu. Her seferinde yeni bir öğe seçildiğinde, isSelected değişkeni değişir ve Recomposition otomatik olarak çağrılır. Bu da seçili öğenin arka plan renginin ve yazı tipinin güncellenmesini sağlar.
ListScreen fonksiyonunda, selectedItem değişkeni de Recomposition kullanılarak oluşturulur. Her seferinde yeni bir öğe seçildiğinde, selectedItem değişkeni değişir ve Recomposition otomatik olarak çağrılır. Bu da seçili öğenin vurgulanmasını sağlar.
Bu örnekte, Recomposition kullanarak seçili öğenin vurgulanması gibi basit bir özellik bile yapılabilir. Ancak Recomposition, daha büyük ve karmaşık UI’lerde de çok faydalı olabilir.Her seferinde yalnızca değişen öğelerin yeniden oluşturulması, performansı artırabilir ve daha hızlı bir UI deneyimi sağlayabilir. Ayrıca, kodun daha okunaklı ve yönetilebilir olmasını sağlar. Bu örnek, Recomposition’un nasıl kullanılabileceğini göstermek için basit bir örnek olarak tasarlanmıştır, ancak daha karmaşık UI öğeleri ve hatta sayfaları bile Recomposition kullanarak optimize edilebilir.
Sonuç
Recomposition, yazılan programın kalitesine bağlı olsada doğru kullanıldığında performansa olumlu etki yaptığını öğrendik👀. Jetpack compose’un programlamaya kattığı bir çok artısı mevcut ama sanırım bunların en önemlisi modüler ve küçük kod parçaları olarak yazma ihtiyacını yazılımcılara dayatıyor olması diyebilirim. Kod standartları açısından güzel haber diyebiliriz. Uygulama içerisinde bir parça yeniden hesaplanırken diğer tüm parçaların da onunla birlikte yenilenmesine gerek duyulmaması belki küçük programlar için önem arz etmiyor olabilir ancak büyük ve kompleks yapılarda kesinlikle büyük farklar yaratacak ve kullanıcı deneyimini zirveye çıkaracaktır🧗🏻.
Beni okuduğunuz için teşekkür ederim. Sağlıcakla kalın kodla kalın👋👩💻👨💻.
