React Native ve Expo DOM Components: "use dom" ile Web Kodlarını Yerel Uygulamaya Dönüştürme Devrimi

0:00

/0

1×

React Native ve Expo DOM Components: "use dom" ile Web Kodlarını Yerel Uygulamaya Dönüştürme Devrimi

Mobil uygulama geliştirme dünyası, React Native'in doğuşundan bu yana sürekli bir evrim içinde. Ancak hibrit ve yerel (native) geliştirme arasındaki o görünmez sınır, geliştiriciler için her zaman bir tartışma konusu olmuştur. Özellikle zengin web kütüphanelerini (gelişmiş grafikler, zengin metin editörleri veya karmaşık animasyonlar) React Native projesine entegre etmek, zahmetli WebView yapılandırmaları ve karmaşık köprü (bridge) mekanizmaları gerektiriyordu.

İşte tam bu noktada Expo SDK ile hayatımıza giren DOM Components ve sihirli 'use dom' yönergesi, mobil geliştirme dünyasında adeta bir devrim yaratıyor. Bu yazıda, web kodlarını hiçbir köprü kurmadan doğrudan yerel uygulamalarınıza nasıl entegre edebileceğinizi ve bu yeni özelliğin projelerinizi nasıl dönüştüreceğini inceleyeceğiz.

Expo DOM Components Nedir?

Expo DOM Components, web için yazılmış React bileşenlerini, React Native uygulamanızın içinde doğrudan yerel birer bileşenmiş gibi çalıştırmanıza olanak tanıyan yeni bir teknolojidir.

Geçmişte bir web içeriğini React Native'de göstermek istediğimizde, react-native-webview kullanır, yerel kod ile web kodu arasında veri taşımak için postMessage ve onMessage gibi karmaşık köprüler kurardık.

DOM Components ile bu süreç tamamen tarih oluyor. Expo, arka planda yüksek performanslı bir web görünümü oluşturur ancak geliştirici olarak sizin bunu yönetmeniz gerekmez. Yazdığınız web bileşeni, uygulamanızın geri kalanıyla tıpkı normal bir React Native bileşeni gibi doğrudan haberleşir.

Sihirli Yönerge: 'use dom'

Tıpkı React Server Components'taki 'use client' yönergesi gibi, Expo da dosyanın en üstüne eklenen 'use dom' ifadesini kullanır. Bu yönergeyi bir dosyanın başına eklediğinizde, Expo bu bileşenin yerel bir DOM ortamında (WebView içinde) çalıştırılacağını anlar.

Nasıl Çalışır? İşte Basit Bir Örnek:

Diyelim ki web için yazılmış harika bir grafik kütüphanesini (örneğin Recharts veya D3.js) uygulamanızda kullanmak istiyorsunuz.

1. Web Bileşenini Oluşturun (MyChart.tsx):

'use dom';

import React from 'react';

// Bu bileşen tamamen web standartlarında (HTML/CSS/JS) çalışır.
export default function MyChart({ data, onPointClick }) {
  return (
    <div style={{ padding: 20, background: '#f5f5f5', borderRadius: 8 }}>
      <h3>Haftalık Analiz (Web DOM)</h3>
      <ul>
        {data.map((item, index) => (
          <li 
            key={index} 
            onClick={() => onPointClick(item)}
            style={{ cursor: 'pointer', margin: '5px 0', color: 'blue' }}
          >
            {item.label}: {item.value}
          </li>
        ))}
      </ul>
    </div>
  );
}

2. Yerel React Native Dosyasında Kullanın (App.tsx):

import React from 'react';
import { StyleSheet, View, Text, Alert } from 'react-native';
// Web bileşenini doğrudan import edin!
import MyChart from './MyChart';

export default function App() {
  const chartData = [
    { label: 'Pazartesi', value: 120 },
    { label: 'Salı', value: 150 },
    { label: 'Çarşamba', value: 180 },
  ];

  const handlePointClick = (item) => {
    Alert.alert("Tıklanan Gün", `${item.label}: ${item.value}`);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Yerel (Native) Başlık</Text>

      {/* DOM bileşeni tıpkı yerel bir bileşen gibi prop alır ve callback tetikler */}
      <MyChart data={chartData} onPointClick={handlePointClick} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 20, backgroundColor: '#fff' },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 20 },
});

Fark ettiğiniz gibi, hiçbir köprü (bridge) kodu yazmadık. Prop'lar ve fonksiyonlar (callback'ler) yerel kod ile web kodu arasında doğrudan ve sorunsuz bir şekilde aktarıldı.

Expo DOM Components'ın Sağladığı Avantajlar

1. Sıfır Köprü (Zero Bridge) Kurulumu

Geleneksel WebView entegrasyonlarında en büyük kabus, veri senkronizasyonudur. 'use dom' ile Expo, arka plandaki mesajlaşma altyapısını otomatik olarak yönetir. Fonksiyonları, nesneleri ve durumları (state) doğrudan prop olarak geçirebilirsiniz.

2. Web Ekosistemine Sınırsız Erişim

React Native için özel olarak port edilmemiş binlerce harika web kütüphanesi var. * Three.js ile 3D grafikler * Leaflet veya OpenLayers ile gelişmiş haritalar * Tailwind CSS ile hızlı web arayüzleri * Zengin metin editörleri (Draft.js, Quill)

Artık bu kütüphaneleri mobil uygulamanızda kullanmak için "React Native uyumlu sürümü var mı?" diye aramanıza gerek yok.

3. Kolay Göç (Migration) ve Kod Paylaşımı

Mevcut bir React web uygulamanız varsa, buradaki karmaşık bileşenleri doğrudan kopyalayıp, başlarına 'use dom' ekleyerek mobil uygulamanızda çalıştırabilirsiniz. Bu durum, web ve mobil ekipleri arasındaki kod paylaşım oranını dramatik bir şekilde artırır.

4. Performans ve Güvenlik

DOM Components, izole bir ortamda çalışır. Bu sayede web bileşeninde oluşabilecek ağır bir hesaplama veya donma, yerel uygulamanızın ana arayüz (UI) iş parçacığını (thread) etkilemez. Uygulamanız akıcı bir şekilde çalışmaya devam eder.

Ne Zaman Kullanmalı, Ne Zaman Kaçınmalı?

Her ne kadar heyecan verici bir teknoloji olsa da, her araç gibi DOM Components'ın da doğru yerde kullanılması gerekir.

Sonuç

Expo'nun yeni DOM Components özelliği ve 'use dom' yönergesi, mobil uygulama geliştirme sürecindeki en büyük sürtünme noktalarından birini ortadan kaldırıyor. Web ve mobil dünyasını hiç olmadığı kadar yakınlaştıran bu yaklaşım, özellikle hızlı ürün geliştirmek isteyen girişimler ve zengin web içeriklerini mobile taşımak isteyen ekipler için paha biçilemez bir araç.

Siz de projelerinizde web kütüphanelerinin gücünden yararlanmak istiyorsanız, Expo SDK'nın en son sürümüne göz atabilir ve 'use dom' sihrini hemen deneyimleyebilirsiniz!

Sizin bu yeni özellik hakkındaki düşünceleriniz neler? Projelerinizde hangi web kütüphanelerini mobil uygulamaya taşımayı düşünüyorsunuz? Yorumlarda paylaşın!