Gizli Performans Katili
<p>Flutter UI'nizi optimize etmek için aylar harcıyorsunuz. Widget'ları ayırıyor, sabit yapıcılar kullanıyor ve her şeyin geliştirme simülatörünüzde mükemmel 60 kare/saniye hızında çalıştığından emin oluyorsunuz. Animasyonlar harika görünüyor. Ancak, istemciniz uygulamayı düzensiz bir 4G bağlantısında denediğinde, uygulamanın yavaş, tepkisiz olduğunu ve bataryalarını zorladığını belirtiyor.</p>
<p>Problem UI değil. Problem ağ. Özellikle, Over-fetching Trap 'in kurbanısınız.</p>
<h2>Over-Fetching Trap</h2>
<p>Bir geliştirici bir mobil gösterge paneli için API ucu inşa ettiğinde çoğu zaman en kolay yolu seçer: tüm veritabanı modelini geri döndürür.</p>
<pre><code>// The Bloated Controller (Bunu yapmayın)
public function getUserProfile() {
// Kullanıcının şifre karma değerini, e-posta doğrulama token’larını,
// 50 sütun tercihlerini ve karmaşık zaman damgalarını döndürüyor.
return response()->json(User::first());
}
<p>Flutter gösterge paneli yalnızca kullanıcının <code>first_name</code> ve <code>avatar_url</code> değerlerine ihtiyaç duyabilir. Ancak Laravel backend'i devasa 500KB'lık bir JSON yükü gönderiyor. Mobil cihazın CPU'su gereksiz metni çözerken boğuluyor ve bu da UI'yı donduruyor ve kullanıcı deneyimini yok ediyor.</p>
<h2>Çözüm: API Kaynaklarını Mimarisi</h2>
<p>Mobil API'ler acımasızca verimli olmalıdır. Bunun için, Laravel backend'imizde <strong>API Resources</strong> kullanarak katı bir sunum katmanı tasarlıyoruz.</p>
<p>Bir API Kaynağı, veritabanı modeliniz ile JSON yanıtınız arasında yer alır ve katı bir biçimlendirme filtresi olarak işlev görür.</p>
<pre><code>namespace App\Http\Resources;
use Illuminate\Http\Resources\Json\JsonResource;
class UserDashboardResource extends JsonResource
{
public function toArray($request)
{
// Veritabanı sütunlarının %95’ini çıkarıyoruz ve yalnızca Flutter UI’nın ihtiyaç duyduğu verileri gönderiyoruz.
return [
‘id’ => (string) $this->id,
‘first_name’ => $this->first_name,
‘avatar’ => $this->avatar_url,
// İlişkileri yalnızca açıkça yüklendiyse dahil et
‘recent_orders’ => OrderResource::collection($this->whenLoaded(‘orders’)),
];
}
}
<h2>Sonuç</h2>
<p>Verileri özel API Kaynaklarından geçirmeye zorlayarak, 500KB'lık yükümüzü şık bir 2KB yük haline getiriyoruz. Flutter uygulaması zayıf bir bağlantıda anında indirmiş oluyor, Dart JSON ayrıştırıcısı mikro saniyeler içinde çalışıyor ve UI hemen render ediliyor. Mobil cihazların veritabanı çöplerinizi işlemelerine son verin.</p>Kaynak: Orijinal Makale
