Mobil uygulama performansı, kullanıcı deneyimini doğrudan etkiler. React Native ve Flutter popüler iki çapraz platform çözümüdür; ancak her ikisinde de performans sorunlarıyla karşılaşılabilir. Bu rehberde hem React Native hem de Flutter için pratik, uygulanabilir performans iyileştirme stratejilerini, profil araçlarını ve dikkat edilmesi gereken mimari konuları ele alıyoruz.
Neden performans önemlidir?
Kötü performans kullanıcı kaybına, düşük değerlendirmelere ve artan destek maliyetine yol açar. Özellikle başlangıç (startup) süresi, UI akıcılığı (FPS), bellek kullanımı ve güç tüketimi gibi metrikler mobilde kritik önemdedir. Performansı artırmak yalnızca teknik bir iyileştirme değil, iş başarısı için de ihtiyaçtır.
Ölçmeden başlamayın: Temel metrikler ve profilleme
Her optimizasyona başlamadan önce ölçüm yapın. İşe yarar metrikler:
- Startup time (cold ve warm start)
- Time to interactive (TTI)
- FPS ve jank (frame drops)
- CPU ve bellek kullanımı
- ANR/Crash oranları
React Native için araçlar: Flipper, React DevTools, Android Profiler, systrace ve Perf Monitor. Flutter için: Flutter DevTools (Timeline, CPU profiler, memory profiler), Observatory. Bu araçlarla darboğazların kaynağını (JS thread, Java bridge, UI thread, raster thread) tespit edin.
React Native: Hızlı kazanç sağlayan optimizasyonlar
1. Hermes ve Metro ayarları
Hermes JavaScript motorunu etkinleştirmek, özellikle Android'de startup süresini ve bellek kullanımını düşürür. Metro bundler'da "inlineRequires" ve RAM bundle ayarları ile başlangıç yükünü azaltabilirsiniz.
2. Liste performansını iyileştirme
FlatList veya SectionList kullanırken:
- keyExtractor kullanın
- getItemLayout ile sabit yüksekliğe sahip öğüler için hesaplamayı kolaylaştırın
- initialNumToRender ve maxToRenderPerBatch değerlerini ayarlayın
- recyclerlistview gibi alternatifleri değerlendirin
3. Gereksiz renderları engelleyin
PureComponent, React.memo, useMemo ve useCallback gibi araçlarla render sayısını azaltın. Büyük bileşenleri küçük parçalara ayırarak sadece gerekli alt parçalarda yeniden render yaptırın.
4. Ağ ve görsel optimizasyonları
Görselleri uygun boyutlarda sunun, WebP kullanın, lazy load uygulayın. Ağ isteklerini sıkıştırın, cache politikası uygulayın ve API yanıtlarını sayfalama ile alın.
5. Native köprü yükünü azaltma
JS-Native köprüsüne sık sık mesaj göndermek performansı düşürür. Ağır hesaplamaları native modüllere veya arka plan thread'lerine taşımayı düşünün. Ayrıca JSI/TurboModules ve Fabric ile daha hızlı etkileşim sağlanabilir.
6. Geliştirme modundan çıkın
Debug modunda performans gerçek kullanıcı deneyimini yansıtmaz. Her optimizasyonu release build üzerinde test edin.
Flutter: Etkin, native benzeri performans için ipuçları
1. const widget'ları kullanın
Stateless veya Stateful widget'larda mümkün olduğunda const constructor kullanmak rebuild maliyetini düşürür. Bu küçük ama etkili bir optimizasyondur.
2. setState'i dikkatli kullanın
setState tüm widget alt ağacını yeniden çizdirir. Daha küçük stateful alanlara bölün veya state yönetim kütüphaneleri (Provider, Riverpod, Bloc) kullanarak etkili rebuild sınırları belirleyin.
3. RepaintBoundary ve render optimizasyonu
Sık yeniden boyanan bölümleri RepaintBoundary ile izole ederek rasterizasyon maliyetini azaltabilirsiniz. Ancak aşırı kullanım da bellek yükünü artırabilir; profil ile karar verin.
4. Liste optimizasyonu
ListView.builder, GridView.builder gibi builder pattern kullanın. Büyük öğelerde cacheExtent ve itemExtent ile optimizasyon yapın.
5. Ağır işler için Isolate kullanın
CPU yoğun işlemleri main thread dışında Isolate içinde çalıştırın. Bu, UI akıcılığını korumanın en etkili yollarındandır.
6. Release build, tree shaking ve obfuscation
Release modda uygulamayı test edin. Flutter, kullanılmayan kodu tree-shaking ile kaldırır. Ayrıca obfuscate/gzip ile APK/APKs boyutunu küçültmeyi değerlendirin.
Hem React Native hem Flutter için evrensel optimizasyonlar
- Kullanıcı algısı odaklı optimizasyon: Skeleton ekranlar, önbellek ve anında geri bildirimle hissedilen performansı artırın.
- Varlık optimizasyonu: Görselleri sıkıştırın, vektör kullanın, gereksiz assetleri projenizden çıkarın.
- Sunucu tarafı optimizasyonları: API yanıt sürelerini iyileştirin, CDN ve cache katmanı kullanın.
- Asenkron işlemler: Ağ ve disk işlemlerini arka planda çalıştırın; UI thread'i boş tutun.
- Performans bütçesi belirleme: Hedef FPS, startup time ve bellek limitleri koyun ve CI ile takip edin.
Profil örnekleri ve araç kullanımı
Profil sürecine örnek adımlar:
- Repro edin: Problem olan senaryoyu tespit edin.
- Profil al: CPU, memory, timeline izleyin.
- Darboğazı belirle: JS bind, UI thread, render, raster.
- İyileştir: Kod, asset, ağ veya mimari değişiklikleri yapın.
- Doğrula: Release build üzerinde yeniden test edin.
React Native: Flipper/Perf Monitor ile JS thread ve render sorunlarını tespit edin. Flutter: DevTools Timeline ve CPU profiler ile hangi fonksiyonların sıkça çağrıldığını görün.
Yapısal ve mimari öneriler
Performans tek seferlik düzeltmelerle garantilenmez. Doğru mimari ve test kültürü gerekir:
- Modüler yapı: Bileşenler küçük ve test edilebilir olsun.
- State yönetimi: Seçilen yöntem uygulamanın büyüklüğüne uygun olsun.
- Performans testleri: CI/CD içinde otomatik ölçümler, regression takibi.
- Platforma özgü optimizasyonları gerektiğinde kullanın (native modüller, özel render pipeline).
Sonuç
React Native ve Flutter ile yüksek performanslı mobil uygulamalar geliştirmek mümkündür. Anahtar noktalar: ölçmek, önceliklendirmek ve adım adım iyileştirmek. React Native için Hermes, inlineRequires, render optimizasyonları; Flutter için const widget'lar, Isolate kullanımı ve repaint sınırlandırma gibi yaklaşımlar kısa vadede büyük kazanımlar getirir. Unutmayın: her değişikliğin etkisini profil araçlarıyla doğrulamak gerekir. Böylece hem kullanıcı deneyimini iyileştirir hem de sürdürülebilir, bakımı kolay uygulamalar ortaya çıkartırsınız.
Hızlı İpucu: Her optimizasyondan sonra gerçek cihazlarda test edin; emülatör ve debug mod sonucu yanıltıcı olabilir.
