Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Kennenlernen von Codierungskonzepten

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
  • Zuordnen grundlegender Konzepte wie Steuerfelder und Anforderungen von Visualforce zu Aura-Komponenten
  • Vermeiden des häufigsten Syntaxfehlers in Aura-Komponentencode
  • Beschreiben des Vorteils lose gekoppelter Komponenten und wie die lose Kopplung erreicht wird

Konzept: Durch Steuerfelder

Endlich! Ein Konzept, dessen Namen Ihnen bekannt ist!

Rutsche! Trotz des vertrauten Namens ist dies ein Bereich, in dem Ihre Visualforce-Kenntnisse nicht auf Aura-Komponenten anwendbar sind. Eine der Grundfunktionen von Visualforce ist das Standardsteuerfeld. Durch Festlegen eines einzelnen Attributs für eine Seite können Sie diese Seite an einen sObject-Typ binden und eine Vielzahl automatischer Verhaltensweisen nutzen (z. B. Lesen und Schreiben von Datensatzdaten), ohne eine Zeile Code zu schreiben. Mit dem Standardsteuerfeld können viele Nicht-Programmierer komplett benutzerdefinierte Visualforce-Seiten erstellen. Etwas Vergleichbares gibt es für Aura-Komponenten nicht. Beim Erstellen einer Komponente, die Datensätze verwendet, muss Code geschrieben werden.

Wie steht es bei benutzerdefinierten Visualforce-Steuerfeldern? Für sie muss eigener Code geschrieben werden. Sie werden sich doch wohl kaum von den Steuerfeldern bei Aura-Komponenten unterscheiden, oder?Rutsche!

Wie Sie sich sichern noch erinnern, werden Visualforce-Steuerfelder auf Serverseite ausgeführt, die Steuerfelder von Aura-Komponenten dagegen auf Clientseite. Und manchmal auch auf Serverseite. Visualforce-Steuerfelder werden in Apex geschrieben, Steuerfelder von Aura-Komponenten dagegen in JavaScript. Und manchmal auch in Apex.

Architektur des Visualforce-Steuerfelds Architektur des Aura-Komponenten-Steuerfelds
Architektur des Visualforce-Steuerfelds Architektur des Lightning-Komponenten-Steuerfelds

Wie Sie an der Abbildung sehen können, ist die Architektur der beiden Steuerfelder unterschiedlich. Der Unterschied besteht im clientseitigen Steuerfeld, das sich auf den zu schreibenden Code auswirkt. Ihr Steuerfeldcode für die Aura-Komponente wird auf dem Client ausgeführt, während die Daten auf dem Server gespeichert sind. Ohne Caching müssen Sie immer, wenn Sie neue Daten benötigen, eine Serveranforderung durchführen. Hier handelt es sich um Code, den Sie eventuell nicht für Ihre Visualforce-Steuerfelder geschrieben haben. Darüber hinaus werden Remote-Anforderungen in einer asynchronen, rückrufbasierten Art geschrieben, die sich stark von Ihrem bestehenden Steuerfeldcode unterscheiden kann.

Außerdem verwenden viele benutzerdefinierte Visualforce-Steuerfelder und -Erweiterungen die Apex-Klasse StandardController oder StandardSetController, um das integrierte Verhalten zu erweitern und nicht zu ersetzen. Diese Klassen sind allerdings eng an Visualforce geknüpft. Sie können sie nicht im serverseitigen Steuerfeldcode Ihrer Aura-Komponenten verwenden. Sie müssen also noch mehr Code selbst schreiben.

Leiter! Wir haben aber auch gute Nachrichten: Wenn Sie Ihre Visualforce-Seiten mit JavaScript Remoting und Apex @RemoteAction-Methoden erstellen, gestalten Sie damit Ihren Steuerfeldcode bereits so, dass er für Aura-Komponenten gut wiederverwendet werden kann. Bestehender Code muss aktualisiert werden, doch Sie haben bereits den Sprung zur neuen Architektur gemacht.

Leiter! Und zum Schluss haben wir auch noch sehr gute Nachrichten: Der Lightning Data Service (LDS) steht nur für Aura-Komponenten zur Verfügung. Das ist das, was bei Aura-Komponenten einem Standardsteuerfeld am nächsten kommt. Es muss dafür allerdings etwas Code geschrieben werden. Nicht so viel wie bei einem Steuerfeld, aber eben ein bisschen. LDS ist jedoch viel leistungsstärker und bietet integriertes Caching, Benachrichtigung bei Änderungen und andere tolle Funktionen. Wenn Sie einmal gewechselt haben, wollen Sie nie wieder zurück. Unter "Ressourcen" finden Sie Links zu weiteren Informationen über LDS.

Konzept: Aktionen

In Visualforce ist eine Aktion eine Steuerfeldmethode, die am Ende eine PageReference zurückgibt. Eine Aktion ist in der Regel mit einer Schaltfläche oder einem Link verknüpft und steht für einen Vorgang, den die Anwendung für den Benutzer ausführen soll, gefolgt von der Navigation zu einer nachfolgenden Seite, einer Ergebnisseite oder einfach zur "Startseite". Eine Schaltfläche "Bearbeiten" ruft beispielsweise eine Aktionsmethode auf, die Daten für einen Datensatz lädt und dann zu einer Seite mit einem Bearbeitungsformular navigiert.

Leiter! Die Aktionen bei Aura-Komponenten sind ähnlich. Aktionen sind Funktionen, die Sie in JavaScript schreiben und mit Elementen der Benutzeroberfläche verknüpfen. Endlich wieder eine Leiter!

Aber, Moment! Es gibt wichtige Unterschiede! Und wenn Sie diese übersetzen, sausen Sie die Rutsche hinunter, anstelle die Leiter nach oben zu klettern.

Zuerst sollten wir uns klar machen, dass Aktionen keine direkten Methoden- oder Funktionsaufrufe sind, weder in Visualforce noch bei Aura-Komponenten. Sie werden nicht von Ihnen aufgerufen, sondern das Framework ruft sie bei Bedarf auf. Bis hierher ist alles gleich.

In Visualforce sind Ihre Aktionen jedoch Methoden, die in einer Apex-Klasse definiert werden. Es steht Ihnen eine gewisse Sprachinfrastruktur für Ihre Methode zur Verfügung, wie etwa Instanzvariablen sowie Klassen- und Instanzmethoden.

Rutsche! Aktionen in Aura-Komponenten werden nicht in einer Klasse definiert. Sie sind vielmehr Funktionsdefinitionen, die auf der Wertseite (rechts) von Elementen in einem JavaScript-Objekt deklariert werden, wenn die Objekt-Literal-Notation Name-Wert-Paare enthält. Hier folgt ein einfaches Beispiel dazu:
({
    myAction : function(component, event, helper) {
        // add code for the action
    },
})

Dieser Unterschied bei der Deklaration hat Auswirkungen auf Syntax und Struktur. Was die Syntax angeht, so beachten Sie bitte das Komma nach der Funktionsdeklaration (in Zeile 4). Trennen Sie Aktionshandler mit Kommas! In Apex wäre dies ein Syntaxfehler. Bei der Objekt-Literal-Notation wäre dagegen ein fehlendes Komma zwischen zwei Aktionsdefinitionen ein Syntaxfehler. Da es wirklich zeitaufwändig und schwierig ist, ein fehlendes Komma zu finden, sollten Sie sich von vorneherein angewöhnen, Ihre Aktionshandler mit Kommas zu trennen.

Tipp

Tipp

Wenn Sie einen externen Editor verwenden, der Plug-Ins zulässt, sollten Sie überlegen, ein JavaScript-Überprüfungstool wie ESLint zu Ihrer Umgebung hinzuzufügen. Da dies ein JavaScript-Syntaxfehler ist, wird praktisch jedes lint-ähnliche Tool ihn finden, bevor Sie auch nur zwei weitere Codezeilen geschrieben haben.

Die strukturellen Unterschiede verhindern, dass Steuerfeldcode auf andere Funktionen oder Werte innerhalb der Steuerfeldressource zugreift. Sie können keine Hilfsmethoden im Steuerfeld deklarieren, Sie können keine Instanz- oder statischen Eigenschaften erstellen, etc. Stattdessen platzieren Sie wiederverwendbaren Code in einer verknüpften Hilfsfunktion und speichern Instanzwerte als Attribute in Ihrer Komponente. Diesen letzten Teil sehen wir uns nun im Detail an.

Konzept: Eigenschaften im Vergleich zu Attributen im Vergleich zu "Expandos"

Apex-Eigenschaften sind (im Endeffekt) Instanzvariablen mit zugrunde liegender benutzerdefinierter Logik. Wenn Sie sie in einem Visualforce-Steuerfeld oder einer -Erweiterung definieren, können sie von Ausdrücken auf einer Seite verwendet werden. Das Abrufen und Festlegen einer Steuerfeldeigenschaft sollte zwar keine Nebenwirkungen haben (in der Computersprache nennt man dies idempotent), doch Eigenschaften können Hilfsmethoden aufrufen, um die zugrunde liegende Logik freizugeben oder zu abstrahieren. Eigenschaften sind in Visualforce-Steuerfeldern richtig nützlich (und auch weit verbreitet).

Sie würden bestimmt gerne ähnliche Eigenschaften in der JavaScript-Steuerfelddatei Ihrer Aura-Komponente erstellen, doch das geht nicht. Sie können versuchen, die Eigenschaften zur Hilfsfunktion hinzuzufügen, was oberflächlich betrachtet zu funktionieren scheint. Doch die Hilfsfunktion ist eine Singleton-Funktion, die über alle Instanzen Ihrer Komponente hinweg gemeinsam genutzt wird. Sie hat eher Ähnlichkeit mit einer statischen Variable in einer Klasse, kann also nicht dazu verwendet werden, den Zustand einer einzelnen Komponente zu speichern.

Was also tun?

Component Attributes

Wenn Sie in einem Ausdruck im Markup Ihrer Komponente auf den Wert zugreifen müssen, verwenden Sie ein Komponentenattribut. Ein Komponentenattribut wird wie folgt deklariert:
<aura:attribute name="myAttribute" type="Integer"/>
Für Komponentenattribute müssen mindestens ein Name und ein Datentyp festgelegt werden. (Es gibt optionale Attribute für Standardwerte usw.) Referenzieren Sie das Attribut im Markup mit standardmäßiger Ausdruckssyntax.
{!v.myAttribute}
(Im nächsten Modul lassen wir uns ausgiebig über Ausdrücke und Ausdruckssyntax aus.)

Zum Abrufen und Festlegen des Attributwerts im Code Ihres JavaScript-Steuerfelds verwenden Sie die Methoden "get" und "set". Verwenden der Funktionen 'get' und 'set' zum Abrufen und Festlegen von Komponentenattributwerten

Die Methoden "get" und "set" sind Funktionen, die im Parameter "component" zur Verfügung stehen, der an die Aktionshandler-Funktion "myAction" übergeben wird.
({
    myAction : function(component, event, helper) {
        var counter = component.get("v.myAttribute");
        counter++;
        component.set("v.myAttribute", counter);
    },
})
Im obigen Beispiel ruft "get" (Zeile 3) den Wert des Komponentenattributs "myAttribute" ab und weist den Wert der lokalen Variablen "counter" zu. "counter" wird erhöht, und danach aktualisiert "set" (Zeile 5) das Attribut "component".

Wenn Sie verhindern möchten, dass andere Komponenten den Wert Ihres Komponentenattributs ändern, legen Sie das Attribut als "private" fest. Ansonsten wird das Attribut Teil der öffentlichen API Ihrer Komponente.

JavaScript: Expandos und private Attribute

Attribute und ihr get/set-Ablauf erscheinen Visualforce-Entwicklern manchmal als zu "hochkarätig". Als versierter JavaScript-Programmierer könnten Sie versuchen, eine Eigenheit von JavaScript auszunutzen, indem Sie innerhalb einer Aktionsfunktion einen Wert in der Komponenteninstanz festlegen.

component._myExpando = "A new string variable";

Dieser so genannte Expando, der ad hoc erstellt wird, wird Bestandteil Ihrer Komponenteninstanz. Das hört sich doch wie eine nette, schlanke, private Instanzvariable an.

Das Problem ist allerdings, dass Expandos das Risiko subtiler Fehler und Speicherlecks erhöhen. Da sie zwar funktionieren, aber mit großer Wahrscheinlichkeit zu Problemen führen, raten wir von ihrer Nutzung ab. Der empfohlene Ansatz besteht darin, ein Attribut "component" zu erstellen und die Zugriffsebene dafür auf "private" einzustellen. (Wir empfehlen zudem, den Namen privater Attribute ein Präfix mit Unterstrich voranzustellen (beispielsweise _meinAttribut), um deutlich zu machen, dass es sich um private Variablen handelt.)

Konzept: Methodenaufrufe im Vergleich zu Ereignissen

Lassen Sie uns dieses Modul mit einem letzten, großen Konzept als Paukenschlag beenden.

Ihre Visualforce-Seiten basieren (wahrscheinlich) auf Methoden. Ausdrücke, Eigenschaften und Aktionen beruhen im Endeffekt alle auf Funktionsaufrufen. Funktionsaufrufe (oder Methodenaufrufe) lassen sich leicht erkennen – Sie deklarieren sie in der Apex-Klasse Ihres Steuerfelds. Ausführungsreihenfolge und Verhalten lassen sich leicht nachvollziehen. (Ja, ok. "Leicht" ist relativ. Haben Sie etwas Geduld.)

Methodenaufrufe stellen zudem eine enge Kopplung zwischen den Teilen Ihrer Anwendung dar. Ihre Seite ist eng an ihr Steuerfeld und Erweiterungen gekoppelt, die wiederum an andere Apex-Klassen gekoppelt sein können. Die Beziehungen zwischen Teilbereichen lassen sich zwar relativ leicht nachvollziehen, sind aber häufig nicht stabil und schwer wiederzuverwenden.

Aura-Komponenten wurden konzipiert, um viele dieser Einschränkungen von Visualforce aufzuheben. Speziell Komponenten sind (zumindest laut der Konzeption) lose gekoppelt. Der Mechanismus für diese lose Kopplung besteht aus Ereignissen.

Sie können sich einen Methodenaufruf als feste Verdrahtung oder als Kabel zwischen Aufrufer und Aufgerufenem vorstellen. Wenn Sie am einen Ende einen Schalter umlegen, geht am anderen Ende eine Lampe an. Durch die physische Verkabelung können Sie mehrere Geräte mit demselben Stromkreis verbinden – allerdings geht dann beim Einschalten des Flurlichts auch die Lampe im Garderobenschrank an. Das lässt sich auch auf die Software übertragen: Je häufiger Sie eng gekoppelte Teile eines Systems wieder verwenden, desto größer sind die Nebeneffekte und desto schwieriger wird es, neue Teile einzubinden.

Wenn Sie Ereignisse für die Kommunikation zwischen Aura-Komponenten verwenden, sind dies "kabellose" Verbindungen. Wenn Sie einen Schalter umlegen (also ein Ereignis auslösen), ist dies mit einem Funksignal vergleichbar. Wenn jemand (eine andere Komponente) auf dieser Frequenz lauscht (also einen Handler für dieses Ereignis vorhanden ist), kann die Aktion beim Empfang des Signals ausgeführt werden. Allerdings wissen Sie, als einsamer Funker, nicht, ob jemand lauscht. Analog dazu schreiben Sie Ihre Komponente so, dass sie sich korrekt verhält, ob ihr Ereignis empfangen und verarbeitet wird oder nicht.

Mit unserer Metapher wird es jetzt ein bisschen eng. Wir möchten Ihnen aber zum Abschluss noch zwei spezifische Tipps geben.

  • Geben Sie den Prinzipien Komposition und lose Kopplung eine echte Chance und etwas Zeit, denn das wird Sie als Entwickler weiterbringen. Der Ansatz unterscheidet sich vom gewohnten Vorgehen bei Visualforce. Manche halten diesen Ansatz für komplizierter, doch unserer Meinung nach ist dies eine Frage der Gewöhnung und Erfahrung.
  • Verwenden Sie Methoden nicht wie in Visualforce. Sie werden unweigerlich entdecken, dass Sie Methoden in Ihren Aura-Komponenten veröffentlichen und aufrufen können. Es ist verlockend, bei Designproblemen in alte Gewohnheiten zu verfallen. Widerstehen Sie der Versuchung. Methoden dienen bei Aura-Komponenten eigenen, passenden Zwecken. Verwenden Sie Methoden, wenn sie das richtige Mittel für die jeweilige Aufgabe sind. Machen Sie sie nur nicht zur Allzwecklösung für sämtliche Probleme.