Softwareentwicklung einfach erklärt

Was Frontend und Backend unterscheidet

In diesem Blogartikel wollen wir das Frontend und das Backend genauer unter die Lupe nehmen. Denn die Linie zwischen diesen beiden Begriffen kann für Anwender:innen schnell mal verschwimmen, deshalb zeichnen wir sie hier etwas genauer für euch nach.

In der Softwareentwicklung werden die Begriffe Frontend und Backend am laufenden Band und mit einer gewissen Selbstverständlichkeit verwendet. Für Außenstehende ist die Unterscheidung aber oft nicht ganz so klar. Im Großen und Ganzen lassen sich die Unterschiede in einem Satz erklären: Das Frontend ist jener Teil der Software, den die Anwender:innen sehen, das Backend ist jener Teil im Hintergrund.

Doch ganz so einfach ist die Sache dann leider doch nicht, denn es gibt einige Nuancen, die zu beachten sind.

Bühne frei fürs Frontend #

Stellt man sich Software wie ein Theater vor, so ist das Frontend das Bühnenbild. Alles was Nutzer:innen sehen passiert im Frontend, bei einer Website sind das alle Bilder, Texte, Formulare und vieles mehr. Es gibt allerdings auch versteckte Teile des Frontends, die Nutzer:innen nur indirekt wahrnehmen, hier gibt es zum Beispiel Animationen oder Elemente, mit denen Nutzer:innen direkt interagieren können. Diese werden durch Scripts gesteuert: Im Browser ausgeführter Code, der dafür verantwortlich ist, Bilder zu bewegen, Videos abzuspielen oder Daten zu übermitteln.

Um ein gutes Frontend zu entwickeln, benötigt es ein benutzerfreundliches Design. Hier fällt oft der Begriff UX (User Experience). Dabei handelt es sich um die Kunst, Nutzer:innen intuitiv und einfach zu den relevanten Informationen zu bringen.

Frontend Technologien #

Je nach Software-Projekt kommen im Frontend unterschiedliche Technologien zum Einsatz. Bei Webseiten sind dies HTML für die Seitenstruktur, CSS für das Styling der Website und Javascript oder Typescript für die Steuerung der Elemente sowie der Datenübertragung.

Es gibt sehr viele Javascript/Typescript Frameworks. Für Web-Anwendungen arbeiten wir am liebsten mit React in Verbindung mit Material UI für ein sauberes User Interface.

Im Bereich der Desktop Software unterscheiden sich die Frontend-Technologien häufig pro Betriebssystem: MacOS, Windows und Linux können entweder Nativ entwickelt werden (d.h. separat für jedes Betriebssystem) oder “Multiplatform” (d.h. eine Lösung für alle Betriebssysteme). Multiplatform-Lösungen sind allerdings häufig etwas eingeschränkt in ihrer Funktionalität.

Das stille Backend #

Das Backend ist der Bereich der Software, den man als Nutzer:in nicht wahrnimmt. Es ist dafür zuständig, Daten zu übermitteln, zu verarbeiten und zu speichern, manchmal sogar um den Anwender:innen das Frontend bereitzustellen.

Das Backend befindet sich bei Webanwendungen und Websites meist auf einem Server, fernab von Anwender:innen. Im Falle von Desktop-Anwendungen oder Mobile Apps kann es sich aber genauso gut am selben Gerät wie das Frontend befinden, hier können die Grenzen je nach Softwarearchitektur stark verschwimmen.

Datenspeicherung #

Eine der Hauptaufgaben des Backends ist die Speicherung von Daten. Dazu werden sie üblicherweise in Datenbanken abgelegt, um sie schnell und effizient abrufen zu können. Dort werden zum Beispiel Nutzerdaten gespeichert, damit man sich nach der Registrierung auf einer Website dort einloggen kann.

Datenverarbeitung #

Häufig werden Daten im Backend weiter verarbeitet, zum Beispiel wird eine Einkaufsliste der Anwender:innen im Frontend hochgeladen und im Backend wird diese einer Statistik der monatlichen Ausgaben eingerechnet. Diese Statistik kann dann im Frontend als schönes Diagramm dargestellt werden.

Datenvalidierung #

Daten, die aus dem Frontend übermittelt werden, sollten sowohl dort als auch im Backend validiert werden, da die Anwender:innen das Frontend direkt auf seinem eigenen Gerät hat, ist Validierung im Frontend im Gegenzug zum Backend unsicher und sollte nur für Usability verwendet werden, nicht aber um Datensicherheit zu gewährleisten.

Datenbereitstellung #

Das Backend speichert aber nicht nur Daten, es entscheidet auch, welche Daten den Nutzer:innen bereitgestellt werden. Zum Beispiel weiß das Backend, dass es die Blogseite liefern muss, wenn Nutzer:innen einen Request an die Adresse https://bitperfect.at/blog schickt. Es wird also gesteuert, welches Frontend unter welcher Adresse bereitgestellt wird.

Software ohne Frontend? #

Es gibt auch Software ohne Frontend, die direkt über Befehle in einem Terminal gesteuert wird. Software dieser Art wird häufig verwendet, um automatisierte Verarbeitung von Daten durchzuführen. Oftmals ist auch eine Mischform vorhanden, in der Expert:innen die Software über die Konsole verwenden und unerfahrenen Nutzer:innen ein Frontend zur Verfügung gestellt wird.

Ein weiterer weit verbreiteter Anwendungsfall von Software ohne Frontend sind APIs. Dabei handelt es sich um Schnittstellen, über die Software, die auf einem Server läuft, gesteuert werden kann. Zum Beispiel ermöglicht eine Wetter-API das Abrufen von Wetter- und Temperaturdaten.

Klarheit schaffen fürs nächste Projekt #

Die Grenzen zwischen Frontend und Backend sind oft fließend, dennoch hoffen wir, dass unser Beitrag dabei hilft, die Begriffe besser einordnen zu können.

Noch offene Fragen für ein bevorstehendes Softwareprojekt? Dann schreibt uns gern an hello@bitperfect.at, wir freuen uns, von euch zu hören.