Üretimde Flutter: 3 Çapraz Platform Uygulaması Yayınladıktan Sonra Öğrendiklerimiz
Flutter, çapraz platform uygulamalar için bizim ilk seçimimiz. Geçen yıl boyunca üç production Flutter uygulaması yayınladık — bir fintech uygulaması, bir edtech platformu ve bir field service aracı. Her biri Flutter'ın ne kadar iyi yaptığı ve nereye dikkat etmeniz gerektiği konusunda bize yeni bir şey öğretti. İşte pazarlama konuşması değil, gerçek dersler.
State management: Riverpod'u seçtik
Provider, BLoC ve Riverpod'u farklı projelerde denedikten sonra, tüm yeni Flutter çalışmalarında Riverpod'u standart hale getirdik. Nedeni basit: dependency injection ve state management'ı tek bir pattern'de işler, compile-time safe'dir (missing provider'lardan kaynaklanan runtime hataları yok), ve testlerde aynı şekilde çalışır.
BLoC güçlü ama çoğu uygulama için aşırı resmi. Event-state pattern, tipik CRUD ve API-driven uygulamalar için orantılı faydalar olmaksızın geliştirmeyi yavaşlatan boilerplate ekler. BLoC'u gerçek zamanlı işbirliğine dayalı düzenleme gibi açık event stream'in gerçekten yararlı olduğu karmaşık stateful özellikler için saklıyoruz.
Riverpod mimarimiz üç katmanlı bir pattern'i takip eder: UI widget'ları controller'lara (StateNotifier veya AsyncNotifier) bağlıdır, controller'lar repository'lere bağlıdır ve repository'ler data source'lara (API client'ları, yerel depolama) bağlıdır. Her katman bağımsız olarak test edilebilir ve dependency graph açıktır.
Performans: %90 kuralı
Flutter, %90 ekran için kutusundan çıktığında 60fps verir. Diğer %10 — uzun kaydırılabilir listeler, canlı veriler üzerine katmanlanmış karmaşık animasyonlar ve birçok eş zamanlı ağ görüntüsü olan ekranlar — kasıtlı optimizasyon gerektirir. Bulduğumuz en etkili optimizasyonlar:
Mümkün olduğunca her yerde const constructor'ları kullanın. Bu tek uygulama gereksiz widget yeniden oluşturmalarını önler ve Flutter'da en kolay performans kazancıdır. Bunu lint kuralları aracılığıyla zorluyoruz. 20 öğeden uzun herhangi bir liste için ListView yerine ListView.builder kullanın — sadece görünür öğeleri tembelce oluşturur. cached_network_image ile ağ görüntülerini önbelleğe alın ve uygun bellek sınırları ayarlayın. Karmaşık animasyonlar için, pahalı painting işlemlerini izole etmek üzere RepaintBoundary kullanın.
Flutter DevTools performans overlay senin en iyi arkadaşın. Geliştirme sırasında her ekranda çalıştırıyoruz ve 16ms'den fazla süren her frame'i işaretliyoruz. Çoğu jank, layout thrashing'ten (birden fazla layout geçişini tetikleyen derin iç içe widget'lar) veya gereksiz yeniden oluşturmalardan (dinleyicilere çok geniş şekilde bildirim gönderen provider'lar) kaynaklanıyor.
Platform kanalları: yerel koda bağlantı
Her Flutter uygulaması sonunda platforma özgü koda ihtiyaç duyar. Fintech uygulamamız için biyometrik kimlik doğrulama ve güvenli enclave depolama idi. Edtech uygulamamız için özel yükleri olan push bildirim işlemesi idi. Saha hizmetleri uygulamamız için arka plandaki konum takibi idi.
Ham MethodChannels yerine tür açısından güvenli platform kanalları için Pigeon kullanıyoruz. Pigeon, tek bir arayüz tanımından Dart ve yerel taraflar için boilerplate oluşturuyor. Bu, çalışma zamanı hatalarına neden olan string tabanlı yöntem adı eşleştirmesini ortadan kaldırıyor ve platform kanalı kodunu gerçekten sürdürülebilir yapıyor.
Bizim temel kuralımız: %90+ pub.dev puanı ve aktif bakımı olan bir eklenti varsa, onu kullan. Yoksa, yerel API'ye temsilci olarak hareket eden ince bir platform kanalı sarmalayıcısı yaz. Platformla asla savaşma — temiz köprüler aracılığıyla bunu benimse.
Aslında işe yarayan test stratejisi
Flutter test araçları mükemmeldür ancak kullanılmamaktadır. Test piramidimiz: %60 unit test (repository'ler, kontrolörler, iş mantığı), %30 widget test (bileşen oluşturma ve etkileşim), %10 entegrasyon test (kritik kullanıcı akışları uçtan uca). Bu oran, çok fazla entegrasyon testinin kırılganlığı olmadan refactoring konusunda bize güven veriyor.
Golden file test özelliği yetersiz değerlendirilmektedir. Karmaşık düzenleri olan ekranlar için, işlenmiş widget'ı snapshot'ladığımız ve referans görüntüyle karşılaştırdığımız. Bu, unit testlerin kaçırdığı görsel gerillemeleri yakalar. Her pull request için CI'da golden test'leri çalıştırıyoruz.
Flutter'ı tekrar seçer miydik?
Evet, bazı uyarılarla. Flutter, iOS ve Android'in her ikisine de ihtiyaç duyan uygulamalar için paylaşılan bir kod tabanıyla bugün mevcut en iyi çapraz platform çerçevesidir. Dart dili üretken ve widget sistemi gerçekten iyi tasarlanmıştır. Hot reload yinelemeyi hızlı hale getirir.
Ancak her şey için doğru seçim değildir. %50'den fazla platforma özgü kod içeren uygulamalar (ağır AR, karmaşık kamera işlem hatları, derin işletim sistemi entegrasyonu) yerel olmalıdır. Ağırlıklı olarak içerik görüntülemesi yapan ve minimal etkileşim gerektiren uygulamalar React Native veya hatta PWA kullanabilir. Flutter, etkileşimli, veri odaklı uygulamalar ve orta düzey platform entegrasyon ihtiyaçları için parlak bir seçimdir — bu, çoğu startup ürününü tanımlar.