Müşteri Tarafındaki N+1 Problemi
Birçok full-stack eğitimi, saf, kaynak tabanlı REST API’leri oluşturmayı öğretir. /users için bir uç nokta, /posts için bir uç nokta ve /settings için bir uç nokta oluşturursunuz. Teoride harika, ancak mobil performans için tam bir felaket.
Flutter uygulamanız ana panosunu yüklediğinde, ilk ekranı görüntülemek için birden fazla HTTP isteği (dört ayrı istek) yapmak zorundadır. Dengesiz bir 4G bağlantısında, ardışık veya paralel olarak birden fazla istek göndermek, kullanıcının bataryasını tüketir, büyük gecikmelere neden olur ve korkulan “sonsuz yükleme simgesi” UI’sine yol açar.
Mobil Uygulamanın Düşünmesini Durdurun
Flutter ön yüzü, veri toplama, karmaşık iş mantığını yürütme veya farklı veritabanı kaynaklarını birleştirme gibi görevlerden sorumlu olmamalıdır. Mobil cihazların sınırlı belleği ve öngörülemeyen ağ bağlantıları vardır.
Bunu çözmek için, saf REST’i terk ediyoruz ve mobil istemcilerimiz için BFF Pattern (Backend-For-Frontend) uyguluyoruz, ki bunu Laravel ile gerçekleştiriyoruz.
Laravel BFF’yi Tasarlamak
BFF, Flutter uygulamanızın UI’sinin tam ihtiyaçları için özel olarak oluşturulmuş bir API katmanıdır. Mobil uygulama kaynak istemek yerine bir Screen istemektedir.
İşte bir Laravel BFF denetleyicisinin görünümü. Tek bir HTTP isteği içinde, Eloquent’in eager loading özelliğini kullanarak Flutter panosunun anında render edilmesi için gereken her şeyi paketliyoruz:
namespace App\Http\Controllers\Api\BFF;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class DashboardController extends Controller
{
public function load(Request $request)
{
$user = $request->user()->load([
'wallet:id,user_id,balance',
'latestTransactions' => function ($query) {
$query->latest()->take(5);
},
'unreadNotifications:id,user_id,message'
]);
// Flutter UI'sinin tam olarak beklediği JSON formatında döndürüyoruz, istemci tarafında herhangi bir ayrıştırma ihtiyacı olmadan
return response()->json([
'greeting' => 'Hello, ' . explode(' ', $user->name)[0],
'current_balance' => $user->wallet->balance,
'recent_activity' => $user->latestTransactions,
'alerts' => $user->unreadNotifications,
]);
}
}
Sonuç: 60FPS ve Sıfır Gecikme
Toplama mantığını Laravel sunucumuza kaydırarak (doğrudan, sıfır gecikmeli bağlantıya sahip PostgreSQL veritabanına), mobil uygulama tek bir hızlı istek gerçekleştirir. Flutter UI mükemmel bir şekilde akıcı kalır, ağ yükü azaltılır ve cihazın batarya ömrü korunur.
Mobil uygulamalarınızı arka uç işini yapmaya zorlamayı bırakın. Bir BFF tasarlayın.
Kaynak: Orijinal Makale


