React Native6 dk

React Native ile 60 FPS Mobil Uygulama Geliştirme Rehberi

JavaScript thread'ini rahatlatarak akıcı mobil arayüzler inşa etmek: Reanimated 3, Gesture Handler ve TurboModules ilkeleri.

YazarŞakir Ortataş

React Native ile 60 FPS Mobil Uygulama Geliştirme Rehberi — İnteraktif Sistem Modeli

Event Control

İzometrik modeli inceleyin veya sekmeler arasında geçiş yaparak farklı mimarileri keşfedin.

React Native geliştiricilerinin karşılaştığı en yaygın problem, yoğun arayüz geçişlerinde veya liste kaydırmalarında kare hızının (FPS) 30'un altına düşmesidir. Bu takılmaların temel sebebi, render hesaplamalarının JavaScript thread'ini işgal etmesidir.

UI Thread ve Worklet Mimarisi

React Native Reanimated 3, animasyon hesaplamalarını doğrudan cihazın yerel UI thread'ine (worklet) taşır. Böylece karmaşık parmak hareketleri ve yaylı yay (spring) animasyonları çalışırken JavaScript thread'i veri çekme veya durum güncellemelerini arka planda rahatça tamamlayabilir.

Liste Performansı ve FlatList Optimizasyonu

Büyük veri listelerinde getItemLayout kullanımı, removeClippedSubviews bayrağı ve windowSize ayarı kritik bellek tasarrufu sağlar. Ekrandan çıkan elemanların anında yok edilmesi bellek sızıntılarını (memory leaks) tamamen ortadan kaldırır.

Yeni Mimari (Fabric & TurboModules)

React Native'in yeni C++ çekirdeği sayesinde köprü (bridge) üzerindeki serileştirme darboğazı tarihe karışmıştır. Artık JavaScript ve Objective-C/Java nesneleri JSI (JavaScript Interface) üzerinden doğrudan bellek adresiyle haberleşir.

React Native ile 60 FPS Mobil Uygulama Geliştirme Rehberi · Canlı Kod BloğuReact Native · TS 5.x
React Native ile 60 FPS Mobil Uygulama Geliştirme Rehberi · Canlı Kod Bloğu
60 FPS · TS 5.x · Running
1export function useDraggableCard() {
2 const translateY = useSharedValue(0);
3 const isDragging = useSharedValue(false);
4
5 const panGesture = Gesture.Pan()
6 .onStart(() => {
7 isDragging.value = true;
8 })
9 .onUpdate((event) => {
10 translateY.value = event.translationY;
11 })
12 .onEnd((event) => {
13 isDragging.value = false;
14 const shouldDismiss = Math.abs(event.velocityY) > 800;
15 translateY.value = shouldDismiss
16 ? withSpring(Math.sign(event.velocityY) * 600, { velocity: event.velocityY })
17 : withSpring(0, { damping: 18, stiffness: 220 });
18 });
19
20 const animatedStyle = useAnimatedStyle(() => ({
21 transform: [{ translateY: translateY.value }],
22 opacity: interpolate(Math.abs(translateY.value), [0, 400], [1, 0.4]),
23 }));
24
25 return { panGesture, animatedStyle };
26}
Blog

Diğer Teknik Makaleler

NestJS & Backend•</> İnteraktif
Şakir Ortataş

NestJS ve Node.js ile Ölçeklenebilir Mikroservis Mimarisi

Monolitik backend'den modüler mikroservislere geçiş: Bağımlılık enjeksiyonu, BullMQ kuyruk yönetimi ve hataya dayanıklı servis tasarımı.

NestJS & Backend7 dk
Performans & Cache•</> İnteraktif
Şakir Ortataş

Redis ve LRU Cache ile Backend Performans Optimizasyonu

Veritabanı yükünü %80 azaltan çok katmanlı önbellek mimarisi: Memory-cache, Redis invalidation stratejileri ve Cache-Aside deseni.

Performans & Cache5 dk
React & Next.js•</> İnteraktif
Şakir Ortataş

Next.js ve React Uygulamalarında Modern Render Mimarisini Anlamak

Server Components, Client Components, Streaming SSR ve Suspense: Web sitelerinde sıfır JS istemci paketiyle maksimum hız.

React & Next.js6 dk
Veritabanı•</> İnteraktif
Şakir Ortataş

PostgreSQL B-Tree İndeksleme ve Veritabanı Sorgu Hızlandırma

Sorguları milisaniyeler seviyesine indiren indeks mimarisi: B-Tree ağaç yapısı, EXPLAIN ANALYZE kullanımı ve bileşik indeks stratejileri.

Veritabanı8 dk
Ağ & Gerçek Zamanlı•</> İnteraktif
Şakir Ortataş

Gerçek Zamanlı Mobil Uygulamalarda WebSocket ve TCP Anatomisi

Canlı konum, sohbet ve bildirim sistemlerinde düşük gecikme: TCP 3-Way Handshake, WebSocket yükseltme ve mobil pil optimizasyonu.

Ağ & Gerçek Zamanlı7 dk
İletişim

Teknik vizyonunuzu çalışan bir ürüne dönüştürelim

TypeScript · React Native · React · NestJS · Node.js