Seit geraumer Zeit verfolge ich den Frontend-First-Ansatz, da ich in meinen Kundenprojekten gemerkt habe, dass sich die Kommunikation und insbesondere das Verständnis der Projektziele wesentlich verbessert, wenn man mit den Kunden von Anfang an die Darstellung und das Verhalten des Frontends bespricht. Die Kunden fühlen sich in dieser Phase oft mit dem Projekt tief verbunden, da die Idee in ihren Köpfen scheinbar auf magische Weise in kürzester Zeit zum Leben erweckt wird. Zuweilen läuft man sogar die Gefahr, dass die Kunden überzeugt sind, alles sei schon umgesetzt.

Oft wird hier mit Design- und Wireframe-Tools wie Figma oder Adobe XD gearbeitet, und falls die Interaktionsfähigkeit nicht ausreicht, wird ein erster Prototyp mit reiner Frontend-Technologie aufgebaut.

Hinweis: Für diesen Blogbeitrag werden Angular-, HTML- und CSS-Grundkenntnisse benötigt.

In diesem Tutorial möchte ich einen Mittelweg vorstellen, in dem das Layout nahezu gleich schnell wie in Figma positioniert werden kann und man trotzdem die volle Kontrolle für die Interaktionsfähigkeit behält. Zusätzlich handelt es sich um ein gewöhnliches Angular-Projekt, welches bis auf das Layout für die echte Umsetzung wiederverwendet werden kann. Mit etwas mehr Aufwand sollte es sogar möglich sein, die Interaktionsfähigkeit in Echtzeit mit den Kunden aufzubauen und das Layout auch bei der Umsetzung zu behalten.

Ich nenne diese Idee “Protolayout” und möchte im Folgenden die wesentlichen Bestandteile darstellen:

  • Online Code-Editor: In einem Online-Code-Editor wie etwa Stackblitz kann schnell eine Änderung für Andere sichtbar gemacht werden und ist für den Frontend-First-Ansatz wie geschaffen. Hier können auch beliebige Libraries eingebunden und Komponenten wie gewohnt erstellt werden. Die Positionierung bzw. das Layout wird im nächsten Punkt beschrieben.

Frontend-First Abbildung: Online Code-Editor

  • Interaktive Layout-Komponenten: Im Grunde handelt es sich um einen einfachen WYSIWYG-Layout-Editor, der es ermöglicht, Komponenten interaktiv zu layouten. Es kann damit für jede Komponente die Position und Größe per Drag-and-Drop festgelegt werden. Für die Speicherung der Layout-Informationen wird zum einen der Initial-Wert im Code verwendet und zum anderen werden gespeicherte Layout-Informationen geladen. In diesem Beitrag werde ich auf die wichtigen Implementierungsdetails eingehen.
Frontend-First Abbildung: Online-Beispiel (Edit-Modus: Shift + Enter)

Online-Beispiel (Edit-Modus: Shift + Enter)

Ein typischer Ablauf mit Protolayout würde dann wie folgt aussehen:

  1. Der Kunde beschreibt die grafischen Komponenten der Seite, beispielhafte Daten und die benötigten Interaktionen.
  2. Die Komponenten werden in Stackblitz innerhalb des Protolayouts eingetragen.
  3. Die Komponenten werden interaktiv gelayoutet und die Interaktion sowie die Daten im Code hinzugefügt.
  4. Der Kunde kann nun verschiedene Layout-Varianten durchspielen und die Interaktionen testen.

Ich sehe den Einsatzbereich von Protolayout besonders in folgenden Szenarien:

  • Es liegt ein Design vor, aber man möchte im agilen Sprint/Scrum Sprint schneller zu einem „ersten Eindruck“ der Applikation kommen. Data Binding und andere Logiken können dann implementiert werden und bleiben erhalten. Das Protolayout hilft bei der zügigen Umsetzung.
  • Durch das interaktive Skalieren der Komponente sieht man schnell, in welchen Situationen die Komponente nicht responsive ist. Das habe ich z.B. sehr schnell beim Table meines Beispiels gesehen und nachgebessert. Damit funktioniert die Komponente auch für andere Abmessungen zuverlässig.
  • Kunden, die kein Design beauftragt haben (weil ein geringes Budget bzw. ein geringes Interesse besteht) bekommen kostengünstig einen Layout-Vorschlag.

Verwendung von Protolayout

Komponenten, die im Layout bearbeitet werden sollen, werden wie folgt eingebunden.

HTML (app.component.html)

Jedes Layout besitzt eine eindeutige ID für die Speicherung der Layoutdaten. Für jede Komponente wird ein ‘app-proto-layout-child’ erzeugt. Dort werden die Initialen Layoutdaten hinterlegt: ‘x’, ‘y’, ‘width’, height’. Falls ‘width’ und ‘height’ nicht gesetzt sind, wird die Default-Größe der Komponente verwendet. Die Style-Angabe ‘style=“flex: 1 1 auto;“’ wird verwendet, damit der Button auch den zur Verfügung stehenden Platz ausfüllt.

Überblick

Frontend-First Abbildung: Überblick

Das Protolayout besteht aus einem Layout-Container ‘proto-layout’ und Child-Layout-Komponenten ‘proto-layout-child’, welche die darzustellenden Komponenten enthalten. Daneben sorgt der ‘proto-layout-service’ dafür, dass Layout-Informationen geladen und gespeichert werden.

Darstellung der Protolayout-Komponenten

Der Layoutcontainer wird mit ‘ng-content’ aufgebaut.

HTML (proto-layout.component.html)

CSS

Damit wird eine absolute Positionierung gestartet. Die Child-Komponenten fügen sich nun in den Container ein.

HTML (proto-layout-child.component.html)

CSS

Hier bewirkt ‘position:absolute’, dass die Komponente bezüglich dem Protolayout-Container absolut positioniert wird. Um die Komponente möglichst einfach innerhalb des definierten Raums auszurichten, wurde ein Flex-Layout gewählt.

Edit-Mode und Grid anzeigen

Um das Layout zu ändern, muss man zuerst in den Editiermodus gelangen. Das ist hier mit der Tastenkombination Shift + Enter umgesetzt. Im Editiermodus wird ein Gitter angezeigt. Alle Komponenten sollen genau auf den Gitterpunkten liegen, damit man bei der Drag-and-Drop-Positionierung nicht pixelgenau arbeiten muss.

HTML (proto-layout.component.html)

CSS

Das Gitter wird in CSS mit einem sich wiederholenden Gradienten in zwei Richtungen erzeugt. Dabei ist das Gitter 1px groß und der restliche Platz, der in ‘background-size’ beschrieben ist, wird transparent angezeigt.

Im Editmode müssen aber auch alle Layout-Komponenten die Darstellung und das Verhalten ändern. Zum einen ist die Komponente mit Drag-and-Drop verschiebbar und zum anderen kann die Größe der Komponente am rechten unteren Rand an einem kleinen grauen Rechteck per Drag-and-Drop geändert werden.

Layout-Children einbinden

Referenz zum Layout-Container (parent)

Nach der Initialisierung des Layoutcontainers werden alle Layout-Komponenten (children) über die Daten des Layout-Containers informiert. Die Layout-Komponente lädt die Positions-Informationen für die Darstellung.

Layout-Container

Layout-Komponente (children)

Layout-Komponente an das Gitter ausrichten

Bei jeder Veränderung von ‘x’, ‘y’, ‘width’ oder ‘height’ der Layout-Komponente wird folgende Methode aufgerufen, welche die Komponente am Gitter “einschnappen” lässt.

Bei ‘x’ und ‘y’ werden die Werte auf Vielfache von ‘gridSize’ gekürzt, und der Wert ist größer 0.

Bei ‘width’ und ‘height’ wird ebenso gekürzt, und die Werte müssen größer als die ‘gridSize’ sein.

Drag-and-Drop (DnD) für die Positionierung

Ich habe hier bewusst auf DnD-Libraries verzichtet und mich für die direkte Verwendung von DnD in HTML und JavaScript / TypeScript entschieden.

HTML (proto-layout-child.component.html)

Mit ‘draggable’ wird die Komponente zu einer DnD-Komponente. Die Events können mit ‘dragStart’ und ‘dragEnd’ eingebunden werden.

CSS

TypeScript

Bei ‘dragStart’ wird das ‘dataTransfer’-Objekt konfiguriert. Es wird auch ein Drag-Bild gesetzt, da ansonsten unschöne Drag-Fragmenten zu sehen sind. Das Drag-Bild kann ein beliebiges DOM-Element sein. Um die Verschiebung korrekt zu berechnen, wird bei ‘dragStart’ die Startposition gespeichert. In ‘dragEnd’ wird die ‘x’ und ‘y’ Variable geändert und in das Grid eingepasst.

Protolayout-Service

Die Speicherung der Layouts kann auf verschiedene Weisen realisiert werden. In diesem Beispiel werden die Layouts einfach im Localstorage als ein großes serialisiertes JSON gespeichert und geladen. Damit sind die Layouts nach einem Refresh noch vorhanden. Soll das Layout auch bei anderen Clients zu sehen sein, muss eine andere Persistenz-Lösung verwendet werden.

Ausblick für eine Transformation zu einem responsiven Layout

Die Verwendung des ‘absoluten Layout’ bedeutet leider auch, dass das Layout nur für Prototyping genutzt werden kann. Für ein flexibleres Layout bestehen im Grunde zwei Möglichkeiten.

  1. Transformation der absoluten Positionen in ein ‘flexibleres Layout’
  2. Layout-Editiermodus unterstützt verschiedene responsive Layouts

Im Folgenden möchte ich noch einen Ausblick auf den ersten Punkt geben.

Online Beispiel

Editiermodus mit hervorgehobenen Gap-Spalten

Editiermodus mit hervorgehobenen Gap-Spalten

Layout Ergebnis

Layout Ergebnis

In diesem Beispiel wird abhängig von den Koordinaten ein Grid-Layout erzeugt.

Umsetzung

Zuerst wird vom absoluten zu einem Grid-Layout gewechselt.

CSS (proto-layout.component.css)

In der Layout-Komponente müssen nun direkt die CSS-Grid-Items verwendet werden. Es darf also keine Zwischenhierarchie geben, deswegen wurde auf ‘ng-template’ und ‘ng-container’ umgestellt.

HTML (proto-layout-child.component.html)

Die Grid-Properties werden per HostBinding gebunden und gesetzt.

Dabei werden die Gridlayout-Eigenschaften anhand der Gitterpunkte gesetzt.

Die Beispielimplementierung ist sicher noch nicht vollständig, aber sie zeigt einen Weg auf, in dem ein Layout verwendet wird, das mit wesentlich höherer Dynamik und Flexibilität umgehen kann – mit allen Vor- und allen Nachteilen.

Frontend-First – Fazit

Frontend-First-Ansätze sind für mich ein bedeutender Schritt, um besser und enger mit dem Kunden zusammenzuarbeiten. Die Designarbeit mit Figma oder Adobe XD ist für Projekte mit hohen Designansprüchen unumgänglich. Trotzdem sind Prototypen und Klickdummies relativ aufwändig. Besonders, wenn es um komplexere User-Interaktionen geht, ist entweder die Designumsetzung unvollständig oder sehr mühsam. Auch kann die verwendete UI-Bibliothek vom Design abweichen und zu teuren UI-Änderungen ausarten. Gerade hier sehe ich einen großen Mehrwert darin, mit Stackblitz eine erste Version zu bauen, in der große Teile wiederverwendet werden können. Mit dem Ansatz von Protolayout sind grobe Layouts der Applikation schnell umsetzbar, und man erhält in kürzerer Zeit eine vorzeigbare Demo-Version.

Der Protolayout-Ansatz kann auf verschiedene Weisen ausgebaut werden und für den einen oder anderen Entwickler von Interesse sein. Besonders wenn Protolayout auch in der Anwendung genutzt werden kann und den Responsive- und Design-Ansprüchen genügt, kann es eine zeitsparende Alternative zu traditionellen Design-Vorlagen sein.

Eventuell kommt Gitpod als eine gute Alternative zu Stackblitz in Frage, da dort direkt mit dem Repository weitergearbeitet werden kann. Allerdings sind dort die Kosten zu beachten, und ich persönlich habe es noch nicht weiterverfolgt.

Stefan Fenn

One thought on “Frontend-First: Grundlayouts mit interaktiven Komponenten schnell umsetzen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Die von Ihnen hier erhobenen Daten werden von der Host Europe GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.hosteurope.de/AGB/Datenschutzerklaerung/