13. Nov 2022
Lesedauer 33 Min.
Komponentenbasiert mit Svelte entwickeln
Svelte – ein Ökosystem für Vanilla-JavaScript (Teil 3)
Im Umfeld von Svelte gibt es eine Vielzahl von Komponenten, Libraries und Werkzeuge für die komponentenbasierte Entwicklung.
Mit Svelte lassen sich, wie mit den Frameworks Angular, React und Vue.js auch, Komponenten erstellen, die einem Entwickler gewisse Vorarbeiten abnehmen und dadurch bestimmte Leistungen für eine App bereitstellen. Der Einsatz von Komponenten in einer Projektorganisation bietet die Chance, die Produktivität und auch die Wirtschaftlichkeit in der Entwicklung wesentlich zu erhöhen. Denn generell gilt: Je größer der Grad an Wiederverwendung einer Komponente, umso höher fällt deren Qualität aus.Mehrere Komponenten zusammen präsentieren sich dem Benutzer gegenüber in der Regel als eine Sammlung von Komponenten, man spricht dann auch von einer Bibliothek oder Library. Alle in einer Bibliothek enthaltenen Komponenten stellen ein gewisses Leistungsspektrum zur Verfügung, das häufig auf ein gemeinsames Ziel abgestimmt ist. Der Benutzer wählt aus der Bibliothek geeignete für den Einsatzzweck passende Komponenten aus, um mit ihnen die spezifizierten Anforderungen für die zu realisierende Anwendung umzusetzen.
Svelte-Komponenten für das Formular-Management
Für Svelte existiert eine Reihe von Komponenten-Bibliotheken für das Formular-Management. Eine Übersicht zum Formular-Management und den verfügbaren Svelte-Komponenten enthält der Serienteil 1 dieser Reihe.
Prinzipiell handelt es sich bei Komponenten um flexibel verwendbare Bausteine eines Software-Artefakts. Eine Komponente zielt auf die Verbesserung der Wiederverwendbarkeit und damit ihrer Einsetzbarkeit in einem gewissen Umfeld ab. Grundsätzlich verwirklicht eine Komponente die Prinzipien der Abstraktion, Kapselung und Modularität. Eine Komponente erfüllt einen Kontrakt indem sie eine Schnittstelle ihrem Benutzer zur Verfügung stellt. Diese Eigenschaften einer Komponente sollen die Produktivität und Effizienz in der Entwicklung erhöhen. Es gilt, neu zu schreibenden Code zu minimieren, so dass Aufwand an Zeit und damit verbunden die Kosten in der Software-Entwicklung sinken.
Das Arbeiten mit Komponenten mit Licht und Schatten
Eine Komponente stellt die unterschiedlichsten Dienste ihrem Benutzer zur Verfügung. Als Entwickler bettet man die Komponente in seine eigenen Anwendungen ein. Dabei greift der Entwickler auf die Schnittstelle der Komponente zurück – er benutzt ihre Dienste. Voraussetzung für diese Vorgehensweise der komponentenbasierten Entwicklung stellt die Existenz einer Schnittstellen-Dokumentation dar.Dabei kommt vor allem einer semantischen Beschreibung des Leistungsspektrums und der Arbeitsweise einer Komponente eine wichtige Bedeutung zu. Insbesondere dann, wenn gewisse Reihenfolgen an Aufrufen an der Schnittstelle der Komponente einzuhalten oder bestimmte Parameter konkret zu bestücken sind.
Eine Komponentebesitzt Schnittstellen, die ihrem Benutzer Funktionen und/oder Daten bereitstellen(Bild 1)
Simon
Die komponentenbasierte Entwicklung verfolgt als primäres Ziel, Anwendungen gemäß dem Lego-Baukasten-Prinzip zusammenzustellen (Bild 1). Anstatt neue Komponenten zu programmieren, sollen möglichst bereits vorhandene Komponenten eingesetzt werden. Dazu muss ein Entwickler wissen, wie er Komponenten miteinander verbinden kann. Es kann vorkommen, dass für eine gewünschte Leistung eine Komponente nicht ausreicht, sondern mehrere Komponenten zusammen benötigt werden. Um mehrere Komponenten miteinander zur Leistungserbringung zu
benutzen, muss der Entwickler wissen, wie Komponenten untereinander kommunizieren.Je mehr Entwickler eine Komponente verwenden, umso mehr erhöht sich ihre Qualität, da jeder Entwickler in seinem eigenem Anwendungsszenario die Komponente testet. Eine große Nutzeranzahl erhöht die Wahrscheinlichkeit, dass ein Marktplatz an Komponenten entsteht, der einem Entwickler geeignete Komponenten mit hoher Qualität zur Auswahl anbietet. Jedoch müssen auch im Umfeld der komponentenbasierten Entwicklung Lösungen für damit verbundene Probleme oder Aufgabenstellungen gefunden werden.Um Komponenten untereinander kompatibel zu machen, sind gewisse Vorgaben einzuhalten. Ändert sich das Umfeld oder der Kontrakt von Komponenten, so müssen unter Umständen alle eigenen Anwendungen bedarfsorientiert angepasst werden.Svelte bietet die Möglichkeit, eine App gemäß dem Prinzip der Komponentenorientierung zu entwickeln: Das heißt die Syntax von Svelte eignet sich für die Programmierung isolierter, gekapselter Komponenten mit dem in Svelte inhärenten Komponentenmodell. Eine Komponente entspricht einem Software-Objekt, das nach außen Schnittstellen oder Dienstleistungen bereitstellt, die eine bestimmte Aufgabe übernehmen. Für diesen Zweck besteht ein mit Svelte realisiertes Software-Objekt aus drei Bestandteilen – genauer gesagt drei Code-Blöcken: JavaScript, HTML und CSS. Jeder dieser drei Code-Blöcke macht die bekannte Syntax der jeweiligen Sprache verfügbar. Die Reihenfolge der Code-Blöcke innerhalb eines Svelte-Quellcodes spielt keine Rolle, da der Svelte-Compiler jeden der drei Abschnitte eindeutig identifiziert. Zusätzlich bietet Svelte für alle drei Blöcke syntaktische Erweiterungen an (siehe Teil 1).
benutzen, muss der Entwickler wissen, wie Komponenten untereinander kommunizieren.Je mehr Entwickler eine Komponente verwenden, umso mehr erhöht sich ihre Qualität, da jeder Entwickler in seinem eigenem Anwendungsszenario die Komponente testet. Eine große Nutzeranzahl erhöht die Wahrscheinlichkeit, dass ein Marktplatz an Komponenten entsteht, der einem Entwickler geeignete Komponenten mit hoher Qualität zur Auswahl anbietet. Jedoch müssen auch im Umfeld der komponentenbasierten Entwicklung Lösungen für damit verbundene Probleme oder Aufgabenstellungen gefunden werden.Um Komponenten untereinander kompatibel zu machen, sind gewisse Vorgaben einzuhalten. Ändert sich das Umfeld oder der Kontrakt von Komponenten, so müssen unter Umständen alle eigenen Anwendungen bedarfsorientiert angepasst werden.Svelte bietet die Möglichkeit, eine App gemäß dem Prinzip der Komponentenorientierung zu entwickeln: Das heißt die Syntax von Svelte eignet sich für die Programmierung isolierter, gekapselter Komponenten mit dem in Svelte inhärenten Komponentenmodell. Eine Komponente entspricht einem Software-Objekt, das nach außen Schnittstellen oder Dienstleistungen bereitstellt, die eine bestimmte Aufgabe übernehmen. Für diesen Zweck besteht ein mit Svelte realisiertes Software-Objekt aus drei Bestandteilen – genauer gesagt drei Code-Blöcken: JavaScript, HTML und CSS. Jeder dieser drei Code-Blöcke macht die bekannte Syntax der jeweiligen Sprache verfügbar. Die Reihenfolge der Code-Blöcke innerhalb eines Svelte-Quellcodes spielt keine Rolle, da der Svelte-Compiler jeden der drei Abschnitte eindeutig identifiziert. Zusätzlich bietet Svelte für alle drei Blöcke syntaktische Erweiterungen an (siehe Teil 1).
Ein Storybook als stand-alone Website publishen
Publishing/Deployment einer Storybook als stand-alone Website erschließt Zusammenarbeit und Reviewing für das gesamte Team. Zur Spezifikation der Benutzeroberfläche und zu deren Diskussion im Team unterstützt Storybook den Build einer statischen Web-App. Über sie erhalten Designer, Endbenutzer, Entwickler und Projektmanager fortlaufend Zugriff auf die aktuellen Arbeitsergebnisse. Der Befehl npm run build-storybook erzeugt die Web-App im Unterverzeichnis storybook-static des Projekts. Bei vorhandener Installation des npm-Pakets http-server führt der Befehl npx http-server ./storybook-static die Web-App zum Testen lokal aus. Ein Publishing/Deployment der Web-App auf einem Web-Server im Internet erschließt die entwickelten Komponenten jedem Mitarbeiter im Team. Der Hersteller von Storybook bietet mit Chromatic einen speziell auf das Produkt abgestimmten Publishing-Service mit zusätzlichen Diensten an.
Wendet man die Komponentenorientierung zur Realisierung einer App mit Svelte an, so setzt sich diese aus mehreren Komponenten zusammen. Dabei besteht jede Komponente aus einer einzigen oder nutzt mehrere andere Komponenten, um ihre Dienstleistungen zu realisieren. Das heißt der Entwickler baut eine Svelte-App aus mehreren Komponenten auf – es entsteht ein Komponentenbaum: Es entsteht eine Hierarchie aus Komponenten. Der Einstiegspunkt jeder Svelte-App unabhängig von der Anwendungsarchitektur stellt die obligatorische Datei App.svelte dar (siehe Teil 1): Die main.js-Datei lädt App.svelte und führt den darin enthaltenen Quellcode aus.Damit bildet die App.svelte-Datei die Wurzel/Root-Komponente der Svelte-App. Die App.svelte-Komponente dient als Container, um andere Komponenten aufzunehmen und so deren Dienstleistungen zu nutzen. Komponenten kommunizieren untereinander und tauschen Daten aus, um den Service einer bestimmten Komponente in Anspruch zu nehmen. Die Kommunikation erfolgt über Eigenschaften/Attribute (props einer Komponente), Ereignisse/Nachrichten (events einer Komponente) oder durch Lesen von Daten aus externen Quellen (get data). Gemäß dem Ansatz der Komponentenorientierung besteht eine Svelte-App aus einer Sammlung von Komponenten, die alle zusammenarbeiten, um dem Endbenutzer die von ihm gewünschten Anforderungen
bereitzustellen.Im Unterschied zu Angular, React oder Vue.js basiert diese Zusammenarbeit der Svelte-Komponenten auf reinem HTML/JavaScript, ohne die Inanspruchnahme zusätzlicher framework-spezifischer Module. In der Praxis empfiehlt es sich, Svelte-Komponenten mit der Software-Technik SFC (Single File Components) zu realisieren: Der Quellcode einer Komponente befindet sich so in genauer einer .svelte-Datei. In größeren Projekten sollte man selbst programmierte Komponenten in einem speziellen Ordner zum Beispiel /src/components abspeichern.Beim Einsatz fremd entwickelter Komponenten befinden sich diese ebenfalls an einem eigens dafür vorgesehenen Ort innerhalb der jeweiligen Bibliothek – in der Regel unterhalb des lib-Verzeichnisses.Die Arbeitsgruppe Web Platform Incubator Community Group (WICG) des W3C (World Wide Web Consortium) hat das Konzept der Web Components entworfen. Bereits im Jahr 2012 veröffentlichte die WICG das Web-Components-Modell als Standard für die Erstellung von Webkomponenten - auch Web Components genannt. Web Components dürfen nicht mit HTML Components (HTCs) verwechselt werden. Bei Letzteren handelt es sich um mit VBScript entwickelte Komponenten, die auf den veralteten Internet Explorer von Microsoft ausgerichtet sind.
bereitzustellen.Im Unterschied zu Angular, React oder Vue.js basiert diese Zusammenarbeit der Svelte-Komponenten auf reinem HTML/JavaScript, ohne die Inanspruchnahme zusätzlicher framework-spezifischer Module. In der Praxis empfiehlt es sich, Svelte-Komponenten mit der Software-Technik SFC (Single File Components) zu realisieren: Der Quellcode einer Komponente befindet sich so in genauer einer .svelte-Datei. In größeren Projekten sollte man selbst programmierte Komponenten in einem speziellen Ordner zum Beispiel /src/components abspeichern.Beim Einsatz fremd entwickelter Komponenten befinden sich diese ebenfalls an einem eigens dafür vorgesehenen Ort innerhalb der jeweiligen Bibliothek – in der Regel unterhalb des lib-Verzeichnisses.Die Arbeitsgruppe Web Platform Incubator Community Group (WICG) des W3C (World Wide Web Consortium) hat das Konzept der Web Components entworfen. Bereits im Jahr 2012 veröffentlichte die WICG das Web-Components-Modell als Standard für die Erstellung von Webkomponenten - auch Web Components genannt. Web Components dürfen nicht mit HTML Components (HTCs) verwechselt werden. Bei Letzteren handelt es sich um mit VBScript entwickelte Komponenten, die auf den veralteten Internet Explorer von Microsoft ausgerichtet sind.
Mit Web Components und Svelte komponentenbasiert entwickeln
Im Unterschied dazu entsprechen Web Components Code-Blöcken, die ihren inneren Aufbau gemäß der Komponentenorientierung kapseln und es ermöglichen, den jeweiligen Code an beliebigen Stellen innerhalb von Websites/Web-Apps zu nutzen (Bild 2).
Die Website www.webcomponents.orgerlaubt es, eigene Web Components anderen zugänglich zu machen und gezielt nach vorhandenen zu suchen(Bild 2)
Simon
Mittlerweile unterstützten alle gängigen Browser das Web-Components-Modell. Der Web Components-Standard stellen ein natives Komponentenmodell für den Browser bereit und basiert auf folgenden drei Spezifikationen:Im Umfeld der Web Components nehmen ES Modules/HTML Imports eine wichtige Rolle ein. Dieser Mechanismus bindet JavaScript-Module auf HTML-Seiten ein, um deren Funktionalität wiederzuverwenden. Er erlaubt es, Custom Elements über das import-Schlüsselwort in einem <link>-Tag auf eine Seite zu laden. Die Website Custom Elements Everywhere (custom-elements-everywhere.com) untersucht und analysiert die Interoperabilität verschiedener Frameworks/Compiler mit dem Web Component-Standard. Svelte erzielt dort einen Score von 100 Prozent und hat alle Basic- und Advanced-Tests bestanden.Dies liegt an der Fähigkeit des Svelte-Compilers in Svelte-programmierte Webkomponenten in ein Custom Element (Web Components) zu überführen. Dazu setzt man in der Konfigurationsdatei des Module-Bundler Rollup/Vite beim Svelte-Plugin das customElement auf true.Zusätzlich muss in App.svelte-Datei für die gewünschte Web Component eine tag-Option über svelte:options deklariert werden, zum Beispiel: <svelte:options tag="comp-demo"/>. Anschließend steht die neue mit Svelte programmierte Web Component in jeder HTML-Datei, die das zugehörige bundle.js importiert zur Verfügung.
Storybook – Tool für UI-Komponenten, deren Test und Dokumentation
Storybook ist ein Werkzeugkasten für Entwicklung, Test und Dokumentation von User-Interface-Komponenten mit dem Ziel, diese einem möglichst großen Entwicklerkreis zugänglich zu machen und so deren Wiederverwendbarkeit zu erhöhen. Die Entwickler von Chroma Software stellen Storybook für Front-End-Entwickler als Open-Source-Software über das Internet zur Verfügung. Storybook basiert auf der Entwicklungsmethodik Component Driven Development (CDD) von Tom Coleman.Diese Methode greift die Idee zum Aufbau von User-Interfaces in Anlehnung an die Lego-Baustein-Technik auf. Dabei entsteht eine Benutzungsschnittstelle bottom-up ausgehend von einfachen Basis-Komponenten, die schrittweise zu komplexeren User-Interface-Elementen zusammengesetzt werden – bis das gewünschte Endprodukt entsteht.Im Zentrum der CDD-Methodik steht als Standard das Component Story Format (CSF), das auf Basis von JavaScript ES6-Moduln einzelne Beispiele für Komponenten beschreibt. Diese Komponenten-Beschreibung stellen Code-Ausschnitte dar, die als Beispiel für eine Komponente dient und in einen bestimmten Zustand angezeigt werden kann.Dabei realisiert ein derartiges Komponenten-Beispiel eine sogenannte User-Story (Anwendererzählung); diese beschreibt mit wenig Text eine seitens der Komponente umzusetzende Anforderung. Da als Fundament des CSF JavaScript ES6-Moduln gewählt wurde, gewährleistet dieser Standard die Interoperabilität zwischen Design-, Entwicklungs- und Test-Werkzeugen. Diese Vorgehensweise macht spezifische Bibliotheken seitens der Hersteller hinfällig.CSF besitzt eine deklarative Syntax, die sich isomorph zu höherwertigen Formaten wie MDX (Markdown for Components) verhält. Dieser Isomorphismus zwischen CSF und anderen höherwertigen Formaten garantiert die Existenz bedeutungsgleicher Beschreibungen. Für das Arbeiten mit dem CSF-Standard befinden sich in dessen GitHub-Repository einige einfache Utility-Funktionen. Mit diesen Funktionen führt man einen Parse durch, beseitigt unzulässige Zeichen, erzeugt eine Storybook-ID, verbessert den Namen einer Story oder prüft deren Export. Aufgrund dieser Eigenschaften eignet sich CSF und damit die CDD-Methodik für eine Vielzahl von JavaScript-Werkzeugen, inklusive vieler Tools für das User-Experience/UX-Design. Storybook stellt für viele JavaScript-Werkzeuge einen sogenannten Workshop bereit, um User-Interfaces in einer abgeschotteten, isolierten Umgebung zu programmieren. Dies befähigt einen Entwickler ohne die gesamte Anwendung ausführen oder programmieren zu müssen, bestimmte Komponenten eigenständig zu entwickeln. Dabei existieren zwei Gruppen von Workshops; die erste wird Core genannt und die zweite Community (Bild 3).
Die Homepage von Storybookmacht die in zwei Gruppen eingeteilten Workshops CORE und COMMUNITY zugänglich(Bild 3)
Simon
Während die Core-Workshops von Chroma Software bereitgestellt und gepflegt werden, stammen die Community-Workshops von Anwendern der jeweiligen JavaScript-Werkzeuge oder Frameworks. Core-Workshops gibt es für Angular, React, Vue.js und Web Components – Community-Workshops für Ember, HTML, Svelte und Preact.
Entwicklung von Svelte-Komponenten
Für das Arbeiten mit Storybook for Svelte, kurz SB Svelte genannt, benötigt man innerhalb einer Entwicklungsumgebung ein Svelte-Projekt. Für dieses Starter-Projekt eignet sich am besten das seitens des Herstellers von Storybook der Chroma Software bereitgestellte Template.Dieses Template besitzt alle seitens Storybook benötigten Einstellungen und vordefinierte Testfälle mit Jest. Anhand dieses Templates führt der Befehl npx degit chromaui/intro-storybook-svelte-template bsp-app ein Scaffolding über das zugehörige GitHub-Repository durch. Danach befindet sich der Quellcode der Svelte-App zusammen mit SB Svelte im Projekt bsp-app.Alternativ besteht die Möglichkeit SB Svelte in jedes bestehende Svelte-Projekt mit dem Befehl npx sb init nachträglich aufzunehmen. Um diesen Befehl auszuführen, muss der Input-Fokus des Terminalfensters sich in der Wurzel des jeweiligen Svelte-Projekts befinden. Dieser nimmt eine Installation des npm-Pakets @storybook/svelte vor und fügt dem Projekt einige Storybook-Beispiele hinzu. Sollte es dabei zu einer Fehlermeldung kommen, so hilft der Befehl npx storybook init --type svelte. Der Hersteller liefert Storybook basierend auf Webpack Version 4 aus; zudem wird die Peer-Dependency-Semantic von npm Version 7 verwendet, die inkompatibel mit deren ab Version 8 ist. Diese schaltet Storybook mittels des Flags --legacy-peer-deps im Bedarfsfall aus. Sollte jedoch Version 5 von Webpack installiert sein, so muss noch eine Migration auf diese Version durchgeführt werden: npx storybook@next automigrate.Carbon basiert auf einem Open-Source-Font von IBM
Das Carbon Design System greift auf die eigens von IBM entwickelte Plex-Schriftart zurück. Bei IBM Plex handelt es sich um eine kostenlose von IBM konzipierte Schriftart, die IBM als Standardschrift im Unternehmen einsetzt. Mit Plex hat IBM Helvetica als Corporate Typeface abgelöst und so viele Millionen Dollar an Lizenzgebühren eingespart.
Anschließend startet Storybook for Svelte (SB Svelte) das package.json-Script npm run storybook in einem Entwicklungsprojekt. Über den Webbrowser steht die Software über dem Port 6006, also der URL http://localhost:6006/ zur Verfügung. Zu Beginn erläutert Welcome to Storybook das Arbeiten mit der Software, dabei verweisen die Links in den Bereichen CONFIGURE und LEARN auf relevante Websites hin. Der linke Bereich zeigt unter der Drop-Down-Liste EXAMPLE alle aktuell im Entwicklungsprojekt enthaltenen über Storybook verfügbaren Komponenten an: Button, Header und Page. Die Software zeigt das Erscheinungsbild der Komponente im User-Interface an: Nach einem Klick auf eine der Komponenten visualisiert der rechte, größere Fensterbereich deren aktuell selektierte Ausprägung im User-Interface.Wählt man anschließend in der Toolleiste den neben Canvas stehenden Eintrag Docs, so erscheinen unterhalb der visuellen Darstellung der Komponente in der Liste PROPERTIES die für sie definierten Eigenschaften/Attribute und in der Liste EVENTS, die von ihr behandelten Ereignisse/Nachrichten. Weiter unten befindet sich der Eintrag Stories. Dieser zeigt verschiedene visuelle Ausprägungen der Komponente an. Bei jeder dieser einzelnen Ausprägungen befindet sich unten rechts ein Link mit dem Texthinweis Show code. Ein Klick auf diesen Link öffnet eine Textbox, die eine beispielhafte Verwendung der Komponenten im Svelte-Quellcode anzeigt. Ein weiterer Klick auf Copy übernimmt diesen Svelte-Quellcode in das Clipboard, so dass man diesen direkt in der Entwicklungsumgebung wiederverwenden kann.
Neue Svelte-Komponenten programmieren
Wesentlicher Vorteil beim Einsatz von Storybook besteht darin, dass die Svelte-Komponente eigenständig lauffähig ist. Damit entfällt zu Beginn der Entwicklung die Integration der Komponente in die Svelte-App. Die neu programmierte Svelte-Komponente programmiert und testet der Entwickler völlig unabhängig von der App; diese muss dazu nicht im Browser laufen.Im Entwicklungsprojekt der Svelte-App befindet sich im Ordner .storybook die main.js-Datei, welche Storybook konfiguriert. Das Unterverzeichnis src/stories enthält alle mit SB Svelte programmierten Beispiel-Komponenten mit der Dateiendung .stories.js/ts. Eine derartige .stories.js/ts-Datei definiert mehrere Stories zu einer bestimmten Komponente und deklariert für diese Komponente verschiedene Zustände.Zusätzlich zur Stories-Datei einer Komponente existiert innerhalb des Entwicklungsprojekts der zugehörige Quellcode der Svelte-Komponente wie üblich in einer .svelte-Datei. Beispielsweise definiert die AddForm.svelte-Datei eine Komponente, die einer Liste ein neues Listenelement hinzufügt:
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">script</span>></span></span>
<span class="xml"><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">let</span> name = <span class="hljs-string">''</span>;</span></span>
<span class="xml"><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">let</span> label = <span class="hljs-string">''</span>;</span></span>
<span class="xml"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Hinzufügen<span class="hljs-tag"></<span class="hljs-name">h2</span>></span></span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">input</span> </span></span>
<span class="xml"><span class="hljs-tag"> <span class="hljs-attr">bind:value</span>=</span></span><span class="hljs-template-variable">{name}</span><span class="xml"><span class="hljs-tag"> </span></span>
<span class="xml"><span class="hljs-tag"> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Neuen Eintrag einfügen"</span> /></span></span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">button</span>></span> </span>
<span class="xml"> </span><span class="hljs-template-variable">{label}</span>
<span class="xml"><span class="hljs-tag"></<span class="hljs-name">button</span>></span></span>
Dazu besteht die Komponente aus einem Eingabefeld, dessen Anfangswert aus der Zeichenkette Neuen Eintrag einfügen besteht.Zusätzlich befindet sich in der Komponente neben dem Eingabefeld eine Schaltfläche mit der Beschriftung Hinzufügen. Bereits nach der Programmierung dieser Anforderungen im Svelte-Quellcode zeigt Storyboard die Komponente an – einzige Voraussetzung ist, dass die zugehörige .stories.js/ts-Datei am Ablageort codiert ist.Die Story-Datei einer Komponente macht sie Storyboard für die Verarbeitung über den Webbrowser zugänglich. Dazu importiert der erste Schritt den Quellcode der .svelte-Datei in die zugehörige .stories.js/ts-Datei:
<span class="hljs-keyword">import</span> AddForm from <span class="hljs-string">'../components/AddForm.svelte'</span>;
export <span class="hljs-keyword">default</span> {
<span class="hljs-string">titel:</span> <span class="hljs-string">'AddForm-Komponente'</span>,
<span class="hljs-string">component:</span> AddForm,
<span class="hljs-string">argTypes:</span> {
<span class="hljs-string">name:</span> {<span class="hljs-string">control:</span> <span class="hljs-string">'text'</span>}
}
};
const Template = props => ({
<span class="hljs-string">Component:</span> AddForm,
props,
});
export const LeeresElement = Template.bind({});
LeeresElement.args = {
<span class="hljs-string">name:</span> <span class="hljs-string">'Eingabewert'</span>,
<span class="hljs-string">label:</span> <span class="hljs-string">'Hinzufügen'</span>
};
export const WeiteresBeispiel = Template.bind({});
WeiteresBeispiel.args = { <span class="hljs-string">label:</span> <span class="hljs-string">'Klicken'</span>};
Darauf folgt eine export-Anweisung, welche über das title-Attribut den von Storyboard in der linken Navigationsleiste stehenden Namen entspricht. Den Namen für die Komponente in Storyboard setzt das component-Attribut. Alle möglichen Zustände der Komponente deklariert eine argTypes-Liste über entsprechende Attribut-Einträge mit ihrem Wertebereich.Bei einem Zustand handelt es sich um eine konkrete Ausprägung einer Komponente. Anschließend ist für die Komponente ein Template über eine Array-Funktion für Storyboard zu definieren.Dieses Template instanziiert verschiedene Zustände einer Komponente durch Vorbelegung deren Attribute. Die bind-Methode des Templates erzeugt eine Ausprägung der Komponente. Das args-Attribut der Template-Instanz setzt eine Komponente in einen ganz bestimmten Zustand. Dazu greift das argTypes auf die definierten Attribute der Komponente zurück und setzt diese auf den gewünschten Wert, der den Zustand der Komponente widerspiegelt:
<span class="xml"><span class="hljs-comment"><!-- AddForm.stories.svelte --></span></span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">script</span>></span></span>
<span class="xml"><span class="actionscript"> <span class="hljs-meta"><span class="hljs-meta-keyword">import</span> </span></span></span><span class="hljs-template-variable">{ Meta, Template, Story }</span><span class="xml"><span class="javascript"> <span class="hljs-keyword">from</span> <span class="hljs-string">'@storybook/addon-svelte-csf'</span>;</span></span>
<span class="xml"><span class="javascript"> <span class="hljs-keyword">import</span> AddForm <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/AddForm.svelte'</span>;</span></span>
<span class="xml"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Meta</span></span></span>
<span class="xml"><span class="hljs-tag"> <span class="hljs-attr">title</span>=<span class="hljs-string">"AddForm-Komponente"</span></span></span>
<span class="xml"><span class="hljs-tag"> <span class="hljs-attr">component</span>=</span></span><span class="hljs-template-variable">{AddForm}</span>
<span class="xml"><span class="hljs-tag"> <span class="hljs-attr">argTypes</span>=</span></span><span class="hljs-template-variable">{{</span>
<span class="hljs-template-variable"> name: {control: 'text'}</span>
<span class="xml"><span class="hljs-tag"> }}</span></span>
<span class="xml"><span class="hljs-tag">/></span></span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Template</span> <span class="hljs-attr">let:args</span>></span></span>
<span class="xml"> <span class="hljs-tag"><<span class="hljs-name">AddForm</span> </span></span><span class="hljs-template-variable">{...args}</span><span class="xml"><span class="hljs-tag"> /></span></span>
<span class="xml"><span class="hljs-tag"></<span class="hljs-name">Template</span>></span></span>
<span class="xml"><span class="hljs-comment"><!-- Jede Story verwendet das Template --></span></span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Story</span></span></span>
<span class="xml"><span class="hljs-tag"> <span class="hljs-attr">name</span>=<span class="hljs-string">'LeeresElement'</span></span></span>
<span class="xml"><span class="hljs-tag"> <span class="hljs-attr">args</span>=</span></span><span class="hljs-template-variable">{{</span>
<span class="hljs-template-variable"> name: 'Eingabewert',</span>
<span class="hljs-template-variable"> label: 'Hinzufügen'</span>
<span class="hljs-template-variable"> }</span><span class="xml"><span class="hljs-tag">}</span></span>
<span class="xml"><span class="hljs-tag">/></span></span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Story</span></span></span>
<span class="xml"><span class="hljs-tag"> <span class="hljs-attr">name</span>=<span class="hljs-string">'WeiteresBeispiel'</span></span></span>
<span class="xml"><span class="hljs-tag"> <span class="hljs-attr">args</span>=</span></span><span class="hljs-template-variable">{{</span>
<span class="hljs-template-variable"> label: 'Klicken'</span>
<span class="hljs-template-variable"> }</span><span class="xml"><span class="hljs-tag">}</span></span>
<span class="xml"><span class="hljs-tag">/></span></span>
Jeder Zustand einer Komponente bekommt den Namen der zugehörigen Template-Instanz, den Storyboard während der Ausführung in der linken Navigationsleiste unterhalb des Namens der Komponenten anzeigt. Nach Auswahl eines Zustands der Komponente in Storyboard kann man über den Webbrowser bei Controls/PROPERTIES dessen Einstellungen dynamisch zur Laufzeit ändern (Bild 4).
Das Label der Schaltflächeder Svelte-Komponente AddForm wurde zur Laufzeit in Storyboard von Hinzufügen auf Klick geändert(Bild 4)
Simon
Seit Version 5.2 unterstützt Storybook das CSF (Component Story Format), das als deklarative unabhängige Sprache für Komponenten-Beispiele (Stories) dient. Als hersteller-unabhängiges Format auf Basis von ES6-Moduln stellt es Open-Source dar. Entwickler beschreiben Beispiele von Komponenten in verschiedenen Sprachen mit verschiedenen Syntax-Elementen. Jedes Design- oder Entwicklungssystem basiert auf einer eigenen hersteller-spezifischen Sprache. Dies gilt für Design-Systeme wie Adobe XD, Figma oder Sketch, aber auch für Entwicklungswerkzeuge wie Bootstrap, Jest oder Storybook. Im Zentrum aller dieser Werkzeugklassen stehen Komponenten, sei es im Design, Programmierung oder Test. Um mit Komponenten unabhängig von Tools zu arbeiten, haben Coleman und de Langen CSF als Austauschformat definiert.Die Entwickler von Storybook griffen diesen Gedanken auf und führten Loader/Übersetzer von hersteller-spezifischen Formaten nach CSF ein. Damit schuf man die Möglichkeit Stories immer in der jeweiligen hersteller-spezifischen Sprache zu formulieren und diese dann in das klassische storiesOf-API zu überführen.Diese Vorgehensweise trug erheblich dazu bei, dass sich Storybook zum führenden Komponenten-Explorer/Browser entwickelte. So setzen zahlreiche Projekte im Umfeld der Komponentenorientierung (Airbnb Lunar, Auth0 Cosmos, IBM Carbon, Salesforce Lightning, Shopify Polaris) seit Version 5.2 Storybook als Tool ein. Inzwischen findet man Storybook in vielen tausenden GitHub-Repositories, so dass es als Werkzeug einen Quasi-Standard gesetzt hat.Auch die Svelte-Community hat den Einsatz von Storybook forciert und ein Svelte-natives Format für die Beschreibung von Stories mit Version 6.2 eingeführt. Storybook 6.2 unterstützt Svelte-Entwickler beim Schreiben von Stories gemäß dem gängigen Quellcode-Aufbau von Svelte. Dabei befinden sich Stories in .stories.svelte-Dateien – sie bestehen aus einem <script>-, <Meta>-, <Template>- und <Story>-Tag.Der <script>-Bereich schafft die Voraussetzungen, um mit CSF zu arbeiten – er importiert Meta, Template und Story. Dazu installiert man @storybook/addon-svelte-csf in die Dev-Dependencies und fügt in die .storybook/main.js-Datei beim addons-Array den Eintrag "@storybook/addon-svelte-csf" hinzu. Das <Meta>-Tag beschreibt die für eine Story benötigten Komponenten. Über das <Template>-Tag deklariert der Entwickler die für die Instanziierung einer Komponente notwendige Schablone. Im <Story>-Tag instanziiert der Entwickler abschließend jede einzelne Komponente im jeweiligen Zustand.
IBM unterstützt Svelte mit dem Carbon Design System
Ein Design-System ziel darauf ab, für Produkte des Unternehmens einen hohen Grad an optischer Wiedererkennung sicherzustellen. Im Sinne von »Ein Bild sagt mehr als tausend Worte« will das Unternehmen sich und seine Produkte als Selbstbild (Corporate Identity) an Markt positionieren. Ein Design-System hilft bei der Umsetzung eines Corporate Designs, sprich es dient als Grundlage der Realisierung des Gesamterscheinungsbilds eines Unternehmens.In der Regel besteht ein Design-System deshalb aus Style-Guides, Komponenten-Bibliotheken und allgemein gefassten Richtlinien. Der Style-Guide umfasst Gestaltungsrichtlinien, um ein einheitliches Erscheinungsbild zu erreichen. In den Bibliotheken enthaltenen wiederverwendbaren Komponenten basieren auf dem Style-Guides. Damit stellen die Komponenten die Einhaltung der Richtlinien über alle Produkte (Web, Mobile, Print) sicher.Ein Design-System entspricht quasi einer gemeinsamen Design-Sprache, damit können Mitarbeiter komplexe Aufgaben besser und schneller im Sinne des Corporate Design des Unternehmens lösen. Die vom Design-System umgesetzten und eingehaltenen Vorgaben gewährleisten automatisch eine konsistente Realisierung eines Produkts. Die gemeinsame Design-Sprache führt zu einer einheitlichen, visuellen Gestaltung des Endprodukts. Damit erhält der Endbenutzer ein intuitiv nutzbares Erlebnis mit dem jeweiligen Endprodukt, so das eine einzigartige User-Experience (UX) entsteht. Produkte des Unternehmens wie Websites, Apps oder Print bieten somit ein konsistentes und einheitliches Erscheinungsbild.Alternative design-system-basierte Svelte-Libraries
Neben dem Carbon Design System von IBM gibt es noch weitere Svelte-Libraries mit Komponenten, die auf einem Design-System basieren. Auf dem Material Design-Konzept von Google aufbauende Libraries für Svelte mit User-Interface-Komponenten sind: Beercss (https://www.beercss.com/), Material-Svelte (https://material-svelte.dev/), MDBSvelte (https://github.com/mdbootstrap/mdbsvelte), Smelte (https://smeltejs.com/), Svelte Materialify (https://svelte-materialify.vercel.app/, Weiterentwicklung derzeit eingestellt), Svelte Material UI (SMUI) (https://sveltematerialui.com/) und svelte-mui (https://github.com/vikignt/svelte-mui). Material-Svelte stellt auch ein Storybook zur Verfügung: https://storybook.material-svelte.dev/. Adeo liefert das Mozaic design system (auch ADEO Design System, kurz: ADS genannt) auf Web Components-Basis mit SCSS und reinem HTML aus: https://mozaic.adeo.cloud/. Es lässt sich in Projekten mit Angular, React, Vue.js und Svelte nutzen. Die User-Interface-Library proi-ui (https://github.com/specialdoom/proi-ui) macht ihre Design-Elemente über eine Figma Design Resource öffentlich zugänglich.
Ein Design-System stellt einen systematischen Ansatz für die Produktentwicklung dar. Programmierer und Designer können ein Design-System gleichermaßen nutzen, um schnell funktionale und kohärente Software zu entwickeln. Als Werkzeug und Rahmenwerk mit Regeln, Prinzipien und wiederverwendbaren Komponenten bestimmt das Design-System wie ein Team ein Produkt konzipiert. Somit hilft ein Design-System die Produktentwicklung zu systematisieren und legt auch Prozesse fest, um den Aufwand bei den Schnittstellen zu minimieren und die Zusammenarbeit im Team zu fördern. Es entsteht ein einzigartiges Corporate Design im Unternehmen, woraus eine unvergleichliche User-Experience resultiert.
Carbon Design System implementiert die IBM Design Language
Mit dem Carbon Design System (Bild 5) liefert die IBM allen Interessierten ein frei-zugängliches Open-Source-Design-System aus. Die Entwicklung von Carbon startete IBM Mitte 2015 und griff dabei auf den Vektorgrafik-Editor Sketch zurück. Sketch steht für macOS und als Web-App zur Verfügung und kommt hauptsächlich für User-Interface- und User-Experience-Design von Websites und Mobile-Apps zum Einsatz.
Carbon – das Open-Source-Design-System von IBMenthält eine Reihe von Komponenten-Bibliotheken, das heißt verschiedene Sammlungen wiederverwendbarer Komponenten für den Bau von Websites und User-Interfaces(Bild 5)
Simon
Während die macOS-Version primär als Werkzeug für das Design dient, unterstützt die Web-App vor allem die Zusammenarbeit im Team während des gesamten Design-Prozesses. Dabei steht die Web-App über den Browser auf allen wichtigen Betriebssystemen zur Verfügung. Mit ihr können Entwickler, Designer und Entscheidungsträger Sketch-Dokumente betrachten, ihre Bestandteile inspizieren und fertig erstellte Design-Assets nutzen.
Carbon-Komponenten und Design-Muster
Die Realisierung von Carbon erfolgte ursprünglich als eine Menge von Sketch-Bibliotheken, die aus Carbon-Komponenten und Design-Mustern bestehen. Unter einer Bibliothek versteht man in Sketch eine Sammlung von Dokumenten (Symbole, Textstile, Farbräume et cetera), die man in allen anderen Sketch-Dokumenten auch über alle Mitglieder eines Teams hinweg wiederverwenden kann.Über den Update-Mechanismus einer Library informiert Sketch alle Dokumente, wenn sich eine darin enthaltene Komponente geändert hat. Vorgenommene Änderungen lassen sich Durchsehen und in das eigene Dokument übernehmen. Diese Vorgehensweise stellt sicher, dass man in seinen eigenen Arbeitsergebnissen immer die aktuellsten Komponenten einsetzt.Carbon Design System stellt die IBM Design Language mittels verschiedener Ressourcen zur Verfügung. Dabei handelt es sich im Wesentlichen um Elemente wie Farben, Schriften und Templates, verbunden mit Richtlinien und realisiert über Komponenten. Alle Ressourcen macht IBM mit Assets als Open-Source zugänglich. IBM unterscheidet zwischen dem Core System und Local Systems – dabei besitzt das Core System einen großen allgemein gültigen Anwendungsbereich. Erweitert oder passt man das Core System für spezielle Anwendungsgebiete an, so erhält man ein sogenanntes Local System. Ausgehend von der Sketch-Version gibt es inzwischen weitere Implementierungen für die Design-Tools Figma, Adobe XD und Axure. Für die Entwicklung von Software mit Carbon als Design-System stehen für Web/Mobile-Apps verschiedene Code-Implementierungen zur Verfügung:Verschiedene Anwender von IBMs Carbon Design System haben mit Carbon Components Svelte eine auf Svelte basierende Komponenten-Bibliothek entwickelt. Erste Anleitungen für den Einsatz und einen Überblick zum Inhalt der Svelte-Bibliothek erhält man über die Homepage von Carbon Components Svelte.Um mit dem Carbon Design System und Svelte eine Web-App zu entwickeln, erzeugt der Befehl npm create vite@latest mit dem Vite-Tooling das Svelte-Projekt. Dabei erhält das Projekt einen Namen zum Beispiel carbon-bsp, nach Auswahl von Svelte und JavaScript/TypeScript generiert Vite den Scaffolding-Code. Die für die Ausführung und den Compile/Build-Vorgang der Svelte-App benötigten npm-Pakete installiert der Befehl npm install.Um mit den Carbon Components in der Svelte-App zu programmieren, führt man eine Installation des npm-Pakets von Carbon Components Svelte durch: npm i -D carbon-components-svelte. Zum Arbeiten mit TypeScript in Svelte und VS Code benötigt man die offizielle Extension Svelte for VS Code aus dem Marketplace von Visual Studio.Die Dateien lib/Counter.svelte, assets/svelte.svg und app.css im Entwicklungsprojekt werden gelöscht. Ebenso entfernt man alle zugehörigen Referenzen von assets/svelte.svg, lib/Counter.svelte und alle CSS-Anweisungen im <style>-Bereich der App.svelte-Datei. Danach löscht man alle HTML-Anweisungen im <main>-Tag der App.svelte-Datei und ändert in der index.html-Datei die Zeichenkette beim <title>-Tag auf App mit IBM-Carbon Design.Als CSS-Datei kommt jetzt in der main.ts-Datei der Befehl import "carbon-components-svelte/css/all.css"; zum Einsatz. Bevor man eine der Carbon-Komponenten in der Svelte-App importieren kann, muss die all.css-Datei angewandt werden. Die Carbon Components-Library kennt sechs pre-compiled CSS-StyleSheets; davon sind zwei hell (white.css, g10.css) und drei schwarz (g80.css, g90.css, g100.css). Um dynamisch zur Laufzeit auf der Client-Seite das Theming selbst zu programmieren, führt man den obigen Import-Befehl mit der all.css-Datei durch. Das Theming lässt sich auch über das theme-Attribut einer HTML/Svelte-Seite über die Werte "white", "g10", "g80", "g90" oder "g100" direkt setzen. Elegant deklariert das $:-Label vor einer Quellcode-Zeile das Theming zur Laufzeit durch die Reaktivität von Svelte:
<span class="hljs-tag"><<span class="hljs-name">script</span>></span>
<span class="javascript"> <span class="hljs-keyword">let</span> theming = <span class="hljs-string">"white"</span>;</span>
<span class="javascript"> $: <span class="hljs-built_in">document</span>.documentElement.setAttribute(<span class="hljs-string">"theme"</span>, </span>
<span class="javascript"> theming);</span>
<span class="hljs-tag"></<span class="hljs-name">script</span>></span>
Vorausgesetzt ein Import der all.css-Datei hat stattgefunden, führt der Quellcode beim $:-Label automatisch ein Theming durch, sobald die Variable theming sich auf einen der fünf oben genannten Werte ändert. Neben der Einbindung der StyleSheets über die oben aufgeführte Import-Anweisung steht als Alternative das Laden von Styles über ein Content Delivery Network (CDN) wie unpkg zur Verfügung:
<span class="hljs-meta"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span></span>
<span class="hljs-tag"> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/carbon-components-svelte/</span></span>
<span class="hljs-tag"><span class="hljs-string"> css/white.css"</span></span>
<span class="hljs-tag"> /></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
Die Svelte-Community für Carbon Components stellt ein Portfolio an Komponenten und Werkzeuge für das Arbeiten mit IBMs Carbon Design System bereit; dieses gliedert sich in fünf Bestandteile, die sich alle in einem eigenständigen und unabhängig einsetzbaren GitHub-Repository befinden. Carbon Components Svelte befinden sich im GitHub https://github.com/carbon-design-system/carbon-components-svelte. Dabei handelt es sich um mehr als fünfzig User-Interface-Komponenten, die man im Component Index auf der Homepage des Carbon Design Systems über Namen durchsuchen kann. Eine gute Visualisierung der Komponenten bieten die für Angular, React, Vue oder Web Components implementierten Storybooks an (https://angular | react | vue |web-components|.carbondesignsystem.com/). Um diese Komponenten in einer Svelte-App zu verwenden, benötigt man eine Installation des npm-Pakets npm i -D carbon-components-svelte.
Das GitHub-Repository Carbon Icons Svelte
Mehr als 2.000 Icons enthält das GitHub-Repository Carbon Icons Svelte (https://github.com/carbon-design-system/carbon-icons-svelte). Dieses GitHub-Repository verweist auf einen Icon-Index, um die Icon-Symbole nach Namen zu durchsuchen. Nach einer Installation der Bibliothek als Entwicklungsabhängigkeit npm i -D carbon-icons-svelte stehen alle Icon-Symbole zum Programmieren bereit.Svelte Actions selten benutzt – obwohl sehr hilfreich
Eine Svelte Action kommt als Funktion zur Ausführung sobald das betroffene Element dem DOM hinzugefügt wird. Die Deklaration der zu einer Svelte Action gehörenden Funktion erfolgt als normale JavaScript/TypeScript-Funktion im <script>-Bereich der Svelte-Komponente. Für die Definition der Svelte Action greift man beim Element auf die use:-Direktive zurück – dazu verknüpft man dieses über use: mit der zugehörigen Funktion. Sobald das Element im DOM erscheint, führt Svelte die mit dem Element über use:-verbundene Funktion aus.
Das GitHub-Repository Carbon Pictograms Svelte (https://github.com/carbon-design-system/carbon-pictograms-svelte) bietet dem Entwickler mehr als 900 mit Carbon realisierte SVG-Piktogramme als Svelte-Komponenten an. Nach Installation von npm i -D carbon-pictograms-svelte in eine Svelte-App erhält der Programmierer Zugriff auf die Piktogramme. Das GitHub-Repository macht einen Pictogram Index zum Erkunden verfügbar.Das GitHub-Repository Carbon Charts Svelte (https://github.com/carbon-design-system/carbon-charts/) umfasst mehr als 20 mit d3 realisierte sehr mächtige Diagramme/Schaubilder, die man direkt mit Daten verknüpfen kann. Die Website https://carbon-charts-0x.netlify.app/svelte mit dem Storybook veranschaulicht diese Diagramme, deren Quellcode zeigt das Storybook in einer CodeSandbox an.
Der Svelte-PreprocessoroptimizeImports nimmt in einer Import-Anweisung die konkret gewünschte Carbon-Komponente auf und verbessert so wesentlich die Compile-Zeit während der Entwicklung(Bild 6)
Simon
Das GitHub-Repository Carbon Preprocess Svelte (https://github.com/carbon-design-system/carbon-preprocess-svelte) realisiert sechs spezielle Svelte-Preprocessors oder Plugins. Diese bearbeiten oder transformieren den Quellcode der Carbon-Komponenten in eine bestimmte Form, um ein bestimmtes Ziel zu erreichen (Bild 6). Nach Installation dieser Bibliothek (npm i -D carbon-preprocess-svelte) nimmt man noch den gewünschten Preprocessor/Plugin in die Konfigurationsdatei svelte.config.js auf, danach stehen dessen Dienstleistungen im Svelte-Projekt zur Verfügung.
Svelte-App mit Carbon Components Svelte programmieren
Leider gibt es derzeit für Svelte (im Unterschied zu Angular, React, Vue.js oder Web Components) noch kein Storybook mit den in Svelte implementierten Carbon Components. Für eine Visualisierung einer Carbon-Komponente klickt man auf der Homepage des Carbon Design Systems in der linken Navigationsleiste auf Components.Der dortige Eintrag Overview gibt einen Überblick zu den wichtigsten, häufig verwendeten Carbon-Komponenten. Um eine Komponente näher zu erkunden, genügt ein Klick auf deren Bezeichnung zum Beispiel Date picker. Es öffnet sich die zur Komponente gehörige Dokumentation, die in vier Registerreiter: Usage, Style, Code und Accessibility unterteilt ist. Scrollt man auf dieser Seite nach unten, erscheinen die Bereich Live demo und Formatting.Über Formatting beschreibt die Homepage das Aussehen und den Aufbau der Carbon-Komponente sowie ihre Arbeitsweise. Dazu erscheinen durchnummerierte Ziffern bei der Komponente mit darunter stehenden Beschreibungen. So werden eventuell vorhandene Formatierungen, Einstellungen für die Größe oder Vorgaben für die vorhandenen Attribute erläutert. Im Bereich Universal behaviors und Simple data input erklärt die Homepage aus Sicht des Endbenutzers das generelle Verhalten beim Arbeiten mit dieser Komponente. Gibt es zu einer Carbon-Komponente wichtige Varianten (zum Beispiel für Date picker: Single date picker oder Date range picker) so erscheinen diese in einem eigenständigen Bereich auf der Homepage.Die Homepage ermöglicht es, eine ausgewählte Carbon-Komponente im Bereich Live demo über die angebotenen Einstellungen mittels verschiedener Vorgaben zu betrachten. Es genügt, eine oder mehrere der angebotenen Vorgaben für eine Einstellung auszuwählen – das heißt zu verändern, so dass anschließend die Homepage die Komponente entsprechend visualisiert. Zudem passt die Homepage den unter dieser Visualisierung stehenden Quellcode der Carbon-Komponente anhand der vorgenommenen Einstellungen an. Die im Bereich Live demo über dem Quellcode angegebenen URLs öffnen eine CodeSandbox mit dem Quellcode oder die Storybook mit einer Realisierung für React, Angular, Vue oder Web Components. Den Quellcode für eine Carbon-Svelte-Komponente findet man auf der Website https://carbon-components-svelte.onrender.com/.Nach Auswahl der gewünschten Carbon-Svelte-Komponente findet man ganz rechts eine in zwei Bereiche aufgeteilte Navigationsleiste, die sich in Examples und Component API gliedert. Die URLs bei Examples visualisieren unterschiedliche Ausprägungen der ausgewählten Carbon-Komponente zusammen mit dem in Svelte programmierten Quellcode. Die URLs unterhalb des zweiten Bereichs Component API dokumentieren die bei der Carbon-Komponente vorhandenen Props, Typedefs, Slots und Events. Gibt es für einzelne Varianten einer Carbon-Komponente ein unterschiedliches API, so erreicht man diese direkt unterhalb des Paragraphen Component API und oberhalb des Paragraphen Props anhand der dortigen Gruppierung nach ihrem Svelte-Namen.Carbon-Komponente in einer Svelte-App wiederverwenden
Das Anwendungsbeispiel realisiert ein modales Fenster mit einem Eingabeformular und zwei Schaltflächen. Ein modales Fenster baut der Entwickler mit der Carbon-Komponente ComposedModal auf. Sie besteht in der Regel aus einem Header (ModalHeader), einem Body (ModalBody) und einem Footer (ModalFooter):
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ts"</span>></span>
<span class="javascript"><span class="hljs-keyword">import</span> {</span>
<span class="javascript"> ComposedModal,</span>
<span class="javascript"> ModalHeader,</span>
<span class="javascript"> ModalBody,</span>
<span class="javascript"> ModalFooter,</span>
<span class="javascript"> Form,</span>
<span class="javascript"> TextInput</span>
<span class="javascript"> } <span class="hljs-keyword">from</span> <span class="hljs-string">"carbon-components-svelte"</span>;</span>
<span class="javascript"> <span class="hljs-keyword">const</span> uebertrage = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {</span>
<span class="javascript"> alert(<span class="hljs-string">"Datenspeichern ausführen!"</span>);</span>
<span class="javascript"> };</span>
<span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ComposedModal</span> <span class="hljs-attr">open</span> <span class="hljs-attr">preventCloseOnClickOutside</span> <span class="hljs-attr">selectorPrimaryFocus</span>=<span class="hljs-string">"#benutzername"</span> <span class="hljs-attr">on:submit</span>=<span class="hljs-string">{uebertrage}</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ModalHeader</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Modales Dialogfenster"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Bitte Werte eingeben"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">ModalBody</span> <span class="hljs-attr">hasForm</span>></span>
<span class="hljs-tag"><<span class="hljs-name">Form</span>></span>
<span class="hljs-tag"><<span class="hljs-name">TextInput</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"benutzername"</span> <span class="hljs-attr">labelText</span>=<span class="hljs-string">"Benutzername"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Benutzername eingeben..."</span> /></span>
<span class="hljs-tag"></<span class="hljs-name">Form</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ModalBody</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ModalFooter</span> <span class="hljs-attr">primaryButtonText</span>=<span class="hljs-string">"Formular speichern"</span> <span class="hljs-attr">secondaryButtonText</span>=<span class="hljs-string">"Abbruch"</span> /></span>
<span class="hljs-tag"></<span class="hljs-name">ComposedModal</span>></span>
Der Header-Bereich umfasst einen Titel, ein optionales Label und einem X-Symbol, um das Fenster insgesamt zu schließen. Der Body nimmt Informationsbereiche mit Text und/oder weitere Eingabeelemente auf, um die mit dem Formular verbundenen Aufgaben zu erledigen. Der Footer-Bereich bietet die Ausführung der dem Fensterdialog zu realisierenden Funktionen zur Auswahl an. Dort befinden sich in der Regel verschiedene Schaltflächen.Bei der Deklaration des modalen Dialogfenster steht zu Beginn die Import-Anweisung der benötigten carbon-components-svelte. Über das Component API der Carbon Components Svelte-Website verwendet man für ComposedModal die Props: open, preventCloseOnClickOutside, selectorPrimaryFocus und den Dispatched event: on:submit= {uebertrage}>. Das Prop selectorPrimaryFocus bekommt als Vorgabe "#benutzername", so dass beim Öffnen der Komponente der zugehörige Selector benutzername den Input-Fokus erhält. Löst die Komponente den submit-Event aus, so kommt die Funktion uebertrage zur Ausführung. Dabei handelt es sich um eine parameterlose Arrow-Funktion, die ein Informationsfenster über alert ausgibt.Das Label von ModalHeader erhält den Text "Modales Dialogfenster" und den Titel "Bitte Werte eingeben". ModalFooter besteht aus den beiden Schaltflächen primaryButtonText= "Formular speichern" und secondaryButtonText="Abbruch". Die ModalBody-Komponente besteht aus einer Formular-Definition (hasForm), das eine Carbon-Komponente Form aufnimmt. Diese Form-Komponente enthält ein HTML-Tag <TextInput> als Eingabefeld mit dem Label-Text "Benutzername" und Vorgabewert "Benutzername eingeben..." (Bild 7). Den Vorgabewert überschreibt der Endbenutzer entsprechend mit den Eingabedaten. Klickt er auf die Schaltfläche Formular speichern, so führt das Dialogfenster den submit-Event uebertrage aus, der das Informationsfenster Datenspeichern ausführen! anzeigt.
Auf einem CSS-Framework basierte UI-Komponenten-Libraries für Svelte
Dem Anwender eines CSS-Frameworks stehen für die Programmierung mit Svelte zur Verfügung: Bootstrap, Bulma, Materialize CSS oder Tailwind CSS. Das meist verbreitete CSS-Frameworks ist sicherlich Bootstrap, gefolgt von Tailwind CSS und Materialize CSS mit nahezu gleicher Verbreitung. Die große Verbreitung von Bootstrap liegt an den seitens Twitter in das Open-Source-Projekt eingeflossenen Investitionen. Im Unterschied zu Bootstrap, das vordefinierte Klassen für seine User-Interface-Elemente bereitstellt – basiert Tailwind CSS auf dem Utility-First-Konzept. Anstatt User-Interface-Elemente selbst anzulegen, liefert Tailwind CSS sogenannte Utility-Klassen aus. Diese übernehmen die Gestaltung der in HTML/JavaScript implementierten User-Interface-Elemente über CSS-Eigenschaften. Für das auf dem Google Materialize Design ausgerichtete Materialize existiert derzeit mit Svelte Materialize DataTable nur eine Data-Table-Komponente.Bootstrap eignet sich für die Umsetzung von Responsive Design und besitzt eine Vielzahl an vorgefertigten Themes und UI-Elementen, die man direkt einsetzen kann. Aufgrund der logischen Strukturierung von Bootstrap lässt sich das CSS-Framework leicht verwenden und ist erweiterbar. Zudem verfügt Bootstrap über eine hervorragende Kompatibilität zu neuen als auch älteren Browsern. Um Bootstrap zusammen mit Svelte einzusetzen, greift man auf Sveltestrap oder MDBSvelte zurück.Sveltestrap unterstützt die neue Svelte Version 3 und die beiden Bootstrap-Versionen 4 und 5; MDBSvelte nur Bootstrap 4. Bei beiden Komponenten-Libraries entfällt das direkte Arbeiten mit Bootstrap, es muss lediglich das Stylesheet von Bootstrap eingebunden werden. Die Entwickler von Sveltestrap orientierten sich bei der Umsetzung an Reactstrap beziehungsweise MDBSvelte an mdb-react-ui-kit.Für den Einsatz von Tailwind CSS stehen die User-Interface-Libraries Flowbite Svelte, Notus Svelte und Smelte zur Verfügung. Alle drei Bibliotheken realisieren mittels den Utility-Classes von Tailwind CSS ihre User-Interface-Komponenten. Damit muss sich der Programmierer nicht mehr direkt mit den Utility-Classes von Tailwind CSS beschäftigen.Flowbite Svelte basiert auf Flowbite einer in reinem Vanilla-JavaScript implementierten Komponenten-Bibliothek. Die unter MIT-Lizenz stehende Notus Svelte-Library von Creative Tim greift auf das Tailwind Starter Kit vom selben Hersteller zurück. Für den Einsatz von Notus Svelte in der Programmierung lädt man von dessen GitHub-Repository das Zip-File herunter. Bei dieser Vorgehensweise entfällt das ansonsten notwendige Einrichten eines Accounts auf der Homepage des Herstellers.Komponenten für die Einbindung von Karten/Maps
Bestimmte Anwendungen benötigten für ihre Dienstleistungen die Integration von Karten/Maps. Bekannte derartige API-Dienste bieten Google und MapBox an. Generelle Voraussetzung für das Einbinden derartiger Karten-Dienste stellt ein sogenannter API-Key dar. Dieser API-Schlüssel bildet die Grundlage für ein Projekt, um auf Maps zugreifen zu können. Über diesen Key erfolgt eine Authentifizierung beim Dienst. Die Abrechnung der Kosten findet über den API-Key statt, diese bestimmt die Anzahl der Aufrufe. Für Google Maps und Google Places Autocomplete steht die Komponenten-Library Svelte Google Maps zur Verfügung. Alternativ lässt sich der Kartendienst MapBox über die Svelte MapBox-Library nutzen.
Smelte realisiert die Material Design-Spezifikation von Google mit Tailwind CSS für Svelte-Komponenten. Die Programmierung mit Smelte benötigt eine Installation des npm-Pakets smelte – darin ist Tailwind CSS enthalten. Somit erhält der Programmierer auch Zugriff auf die tailwind.config.js-Datei. Zusätzlich lassen sich die Tailwind-Utilities in der eigenen .css-Datei anwenden. In der Rollup-Konfigurationsdatei muss das Rollup-Plugin von Smelte aufgenommen werden. Eventuell gewünschte Material Icons müssen ebenfalls über <link href= />-Tag zugänglich gemacht werden.Damit Treeshaking für JavaScript korrekt funktioniert, sollte der Programmierer darauf achten, alle verwendeten Komponenten direkt über Smelte zu importieren: import <Component> from "smelte/src/components/ <Component>".Für die Performance einer Web-App (SPA) nimmt ihre Startdauer bereits eine wichtige Rolle ein – so wirken sich zu langsame Ladezeiten gleich negativ auf die Usability aus. Generell muss ein optimales Verhältnis zwischen den Vorgängen Laden zum Startup-Zeitpunkt und dem Dynamischen Nachladen während der Programmausführung gefunden werden. Dazu tragen schlanke, leichtgewichtige und minimalistische Libraries häufig besser aufgrund ihrer Konzeption bei. Handelt es sich um Komponenten, die mehrfach innerhalb einer Web-App zum Einsatz kommen, so hilft ihre Wiederverwendung ebenfalls diesem Bestreben, die Performance zu verbessern.Derartige Libraries eignen sich auch für die Senkung der Entwicklungskosten, da sich aufgrund der kleineren Lernkurve Programmierer wesentlich schneller einarbeiten.
Minimalistische UI-Komponenten für Svelte-Entwicklung
Schlanke UI-Libraries mit Komponenten für Svelte stellen: AgnosticUI, Attractions, Svelteit und SvelteUI dar. Dies zeigt eine Analyse der Größe und Ladezeiten dieser UI-Komponenten-Libraries zum Beispiel über die Webseite https://bundlephobia.com/ oder https://packagephobia.com. Dazu benötigt man die zugehörigen Package-Namen der Libraries (in obiger Reihenfolge): agnostic-svelte, attractions, @colorfuldots/svelteit und @svelteuidev/core. Nach Eingabe eines der Package-Namen bestimmt die Webseite https://bundlephobia.com/ für Bundle Size und Download Time jeweils obere und untere Grenzwerte. So liegen für Svelteit die Bundle Size zwischen circa 27 und 133 KByte und die Download Time zwischen 31 Millisekunden und 0,54 Sekunden. Die Zahlen variieren je nachdem, welche Version der Bundle-Analyzer konkret anzieht (Bild 8).
Bundle Size und Download Timeeiner Komponenten-Library beeinflussen bereits über die Startup-Zeit die Performance einer Web-App(Bild 8)
Simon
Die Komponenten von AgnosticUI lassen sich im Unterschied zu den drei anderen UI-Libraries in verschiedenen Frameworks (Angular, React, Svelte und Vue.js) verwenden. Allerdings muss der Entwickler (Rob Levin) für jedes neue Framework ein eigenes Package bereitstellen – weshalb der Autor trotzdem von Framework-Unabhängigkeit spricht, bleibt unklar. AgnosticUI ist in reinem HTML und CSS implementiert, daher lassen sich die Komponenten in jedes Framework entsprechend integrieren. Die ursprünglichen Komponenten befinden sich im Package agnostic-css – das spezifische für Svelte benötigte Package lautet agnostic-svelte. Die Realisierung von Attractions enthält das Package attractions, das zusätzlich noch eine Installation von svelte-preprocess, sass und postcss benötigt. Wie üblich muss svelte-preprocess noch in der Konfigurationsdatei des Module-Bundlers zum Beispiel rollup.config.js eingetragen werden.Die Komponenten-Bibliothek Svelteit stammt von Colorful Dots und befindet sich im npm-Package @colorfuldots/svelteit. Seitens der enthaltenen UI-Komponenten enthält Svelteit nur eine kleine Anzahl. Ärgerlich ist es, dass der Programmierer die vorhandenen UI-Komponenten nicht mittels Styles gestalten kann. Die Entwickler von Colorful Dots wollen dieses doch größere Manko zwar noch beseitigen, allerdings hat sich in den letzten zwei Jahren diesbezüglich nichts verbessert. Insofern kommt der Einsatz von Svelteit als Komponenten-Bibliothek in einem aktuellen Projekt nicht in Frage.Im Unterschied zu den anderen UI-Libraries besteht SvelteUI aus mehreren Packages, die man bedarfsorientiert in die Web-App einbindet. Wobei die zentralen UI-Komponenten sich im Package @svelteuidev/core befinden. Zusätzlich zu den drei anderen UI-Libraries besitzt SvelteUI einige besondere Features: Alle Komponenten erfüllen den WAI-ARIA-Standard für Menschen mit Behinderungen. Eine Reihe von Svelte Actions und weitere Utilities enthält das Package @svelteuidev/composables. Ferner sind zwei Komponenten für Übergänge und Animationen im Package @svelteui/motion zu finden. Für Highlighting von Schriften mittels PrismJS steht @svelteuidev/prism zur Verfügung. Die Entwicklung von Komponenten für Datumstypen im Paket @svelteuidev/dates hat erst begonnen – es enthält derzeit nur eine Komponente Month.
Projekt für Attractions einrichten und UI-Komponenten wiederverwenden
Über die Homepage von Attractions erhält man nähere Anweisungen für die Einrichtung eines Entwicklungsprojekts mit verschiedenen Package-Managern (npm, Yarn, pnpm), Bundlern (Rollup, Webpack) und den Frameworks (Svelte, Sapper/SvelteKit, Other). Da Attractions das Package svelte-feather-icons für Icon-Symbole verwendet, installiert man dieses, um mit Icons arbeiten zu können. Auch Hilfestellungen für das Theming mit Sass findet man auf der Attractions-Homepage. Hervorzuheben ist der Komponenten-Browser, dieser befindet sich in der linken Navigationsleiste unter dem Punkt Components. Der Komponenten-Browser verdeutlicht den Einsatz und die Programmierung der über 50 enthaltenen Attractions-Komponenten. Nach Auswahl einer Komponente erscheinen rechts konkrete visuelle Ausprägungen der jeweiligen Komponente.Ein Mausklick auf eine derartige visuelle Darstellung zeigt rechts Quellcode-Beispiele für die Einbindung der Komponente in eine Svelte-App. Direkt darunter erscheinen die zur Komponente gehörenden Properties (Style, Functional, Class), Events, Slots und SCSS-Variablen. Zusätzlich besitzt Attractions in der linken Navigationsleiste auf der Homepage den Eintrag Utilities; dieser umfasst eine Sammlung von Helper-Funktionen für die Programmierung ganz spezieller Aufgabenstellungen. Attractions unterstützt Web-Components, die man über dessen Custom Elements-API einsetzen kann. Zugehörige Erläuterungen für den Einsatz dieses APIs enthält in der linken Navigationsleiste der Homepage der Eintrag Custom Elements.
Ein Datei-Auswahl-Dialogrealisiert mit den User-Interface-Komponenten von Attractions(Bild 9)
Simon
Die beispielhafte Svelte-App demonstriert den Einsatz von Attractions-Komponenten anhand eines Datei-Auswahl-Dialogs (Bild 9): Der Endbenutzer wählt eine oder mehrere Textdateien aus – danach erscheint eine Informationsmeldung "Neue Textdatei hinzugefügt". Klickt der Endbenutzer nach einer Dateiauswahl auf das neben dem Dateinamen stehende Papierkorb-Icon, so entfernt die Svelte-App die Datei aus der Dateiliste und es erscheint die Informationsmeldung "Textdatei entfernt". Die Realisierung der Dateiliste erfolgt über die beiden Attractions-Komponenten SnackbarContainer und FileDropzone. Dabei dient SnackbarContainer als Behälter für die FileDropzone:
...
<h1>Dateiauswahl</h1>
<Subhead>Bitte Textdateien auswählen</Subhead>
<SnackbarContainer let:showSnackbar position={SnackbarPositions.BOTTOM_RIGHT}>
<FileDropzone
bind:files
accept=".txt"
max={20}
on:change={(ereignis) => handleChange(ereignis)}>
</FileDropzone>
</SnackbarContainer>
<div class="submit-btn">
<Button
disabled={!files.length}
filled
on:click={() => {
moveNext();
}}>Beenden</Button>
</div>
...
Die Informationsmeldungen führt eine Komponente Information.svelte mittels der Attractions-Komponente Dialog durch:
<!-- Information.svelte -->
...
<div class="info">
<Dialog
danger={eingefuegerText == "-"}
constrainWidth
title={eingefuegerText == "+" ? "Neue Textdatei hinzugefügt." : "Textdatei entfernt."}
closeCallback={() => eingefuegerText = "" }
>
<div slot="title-icon">
{#if eingefuegerText == "+"}
<FilePlusIcon size="30" />
{:else}
<FileMinusIcon size="30" />
{/if}
</div>
</Dialog>
</div>
...
Die Entwickler von SvelteUI zielen darauf ab, eine umfassende Komponenten-Bibliothek für alle gängigen Aufgabenstellungen bereitzustellen. Diese Absicht verdeutlicht bereits die vorhandene Aufteilung der Komponenten in verschiedene Packages. Um einen möglichst großen Benutzerkreis zu erreichen, unterstützt SvelteUI neben reinem Svelte, auch das -Framework SvelteKit und den Static-Site-Generator Elder.js. Da TypeScript in konkreten Projekten häufiger als reines JavaScript vorkommt, haben die Entwickler gleich die zugehörigen Types definiert. Die Einrichtung eines Projekts erläutert die SvelteUI-Homepage: Nach Auswahl des gewünschten Projekttyps (Svelte, SvelteKit, Elder.js) und den benötigten Packages zeigt die Homepage eine Vorgehensweise an, um das Projekt einzurichten.
MaskInput – für individuelle Eingabeformate
Eine Formatvorgabe für Kreditkarten, Telefonnummer, Datumsangaben oder IBANs erleichtert dem Endbenutzer deren Eingabe. Die Svelte-Komponente MaskInput des npm-Package svelte-input-mask (https://github.com/xnimorz/svelte-input-mask) unterstützt die Programmierung vielfältiger Formatvorgaben. Dabei unterstützt MaskInput die Definition eigener Event-Listener, um auf ganz individuelle Eingabewerte zu reagieren.
Der erste Schritt (Initialize Application) erzeugt das benötigte Rahmenprogramm (Boilerplate) und legt die Verzeichnisstruktur (Scaffold) an. Der zweite Schritt (Choose your packages) installiert die ausgewählten Packages in das neu angelegte Projekt. Die für beide Schritte notwendigen Befehle lassen sich mittels der COPY-Schaltfläche direkt in das Clipboard übernehmen und mittels Paste im Terminalfenster ausführen. Als zentrales Wurzelelement benötigt jede SvelteUI-App eine SvelteUIProvider-Komponente; in diese bettet man die eigene App <MyApp /> als Komponente ein. SvelteUIProvider nutzt für das Theming der App das Style-Sheet Normalize.css und fügt dem body-Element einige globale Styles hinzu. Um die mit Normalize.css gesetzten globalen Styles einzuschalten, passt man die generierte App.svelte-Datei mit der Wurzel-Komponente wie folgt an:
<script lang="ts">
import { SvelteUIProvider } from '@svelteuidev/core';
import MyApp from './MyApp.svelte';
</script>
<SvelteUIProvider withNormalizeCSS withGlobalStyles themeObserver={isDark ? 'dark' : 'light'} >
<!-- Jetzt die eigene App einbinden -->
<MyApp />
</SvelteUIProvider>
Grundsätzlich arbeitet man mit SvelteUIProvider wie mit jeder anderen SvelteUI-Komponente – ihr Schwerpunkt liegt aber bei der Einstellung der globalen Styles für die App. So startet themeObserver die Überwachung von Änderungen im Theming auf App-Ebene. Das eigentliche Theming aller SvelteUI-Komponenten erfolgt mittels der CSS-in-JS-Bibliothek Stitches, da alle SvelteUI-Komponenten auf Stitches basieren. Dabei empfehlen die Entwickler von SvelteUI, die Funktion createStyles zu verwenden. Recht elegant lässt sich Server-Side-Rendering einrichten, die bei anderen Bibliotheken notwendige Konfigurationsarbeiten entfallen komplett. Bei SvelteUI genügt es, das ssr-Prop beim SvelteUIProvider hinzuzufügen: <SvelteUIProvider withNormalizeCSS withGlobalStyles ssr>.Um Informationen für die Suchmaschinenoptimierung (SEO) zu verwalten, haben die SvelteUI-Entwickler die Komponente Seo implementiert. Diese Komponente erlaubt es, die SEO-Informationen gezielt für eine Webseite oder Web/Mobile-App zu setzen. Dazu besitzt die Seo-Komponente eine Reihe von Props, diese reichen die gewünschten Informationen an eine Suchmaschine weiter. Im <script>-Bereich importiert man die Seo-Komponente: import { Seo } from '@svelteuidev/core'; - anschließend steht eine Instanz der Komponente zur Verfügung. Um beispielsweise den Meta-Title einer Webseite vorzugeben, nutzt man den Prop titel. Auf Bedarf lässt sich die standardmäßige Indexierung der Suchmaschine über den Prop noindex ausschalten:
<script>
import { Seo } from '@svelteuidev/core';
</script>
<Seo
title='Alte Produkte'
noindex={true}
/>
Die Core-Komponenten von SvelteUI unterteilen sich in verschiedene Bereiche oder Gruppen: Layout, Inputs & Actions, Navigation, Data Display, Feedback, Overlay, Typography und Miscellaneous. Das übliche Layout einer Webseite besteht in der Regel aus einem Header, einer linken Navigationsleiste, einem Content und einem Footer (Bild 10). Diese Gestaltung der Webseite lässt sich mit der SvelteUI-Komponente AppShell realisieren. Dabei umhüllt die AppShell ihren Inhalt selbständig in ein <main>-Tag.
Eine mit der AppShell-Komponentevon SvelteUI gestaltete Webseite(Bild 10)
Simon
Daher entfällt das <main>-Tag innerhalb der AppShell. Alle Komponenten für den Aufbau und zur Gestaltung der AppShell befinden sich im Package @svelteuidev/core in der jeweiligen .svelte-Datei. So enthält zum Beispiel die Datei Navbar.svelte die Deklaration der gleichnamigen Komponente Navbar. Öffnet man diese Navbar.svelte-Datei in einer Entwicklungsumgebung erhält man Einblick zu allen vorhandenen Props.Die Deklaration der AppShell in SvelteUI enthält die Datei AppShell.svelte; das zugehörige Style findet man in der AppShell.styles.js-Datei. Um eine Ausprägung der AppShell in einer Demo-App für SvelteUI zu verwenden, importiert man zu Beginn die benötigten Komponenten:
<script lang="ts">
import { AppShell, Navbar, Header, Footer, Title } from '@svelteuidev/core';
import { lockscroll } from '@svelteuidev/composables';
import HeadContent from './lib/HeadContent.svelte';
import NavContent from './lib/NavContent.svelte';
import FooterContent from './lib/FooterContent.svelte'
let isDark = false;
let opened = false;
let scrollLocked = true;
function toggleOpened() {
opened = false;
}
</script>
Es empfiehlt sich, den seitens der SvelteUI-Komponenten anzuzeigenden Inhalt in eigenständige .svelte-Dateien auszulagern. Beispielsweise speichert man den Inhalt der Navbar-Komponente in einer .svelte-Datei und deklariert dort die zugehörige Komponente NavContent.Als weitere Anforderung soll ein Scrolling im Fenster seitens des Endbenutzers unterbunden werden. Dazu nutzt man die Svelte Action use-lock-scroll aus dem Package @svelteuidev/composables. Dies macht einen weiteren Import erforderlich: import { lockscroll } from '@svelteuidev/composables'; – zum Einsatz kommt die Svelte Action als use-Prop. Die vorhandenen Variablen isDark, opened, scrollLocked und die Funktion toggleOpened() steuern die anzuzeigenden AppShell-Komponenten. Deren Deklaration erfolgt zusammen mit der AppShell-Komponente:
<AppShell
override={{
main: {
minHeight: 'calc(100vh - 60px)'
},
'@md': { pl: 300, pt: 60 },
pt: 60
}}
use={[[lockscroll, scrollLocked]]}
>
<Navbar
slot="navbar"
fixed
hidden={!opened}
width={{ base: 300 }}
position={{ top: 60, left: 0 }}
>
<NavContent toggleOpen={toggleOpened} />
</Navbar>
<Header slot="header" height={60} override={{ p: '$mdPX', pt: 12 }} fixed>
<HeadContent {isDark} {opened} toggleOpen={() => {opened = !opened}} />
</Header>
<Title override={{ fontSize: '15px' }}>
Hier folgt der zugehörige Text zur Webseite...
</Title>
<Footer slot="footer"
height={60}
fixed={true}
>
<FooterContent />
</Footer>
</AppShell>
So deklariert man das override-Prop über deren CSS-Attribute und das use-Prop über ein ActionArray. Entsprechend folgen die Definitionen der Komponenten Navbar, Header und Footer mit passenden Vorgaben für ihre Props. Die genannten Komponenten bilden die linke Navigationsleiste sowie die Kopf- und Fußzeile der Webseite ab. Um einen Text im Main-Content der Webseite anzuzeigen, kommt eine Titel-Komponente von SvelteUI zum Einsatz. Diese Komponente ermöglicht ein Title-Styling über ihre Props und die Verwendung von HTML-Tags. Damit erlaubt die Titel-Komponente neben dem Einsatz von SvelteUI-Komponenten auch die direkte Einbindung von HTML-Elementen.Mit der Verbreitung von Web/Mobile-Apps nehmen vor allem die Anforderungen für die Modernisierung ihrer Benutzeroberfläche zu. Endbenutzer verlangen immer häufiger GUIs, welche bereits während der Benutzung einer App den nächsten beabsichtigen Arbeitsschritt verdeutlichen. Dazu benötigt man Benutzeroberflächen, die schon bei der Positionierung des Mauszeigers auf ein Oberflächen-Element entsprechend reagieren. Zu den bekanntesten zählen sicherlich Tooltips, Popovers und Dropdown; die solange im GUI unsichtbar bleiben, bis ein Endbenutzer sich ihnen annähert.Solch interaktive Elemente im GUI lassen sich zwar mit den Mitteln von Svelte realisieren – allerdings summiert sich der Aufwand für deren Programmierung mit ihrer Anzahl auf. Insofern empfiehlt sich der Einsatz spezieller Komponenten-Libraries mit solchen schwebenden oder fließenden Elementen, die ein Programmierer lediglich an die individuellen Anforderungen anpassen muss. Als Low-level Toolkit für die Realisierung derartiger GUI-Elemente beginnt sich Floating UI zunehmend zu etablieren. Einige der am Markt verfügbaren Software-Komponenten nutzen Floating UI (Popper) als Ausgangsbasis. Um die Arbeit mit schwebenden/fließenden Elementen in der Svelte-Entwicklung zu erleichtern, findet man auf dem Markt die folgenden Bibliotheken:In vielen Anwendungen trifft man als Entwickler auf Kalenderdaten, wobei seitens der Programmierung deren interaktive Erfassung oder Änderung sich am aufwendigsten gestaltet. Für die JavaScript-Welt stehen eine ganze Reihe kommerzieller Produkte als auch welche auf Open-Source-Basis zur Verfügung. Selbst die HTML5-Spezifikaiton kennt ein eigenständiges, direkt einsetzbares Calender Control.Ein Svelte-Programmierer wünscht sich in der Regel allerdings eine Komponente, die er gemäß den Svelte-Konventionen nutzen kann. Für diese Vorgehensweise findet man im Web zahlreiche npm-Pakete.
