Using openArchitectureWare 4.0 in domain "registration"
A Pattern Language - Patterns for Javascript
1. A Pattern Language
PRESENTED BY
Joerg Reichert
Licensed under cc-by v3.0 (any
jurisdiction)
Patterns for Javascript
2. https://en.wikipedia.org/wiki/A_Pattern_Language
Christopher Alexander
Pattern Language
„[…] each pattern represents our current
best guess as to what arrangement of
the physical environment will work to
solve the problem presented. The
empirical questions center on the
problem - does it occur and is it felt in the
way we describe it? - and the solution -
does the arrangement we propose solve
the problem? And the asterisks represent
our degree of faith in these hypotheses.
But of course, no matter what the
asterisks say, the patterns are still
hypotheses, all 253 of them - and are,
therefore, all tentative, all free to evolve
under the impact of new experience
and observation.“
1977
Pattern Mining
3. Pattern Language (Definition)
● ein Muster (Pattern) beschreibt eine häufige Problemsituation und
zeigt auf, wie diese aufgelöst werden kann
● allgemeingültige Muster sind in der Praxis erprobt und von
Experten hinsichtlich Eleganz und Zweckmäßigkeit untersucht
● Musterbeschreibung sind bewusst allgemein und abstrakt
gehalten, so sie sich an die eigenen Präferenzen und der
tatsächlichen Problemsituation anpassen lassen
● Schaubildern und Diagrammen in Musterbeschreibungen helfen
diese leichter zu verstehen
● Querverweise zwischen Mustern (Alternativen, Anti-Muster,
komplementärer Einsatz) formen eine Netz und damit eine
Mustersprache (pattern language)
https://en.wikipedia.org/wiki/A_Pattern_Language
5. Beschreibungs-Struktur
● Name und Klassifikation: Bezeichnung, Kategorie: Erzeugung / Struktur / Verhalten
● Motivation: (Hinter-)Gründe für den Einsatz, Problemstellung
● Zweck: Beschreibung des zu erreichenden Zielzustandes
● Synonyme: Andere bekannte Namen
● Anwendbarkeit: Einsatzbereiche
● Struktur: Beschreibung der allgemeinen Struktur
● Beteiligte Akteure: Elemente, die an dem Muster beteiligt sind.
● Zusammenspiel: der beteiligten Elemente
● Konsequenzen: Vor- und Nachteile
● Implementierung: Praxisrelevante Tipps, Tricks und Techniken sowie Warnung vor
Fehlern, die leicht passieren können.
● Beispielcode: Quellcodefragment, das den Einsatz des Musters zeigt.
● Praxiseinsatz: Wo wird das Muster bereits eingesetzt?
● Querverweise: Wie spielt das Muster mit anderen Mustern zusammen?
Entwurfsmuster (Buch)
6. Observer (Beobachter)
Zweck
1-n Änderungen weitergeben, also Änderungen die an einer Stelle
vorgenommen worden sind, an weitere betroffene Stellen weitergeben und
umsetzen lassen.
Anwendbarkeit
bei einer Menge interagierender Klassen muss häufig die Konsistenz der
in Beziehung stehenden Objekte gewahrt werden, dies mittels enger
Kopplung umzusetzen, würde die Klassenwiederverwendbarkeit
einschränken
eine Abstraktion besitzt zwei Aspekte, wobei ein Aspekt von dem
anderen abhängt, diese Aspekte aber in einzelne Objekte gekapselt
werden sollen, um sie unabhängig voneinander zu ändern und wieder zu
verwenden
die Änderung eines Objekts verlangt die Änderung andere Objekte, ohne
zu wissen, wie viele betroffen sind
ein Objekt soll andere Objekte benachrichtigten, ohne zu wissen welche
Entwurfsmuster (Buch)
7. Observer (Beobachter)
Beschreibung
Die Schnittstelle Subjekt hat konkrete Methoden zum An- und Abmelden der
Beobachter-Schnittstelle, sowie eine konkrete Methode, mit der die abstrakte
Aktualisiere-Methode der Beobachter gerufen wird. KonkretesSubjekt, das
Subjekt erbt, speichert seinen Zustand und benachrichtigt seine Beobachter,
wenn sich dieser ändert. Ein KonkreterBeobachter verwaltet die Referenz auf
ein KonkretesSubjekt und speichert den Zustand, der mit dem Subjekt
übereinstimmen soll und implementiert die Aktualisiere-Methode von
Beobachter, in der der KonkreterBeobachter den Zustand von
KonkretesSubjekt holt. KonkreterBeobachter setzt den Zustand von
KonkretesSubjekt. Wenn dieses seinen Zustand ändert, ruft es die Aktualisiere-
Methode von KonkreterBeobachter, der dann den neuen Zustand von
KonkretesSubjekt holt.
Entwurfsmuster (Buch)
8. Observer (Beobachter)
Vorteile
Subjekte und Beobachter lassen sich unabhängig vom jeweils anderen
variieren und wieder verwenden
neue Beobachter lassen sich ohne Änderungen anderer Beobachter oder
des betreffenden Subjekts hinzufügen
Subjekt- und Beobachterklassen können zu unterschiedlichen
Abstraktionsebenen des Systems gehören, wobei ein Subjekt einer tiefer
liegenden Schicht einen Beobachter einer höher liegenden Schicht
benachrichtigen kann
Umsetzung einer Broadcast-Kommunikation, da bei der
Nachrichtenversendung die Empfänger nicht angegeben werden müssen
Entwurfsmuster (Buch)
Nachteile
da Beobachter nichts voneinander wissen, kann ein einzelner Beobachter
nicht die Kosten einschätzen, die die Änderung eines Subjekts bei den
Beobachtern und den mit ihnen verbundenen Objekten verursachen
schlecht definierte oder gewartete Abhängigkeiten können zu unsinnigen
Änderungen führen und sind schwer aufzuspüren; nur über ein erweitertes
Protokoll können die konkreten Änderungen erfasst werden
9. Observer (Beobachter)
Zusammenhänge mit den anderen Mustern
für die Kapselung komplexer Aktualisierungsmechanismen kann das
Vermittlermuster in Form eines Änderungsmanagers für die Verwaltung
zwischen Subjekten und Beobachtern verwendet werden
der Änderungsmanager sollte als Singleton implementiert werden, um genau
einmalig und global zugreifbar zu sein
Entwurfsmuster (Buch)
Anwendungsbeispiele
Umsetzung des Model-View-Conroller-Ansatzes (MVC)
10. Strategie
Zweck
Es sollen Familien von Algorithmen definiert werden, wobei jeder einzelne
gekapselt und austauschbar sein soll, damit die Algorithmen unabhängig vom
nutzenden Klient variiert werden können.
Anwendbarkeit
es soll vermieden werden, viele Klassen zu haben, die sich nur
hinsichtlich ihres Verhaltens unterscheiden, anstatt nur eine Klasse zu
haben, die mit einem bestimmten Verhalten konfiguriert wird
es sollen unterschiedliche Varianten eines Algorithmus in einer
eigenständigen Klassenhierarchie angelegt werden, die alle ihre Vor-
und Nachteile haben (Performanz, Speicherbedarf)
um algorithmenspezifische Datenstrukturen dem Klienten nicht offen
legen zu müssen
unterschiedliche Verhaltensweisen als zusammenhängende Zweige von
Bedingungsanweisungen in eigene Klassen verlagern
Entwurfsmuster (Buch)
11. Strategie
Beschreibung
Strategie ist die Schnittstelle die alle KonkreteStrategie-Klassen
implementieren und damit auch deren Methoden, die die jeweilige Variante des
Algorithmus umsetzt. Kontext kann nun entweder alle benötigten Daten
bereitstellen oder sich der Strategiemethode selbst übergeben, damit diese
dann die Daten abruft. Ein Klient erzeugt eine KonkreteStrategie und übergibt
sie dem Kontext. Anfragen sendet der Klient an den Kontext, der diese an die
KonkreteStrategie weiterleitet.
Entwurfsmuster (Buch)
12. Strategie
Vorteile
Aufbau von Hierarchieklassen zum Definieren von Familien verwandter
Algorithmen
Alternative zur Vererbung mit dem Vorteil, Algorithmen getrennt von ihrem
Kontext zu definieren, dadurch werden sie leichter änderbar und
verständlicher
Vermeiden von Bedienungsanweisungen, die nötig gewesen wären, um aus
den Algorithmen in einer Klasse den richtigen auszuwählen
Auswahlmöglichkeit zwischen Algorithmen, die die gleiche Funktionalität
bieten, sich aber im Zeit- und Speicherverhalten unterscheiden
Entwurfsmuster (Buch)
Anwendungsbeispiele
Gültigkeitsprüfung bei Dialogeingaben
Validator-Objekte als Strategieobjekte werden an ein Eingabefeld
gebunden
bei erfolgter Eingabe wird durch die Objekte z.B. geprüft, ob der
eingegebene Wert in einem bestimmten Zahlenbereich liegt
13. Strategie
Entwurfsmuster (Buch)
Nachteile
dem Klienten müssen die Unterschiede zwischen den Strategieobjekten
bekannt sein, um den richtigen für ihre jeweilige Situation auswählen zu
können
der Kontext erzeugt möglicherweise mehr Parameter als gebraucht werden,
weil einige konkrete Strategien auf Grund ihrer Implementierung diese nicht
brauchen werden, aber durch die Schnittstelle trotzdem übergeben
bekommen müssen
das Muster erhöht die Anzahl der Objekte in der Anwendung
Zusammenhänge mit den anderen Mustern
Strategieobjekte lassen sich vorzugsweise als Fliegengewichte
implementieren
14. Command (Befehl)
Zweck
Ein Befehl wird als Objekt angelegt und kann so parametrisiert werden. Befehle
können so leichter rückgängig und wiederholt werden und eignen sich vor
allem für Menüs. Es wird die Anbindung einer Operation an den Empfänger
dieser Operation verwaltet.
Anwendbarkeit
Auftrag, der aus mehreren Befehlen besteht, zu unterschiedlichen
Zeitpunkten ausführen
Befehle können aus mehreren Unterbefehlen und deren Reihenfolge
erstellt werden
Mitprotokollieren der Befehlsfolgen
Undo-Funktionalität
Entwurfsmuster (Buch)
15. Command (Befehl)
Beschreibung
Es wird eine abstrakte Klasse Befehl definiert die eine abstrakte Operation
zum anstoßen des Befehls definiert. Diese Methode wird von KonkreterBefehl
implementiert der seine eigenen Funktionalitäten implementiert und seine
Methoden aufruft, mit denen er Methode(n) einer Klasse Empfänger aufruft.
Der KonkreteBefehl selbst wird durch entsprechende Listener-Methoden über
Befehl instanziiert, die sich in der Klasse Aufrufer befinden. Die Listener
werden im Klienten gesetzt und auf Aufrufer verwiesen.
Entwurfsmuster (Buch)
Vorteile
das Anfrage auslösende Objekt muss nichts über die konkrete Umsetzung
des Befehls wissen
Befehlsobjekte können wie andere Objekte leicht geändert und erweitert
werden
ein Befehlsobjekt kann aus anderen Befehlsobjekten zusammen gesetzt
werden
neue Befehlsobjekte können leicht hinzugefügt werden, da keine bereits
bestehenden Klassen geändert werden müssen
16. Command (Befehl)
Entwurfsmuster (Buch)
Nachteile
wenn ein Befehlobjekt kaum Funktionalität implementiert, ist es kaum mehr
eine Verbindung zwischen Empfänger und den Methoden, die die Anfrage
ausführen
wenn ein Befehlsobjekt alle Funktionalität selbst implementiert, werden dem
Empfänger Funktionalität genommen, die in diesem sinnvoller aufgehoben
gewesen wären
um eine mehrstufige Undo/Redo-Funktionalität zu ermöglichen, müssen
neben den einzelnen Befehlsobjekten auch alle Änderungen beim
Empfänger in eine Befehlsliste kopiert werden; je mehr Stufen erlaubt sind,
desto umfangreicher wird die Liste
es kann zu einer Fehlerhäufung kommen, wenn fehlerhafte Befehlsobjekte
im Unde/Redo-Prozess wiederholt ausgeführt und rückgängig gemacht
werden (darum zusätzlich im Befehlsobjekt Zustandsinformationen
speichern, an Hand derer man das Erreichen des Originalzustands prüfen
kann)
17. Command (Befehl)
Entwurfsmuster (Buch)
Zusammenhänge mit den anderen Mustern
mit Hilfe eines Kompositums können Makrobefehle implementiert werden
zum Speichern von Zustandsinformationen, die zum Neutralisieren eines
Befehls benötigt werden, kann das Mementomuster Verwendung finden
Befehlsobjekte, die kopiert werden müssen, bevor sie in die
Befehlsgeschichte eingefügt werden können (weil man die Aufrufe des
gleichen Befehls unterscheiden möchte, weil sich dessen Zustand ändern
kann), verhalten sich wie Prototypen
Anwendungsbeispiele
Menü und seine Menüeinträge
Schicken eines Befehls an Objekte, die den Befehl unterschiedlich
interpretieren
25. Data binding
One-Way-Data-Binding
Two-Way-Data-Binding
How To Do Data Binding in Pure JavaScript
Two-Way Data Binding with Backbone, React, Angular, Meteor
and vanilla JavaScript in comparison
modelview.js
Accessors vs Dirty-checking
in Javascript Frameworks
maria.js
26. Data binding
Change And Its Detection In JavaScript Frameworks
Explizites 1 zu 1 Binding,
Datenmodell muss von
Framework erben,
z.B. Ember.js, Backbone
Dirty Checking (alles wird getrackt,
dafür Modell unabhängig von
Framework), z.B. Angular.js
Kein Binding, sondern jede Änderung
erzeugt einen neuen virtuellen DOM,
der gegen den Vorgänger gedifft wird
und nur dieses Diff wird auf den
eigentlich DOM angewendet, z.B. React
![https://en.wikipedia.org/wiki/A_Pattern_Language
Christopher Alexander
Pattern Language
„[…] each pattern represents our current
best guess as to what arrangement of
the physical environment will work to
solve the problem presented. The
empirical questions center on the
problem - does it occur and is it felt in the
way we describe it? - and the solution -
does the arrangement we propose solve
the problem? And the asterisks represent
our degree of faith in these hypotheses.
But of course, no matter what the
asterisks say, the patterns are still
hypotheses, all 253 of them - and are,
therefore, all tentative, all free to evolve
under the impact of new experience
and observation.“
1977
Pattern Mining](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)