Eine Einführung in Lightning Web Components

In Salesforce stellen Lightning Web Components (LWC) eine revolutionäre Änderung des Programmierparadigmas der Lightning Platform dar. Wenn Sie neu in Lightning Platform sind und Lösungen außerhalb von Salesforce mit Hilfe von HTML und JavaScript entwickelt haben, werden Sie feststellen, dass LWC ein Kinderspiel ist. In diesem Blog werden wir die folgenden Aspekte behandeln:

• Was ist LWC?
• Warum LWC?
• Was ist mit Aura?
• Wo soll ich anfangen?
• LWC-Struktur

Was sind Lightning Web Components?

LWC ist ein neues Programmiermodell zur Entwicklung von Salesforce Lightning-Komponenten. Es ist ein UI-Framework, das mit nativem HTML und modernem JavaScript erstellt wird. Es verwendet Kernstandards für Webkomponenten und nutzt benutzerdefinierte Elemente, Vorlagen, Dekoratoren, Module, Shadow DOM und andere neue Sprachkonstrukte, die in ECMAScript 7 und darüber hinaus verfügbar sind.

Abbildung 1: 2019 Web Stack

Lightning-Komponenten konnten bisher mit dem Aura-Komponenten-Framework entwickelt werden. Jetzt haben wir ein neues Framework, um dieselben Lightning-Komponenten zu entwickeln.

Warum LWC?

Wir müssen verstehen, warum Salesforce LWC eingeführt hat, wo wir bereits das Aura Component Framework hatten. Dazu müssen wir bis 2014 zurückgehen und uns diesen 2014-Webstack ansehen.

Im Jahr 2014, als das Lightning Components Framework zusammen mit dem Aura-Programmiermodell eingeführt wurde, boten Webstandards nur eine begrenzte Grundlage für den gesamten Stack, den Entwickler zum Erstellen großer Webanwendungen benötigen. eine Rendering-Engine, Standardelemente, Ereignisse und eine Kernsprache (ECMAScript 5).

Die Schlüsselelemente wie ein Komponentenmodell, Vorlagen, Module und Schatten-DOM fehlen alle in den Webstandards.

Abbildung 2: Web-Stack 2014

Dies bedeutet, dass die Webstandards oder der Web-Stack im Jahr 2014 nicht leistungsfähig genug waren, um UI-Komponenten zu erstellen. Gleichzeitig kamen viele verschiedene Frameworks wie Angular, React und Aura ins Spiel. Alle diese Frameworks enthielten diese fehlenden Schlüsselelemente, die wir zum Erstellen von UI-Komponenten benötigten.

Ab 2014-2019 wurde der Web-Stack oder die native Webbrowser-Engine stark verbessert.

Abbildung 3: Web-Stack-Transformation

Sie können die Vorlagen, benutzerdefinierten Elemente und Schatten-DOM-Module sehen. Sie alle sind Teil des Webstapels selbst. Dies bedeutet, dass der neueste Web-Stack leistungsfähig genug ist, um diese UI-Komponenten zu erstellen. Wir brauchen keine dicke Framework-Schicht dazwischen, die unsere Komponentenleistung beeinträchtigen könnte. Das ist der Grund für die Einführung des LWC-Frameworks. Die meisten Funktionen von LWC sind Teil des Web-Stacks selbst, und nur wenige Dinge hängen jetzt von den Frameworks ab. LWC kommt auch mit Basis-Lightning-Komponenten, alle diese 70+ Basiskomponenten, die Teil des Aura-Komponenten-Frameworks sind, wurden in Lightning Web Components konvertiert, und sie sind alle Teil des LWC-Frameworks. Wir können diese Basiskomponenten verwenden, um in unseren UI-Komponenten zu entwerfen.

Mit der Leistung des neuesten Web-Stacks bietet LWC viele verschiedene Vorteile gegenüber anderen Komponenten wie folgt:

1. Bessere Leistung
2. Moderne Webstandards
3. Kompatibel mit Aura-Komponenten
4. Schnelleres Laden von Websites
5. Bessere Sicherheit, bessere Tests und bessere Browserkompatibilität
6. Einfache Entwicklung

Was ist mit Aura?

Ihr müsst euch fragen, was mit Aura passieren wird, da LWC hier ist? Geht es weg?

Die Antwort ist “Nein”, weil LWC und Aura perfekt zueinander passen. Sie können Ihren LWC und die Aura-Komponenten auf derselben Seite platzieren, und Sie werden dort keinen Unterschied bemerken, da Ihr LWC mit Ihrer Aura-Komponente und Ihre Aura-Komponente auch mit Ihrem LWC sprechen kann. Sie können Ihren LWC sogar in eine Aura-Komponente einfügen, wenn dies umgekehrt nicht der Fall ist, da Sie kein benutzerdefiniertes Framework in ein generisches Framework einfügen möchten, bei dem es sich um ein LWC handelt.

Abbildung 4: Aura- und LWC-Interoperabilität

Wenn Sie sich dieses Bild ansehen, werden Sie feststellen, dass sowohl LWC als auch Aura dieselben Browserereignisse, Standardelemente und Renderingmechanismen gemeinsam haben. Der Unterschied besteht darin, dass Aura auf ECMAScript 5 basiert. LWC basiert auf der neuesten ECMAScript-Version, nämlich ECMAScript 7. Beide teilen sich die wesentlichen Salesforce-Funktionen wie Lighting Locker, Lightning Data Services und die Lightning-Basiskomponenten.

Zusammenfassend ist LWC eine neue Möglichkeit, Ihre Lightning-Komponenten zu entwickeln. Dies bedeutet nicht, dass das Aura-Komponenten-Framework irgendwohin führt. Sie können Ihr Aura-Programmiermodell weiterhin zum Erstellen Ihrer UI-Komponenten verwenden, wenn Sie mit dem Aura-Komponenten-Framework besser vertraut sind. Wenn Sie jedoch gerade erst anfangen oder von nun an neue Komponenten erstellen, würde ich vorschlagen, dass Sie LWC verwenden, da es viele verschiedene Vorteile bietet – z. B. eine bessere Komponentenleistung – und alle Ihre Web-Stack-Funktionen nutzt. Es ist immer besser, LWC über Aura für Ihre neuen Komponenten zu verwenden, aber Sie müssen Ihre vorhandenen Aura-Komponenten ab sofort nicht mehr auf einen LWC migrieren.

Wo soll ich anfangen?

Um LWC zu erstellen und zu entwickeln und deren leistungsstarke Funktionen und Leistungsvorteile zu nutzen, müssen Sie Salesforce DX einrichten. Im Gegensatz zu Aura-Komponenten ist die Entwicklung von LWC-Komponenten in der Entwicklerkonsole nicht möglich. Sie müssen es lokal schreiben und dann an Ihre Organisation senden. Dazu müssen Sie Ihre Entwicklerumgebung einrichten. Sie benötigen eine Reihe von Tools wie Visual Studio Code, die Salesforce-Befehlszeilenschnittstelle und eine Organisation.

Hier sind einige empfohlene Schritte:

1. Installieren Sie VS Code und richten Sie ihn für die Salesforce-Entwicklung ein. Sie können diesem Trailhead-Modul folgen.
2. Hier erhalten Sie leicht verständlichen Beispielcode für fast alle Anwendungsfälle.
3. Weitere Beispiele finden Sie hier.
4. Entwickeln Sie selbst ein LWC und testen Sie Ihren Code, indem Sie ihn hier ausführen.
5. Am wichtigsten ist, vervollständigen Sie die Erste Schritte mit LWC Trailmix.

LWC-Komponentenstruktur

Wie entsteht ein LWC?

Ähnlich wie bei einer Aura-Komponente sind die Hauptinhalte eines LWC auch HTML und JavaScript. Es gibt optionale Inhalte wie CSS. Zusätzlich zu diesen für LWC ist jedoch auch eine XML-Konfigurationsdatei enthalten, die die Metadatenwerte für die Komponente definiert.

Abbildung 5: LWC-Dateistruktur

Alle diese Dateinamen sollten mit dem Komponentennamen abgeglichen werden. Der Ordner und die Dateien müssen einigen Namensregeln folgen, wie folgt:

• Muss mit einem Kleinbuchstaben beginnen
• Darf nur alphanumerische Zeichen oder Unterstriche enthalten
• Muss im Namespace eindeutig sein
• Kann kein Leerzeichen enthalten
• Kann nicht mit einem Unterstrich enden
• Kann keinen Bindestrich (Bindestrich) enthalten)

Die LWC-Dateistruktur würde folgendermaßen aussehen:

Lassen Sie uns nun alle diese Dateien einzeln behandeln:

HTML

• Hat ein Root-Tag <template>, das den HTML-Code Ihrer Komponente enthält
• Beim Rendern wird das <template> -Tag durch <namespace-component-name ersetzt>

JavaScript aktivieren:

• Verwenden Sie die import-Anweisung, um in einem Modul deklarierte Funktionen zu importieren.
• Verwenden Sie die export-Anweisung, damit anderer Code Funktionen in einem Modul verwenden kann.
• LightningElement ist ein benutzerdefinierter Wrapper des Standard-HTML-Elements, den wir in der Komponente erweitern und exportieren.

Konfiguration:

• XML-Datei, die die Metadatenkonfigurationswerte für die Komponente definiert
• Wir setzen <Ziele> um Komponenten für verschiedene Seiten wie die App-Seite, die Datensatzseite usw. bereitzustellen.

CSS:

• Um eine Komponente zu stylen.
• Das Stylesheet wird automatisch angewendet.

Die Dateien, die wir besprochen haben – wie würde die Komponente mit diesen Looks erstellen?

Komponenten-Benutzeroberfläche:

Sie können versuchen, diese Komponente in Ihrem VS Code-Setup zu erstellen und in Ihrer Organisation bereitzustellen. Wenn Sie Ihren VS-Code noch nicht eingerichtet haben, machen Sie sich keine Sorgen. Salesforce bietet auch einen Spielplatz für LWC – Sie können diese Komponente hier ausprobieren.

Dies ist der beste Zeitpunkt, um mit Lightning Web Components zu beginnen, die die Leistung des neuesten Webstandards, eine bessere Leistung und Interoperabilität mit Aura-Komponenten bieten.

Weitere Informationen zu Lightning Web Components finden Sie unter den folgenden Links.

1. https://developer.salesforce.com/docs/component-library/documentation/en/lwc
2. https://developer.salesforce.com/docs/component-library/overview/components
3. https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components
4. https://trailhead.salesforce.com/en/users/strailhead/trailmixes/lightning-web-components
5. https://www.lightningdesignsystem.com/
6. https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components/set-up-visual-studio-code

Über den Autor

Sagar Zade ist Associate Technical Consultant bei Perficient. Er ist Salesforce Certified Administrator, App Builder, Plattformentwickler und Vlocity Certified Platform Developer. Er ist begierig darauf, neue Technologien zu lernen und zu erforschen, die in Salesforce verwendet werden, und freut sich darauf, das Wissen zu teilen.

Mehr von diesem Autor