Adapter und Facade

Kurz gesagt: Ein Adapter übersetzt eine fremde Schnittstelle in die, die dein Code erwartet. Eine Facade versteckt mehrere Subsysteme (Lager, Zahlung, Rechnung, E-Mail) hinter einer einzigen Methode.

Problem

Der neue Anbieter passt nicht

Der Shop zahlt über seine eigene Schnittstelle: charge nimmt den Betrag in Euro und sagt, ob die Zahlung durchgegangen ist. Der Shop weiß nicht, wer dahintersteckt:

class Shop {
  constructor(gateway) {
    this.gateway = gateway;
  }

  pay(order, amount) {
    if (this.gateway.charge(amount)) {
      console.log(order + ": bezahlt");
    } else {
      console.log(order + ": abgelehnt");
    }
  }
}

In JavaScript gibt es keine Interfaces: Der Shop nimmt jedes Objekt, das eine Methode charge hat.

Die Firma wechselt zu FastPay, das niedrigere Gebühren verlangt. FastPay liefert eine fertige Bibliothek:

// Die FastPay-Bibliothek: fremder Code, den du nicht ändern kannst.
class FastPayClient {
  makePayment(currency, amountInCents, options) {
    console.log(`FastPay: ${amountInCents} ${currency}`);
    if (amountInCents > 100000) {
      return "DECLINED";
    }
    return "APPROVED";
  }
}

Sie macht dieselbe Arbeit, nur in anderer Form. Die Methode heißt makePayment, will eine Währung, einen Betrag in Cent und Optionen und gibt den Text "APPROVED" oder "DECLINED" statt Ja oder Nein zurück. Direkt an den Shop übergeben, passt sie nicht:

const shop = new Shop(new FastPayClient());
shop.pay("#1042", 19.99);

TypeError: this.gateway.charge is not a function

Die Bibliothek ist fremder Code: Du kannst ihr keine Methode hinzufügen. Den Shop für FastPay umzuschreiben heißt, jede Stelle anzufassen, die zahlt, und sie beim nächsten Anbieter noch einmal anzufassen.

Die Idee

Zwei Hüllen, zwei verschiedene Ziele

Beide Muster dieser Lektion umhüllen fremden Code, lösen aber verschiedene Probleme.

Ein Adapter ist eine Klasse mit der Form, die dein Code erwartet, und ruft im Inneren das fremde Objekt auf. Er übersetzt die Namen, die Einheiten und das Ergebnis. Wie ein Reisestecker: Der Stecker deines Ladegeräts passt im Ausland nicht in die Steckdose, der Adapter passt zu beiden. Er fügt nichts hinzu, er ändert nur die Form.

Eine Facade ist ein einfacher Einstiegspunkt vor vielen Klassen, die in einer bestimmten Reihenfolge benutzt werden müssen. Wie die Rezeption im Hotel: Du rufst nicht einzeln die Reinigung, die Küche und die Buchhaltung an, du sagst es der Rezeption.

Der Unterschied in Kürze:

ein Adapter ändert die Form einer Schnittstelle, damit sie zu einer anderen passt;
eine Facade vereinfacht die Arbeit mit vielen Klassen, indem sie die übliche Abfolge hinter eine Methode legt.

Sieh es dir an

Der Adapter übersetzt

FastPayAdapter hat eine Methode charge, genau das, was der Shop erwartet. Im Inneren hält er den FastPay-Client und übersetzt: Euro in Cent, "EUR" und leere Optionen, den Text in Ja oder Nein:

class FastPayAdapter {
  constructor(client) {
    this.client = client;
  }

  charge(amount) {
    const cents = Math.round(amount * 100);
    const status = this.client.makePayment("EUR", cents, {});
    return status === "APPROVED";
  }
}

Der Shop bekommt den Adapter statt des Clients. Im Shop ändert sich nichts:

const shop = new Shop(new FastPayAdapter(new FastPayClient()));
shop.pay("#1042", 19.99);
shop.pay("#1043", 1299);

FastPay: 1999 EUR
#1042: bezahlt
FastPay: 129900 EUR
#1043: abgelehnt

Der Fernseher für 1299 € liegt über dem Limit von FastPay (1000 €), also wird er abgelehnt. Der Shop erfährt es in seiner eigenen Sprache: false.

Die Szene zeigt den Adapter und danach die Facade von der nächsten Karte:

const payments = new FastPayAdapter(new FastPayClient());
console.log(payments.charge(19.99));

const checkout = new CheckoutFacade(new Stock(), payments, new Invoices(), new Mailer());
checkout.placeOrder("Wasserkocher", 24.90);

Schritt für Schritt, in Worten

Der Shop ruft charge(Betrag in Euro) auf. FastPayClient hat nur makePayment(Währung, Cent, Optionen), und der direkte Aufruf prallt ab.
FastPayAdapter tritt dazwischen: Nach außen hat es charge, wie der Shop es erwartet, innen hält er den FastPay-Client.
charge(19.99): Der Adapter rundet Euro auf Cent, 1999, und ruft makePayment mit "EUR" auf.
FastPay antwortet "APPROVED", und der Adapter macht daraus true: die Sprache des Shops.
CheckoutFacade bekommt das Lager, die Zahlungen (derselbe Adapter), die Rechnungen und die E-Mail.
placeOrder: Zuerst reserviert das Lager den Wasserkocher.
Dann die Zahlung, wieder über den Adapter: 24.90 € werden zu 2490 Cent.
Die Zahlung ist durch, also stellt die Facade die Rechnung aus und schickt die E-Mail. Der Aufrufer hat eine Zeile geschrieben.

Genauer, für Neugierige

JavaScript prüft keine Typen: Der Shop ruft charge bei allem auf, was du ihm gibst. Der Adapter braucht nur eine Methode charge mit den richtigen Parametern und dem richtigen Ergebnis. Bei einem fremden Objekt kommt der Fehler erst bei der Zahlung (TypeError), nicht beim Start, also ist ein Test wichtig.
In TypeScript schreibst du die Form als interface PaymentGateway { charge(amount: number): boolean }, und der Compiler prüft sie.

Sieh es dir an

Die Facade vor vier Klassen

Die Zahlung ist nur ein Schritt einer Bestellung. Davor reserviert das Lager den Artikel, danach kommen die Rechnung und die E-Mail. Wird die Zahlung abgelehnt, gibt das Lager den Artikel wieder frei. Jeder Schritt ist eine kleine Klasse:

class Stock {
  reserve(item) {
    console.log("Lager: reserviere " + item);
    return true;
  }

  release(item) {
    console.log("Lager: gebe frei " + item);
  }
}

class Invoices {
  issue(item, amount) {
    console.log(`Rechnung: ${item}, ${amount.toFixed(2)} €`);
  }
}

class Mailer {
  send(text) {
    console.log("E-Mail: " + text);
  }
}

Ohne Facade schreibt jede Stelle, die eine Bestellung annimmt (die Website, die Mobil-App, die telefonischen Bestellungen), dasselbe in derselben Reihenfolge:

if (stock.reserve(item)) {
  if (payments.charge(amount)) {
    invoices.issue(item, amount);
    mailer.send("Bestätigung für " + item);
  } else {
    stock.release(item);
  }
}

Vergisst eine Stelle stock.release, bleibt der Artikel für eine Bestellung reserviert, die nie bezahlt wurde. CheckoutFacade schreibt die Reihenfolge einmal auf:

class CheckoutFacade {
  constructor(stock, payments, invoices, mailer) {
    this.stock = stock;
    this.payments = payments;
    this.invoices = invoices;
    this.mailer = mailer;
  }

  placeOrder(item, amount) {
    if (!this.stock.reserve(item)) {
      return false;
    }
    if (!this.payments.charge(amount)) {
      this.stock.release(item);
      return false;
    }
    this.invoices.issue(item, amount);
    this.mailer.send("Bestätigung für " + item);
    return true;
  }
}

Die Zahlungen in der Facade sind ein Objekt mit charge, von außen hineingereicht (Dependency Injection aus der Lektion „Singleton und Dependency Injection“). Hier ist es der Adapter von der vorigen Karte. Die beiden Muster arbeiten zusammen:

const payments = new FastPayAdapter(new FastPayClient());
const checkout = new CheckoutFacade(new Stock(), payments, new Invoices(), new Mailer());
checkout.placeOrder("Wasserkocher", 24.90);

Lager: reserviere Wasserkocher
FastPay: 2490 EUR
Rechnung: Wasserkocher, 24.90 €
E-Mail: Bestätigung für Wasserkocher

Eine Facade ist keine Mauer. Die Klassen dahinter kannst du weiter direkt benutzen, wenn du etwas abseits des üblichen Wegs brauchst. Die Buchhaltung stellt die Rechnung noch einmal aus:

const invoices = new Invoices();
invoices.issue("Wasserkocher", 24.90);

Rechnung: Wasserkocher, 24.90 €

Probier es aus

Sag die Ausgabe voraus

Die Klassen stammen aus den Karten „Der Adapter übersetzt“ und „Die Facade vor vier Klassen“. Was gibt das Programm aus?

const payments = new FastPayAdapter(new FastPayClient());
const checkout = new CheckoutFacade(new Stock(), payments, new Invoices(), new Mailer());
checkout.placeOrder("Fernseher", 1299);

Antwort

Lager: reserviere Fernseher
FastPay: 129900 EUR
Lager: gebe frei Fernseher

Lager: reserviere Fernseher
FastPay: 129900 EUR

Lager: reserviere Fernseher
FastPay: 129900 EUR
Rechnung: Fernseher, 1299.00 €
E-Mail: Bestätigung für Fernseher

Probier es aus

Finde den Fehler

Ein Kollege hat den Adapter „vereinfacht“: Cent sind ja ohnehin eine ganze Zahl. Ein Kunde zahlt die Bestellung #1042 über 19,99 €:

const shop = new Shop(new FastPayAdapter(new FastPayClient()));
shop.pay("#1042", 19.99);

FastPay: 1998 EUR
#1042: bezahlt

FastPay hat 1998 Cent genommen, einen zu wenig. In welcher Zeile des Adapters steckt der Fehler?

Wähle die Zeile mit dem Fehler.

Math.trunc rundet nicht, es schneidet den Nachkommateil ab. Und 19.99 in JavaScript ist nicht genau 19.99: Zahlen sind Gleitkommazahlen, binär gespeichert, und 19.99 * 100 ergibt 1998.9999999999998. Abgeschnitten sind das 1998. Die Lösung ist Math.round(amount * 100): die nächste ganze Zahl, 1999. Ein Cent wirkt klein, ist aber bei jedem solchen Betrag falsch, und die Bücher des Shops und die von FastPay stimmen nicht überein.

Genauer, für Neugierige

Probier es selbst aus:

console.log(19.99 * 100);

1998.9999999999998

JavaScript hat keinen Dezimaltyp für Geld. Deshalb hält man Beträge als ganze Cent (1999) und macht erst zur Anzeige Euro daraus: (1999 / 100).toFixed(2).

Die Idee

Wann du sie nicht brauchst

Einen Adapter brauchst du nicht, wenn beide Seiten dein eigener Code sind. Ändere dann die eine Seite, damit sie zur anderen passt, statt einen Übersetzer dazwischenzusetzen. Ein Adapter ist für Code, den du nicht anfassen kannst: eine fremde Bibliothek, ein altes System, den Dienst eines anderen Teams.

Eine Facade brauchst du nicht, wenn die Abfolge an einer einzigen Stelle benutzt wird. Dort reicht eine Funktion. Eine Facade hat auch eine Falle: Sie wird leicht zur Klasse, durch die alles läuft, mit einer Methode für jeden Wunsch jedes Bildschirms. Halte nur die üblichen Wege in ihr und rufe die Klassen für alles andere direkt auf.

Beide Muster sind dünn. Ein Adapter, der anfängt, Geschäftsregeln zu entscheiden (Rabatte, Limits), ist kein Adapter mehr. Eine Facade, die Beträge selbst berechnet, statt die Klassen aufzurufen, die das tun, auch nicht.

Übung

Ein zweiter Anbieter

Löse es in deinem eigenen Editor.

PayNow. Die Firma nimmt einen zweiten Anbieter dazu, PayNow. Seine Bibliothek will die Cent zuerst und die Währung danach und gibt eine Zahl zurück: 0 heißt Erfolg, alles andere ist eine Ablehnung.

class PayNowApi {
  send(cents, currency) {
    console.log(`PayNow: ${currency} ${cents}`);
    return 0;
  }
}

Schreibe PayNowAdapter, sodass der Shop ohne Änderungen über PayNow zahlt:

const shop = new Shop(new PayNowAdapter(new PayNowApi()));
shop.pay("#1042", 19.99);

PayNow: EUR 1999
#1042: bezahlt

Weitere Aufgaben

Eine Bestellung stornieren. Füge der Facade cancelOrder(item) hinzu: Das Lager gibt den Artikel frei, und der Kunde bekommt eine E-Mail „Bestellung storniert für …“.
Ein Testanbieter. Schreibe ein FakeGateway mit einer Methode charge, das jeden Betrag über 50 € ablehnt. Gib es der Facade und prüfe, dass das Lager bei einer Ablehnung den Artikel freigibt.
Die Rechnung schlägt fehl. Lass das Ausstellen der Rechnung eine Exception werfen. Das Geld ist schon abgebucht. Was soll die Facade tun? Entscheide und schreibe es auf: zum Beispiel mit der E-Mail weitermachen und den Fehler festhalten, damit die Rechnung später ausgestellt wird.

Erstellt von Ivo Gergov im Rahmen der Kampagne von Evo Tech für zugängliche Programmierausbildung ·

Adapter und Facade

Cookies