Entdecken von Lightning-Webkomponenten

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

Erläutern des Programmiermodells von Lightning-Webkomponenten
Nennen der Vorteile durch die Verwendung von Lightning-Webkomponenten
Finden aller erforderlichen Teile, um in die Entwicklung von Lightning-Webkomponenten einzusteigen.

Eine offene Tür zur Programmierung mit Webstandards

Es ist an der Zeit, Ihre Salesforce-Kenntnisse und Ihre Vertrautheit mit Standardtechnologien wie HTML, JavaScript und CSS zusammenzubringen, um die nächste Generation von Salesforce-Anwendungen zu entwickeln. Verwenden Sie diese gemeinsamen Standards, um Komponenten für Ihre Salesforce-Organisation zu erstellen und gleichzeitig die Kompatibilität mit vorhandenen Aura-Komponenten zu wahren.

Lightning-Webkomponenten legen einen Schwerpunkt sowohl auf die Entwickler- als auch auf die Benutzerumgebung. Da wir die Tür zu bestehenden Technologien geöffnet haben, können Sie die Fertigkeiten, die Sie außerhalb von Salesforce erworben haben, zur Erstellung von Lightning-Webkomponenten nutzen. All dies steht Ihnen ohne Verzicht auf das zur Verfügung, was Sie bereits mit Aura-Komponenten erreicht haben.

Ist Ihnen in diesem letzten Absatz ein Unterschied in der Groß-/Kleinschreibung aufgefallen? Falls ja, haben Sie ein scharfes Auge. Wir schreiben alle Wörter groß, wenn wir auf das Programmiermodell von Lightning-Webkomponenten verweisen. Wir schreiben das erste Wort nur dann groß, wenn wir auf die Komponenten selbst als Lightning-Webkomponenten verweisen.

Ferner heißt das Lightning Components-Programmiermodell, das Sie bisher verwendet haben, jetzt Aura Components. Die Komponenten selbst werden als Aura-Komponenten bezeichnet.

Bevor Sie fortfahren

Sie benötigen ein Grundverständnis von Salesforce DX-Projekten und Salesforce CLI. Sie benötigen außerdem eine ordnungsgemäß konfigurierte Organisation in Ihrem Trailhead-Account und Visual Studio Code mit Salesforce Extension Pack. Alles, was Sie dafür tun müssen, erfahren Sie unter Schnelleinstieg: Lightning Web Components.

Warum Lightning-Webkomponenten?

Moderne Browser basieren auf Webstandards, und durch die Weiterentwicklung der Standards verbessern sich ständig die Möglichkeiten, die Browser dem Benutzer bieten. Wir möchten Ihnen die Möglichkeit geben, die Vorteile dieser Innovationen zu nutzen.

Lightning-Webkomponenten befolgen die wichtigsten Standards für Webkomponenten und bieten nur das Nötigste, um in den von Salesforce unterstützten Browsern einwandfrei zu funktionieren. Da sie auf Code basieren, der nativ in Browsern ausgeführt wird, sind sie schlank und liefern außergewöhnliche Leistung. Der Großteil des Codes, den Sie schreiben, folgt dem JavaScript- und HTML-Standard.

Dies wird Ihnen Folgendes erleichtern:

Finden von Lösungen an stark frequentierten Stellen im Web.
Finden von Entwicklern mit den erforderlichen Fertigkeiten und der nötigen Erfahrung.
Nutzen der Erfahrungen anderer Entwickler (selbst auf anderen Plattformen).
Schnelleres Entwickeln.
Nutzung von vollständiger Kapselung, sodass die Komponenten vielseitiger sind.

Es ist ja nicht so, dass Webkomponenten eine Neuerung wären. Von Browsern wurden sie schon seit Jahren erstellt. Zu den Beispielen zählen <select>, <video>, <input> und jede Art von Tag, die nicht nur als Container dient. Diese Elemente stellen tatsächlich das Äquivalent zu Webkomponenten dar. Unser Ziel ist es, dieses Maß an Integration in die Salesforce-Entwicklung zu bringen.

Einfache Komponentenerstellung

Das Schöne an der Einhaltung von Webstandards liegt in der Einfachheit. Sie brauchen sich nicht mit den Eigenheiten eines bestimmten Frameworks auseinanderzusetzen. Sie erstellen einfach Komponenten mit HTML, JavaScript und CSS. Die Erstellung von Lightning-Webkomponenten erfolgt in ein, zwei, drei Schritten. Das ist kein Witz. Es ist wirklich so einfach. Sie erstellen (1) eine JavaScript-Datei, (2) eine HTML-Datei und optional (3) eine CSS-Datei.

HTML stellt die Struktur für Ihre Komponente zur Verfügung.
JavaScript definiert die zentrale Geschäftslogik und die Ereignisbehandlung.
CSS sorgt für das Aussehen, das Verhalten und die Animation Ihrer Komponente.

Das sind die wesentlichen Bestandteile Ihrer Komponente.

Hier haben wir eine sehr einfache Lightning-Webkomponente, die "Hello World" in einem Eingabefeld anzeigt.

HTML

<template>
  <input value={message}></input>
</template>

Das template-Tag ist ein grundlegender Baustein des HTML-Codes einer Komponente. Es ermöglicht Ihnen, Teile von HTML zu speichern.

JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  message = 'Hello World';
}

Auf die Details der Importanweisung und der Klassendeklaration gehen wir später noch ein.

CSS

input {
  color: blue;
}

Das Einzige, was wirklich erforderlich ist, sind eine HTML-Datei und eine JavaScript-Datei mit demselben Namen im selben Ordner (ebenfalls mit demselben Namen). Diese stellen Sie in einer Organisation zusammen mit ein paar Metadaten bereit, und schon kann es losgehen. Salesforce kompiliert Ihre Dateien und nimmt Ihnen automatisch die Konstruktion der Boilerplate-Komponenten ab.

Lightning-Webkomponenten und Aura-Komponenten funktionieren zusammen

Sie fragen sich, ob Sie Ihre vorhandenen Aura-Komponenten behalten können? Ja, das können Sie! Sie können Lightning-Webkomponenten verwenden, ohne Ihre vorhandenen Komponenten aufzugeben. Wahrscheinlich werden Sie Ihre vorhandenen Komponenten irgendwann zum Lightning-Webkomponentenmodell migrieren, aber unsere Einführung von Lightning-Webkomponenten bedeutet keine Einschränkung der bestehenden Unterstützung der Aura-Komponenten. Aura-Komponenten und Lightning-Webkomponenten funktionieren gut zusammen.

Tatsächlich können Aura-Komponenten Lightning-Webkomponenten enthalten (allerdings nicht umgekehrt). Eine reine Implementierung von Lightning-Webkomponenten bietet aber vollständige Kapselung und eine fortschreitende Einhaltung gängiger Standards.

Cooles Zeug, das Sie verwenden können

Verwenden Sie zur effizienten Entwicklung von Lightning-Webkomponenten die folgenden Tools und Umgebungen.

DevOps Center
Das DevOps Center von Salesforce bietet ein verbessertes Änderungs- und Release-Management, das Ihrem Entwicklungsteam bewährte DevOps-Verfahren bereitstellt, unabhängig davon, wo Sie sich auf dem Spektrum zwischen Low-Code und Pro-Code befinden.
Code Builder
Der Code Builder von Salesforce ist eine webbasierte integrierte Entwicklungsumgebung, die die gesamte Leistung und Flexibilität von Visual Studio Code, Salesforce-Erweiterungen für VS Code und die Salesforce CLI in Ihrem Webbrowser bietet.
Developer Hub (Dev Hub) und Testorganisationen
Testorganisationen sind frei verfügbare Salesforce-Organisationen, die Entwicklung und Tests unterstützen. Dev Hub ist eine Funktion zur Verwaltung Ihrer Testorganisationen. Beide sind Teil des Salesforce DX-Toolsets. Salesforce DX ist ein integrierter Satz von Entwicklungstools, die von Salesforce entwickelt und unterstützt werden.
- Salesforce-Befehlszeilenschnittstelle (CLI)
  Die Salesforce-Befehlszeilenschnittstelle bietet eine schnelle Möglichkeit, Vorgänge zum Erstellen und Konfigurieren von Testorganisationen sowie zum Bereitstellen von Komponenten auszuführen. Sie ist ebenfalls Bestandteil des Salesforce DX-Toolsets.
- Lightning-Komponentenbibliothek
  Die Referenz für Aura- und Lightning-Webkomponenten gleichermaßen sowie Informationen zu deren Verwendung finden Sie unter https://developer.salesforce.com/docs/component-library/overview/components. Sie können die Bibliothek auch über die Instanz Ihrer Organisation unter http://<MyDomainName>.lightning.force.com/docs/component-library anzeigen. Wenn Sie die Bibliothek aus Ihrer Instanz anzeigen, sehen Sie nur die für Ihre Organisation richtige Version. Und wenn Sie eigene benutzerdefinierte Komponenten erstellen, werden diese ebenfalls in der Bibliothek aufgeführt.

GitHub
Wir teilen Erweiterungen, Beispiele und mehr in Form von GitHub-Repositories. Erwerben Sie einen GitHub-Account, um sicherzustellen, dass Sie diese Angebote nutzen können.
- Salesforce Extension Pack für Visual Studio Code
  Wir haben uns auf Visual Studio als Entwicklungstool konzentriert und bieten Ihnen eine integrierte Umgebung für die Erstellung Ihrer Komponenten. Das Salesforce Extension Pack für Visual Studio Code bietet Code-Hinweise, Lint-Warnungen und integrierte Befehle: https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode.
- Lightning Web Components Recipes
  Wir stellen ein GitHub Repo zur Verfügung, um Ihnen die Funktionsweise von Lightning-Webkomponenten zu demonstrieren. Sie können diese Mischung aus Beispielen duplizieren, anpassen und in Ihrer eigenen Testorganisation veröffentlichen, um sie in der Praxis zu erleben. Laden Sie die Beispiele unter https://github.com/trailheadapps/lwc-recipes herunter.
- E-Bikes-Demo
  Dieses GitHub-Repository stellt eine weitere gute Möglichkeit dar, die Funktion von Lightning-Webkomponenten zu erleben. Die E-Bikes-Demo ist eine End-to-End-Implementierung von Lightning-Webkomponenten zur Erstellung einer App. Probieren Sie dieses Beispiel in Ihrer eigenen Testorganisation aus. Sie können es unter https://github.com/trailheadapps/ebikes-lwc herunterladen.
- Lightning Data Service (LDS)
  Greifen Sie mithilfe des Lightning Data Service auf Daten und Metadaten von Salesforce zu. Lightning-Basiskomponenten, die mit Daten arbeiten, arbeiten auf Grundlage von LDS. Passen Sie Ihre eigenen Komponenten an, um die Vorteile der Zwischenspeicherung, Änderungsverfolgung, Leistung und mehr von LDS zu nutzen.
- Lightning Locker
  Lightning-Webkomponenten, die zu einem Namespace gehören, sind durch Sicherheit mit Lightning Locker gegenüber Komponenten in einem anderen Namespace geschützt. Lightning Locker fördert außerdem bewährte Methoden, die die Supportfähigkeit Ihres Codes verbessern, indem sie nur den Zugriff auf unterstützte APIs erlauben und den Zugriff auf nicht veröffentlichte Framework-Interna unterbinden.

Ein Blick in die Zukunft

Willkommen in der Welt der Lightning-Webkomponenten

Anhand der eBikes-Demo veranschaulichen wir, was Sie mit den HTML- und JavaScript-Dateien erreichen können.

Benötigen Sie Hilfe?

Mehr entdecken