Kostenlose Analyse

Ein Ausflug in die Salesforce Lightning Welt - Erklärung der verschiedenen Begriffe

Autor_factory42

Der Begriff „Lightning“ wirft - vor allem bei technisch weniger affinen Anwendern - immer wieder Fragen auf. Viele Wortkombinationen klingen ähnlich, bedeuten aber doch etwas anderes. Um dies etwas zu veranschaulichen, habe ich die einzelnen Begriffe mit den Bestandteilen eines Legohauses verglichen.

lightningsuite_wceocp.jpg
Bildquelle: Salesforce.com

Lightning (LTNG):

Der Markenname "Lego"

Lightning ist der Überbegriff für die komplette Restrukturierung, welche Salesforce derzeit vollzieht. Hauptsächlich betrifft das den „mobile first approach“, welcher die neue User Experience (UX), das Redesign und das komponentenbasierte Denken beinhaltet.
  

Lightning Experience (LEX):

Salesforce Legohaus

Salesforce selbst betitelt Lightning Experience mit: “Eine neue Erfahrung”. Das bedeutet, Salesforce stülpt die eigenen Designvorgaben in Form des Salesforce Lightning Design Systems (SLDS) über ihre gesamte Plattform. Dazu gehören aber nicht nur die neuen Farben und Formen der einzelnen Elemente, sondern auch das neue Menükonzept (vertikal statt horizontal) sowie das Zusammenspiel zwischen den neuen Lightning Components (LC) und dem SLDS. Das asynchrone Laden der Daten spielt dabei eine große Rolle. Bei Änderungen wird nicht wie sonst die ganze Seite neu geladen werden, sondern es wird nur der Bereich dynamisch nachgeladen und befüllt, in dem sich etwas ändert. Das fördert die User Experience, vermeidet Verwirrung bei der Bedienung und ist somit die Fortführung der Idee von Salesforce1.

Diese Technologie ist bei vielen großen Portalen bereits Gang und Gäbe, die Umsetzung bei komplexen dynamischen Systemen jedoch sehr kompliziert.

Das zeigt sich auch darin, dass noch nicht alle Objekte in der LEX verfügbar sind. Komplexere Orgs sind somit meistens noch nicht für den Wechsel auf die LEX geeignet.


Aura:

Alle Legosteine und Figuren

Die Basis für die komponentenbasierte Entwicklung hat Salesforce mit dem hauseigenen Aura-Framework geschaffen. Dieses steht als Open Source auf Github zur Weiterentwicklung zur Verfügung. Es beinhaltet diverse vorgefertigte UI-Komponenten und Funktionen (z.B. Buttons, collapse, carousel, panels, autocomplete).

https://github.com/forcedotcom/aura/tree/master/aura-components/src/main/components/ui


Lightning Components (LC):

Spezielle Legosteine für ein Haus

Verwendet man diese Aura-Komponenten innerhalb von Salesforce, ergibt dies die sog. „Lightning Components“.

Lightning App-Builder:

Legohaus mit größeren Fertigelementen

Der Lightning App-Builder ist künftig das Werkzeug dafür, diese Komponenten in einer Ansicht zusammenzuführen und miteinander zu verknüpfen. Die Anforderungen der Unternehmen an die Visualisierung von Prozessen und Daten sind häufig sehr unterschiedlich und gehen über den Salesforce-Standard hinaus. Einzelne, gekapselte Komponenten (Module), die miteinander verknüpft werden können, sollen die aufwändige und wenig agile Entwicklung mit Visualforce ersetzen. Salesforce möchte individuelle Apps und Dashboards künftig weitgehend den Administratoren via “Point and Click” überlassen.

Salesforce Lightning Design System (SLDS):

Die Farben und Formen der Steine und Figuren.

Der Name sagt es eigentlich bereits. Das Salesforce Lightning Design System ist das Salesforce eigene Design-Framework.

Salesforce möchte mit mit der Lightning Experience gewährleisten, dass künftig alle Objekte und Anwendungen wie aus einem Guss aussehen, egal ob Standard Salesforce-Objekt oder individuell entwickelte Applikation. 

Das SLDS gibt das Design von Salesforce (Templates) in Form von Markup (HTML, CSS) vor, um eigene Applikationen wie die neue Lightning Oberfläche aussehen zu lassen. Durch die Verwendung von „Media Querys“ ist das Framework komplett responsiv und das Frontend somit automatisch visuell für alle Endgeräte optimiert.

Gerade im Zusammenspiel mit den Lightning Components ist dies eine schnelle und effektive Art, Oberflächen entstehen zu lassen (Prototyping with code - no need to design).

Es ermöglicht Entwicklern, ohne Designaufwand mit fertigem Markup und vordefinierten CSS-Klassen einfach und schnell Apps wie native Salesforce Pages wirken zu lassen.

Navigationskonzepte und User-Flows sollen vereinheitlicht werden. Bisher haben die meisten Entwickler z.B. über Bootstrap und eigene Layouts versucht, die Anforderungen zu lösen oder Workflows zu verbessern, die Salesforce Classic nicht zufriedenstellend abbilden konnte. Damit soll bald Schluss sein.

Block-Element-Modifier (BEM):

Das Salesforce Lightning Design System basiert auf dem aktuell immer populärer werdenden BEM System. Salesforce unterscheidet sich etwas vom herkömmlichen BEM-System, indem Elemente zusätzlich einen Namespace erhalten, damit das SLDS nicht mit anderen CSS-Frameworks kollidiert. Das SLDS stellt jedem Element ein “slds-” vorne weg.

Beispiel einer Klasse:

class=”slds-button slds-button__icon--neutral”

„slds-“

der Namespace, der vor jedem Block steht

„button“

der Block oder auch Komponente (definiert, welchen Bestandteil das CSS beschreibt und deren grundsätzlichen Aufbau wie Höhe, Breite, Abstände usw.)

„__icon“

das (Unter-)Element als Bestandteil des Blocks

„--neutral“

der Modifier (definiert eine Abwandlung / Modifikation der Komponente z.B. Größe, Form, Farbe und überschreibt die CSS-Definitionen bei Bedarf)

Natürlich kann man auch eigene Styles definieren und das SLDS damit erweitern / überschreiben. Man sollte aber das Standard slds nicht verändern.

Der Eine oder Andere wird sich nun fragen, ob das SLDS nur aus HTML / CSS-Markup besteht oder auch bereits mit JavaScript angereichert ist, wie man es von anderen Frameworks kennt. Aktuell besteht es nur aus HTML/CSS und - wie es heute aussieht - wird dies auch so bleiben. JavaScript muss entweder selbst geschrieben werden oder es müssen bestehende Elemente aus dem Aura Framework verknüpft werden.

Einige einfache, aber sehr wichtige Navigationselemente (z.B.  Accordion, Knob, Numeric Stepper, Carousel oder Slider) vermisst man bisher jedoch leider noch.

Im nächsten Teil der Reihe SLDS gewähre ich einen tieferen Einblick in den Code und berichte von unseren bisher gemachten  Erfahrungen und gesammelten Erkenntnissen.

https://www.lightningdesignsystem.com

Themen: Salesforce Framework Lightning Components Lightning SLDS Aura Salesforce Experience