Adapter Pattern: TypeScript, React & Node.js Örnekleri

Özet: Adapter deseniyle uyumsuz arayüzleri TypeScript, React ve Node.js örnekleriyle nasıl birleştireceğinizi ve eski kodu modernize etmeyi öğrenin.

Giriş

Hiç sisteminizin geri kalanıyla uymayan ama gayet iyi çalışan bir kütüphane veya eski bir modülünüz oldu mu? Bu, Avrupa bir fişi Kuzey Amerika prizine takmaya çalışmak gibi — cihaz çalışabilir ama arayüzler uyuşmaz. Adapter deseni, bir arayüzü başka bir arayüze çevirir; böylece mevcut kodu değiştirmeden yeniden kullanabilirsiniz. Bu makale deseni açıklar, TypeScript ve React örnekleri gösterir ve callback tabanlı modülleri async/await ile çalışacak şekilde modernize eden bir Node.js adaptörünü sergiler.

Neden Adapter Deseni Önemlidir

Adapter deseni, uyumsuz bir nesneyi sarıp kodunuzun beklediği arayüzü açığa çıkaran yapısal bir desendir. İlk olarak Gang of Four tarafından 1994’te belgelenmiştir¹. Adaptörler; üçüncü taraf API’lerini entegre etmek, eski kodu modernize etmek ve farklı veri kaynaklarını birleştirmek için çok önemlidir.

Adaptörlerin yardımcı olduğu yaygın senaryolar:

• Farklı veri şekilleri döndüren üçüncü taraf API’lerini entegre etmek.
• Eski callback API’lerini async/await ile çalışacak şekilde modernize etmek.
• Birden çok veri kaynağını UI bileşenleri için tek bir arayüze birleştirmek.

Adaptör kullanmak iş mantığını temiz ve dış sistemlerden bağımsız tutar; bu da test etmeyi ve yeniden kullanımı kolaylaştırır.

Adapter Desenine Genel Bakış

Yapı ve Roller

Desenin dört rolü vardır:

1. İstemci — belirli bir arayüze ihtiyaç duyan kod.
2. Hedef Arayüz — İstemci’nin beklediği sözleşme.
3. Adaptee — gerekli işlevselliğe sahip uyumsuz sınıf veya modül.
4. Adaptör — Hedef’i uygular ve çağrıları Adaptee’ye delege ederek çeviri yapar.

İki yaygın adaptör stili:

• Nesne adaptörü (bileşim): Adaptör, Adaptee örneğini tutar. Bu en esnek yaklaşımdır.
• Sınıf adaptörü (kalıtım): Adaptör, Adaptee’den miras alır ve Hedef’i uygular. Bu çoklu kalıtım gerektirir ve modern JavaScript/TypeScript’te daha az yaygındır.

Pratik Örnek: TypeScript + React

Bir panonun iki farklı hizmetten kullanıcı profilleri aldığını ve bu hizmetlerin farklı yanıt şekillerine sahip olduğunu hayal edin. Bir adaptör olmadan bileşenler koşullu mantarla dolmaya başlar.

Uyumsuz API şekilleri

// Data from UserServiceA
interface UserA {
  userId: number;
  fullName: string;
  emailAddress: string;
}

// Data from UserServiceB
interface UserB {
  id: string;
  name: string;
  contact: {
    email: string;
  };
}

Uygulamamızın beklediği hedef arayüz

interface UnifiedUser {
  id: string;
  name: string;
  email: string;
}

TypeScript adaptörleri

// Adapter for UserServiceA
function adaptUserA(userA: UserA): UnifiedUser {
  return {
    id: userA.userId.toString(),
    name: userA.fullName,
    email: userA.emailAddress,
  };
}

// Adapter for UserServiceB
function adaptUserB(userB: UserB): UnifiedUser {
  return {
    id: userB.id,
    name: userB.name,
    email: userB.contact.email,
  };
}

Dönüşümlerin merkezileştirilmesi bileşenleri temiz ve dayanıklı tutar. Bir API bir alanın adını değiştirirse, sadece adaptör değişir. Bu, eski kodu değiştirmeye gerek kalmadan entegrasyonu kolaylaştırır; ayrıca modernizasyon rehberimizdeki stratejilerle uyumludur (Eski sistemleri modernize etme stratejileri).

Birleşik veriyi tüketen React bileşeni

interface UserProfileProps {
  user: UnifiedUser;
}

const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>ID: {user.id}</p>
      <p>Email: {user.email}</p>
    </div>
  );
};

Bu bileşen tek, öngörülebilir bir şekle dayanır; bu da test etmeyi ve yeniden kullanımı basitleştirir.

Örnek: Callback Tabanlı Bir Node.js Modülünü Modernize Etme

Eski modüller genellikle hata-öncelikli callback’ler kullanır. Kararlı bir modülü değiştirmek yerine, Promise tabanlı bir API açığa çıkaran bir adaptör oluşturun.

Eski adaptee (değiştirmeyin)

// legacyFileProcessor.js
const fs = require('fs');

class LegacyFileProcessor {
  processFile(filePath, callback) {
    fs.readFile(filePath, 'utf8', (err, data) => {
      if (err) {
        return callback(err, null);
      }
      const processedContent = data.toUpperCase();
      callback(null, processedContent);
    });
  }
}

module.exports = LegacyFileProcessor;

Promise döndüren adaptör

// FileProcessorAdapter.js
const LegacyFileProcessor = require('./legacyFileProcessor');

class FileProcessorAdapter {
  constructor() {
    this.legacyProcessor = new LegacyFileProcessor();
  }

  processFile(filePath) {
    return new Promise((resolve, reject) => {
      this.legacyProcessor.processFile(filePath, (err, data) => {
        if (err) return reject(err);
        resolve(data);
      });
    });
  }
}

module.exports = FileProcessorAdapter;

Bu, Node’un util.promisify davranışını taklit eder ancak adaptasyon mantığını açık ve test edilebilir tutar³.

Uygulama kodunda adaptörün kullanımı

const FileProcessorAdapter = require('./FileProcessorAdapter');
const fileProcessor = new FileProcessorAdapter();

async function handleFileProcessing() {
  try {
    console.log('Processing file with modern async/await...');
    const content = await fileProcessor.processFile('my-file.txt');
    console.log('Processed Content:', content);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

handleFileProcessing();

Bu, eski kodu ellemeden geri kalan kod tabanınıza modern bir arayüz sağlar.

Ne Zaman Adaptör Kullanılmalı

İki bileşen arayüzleri farklı olduğu için doğrudan iletişim kuramıyorsa adaptör kullanın. Tipik senaryolar:

• Girdi veya çıktıları modellerinizle uyuşmayan üçüncü taraf bir API’yi entegre etmek.
• Eski callback API’lerini async/await ile çalışacak şekilde sarmak.
• Farklı formatlara sahip birden çok veri kaynağını her kaynak için bir adaptör oluşturarak desteklemek.

Adaptör kullanılmaması gereken durumlar:

• Her iki sistemi de kontrol ediyorsanız ve küçük bir refaktör uyumsuzluğu çözecekse, doğrudan refaktörlemeyi tercih edin.
• Amacınız karmaşık bir alt sistemi basitleştirmekse, Facade düşünün. Facade basitleştirilmiş, yüksek seviyeli bir giriş sunarken; Adapter yalnızca uyumluluğa odaklanır.

Hızlı karar kontrol listesi

Test ve Performans

Adaptörler, temel mantığı dış sistemlerden ayırarak test edilebilirliği artırır. Bileşenleri izole test etmek için adaptörün arayüzünü mock’layabilir ve çeviri mantığını ayrı test edebilirsiniz.

Adaptörün performans maliyeti genellikle minimaldir — tipik olarak bir ekstra fonksiyon çağrısı — ve ağ I/O veya veritabanı sorgularıyla karşılaştırıldığında ihmal edilebilir. Çoğu web uygulaması için bakım ve gevşek bağlılık faydaları bu küçük maliyeti fazlasıyla telafi eder. JavaScript, Stack Overflow Developer Survey’de en çok kullanılan dil olmaya devam ederek geliştiricilerin adaptörlerin çözdüğü entegrasyon işleriyle ne sıklıkla karşılaştığını gösterir⁴.

Sıkça sorulan sorular

S: Adapter deseni ne problemi çözer?

A: İstemciden gelen çağrıları adaptee’nin anlayacağı çağrılara çevirerek arayüz uyumsuzluklarını çözer; böylece kodu değiştirmeden yeniden kullanabilirsiniz.

S: Adaptör eski kodla nasıl yardımcı olur?

A: Adaptörler eski modülleri sarar ve modern bir arayüz açığa çıkarır; böylece eski, kararlı kodu riskli yeniden yazımlara başvurmadan yeni uygulamalara entegre edebilirsiniz.

S: Diğer desenlere kıyasla ne zaman Adaptör seçmeliyim?

A: İki uyuşmayan arayüz arasında uyumluluk gerektiğinde Adaptör’ü seçin. Eğer amaç tüm bir alt sistemi basitleştirmekse, bunun yerine Facade kullanın.

Kısa Soru-Cevap (Hızlı Referans)

Q: Adapter deseni ne zaman tercih edilmeli? A: Üçüncü taraf kütüphaneler veya eski API’lerle doğrudan değişiklik yapmak istemediğinizde.

Q: Adaptör performansı olumsuz etkiler mi? A: Genelde hayır; ek maliyet küçük bir fonksiyon çağrısından ibarettir ve I/O gecikmeleri yanında önemsizdir.

Q: Adaptörler test yazmayı kolaylaştırır mı? A: Evet — adaptörler bağımlılıkları izole eder ve birim testlerde mock’lama sağlar.

İleri Okuma ve Dahili Bağlantılar

• Polimorfizm vs kalıtım derinlemesine: /blog/polymorphism-vs-inheritance
• Eski sistemleri modernize etme stratejileri: /blog/modernizing-legacy-systems
• Adapter deseni referansı ve örnekler: https://www.geeksforgeeks.org/adapter-pattern/ ²

Clean Code Guy’ta, kırılgan ve karmaşık kod tabanlarını dayanıklı, test edilebilir ve üzerinde çalışması keyifli varlıklara dönüştüren pratik tasarım kalıplarını uygulamalarında ekiplerine yardımcı oluyoruz. Bir eski sistemle veya zor entegrasyonlarla uğraşıyorsanız, Clean Code Denetimlerimiz size daha sağlıklı bir mimariye yönelik net, uygulanabilir bir yol haritası sunabilir. Daha hızlı ve daha iyi kod göndermenize nasıl yardımcı olabileceğimizi öğrenin.