Front-End Entwicklung: der Client einer Webanwendung

Das Frontend ist der 'vordere' Teil einer Website oder Webanwendung. Clientseitige Entwicklung besteht grob gesehen aus drei Teilen: Planung der UX (User Experience) legt fest, wie der User durch die Anwendung geführt wird. Das UI (User Interface) ist die grafische Benutzeroberfläche, mit der der User interagiert, um den dritten Teil, die clientseitige Programmlogik, auszuführen.

UX: User Experience

'User Experience' meint die Erfahrung (=Experience), die der User macht, wenn er mit einer Website oder Web-App interagiert. UX-Planung ist ein wichtiger Teil der Frontend-Entwicklung. Sie antizipiert die Wege, die der User durch das Projekt geht. Ausgangspunkt beim UX-Design ist der Zweck der Website/Webapp. Wozu ist das digitale Produkt da? Soll der User etwas kaufen? Ist es eine digitale Zeitung, wo der User lesen und kommentieren soll? Ist es eine Anwendung für Fachleute, die mit komplexen Dateninputs und -outputs umgehen muss? Jede Anwendungsart muss spezielle Kriterien erfüllen, um eine positive User Experience sicher zu stellen.

UX-Design beschreibt die Anwendung als ein Konzept. Man plant die Wege, die sie dem User bietet, und wie der User diese Wege durch Interaktion beschreiten kann. Unter anderem sucht man Antworten auf folgende Fragen: Wie wird der User wahrscheinlich mit der Anwendung umgehen und welche Funktionen erwartet er? Wie kann er möglichst schnell mit der Anwendung vertraut werden? Wie kann die Lernkurve möglichst klein gehalten werden, damit der Nutzer sich intuitiv zurecht findet?

Das Ziel des UX-Konzeptes ist es, dem User ein Produkt zu bieten, das effektiv arbeitet und sehr leicht zu bedienen ist. Der User soll gerne mit der Anwendung interagieren, und den Eindruck gewinnen, diese sei genau auf ihn zugeschnitten. Der Frontend-Entwickler muss verstehen, zu welchem Problem der User eine Lösung sucht, und wie er dabei wahrscheinlich vorgehen wird, um die Lösung so schnell und einfach wie möglich zu bekommen.

Der Frontend-Entwickler muss die anvisierte Zielgruppe berücksichtigen, um die bestmögliche UX für die Webanwendung zu planen. Man muss die Anwendung aus dem Blickwinkel der Zielgruppe verstehen. Verschiedene Zielgruppen haben unterschiedliche Erwartungen. Eine öffentliche Webplattform muss anders geplant werden als etwa eine Intranet-Anwendung für das eigene Unternehmen. Die Planung der UX muss bedenken, wie der User die Plattform betritt und welche Wege er wahrscheinlich innerhalb der Anwendung einschlagen wird. Zuerst muss klar sein, was der Anbieter einer Webanwendung erreichen will, dann plant man die bestmögliche Architektur für die Anwendung, damit der User die gewünschen Aktionen vornimmt.

Was muss der User im Vordergrund vorfinden? Wo kann er am besten starten? Mit welcher Wahrscheinlichkeit wird er den einen oder anderen Weg wählen? Was ist wichtig und muss sofort bemerkt werden? Kennt der Anbieter seine User, liegen bereits konkrete Erwartungen vor, oder muss der Anbieter viel Bauchgefühl investieren? Wie stellt man sicher, dass der User alle Features der Anwendung findet? Wie kann und will man den User beeinflussen?

UI: das grafische User Interface

Das User Interface ist der sichtbare Teil des Front End einer Website/Webanwendung, also alles, was auf dem Bildschirm ist. Das UI muss oft vorgegebenen Design-Richtlinien folgen, und immer dem Funktionsumfang der Anwendung gerecht werden. UI-Entwicklung ist die Überführung eines im UX-Design festgelegten Konzepts in eine bedienbare Benutzeroberfläche. Sie soll dem User möglichst gut gefallen und es ihm leicht machen, seine Aufgaben zu erledigen.

Ein User Interface umfasst sowohl statische als auch dynamische Komponenten. Statische Elemente verändern sich nicht. Ein Beispiel ist der Text auf dieser Seite. Dynamische Elemente sind zum einen die, mit denen der User aktiv interagiert, etwa Formularfelder, Buttons, Icons. Zum anderen sind es jene, die ein Feedback auf die User-Interaktion geben. All diese Elemente zusammen leiten den Nutzer beim Navigieren durch die Webanwendung, so wie es im UX definiert wurde.

Während es bei UX um das konzeptuelle Design geht, geht es beim UI um das visuelle Design: man legt fest, welche Elemente auf dem Bildschirm vorhanden sind. Das wird durch die Anwendung und die geplante UX vorgegeben. Dann gibt man den Elementen eine optische Erscheinung. Das wird durch vorhandene Design-Richlinien, Trends, und die Zielgruppe bestimmt. Die Webanwendung soll nützlich und ästhetisch sein - und auf allen Endgeräten reibungslos funktionieren.

UI Design

Das User Interface muss für die Zielgruppe die richtige Balance zwischen Nutzbarkeit, Markendesign und aktuellen Trends finden. Das UI Design baut direkt auf dem UX Design auf und muss den dort geplanten Flow des Users unterstützen. Beim Screen Design muss der Frontend-Entwickler den Grundsatz 'Form follows Function' beachten.

Um das bestmögliche UI zu entwerfen, muss man bei der Frontend-Entwicklung die Anwendung aus User-Sicht betrachten. Welche Elemente braucht der User um voran zu kommen? Es gibt Input-Elemente, die eine Interaktion oder Eingabe erwarten. Es gibt Output-Elemente und Feedback-Elemente, die eine Programmausgabe anzeigen und an denen der User sich orientiert. Und es gibt noch die rein dekorativen Elemente, die die Website unternehmenstypisch aussehen lassen. Dekorative Elemente müssen von funktionalen Elementen intuitiv deutlich zu unterscheiden sein.

Der Frontend-Entwickler muss die richtigen Elemente festlegen und korrekt platzieren. Jede Funktion der Anwendung muss über das UI erreichbar sein, nichts darf vergessen werden. Das User Interface muss deutlich und möglichst intuitiv zeigen, welche Interaktionsmöglichkeiten die Anwendung bietet. Der User kann eine Aktion nur durchführen, wenn er sieht, dass die Aktion möglich ist. UI-Elemente müssen zum aktuellen Kontext passen. Je nachdem, wo im Flow der User sich gerade befindet, verändert sich das UI dynamisch.

Das User Interface einer Website/Webanwendung muss durch Responsive Design so gestaltet sein, dass es auf allen möglichen Endgeräten und Bildschirmgrössen gut aussieht und perfekt funktioniert. Das User Interface muss sich stufenlos allen Bildschirmformaten anpassen. Die Darstellung auf einem Smartphone ist anders als auf einem 21-Zoll-Monitor. Das User Interface muss seine Umgebung erkennen und sich dementsprechend verändern - und dabei nichts so 'verschlucken', dass es unauffindbar ist.

Entwicklung des clientseitigen Programmteils

Der letzte Schritt der Frontend-Entwicklung ist die Implemenierung der clientseitigen Programmlogik einer Webanwendung. Clientseitige Programme werden in JavaScript geschrieben. Moderne Webanwendungen verlagern bewusst soviel Programmlogik wie möglich auf den Client. Das geht bei manchen Anwendungen so weit, dass sie völlig offline funktionieren. Wie ist das möglich, wo doch das Web einer Client-Server-Architektur folgt?

Die Grundarchitektur einer dynamischen Web-App sieht vor, dass die App beim Laden einen Startzustand hat, von dem aus der User mit seinen Interaktionen beginnen kann. Der Client lädt das initiale User Interface und die nötigen JavaScript-Datei(en). Programmcode im Front End 'überwacht' alle interaktiven Elemente und bindet eine Programmfunktion daran, welche ausgeführt wird, sobald der User mit dem Element interagiert. Der Client nimmt nur Kontakt zum Server auf, wenn neue Daten geladen werden müssen, oder Daten im Netzwerk gespeichert werden sollen. Ein kompletter Reload des HTML-Dokuments ist nicht nötig. Das reduziert den Netzwerkverkehr drastisch.

Ein Web-Browser (der clientseitige Zugang zum Internet) ist längst nicht mehr nur eine Anzeigebox für Inhalte, die der Server schickt. Der Browser am Front End ist heute dank der vielen JavaScript-APIs eine intelligente Laufzeit-Umgebung. Er kann komplexe Programmlogik ausführen, Daten dauerhaft lokal speichern, Daten vom Server on demand nachladen, Daten lokal in unzähligen Formaten speichern, Grafiken erstellen, mit Audio und Videostreams umgehen und vieles mehr.

Javascript ist eine reife Programmiersprache, die den Prinzipien der objektorientierten Programmierung (OOP) folgt. Modernes Softwaredesign ist grundsätzlich objektorientiert. OOP ist längst die dominante Schule und hat die prozedurale Programmierung weitestgehend abgelöst. Mit JavaScript kann im Front End jede gewünschte Software-Architektur realisiert werden, die mit Objekten, Klassen und Vererbung arbeitet. JavaScript kann alle Datentypen verwalten, die in einem Programm vorkommen müssen, sowie alle benötigten software-spezifischen komplexen Datenstrukturen erzeugen. Daten lassen sich bereits am Front End beliebig verändern und manipulieren, genau wie bei einer installierten Desktop-Software.

Das User Interface einer Website/Webanwendung wird vollständig in HTML geschrieben, der Markup-Sprache des Web. Jedes Element auf der Seite ist ein semantisches HTML-Element, Input- sowie Output-Elemente. Alle Plattformen (Browser) interpretieren modernes HTML5 korrekt. Die HTML-Elemente werden mit einer JavaScript-Funktion verknüpft. So reagiert die Software auf User-Aktionen und wird dynamisch. Das Programm nimmt die Userinputs auf, indem es die Daten aus den HTML-Elementen (oder deren Attributen) ausliest, stellt die gewünschten Manipulationen und Berechnungen an, und erzeugt den Output, indem es HTML-Elemente neu erzeugt und ins Dokument einfügt, oder vorhandene HTML-Elemente verändert.

Fazit

Egal ob Website oder webbasierte Applikation: dank moderner Webtechnologie und vollwertigen Clients können viele webbasierte Anwendungen frontend-lastig implementiert werden. Der User ist im Web, aber in Punkto Dynamik und Schnelligkeit soll sich die Website/Anwendung so verhalten, als sei sie lokal 'installiert'. Und das hat einen neuen, sehr erfolgreichen Typ von mobilen Apps hervorgebracht: Progressive Web Apps.