Mobil uygulama performansı, kullanıcı deneyiminin merkezindedir. Hızlı başlama süreleri, akıcı animasyonlar, düşük bellek kullanımı ve tutarlı kare hızı (FPS) uygulamanın başarısını doğrudan etkiler. React Native ve Flutter oldukça popüler iki çapraz platform çerçevesi olmakla birlikte her ikisinde de performansı artırmak için farklı yaklaşımlar ve en iyi uygulamalar vardır. Bu yazıda hem genel prensipleri hem de React Native ve Flutter özelindeki pratik optimizasyon tekniklerini ele alacağız.
Genel İlkeler
Her iki platformda da performans optimizasyonu yapılırken aşağıdaki temel kuralları akılda tutmak gerekir:
- Profiling yapmadan varsayımlarda bulunmayın. Gerçek darboğazı ölçün.
- Öncelikle kullanıcı için en kritik yolları optimize edin: uygulama başlatma, liste kaydırma, form etkileşimleri ve animasyonlar.
- Gereksiz tekrar renderlardan kaçının; state yönetimini dikkatle tasarlayın.
- Görsel varlıkları optimize edin: uygun format, çözünürlük ve sıkıştırma kullanın.
- Arka plan işlemlerini ana iş parçacığından ayırın.
React Native Optimizasyon Teknikleri
1. Render ve Re-render Yönetimi
React Native uygulamalarında gereksiz renderlar performansı düşürür. Aşağıdaki yöntemler yardımcı olur:
- Fonksiyonel bileşenlerde React.memo kullanarak props değişmediğinde yeniden renderı önleyin.
- useCallback ve useMemo ile fonksiyon ve hesaplamaları memoize edin.
- Class bileşenlerde PureComponent veya shouldComponentUpdate ile kontrol ekleyin.
- Inline fonksiyon ve inline obje oluşturmaktan kaçının; bunlar props referansını her defasında değiştirir.
// Örnek: React.memo
const Item = React.memo(function Item({data, onPress}) {
return {/* ... */}
})
2. Liste Sanallaştırma
Uzun listeler için FlatList veya SectionList kullanın. getItemLayout, initialNumToRender, windowSize gibi props ile performansı iyileştirin. removeClippedSubviews ile görünmeyen öğeleri render dışında tutabilirsiniz.
3. Animasyonlar
Animasyonları mümkün olduğunca native thread üzerinde çalıştırın. Animated API kullanırken useNativeDriver: true tercih edin. Reanimated kütüphanesi daha güçlü ve performanslı animasyonlar sunar.
4. Başlangıç Süresi ve JS Bridge
Uygulama başlangıcı kritik bir noktadır. Hermes motorunu etkinleştirmek Android başlangıç süresini ve bellek kullanımını azaltabilir. Inline requires seçeneği ile gerekmeyen modüllerin yüklenmesini erteleyin. JS ile native arasındaki iletişimi azaltın; büyük veri transferlerini serializasyon maliyeti yüksek olduğu için minimal tutun veya native modüller aracılığıyla gerçekleştirin.
5. Ağ ve Veri Yönetimi
Veri isteklerini optimizasyonlarla hızlandırın: caching, pagination, prefetching ve delta güncellemeleri kullanın. Ağ isteklerini sık sık tekrarlamaktan kaçının ve arka plan senkronizasyonunu planlayın.
6. Release Build ve Proguard
Üretim derlemelerinde minification ve Proguard kullanarak APK/IPA boyutunu küçültün. Hermes ile birlikte proguard ve shrinkResources ayarlarını optimize edin. Sourcemap ve debug kodlarını prodüksiyonda hariç tutun.
Flutter Optimizasyon Teknikleri
1. Widget Rebuild Kontrolü
Flutterda gereksiz rebuildlar performansı olumsuz etkiler. Aşağıdaki yöntemleri uygulayın:
- Stateless ve Stateful widget ayrımını doğru yapın. Gereksiz state taşıyan widgetlardan kaçının.
- const constructor kullanımı mümkün olan yerlerde uygulamayı hızlandırır ve belleği azaltır.
- InheritedWidget veya Provider, Riverpod, Bloc gibi state management çözümleriyle sadece gereken alt ağaçları yeniden oluşturun.
// Örnek: const constructor
class MyText extends StatelessWidget {
const MyText({super.key, required this.text});
final String text;
@override
Widget build(BuildContext context) => Text(text);
}
2. RepaintBoundary ve Render Caching
Sık güncellenen küçük alanları RepaintBoundary ile ayırarak yeniden çizim maliyetini sınırlayın. Resim ve karmaşık render işlemlerinde PictureCache ve ImageCache ayarlarını kullanın.
3. Listeler ve Sliverlar
Uzun listeler için ListView.builder, SliverList ve SliverChildBuilderDelegate kullanın. cacheExtent ile ön yükleme mesafesini kontrol edin. Ağır widgetları lazy yükleyin.
4. Görüntü ve Varlık Optimizasyonu
Flutterda resimleri precacheImage ile önceden yükleyin. WebP veya daha verimli formatlar kullanın. Assetler için doğru çözünürlükleri sağlayın. Büyük bitmap işlemlerini decode etmek yerine scaled görüntüler kullanın.
5. İş Yüklerini İzolasyonlara Taşımak
Yoğun CPU işleri ana UI threadini bloklayabilir. compute fonksiyonu veya Isolate kullanarak arka plan işlemlerini ayırın. Büyük JSON parse, kriptografi veya görüntü işleme gibi görevlerde izolatlar kullanın.
6. Release Build ve AOT
Flutter release modunda AOT ile derlenir; bu yüzden performans geliştirmeleri testleri release modunda yapılmalıdır. Size optimizasyonu için --split-per-abi, --split-debug-info ve obfuscate seçeneklerini değerlendirin.
Profiling ve İzleme Araçları
Doğru araçlarla ölçümlemek optimizasyonun temelidir. Önerilen araçlar:
- React Native: Flipper, Hermes Profiler, Android Profiler, Xcode Instruments, systrace.
- Flutter: DevTools (CPU, Memory, Rasterizer), Observatory, Android Profiler, Xcode Instruments.
- Genel izleme: Sentry Performance, Firebase Performance Monitoring, New Relic.
Profiling sırasında şu metrikleri takip edin: başlangıç zamanı (cold start), etkileşim gecikmesi, kare hızı (FPS), bellek sızıntıları, GC etkinliği ve ağ gecikmesi.
Pratik Kontroller ve Check-List
- Uygulamayı release modunda profil edin, geliştirici modunda çıkan sonuçlar yanıltıcı olabilir.
- Lazily yüklenen modüller kullanın ve kodu bölümlere ayırın.
- Görsel varlıkları uygun formatta ve sıkıştırma seviyesinde tutun; SVG ve vektörleri doğru kullanın.
- JS-native sınırını minimize edin; büyük datasetleri native tarafında işleyin.
- Memory leak tespit ve düzeltmelerini düzenli olarak yapın.
- Kullanıcı metrikleri için telemetri ekleyin ve belirlenen performans hedeflerini izleyin.
Sonuç
React Native ve Flutter için performans optimizasyonu, doğru araçlarla ölçüm yapmayı, platformun mimarisine uygun kararlar almayı ve kullanıcı için en kritik yol noktalarını önceliklendirmeyi gerektirir. React Native tarafında render kontrolü, liste sanallaştırma, Hermes ve native animasyonlar odak noktasıyken; Flutter tarafında const kullanımı, RepaintBoundary, Sliver yapıları ve izolatlar öne çıkar. Her iki platformda da öncelik profil oluşturma ve sürekli izleme olmalıdır. Bu tekniklerin kombinasyonu uygulamanızın daha hızlı, daha az bellek kullanan ve daha akıcı çalışmasını sağlayacaktır.
Sen Ekolsoft olarak mobil performans iyileştirmelerinde elde ettiğimiz tecrübelerle, ekiplerinize özel analiz ve optimizasyon çalışmaları sunuyoruz. İhtiyacınız olursa uygulamanızın performans değerlendirmesini birlikte yapabiliriz.
