ionic_logo

Einstieg in Ionic |Projekt auf Ihrem Android Gerät debuggen

#Ionic auf Ihrem Android Gerät debuggen
In diesem kurzen Tutorial wird beschrieben, wie sie ihre Ionic Anwendung auf ihrem Gerät debuggen können.
Folgende Dinge sollen möglich sein:
– Ich möchte schnell meine Ionic Anwendung als .apk auf dem Gerät deployen.
– Loggings mit console.log sollen irgendwie greifbar/sichtbar sein.

Vorbedingungen

  • Installierte und in der Konsole(cmd) verfügbare Android SDK (adb)
  • Projekt hat die Plattform Android mit ionic platform add android erfolgreich vorbereitet.

Kann unter diesem Blogpost nachgelesen werden.

Das Gerät vorbereiten

  1. Auf dem Android Gerät müss das USB Debugging aktiv sein.
    • Auf den meisten Geräten unter “Einstellungen” > “Entwickler-Optionen” aktivierbar.
    • Falls sie wie ich Cyangenmod verwenden, dann müssen sie unter Einstellungen > Über das Telefon > Klick 6x auf Build Nummer
  2. Schließen sie das Gerät an ihren Computer.
  3. Dieser sollte nun benötige Treiber runterladen und anschließend wird das Gerät im Computer als tragbares Gerät sichtbar.

Sollte ihr Gerät nicht sichtbar werden, können folgende Punkte Grund dafür sein:
– Fehlende Treiber: Stellen sie sicher, dass alle benötigten Treiber installiert sind. Die Treiber können auf der jeweiligen Hersteller-Webseite gefunden werden.
Für Samsung-Geräte beispielsweise muss das Programm Samsung Kies installiert werden.
– Falsches USB Kabel: Das Kabel sollte am Smartphone-Anschluss >= 4 sichtbare Pins haben. Es gibt auch Kabel mit weniger Pins, die nur zur Aufladung von Geräten verwendet werden. (Diese Erkenntnis hat mich 2 Stunden gekostet)

Anwendung auf das Gerät bringen und Logeinträge auslesen

Navigieren sie mit der Konsole in das Projektverzeichnis und geben sie ionic run android ein.
Nach einigen Konsolenachrichten sollte die App auf dem Smartphone sichtbar werden.

Nun öffnen sie noch eine Konsole und geben
adb logcat CordovaLog:D *:S ein.

Nun sollte in der Konsole alle console.logs aus der Anwendung erscheinen.

Logcat ist der Logging-Service von Android. Da adb über einen Port mit den verbundenen Geräten kommuniziert, werden in diesem Logging Service alle Informationen über das verbundene Gerät erfasst. Dabei ist CordovaLog:D *:S eine Filter-Anweisung, um gezielt die Javascript Logeinträge zu filtern.
Früher musste ein Plugin von Hand installiert werden, damit diese Logeinträge im Logcat sichtbar werden. Seit Phonegap 1.3 ist dieses Plugin fest integriert. (Wird installiert sobald sie die Plattform für ihr Projekt hinzufügen.)

Promises in AngularJS: Parameterübergabe

Im letzten Post habe die Grundlagen von Promises in AngularJS nahe gebracht.

Nun beleuchten wir das Thema, wenn Parameter übergeben und zurückgegeben werden sollen.

Old school

Betrachen wir erstmal, wie es auf die alt-bewährte Weise gemacht wird:

Wir übergeben wie gehabt unsere Callback Funktion. Der einzige Unterschied liegt darin, wie in der asynchronen Methode die übergebene Callback aufgerufen wird. Mit einem zusätzlichen Parameter.

Dieser Parameter kann dann in der Callback Funktion aufgenommen und verwendet werden.


Mit Promises

Mit Promises funktioniert das etwas anders aber recht ähnlich:

Hier liefert die then Funktion, den mit deferred.resolve übergebenen Wert in die Funktion. Sieht sehr ähnlich aus, doch der Vorteil wird erst ersichtlich, wenn in die Methode einige Parameter übergeben werden sollen.

Old School mit Parametern

Wir wollen eine Methode entwickeln, die mit Sekundenverzögerung Parameter addiert und zurückliefert.

Mit wachsender Komplexität verliert man die Übersicht vorallem, weil diese Callback Funktion überall auf die gleiche Weise übergeben und verwendet werden muss. Außerdem ist nicht klar erkennbar, welche Parameter wirklich Inputs sind oder Callbacks.

Promises mit Parametern

Es reduziert die Menge an Parametern und verbessert damit die Übersicht.
Es kann sein, dass hier noch nicht ganz der Vorteil ersichtlich ist. Aber das wird sich mit dem Fehlerhandling und Ajax-Handling noch verändern.

Zu dem Thema kommen wir im nächsten Teil: Promises in AngularJS: Fehlerbehandlung (Link folgt)

promises

Promises in AngularJS: Grundlagen

Promises in AngularJS: Grundlagen

Promising ist eine Technik, um asynchrone Programmierung zu erleichern.
Diese Promises bieten eine Möglichkeit einige Anti Patterns zu umgehen, in dem eine feste Strategie vorgeben wird, wie Callbacks zu übergeben sind und auch mehrere asynchrone Aufrufe synchronisiert werden können.

Diese Promises haben sich in verschiedenen Bereichen bewährt und werden in Ecmascript 6 nativ umgesetzt gefunden.

Die Syntax und das Handling unterscheidet sich etwas in AngularJS aber das Prinzip ist das generell Selbe.

Callbacks bisher

Wie wurden asnychrone Operationen bisher in Javascript umgesetzt ?
Typischerweise wurden als Parameter Methoden übergeben, die dann aufgerufen werden sollen, wenn die Operation abgeschlossen ist.
Beispiel:

Das funktioniert auch wunderbar. Das Problem wird erst ersichtlich, wenn mehrere asynchrone Operationen hintereinander durchgeführt werden müssen.

Stellen wir uns vor, wir wollen insgesamt drei Mal hintereinander eine asynchrone Methode aufrufen:

Dieses Konstrukt, dass eben entstanden ist, wird auch Pyramid of Doom genannt, gilt als Anti-Pattern und sollte absolut vermieden werden.

Auch wird es kritisch, wenn man gleichzeitig mehrere asynchrone Operationen synchronisieren möchte, beispielsweise wenn die Aufrufe in einer Schleife gestartet werden.

Mit Zählern zu arbeiten, um das Ziel zu erreichen bläht den Code au und ist unschön.

Funktionsweise von Promises in AngularJS

Wie die englische Übersetzung aussagt, liefern Promises Versprechen zurück, in die dann die Callback Methode eingehängt werden können.

(Die Codebeispiele setzen vorraus, dass $q in der Komponente verfügbar ist)

Wir lassen uns ein deferred Objekt erstellen. Dieses Objekt enthält praktisch unser Promise, dass wir mit return als Rückgabewert ausliefern.

Das deferred Objekt hat zwei wichtige Funktionen: resolve und reject.
Während resolve der Erfolgscallback ist, wird reject im Fehlerfall verwendet, dazu später mehr.
Nun möchten wir diese asynchrone Methode verwenden, dazu betrachten wir folgenden Code:

Hier übergeben wir unsere Callback-Methode in die then-Methode. Diese then-Methode wird aufgerufen, wenn die asynchrone Operation erfolgreich abgeschlossen wurde.

Promise Chaining

So wird theoretisch trotzdem ein Callback übergeben, doch betrachten wir das Verhalten, wenn mehrere Operationen hintereinander ausgeführt werden sollen.

Wir hängen in den ersten Aufruf unseren Callback ein, in dem Wir den Rückgabewert der asynchronen Operation zurückgeben.
Dieser Wert ist ein Promise. Das erkennt Angular und hängt das zurückerhaltene Promise in die aktuelle Aufrufstruktur ein. So ist es möglich direkt in dieses Promise das nächste then aufzurufen und den nächsten Callback zu übergeben.

Diese einzelnen asynchronen Operationen werden nun synchron nacheinander ausgeführt.

Durch diese Syntax, wird das zuvor angesprochene Anti-Pattern vermieden und wird als Promise Chaining bezeichnet.

Dynamische Menge an asynchronen Aufrufen

Nehmen wir uns das Beispiel von vorher und arbeiten die Promise Strategie ein.

Wir definieren uns ein Array, das praktisch als Warteschlange verwendet wird.
Dort legen wir unsere Promises hinein, die von der asyncFunction zurückgeliefert bekommen.

Die Methode $q.all erwartet ein Array an Promises und liefert selbst wieder ein Promise zurück, dass aufgelöst wird, wenn alle übergebenen Promises fertig sind.

Hier wird eindeutig, wie stark der Code vereinfacht wird.
Weiter zum Teil 2: Promises in AnglarJS: Übergabeparameter und der Fehlerfall.

 

 

ionic_logo

Ionic: Hybride Apps leicht gemacht

Ionic: Hybride mobile Apps leicht gemacht

Was ist Ionic ?

Das Framework ist eine quell-offene Bibliothek (MIT Lizenz) die HTML, CSS(SCSS) und JavaScript Komponenten bietet, um interaktive mobile Apps für alle wichtigen Plattformen (auf einmal) zu entwickeln. Ganz nach dem Motto: “Develop once, deploy everywhere”.

Besonderheiten

Jedes Framework hat seine Besonderheiten, dass es einzigartig macht.
Folgende Features sind besonders beachtlich:

  • Optimiert für AngularJS: Beinahe alle Komponenten haben ihre eigenen Directiven, was es ohne großen JavaScript und redundanten HTML Code sehr mächtig macht.
  • Performance ist hier sehr wichtig. Animationen werden nicht via jQuery, also mit aufwändiger DOM Manipulation durchgeführt sondern mit CSS3-Transitions, die durch Hardware Beschleunigung auftrumpfen können. Aus diesem Grund können nicht zu alte Systeme unterstützt werden. Vollständig kompatibel mit iOS 6+ und Android 4.1+ mit eingeschränkter Unterstützung von Android 2.3+.
  • Eigenes CLI (command line interface): Ermöglicht das Einrichten, Konfigurieren, Kompilieren des Projektes. Außerdem kann auch direkt die Anwendung an einen Emulator zum Beispiel eine AVD (Android Virtual Device) zum debuggen gesendet werden.

Dabei fungiert die CLI als Adapter und spricht direkt mit der Android SDK CLI und der CLI von Cordova.

Woraus besteht das Framework ?

Eigentlich ist es ein Frontend-Framework, wie jQuery Mobile. Doch gerade die oben genannten Besonderheiten machen es so neu.
Anstatt alles selber nochmal zu entwickeln, setzt es direkt auf Phonegap und AngularJS.

Gerade AngularJS möchte in Zukunft mit Version 2.0 Mobile First entwickeln. AngularJS Blog

Welche Kenntnisse werden benötigt ?

Um das volle Potenzial von Ionic auszuloten, sollten folgende Kenntnisse beziehungsweise Grundlagen vorhanden sein:
– AngularJS: Sollte man keine AngularJS besitzen, wäre die Wahl eines anderen Frameworks ratsam, den Ionics Alleinstellungsmerkmal einfach die Angular Optimierung ist.
– SASS: Sollte man können, wenn das Theme angepasst werden soll. Zur Not kann man es während der Entwicklung lernen.
– Funktionweise von hybriden Apps wäre auch eine wichtige Grundlage. Dafür sollte man etwas mit Phonegap gemacht haben.

Zusammenfassung

Trotz des Beta Statues ist Ionic ein sehr interessantes Framework. Besonders AngularJS Nerds, wie ich einer bin, brauchen praktisch nichts Neues lernen, um mächte Apps zu bauen. Die Dokumentation ist umfangreich aber nicht lückenlos. Das sollte sich aber schnell ändern. Ich freue mich auf die Zukunft von Ionic.

Falls Ich eure Interesse für das Framework geweckt habe, schaut doch in meine Tutorialreihe rein. Angefangen mit Einstieg in Ionic – Teil 1 |Der Einstieg.

ionic_logo

Einstieg in Ionic | Einrichtung

Einstieg in Ionic | Die Einrichtung

In diesem Teil werden wir ein Projekt einrichten und dieses Projekt auf eine Zielplattform portieren.

Das Einrichten ist ziemlich leicht, den alles kann per npm installiert werden. (Falls npm_nicht aus der Konsole verwendbar ist, muss _nodejs installiert werden.)

Installation

Mit folgender Anweisung wird erstmal cordova aka Phonegap installiert, dass ionic braucht, um eure erstellte Webanwendung auf die mobilen Plattformen zu portieren.

$ npm install -g cordova ionic

Einrichten eines Projektes

Zum Erstellen eines Ionic Projektes kann ein völlig leeres Projekt oder einer der lauffähigen Projektvorlagen verwendet werden.

Navigiert mit eurer Konsole zum Order in dem das neue Projekt angelegt werden soll.
(Ich habe es auf meinen Xampp Webserver gelegt, damit das Projekt auf dem localhost abgerufen werden kann)

Um nun ein leeres Projekt zu erstellen, folgendes in die Kommandozeile eingeben:

$ ionic start myApp blank

Ein ausführbare Projektvorlage kann mit

$ ionic start myApp tabs

installiert werden.
In der Vorlage enthält eine Ansicht mit drei Tabs, die alle ihren eigenen Inhalt enthalten.

Einrichten von Zielplattformen

Ionic verwendet cordova‘s CLI, um das erstellte Projekt auf die verschiedenen Plattformen zu portieren. Gerade werden android und ios unterstützt.

Android

Um Android als Zielplattform zu verwenden, wird das Java JDK, die Android SDK und das Building Tool Ant benötigt.

Nachdem die Abhängigkeiten installiert und per Kommandozeile erreichbar sind (in PATH Umgebungsvariable eingetragen), kann mit folgender Anweisung die Plattform im Projekt eingerichtet werden:

$ ionic platform add android

Nun sollte die Plattform zu eurem Projekt hinzugefügt worden sein.

Falls ihr nun den Fehler An error occurred listing Android targets erhaltet, dann wurde das Android SDK nicht richtig eingerichtet.

Stellt sicher, dass:

Die folgenden Systemvariablen eingerichtet sind:
1. JAVA_HOME: Pfad zum JDK. (Am Besten direkt unter C: legen, weil Leerzeichen im Pfad viele Fehler erzeugen. C:Javajdk1.7.0_45, anstatt C:Program Filesjdk1.7.0_45)
2. ANDROID_HOME:Entählt Pfad zum Android SDK Ordner. (z.B. C:androidsdk)
3. ANT_HOME: Enthält Pfad zum Ant Ordner (z.B. C:ant)

Nun tragt Ihr in PATH folgendes ein: %JAVA_HOME%bin;%ANT_HOME%bin;%ANDROID_HOME%tools;%ANDROID_HOME%platform-tools

Es müssen nun folgende Befehle in der Kommandozeile verfügbar sein:
java, javac (Java JDK)
adb (Android SDK)
ant (…)

Damit nun eine funktionsfähige App daraus wird, muss eine .apk Datei erstellt werden.

$ ionic build android

Diese Anweisung portiert die Anwendung als .apk beziehungsweise Android App.

Um die erstelle App auf einem Emulator zu testen, müsst ihr ein Android Virtual Device (kurz AVD) angelegt haben.

Das kann via Eclipse oder direkt mit dem SDK Manager erledigt werden.
Im Android SDK befindet sich die Datei SDK Manager.exe, diese müsst ihr starten und im Menü Tools > Manage ADVs klicken. Dort kann dann mit New… ein neues AVD angelegt werden.

Mit

$ionic emulate android

wird die Anwendung auf einen der AVDs geladen und ausgeführt.

singleton

Singleton Entwurfsmuster

Singleton Entwurfsmuster

Das Architekturmuster gehört zu den Erzeugungsmustern (Creational Design Patterns) und wurde als einer der Muster der Gang of Four publiziert.
Es wird verwendet, um sicherzustellen, dass genau ein Objekt einer Klasse existiert und üblicherweise global verfügbar ist.

Problem

Die Anwendung braucht genau eine Instanz einer Klasse. Diese global verfügbare Instanz wird erst erzeugt, wenn diese wirklich gebraucht wird (Lazy initialization).

Beispiel:
Eine Datenbankzugriffsklasse, die einmalig eine Datenbankverbindung herstellt, wenn wirklich ein Zugriff erfolgen soll.

Die Lösung

Man verbietet die Instanzierung der Klasse und bietet eine Methode an, um den Singleton auszuliefern. Ob dieser nun instanziert wird oder bereits schon mehrfach benutzt wurde, ist nicht wichtig.

Beispiel

Java

Javascript

( Codebeispiel auf JSFiddle )
Diese Singletons werden zum Beispiel in AngularJS angewandt, wenn Services instanziert werden.

Aspektorientierte Programmierung

Aspektorientierte Programmierung (AOP) in JavaScript

Einleitung

Immer mehr Logik der Anwendungen wird aus dem Backend in den Client verlagert. Diese Logik wird in Javascript implementiert und ausgeführt.

Je mehr Logik im JavaScript stecken soll, desto höher werden die Anforderung an die Programmiersprache.

Eine solche gehobene Anforderung wäre: “Kann JavaScript aspektorientiert entwickelt werden?”

Mit dieser Frage wird sich dieser Artikel befassen.

Neben einem kleinen Einstieg in AOP(seinem Sinn und mögliche Anwendungsszenarien), zeige Ich ihnen, wie Sie ein Framework nutzen können, um JavaScript aspektorientiert entwickeln zu können.

Grundlagen

Dieses Programmierparadigma für die objektorientierte Programmierung, um generische Funktionalitäten in verschiedenen Klassen zu verwenden und um sogenannte Cross-Cutting Concerns optimal zu integrieren.

Cross-Cutting Concern(CCC) sind Teile im System die nicht so einfach modularisiert werden können. Diese CCC können dazu führen, dass viel Code dupliziert werden muss und die Bausteine signifikant mehr Abhängigkeiten erhalten.

Ein Beispiel dafür wäre Logging. Es wird System-weit gebraucht, muss als zusätzliche Abhängigkeit eingetragen werden und Logging-Aufrufe selber sind im Code verteilt und machen diesen unübersichtlicher.

Durch AOP ist es möglich an Stellen in einem Prozessablauf “Einschübe” zu erstellen, in die zusätzliche Logik eingefügt wird, um den Prozessablauf zu verändern oder sogar zu unterbrechen.

Begriffe

Folgende Begriffe gilt es für die kommenden Abschnitte zu kennen:

  • Interceptor: “Klinken” sich an definierten Stellen in den Programmfluss ein und können diese gegebenenfalls unterbrechen.

  • Join Point: Die Stellen, in sich die Interceptoren in ein bestehendes eingeklinkt haben. Das können zum Beispiel Methodenausführungen, Zugriffe auf Attribute, … sein.

  • Pointcut: Das Muster, nachdem die Join Points gewählt werden.

  • Advice: Beschreibt, was wann an den Join Points einer Pointcuts passiert. Stellt einfach den Code dar, der das zusätzliche Verhalten repräsentiert.

  • Aspekt: Fasst Pointcuts und Advices zusammen. Ein Aspekt kann mehrere Advices und sich auf verschiedenen Pointcuts beziehen.

Funktionsweise

Die Funktionsweise soll anhand eines Beispieles erklärt werden.

Stellen wir uns vor, dass wir mit einer Methode Geld an ein anderes Konto überweisen möchten:

( Dieses Codebeispiel auf JSFiddle )

In diesem Beispiel haben wir eine Konto-Klasse definiert, die über drei Methoden verfügt. gerade liegt unser Augenmerk auf der transferToAccount Methode. Dort möchten wir nun ein Logging hinzufügen, außerdem müssen wir noch überprüfen, ob der aktuelle Nutzer überhaupt autorisiert ist das Geld zu überweisen.

Das ist mir aber nicht genug, ich möchte auch einen Log-Eintrag, wenn Geld vom Konto genommen oder auf das Konto hinzuaddiert wird.

( Dieses Codebeispiel auf JSFiddle )

Wie deutlich zu erkennen ist, wird der Code bereits relativ komplex. In diesem Beispiel ist der Logger ein global verfügbares Objekt. Würden wir es richtig sauber machen wollen, müssen wir den Logger als Abhängigkeit in unsere Konto Klasse einfügen.

Genau auf diesem Problem setzt die AOP auf.

Es ermöglicht uns nicht-invasiv zusätzliches Verhalten hinzuzufügen.
Nicht invasiv bedeutet, dass wir keine Vorkehrungen im eigentlichen Code treffen müssen.

Im ersten Schritt werden wir Join Points für eine Methode innerhalb unserer Account-Klasse anlegen.
Dafür überschreibt man die ursprüngliche Methode, hängt zwei zusätzliche Methoden ein und dazwischen die ursprüngliche Methode.

Nativ würde eine solche Implementation, wie folgt aussehen:

Die alte Methode im Prototypen wird zwischengespeichert, dann die ursprüngliche so überschrieben, dass die Join Points aufgerufen werden.

Für diesen Artikel habe Ich, damit es simpel bleibt, ein Miniframework entwickelt, mit dem man beliebige Methoden mit before und after Join Points versehen kann.

Als Erstes erstellen wir Join Points für die withdraw-Methode und definieren zwei Advices:

( Dieses Codebeispiel auf JSFiddle )

In diesem Codebeispiel sehen wir, wir die withDraw-Methode mit Logging versehen werden kann, ohne direkt auf den Code zugreifen zu müssen.
Das Objekt AOP bietet die Methode createJoinPoints an, in die wir folgende Parameter übergeben können:

  • Klasse in der die Methode zu finden ist, die die Join Points bekommen soll.
  • Name der Methode
  • before-Methode (optional)
  • after-Methode (optional)

Nachdem wir die Methode createJoinPoints aufgerufen haben wird die Funktion, dessen Namen wir übergeben haben, so bearbeitet, dass wir nun zwei neue Join Points haben:

  • beforeWithDraw: Wird aufgerufen, bevor withDraw ausgeführt wird.
  • afterWithDraw: Wird ausgeführt, nachdem withDraw ausgeführt wurde.

Das komplette Logging habe Ich in diesem Beispiel Aspektorientiert verbaut.
( Vollständiges Logging aspektorientiert Codebeispiel )

Auf den ersten Blick scheint es, dass wir nun mehr Code produziert haben als es ursprünglich nötig wäre. Das ist auch genau der Fall. Ziel ist es ja die Abhängigkeit zum Logger zu vermeiden und den Code übersichtlich zu lassen.

Weitere Einsatzmöglichkeiten

Aspektorientierte Validierung

Die Methode withDraw macht, bevor das Geld abgehoben wird, eine Validierung, ob das Konto noch genug Geld hat und verhindert den Transfer, sollte nicht genug Geld vorhanden sein. Diese Validierung könnte Aspektorientiert durchgeführt werden:

In diesem Beispiel haben wir die Validierung in unseren beforeWithDraw-Advice verlegt. Sollte nicht genügend Geld vorliegen, wird ein Fehler geworfen und der ganze Prozess abgebrochen.

Verarbeitung der Parameter im Advice

Im nächsten Beispiel kostet jeder Transfer pauschal 0,50 € Gebühren, der übertragenen Geldmenge.
Diese Gebühren werden vom Sender bezahlt.

Was zu tun ist:
1. Überweisende Geldmenge + Gebühren vom Absender abziehen.
2. Überweisende Geldmenge eintragen.

Diese Logik wird nun aspektorientiert implementiert:

( Codebeispiel auf JSFiddle)

Das Augenmerk liegt auf diesen drei Advices. In beforeTransferToAccount wird der Geldwert, um die Gebühren erhöht. Damit hebt die withDraw-Methode nun mehr ab, um die Gebühren gleich mit abzubuchen. Dann wird in beforeDepositDraw diese Gebühr wieder entfernt, bevor es beim Empfänger landet.
Im afterTransferToAccount Advice wird dann noch die Gebühr an die Bank gesendet.

So konnte zusätzliche Logik “eingeschleust” werden, ohne den eigentlichen Code anzufassen. Genau dieses Ziel hat AOP.

Zusammenfassung

Mit aspektorientierter Programmierung kann Code mit zusätzlicher Funktionalität versehen werden, ohne diesen zu verändern.
Das Ganze kann natürlich auch in JavaScript durchgeführt werden, wie meine Codebeispiele gezeigt haben.
Damit ist JavaScript auch mit der Macht von AOP gewappnet.

Frameworks

Während meiner Recherche habe Ich nach einem Framework gesucht, dass in JSFiddle einfach zu integrieren ist und viel Funktionalität bietet.
Dabei bin ich auf folgende Frameworks gestoßen:

  • meld.js: Letzter Commit und Kommentar auf Issues 7 Monate her. Bisher nur für Server-seitige Node.js basierte Anwendungen
  • jquery-aop: Inaktiv seit 2009.
  • cujo.js: Referenziert meld.js, node.js Modul
  • jsAspects: Der Blogpost beschreibt ein relativ mächtiges Framework, dass im Prinzip alles umsetzt. Die Syntax ist für den Anfang sehr kryptisch. Eventuell liefere Ich noch eine Implementation im JSFiddle.

UPDATE: Habe mir jsAspects angekuckt, hier mein JSFiddle
Die Bibliothek tut genau das, was von einem AOP Framework erwartet wird. Es fehlt nur was Information über die Methode, die durch Aspekte beeinflusst wird. Deswegen kann das nicht zum Logging oder Tracing verwendet werden.

Hinweis: Alle Codebeispiele tragen Zeilen in die Entwicklerkonsole ein. Also einschalten, um überhaupt ein Ergebnis zu sehen!

Quellen:
[1]: Praxisbuch Objektorientierung; B. Lahres, G. Raýman; Verlag: Galileo Computing

UML des Beobachter - Architekturmusters

Observer Entwurfsmuster

Observer ( Beobachter ) – Entwurfsmuster

Das Architekturmuster gehört zu den Netzwerk-orientierten Architekturmustern, die sich mit der Verarbeitung und Verwaltung von Nachrichten zwischen Komponenten befasst.
Es beschreibt, wie reaktive Komponenten mit beliebig vielen anderen Komponenten kommunizieren und dabei die Abhängigkeiten untereinander minimieren kann.

Problem

Das Problem wird anhand eines Beispieles erklärt.

Sie sind Pilot eines Flugzeuges. Im Luftraum befinden sich sehr viele andere Flugzeuge. Nun möchten Sie landen und müssten jeden Piloten auf dem Funknetz fragen, ob der Luftraum frei ist. (Der Flughafen ist auf dem selben Netz) Zwischen den ganzen Rückmeldungen befindet sich der Flughafen, den Sie aber bei den ganzen Rückmeldungen nicht hören.

Die Lösung

Alle Piloten meldet sich beim Terminal eines Flughafens an. Das Terminal ist dabei der zentrale Kommunikationsknoten für einen gewissen Luftraum und alle Piloten kommunizieren primär über diesem Punkt, anstatt miteinander.
Sobald Flugzeuge den Luftraum des Terminals erreichen, melden diese sich an und sollten Sie den Luftraum wieder verlassen, melden diese sich ab.

Vorteile

  • Entkopplung der Komponenten
  • Einheitliche Kommunikation

Nachteile

  • Sollten viele Beobachter an einem Subjekt hängen, könnte das Aktualisieren dieser zu Performanceverlusten führen.
  • Jeder Beobachter wird aktualisiert, ob dieser die Information benötigt oder nicht (könnte vermieden werden)

Unterschied zum Publish/Subscribe Pattern

Während die Beobachter sich erst bei einem Subjekt registriert haben müssen, um Benachrichtigungen zu versenden, benötigt dies das herkömmliche Publish-/Subscribe Pattern nicht. Hier können Komponenten in die Subjekte Benachrichtungen absetzen, ohne es selbst abonniert zu haben. Das reduziert zusätzlich die Abhängigkeit zu den Subjekten1

hello-world

Hello world!

Nachdem meine alte Webseite durch einen Server-Down verloren gegangen ist,  nutze Ich die Chance und eröffne hier meinen Blog, um Erfahrungen im Leben mit Anderen zu teilen.

 

In der Zukunft teile ich meine Erfahrungen über Ernährung, Software Entwicklung und Allgemeine Themen.

 

Viel Spaß beim Lesen!