Definition – was ist ein Frontend/Backend?

Was ist ein Frontend

Das Frontend, auch Front-End, ist eine anwendernahe Schicht und als Ergebnis setzt es sich aus zwei Arbeitsbereichen zusammen. Zum einen aus dem Webdesign, welches sich vornehmlich um die Manipulation von Grafiken, dem Interaktionsdesign (siehe GUI) sowie dem sogenannten Motion Design (Bewegtbild) kümmert. Zum anderen realisiert die Frontend-Entwicklung mithilfe der Internet-Kernsprachen (HTML, CSS und JavaScript*) Web-Oberflächen. Als wichtiger Teil der User Experience ermöglicht das Frontend durch ein durchdachtes Zusammenspiel zwischen Texten, Farbkombinationen, Menüpunkten, Tabellen sowie individuell gefertigten Grafiken und Videos den Zugriff auf Daten und Prozesse (Seitenfunktionalität) in einer abstrahierten und visualisierten Form. Letztere sind im Backend hinterlegt.

*Mittlerweile setzen Frontend-Entwickler:innen auch auf Web-Applikation-Frameworks wie Angular, React (mit Bibliotheken) und VueJS. Diese Frameworks lassen sich leicht in bestehende Entwicklungen, die auf HTML, CSS und Javascript basieren, einbinden. Der Vorteil: Die Frameworks basieren auf Bibliotheken, die eine Entwicklung von wiederkehrenden Anwendungen vereinfachen. Je nach Use-Case greifen Frontend-Entwickler:innen auf bestehende Module/Komponenten zu und präsentieren zügig Anwendungen fürs Frontend (Formulare, PWA-Fähigkeit, Web Components).

Schöner Nebeneffekt: Klassische Anwendungssoftware (früher Client-Server-Applications) und Webentwicklungen nähern sich immer mehr an; viele Fachapplikationen stehen heutzutage direkt übers Internet zur Verfügung.

Das Frontend ist eine Art Theaterbühne; Bühnenbild und Schauspieler:innen werden unmittelbar vom Publikum wahrgenommen. Der Backstage-Bereich bildet dagegen das Backend. Dort finden sich auf Abruf Maske, Regie, Szenen-spezifische Bühnenbilder/Exponate sowie weitere Schauspieler:innen.

Quelle: Rabbit Mobile GmbH

Anmerkung der Redaktion: Man unterscheidet innerhalb des Frontend-Designs zwischen UX-Design, also der Darstellung der Website, und der UX-Architektur. Letztere löst im Endeffekt die Herausforderung mit der Customer Journey; also wie der User durch die einzelnen Seiten gelotst wird. Die Logik der Architektur ist dabei im Frontend wie auch im Backend verankert (siehe »Komplexität wandert ins Frontend«).

Sonderstellung Graphical User Interface

Fachexpert:innen benutzen im Kontext Frontend auch den Begriff Graphical User Interface, kurz GUI. Das ist bedingt korrekt: Die GUI ist zwar auch eine grafische Oberfläche, bezogen auf das Frontend beschreibt sie allerdings nur einen Teil. Nicht zur GUI gehören etwa Bereiche einer Website, die der reinen Darstellung dienen, also nicht interaktiv verwendet werden können (Artikeltexte und dazugehörige Bilder). Was allerdings dann wieder zur GUI gehört, ist die Art und Weise der möglichen Interaktion innerhalb des Artikels: Scroll-Balken, Social-Media-Buttons.

Als GUI, auch Interaktionsdesign, gelten generell Icons, Buttons, Menüpunkte und visuelle Elemente einer Website, einer Software oder App. Die Interaktionen mit diesen erfolgt per Maus/Pad, Touchscreen oder auch via Virtuell-Reality (Gestensteuerung). Beispiel: Der Windows-Button des gleichnamigen Betriebssystems (Version 10/11). Geklickt öffnet sich eine grafische Benutzeroberfläche mit grafischen Elementen. Jedes Element öffnet per Klick eine weitere Anwendung (Word, Dateimanager).

Was ist ein Backend

Wie oben bereits angedeutet, bildet das Backend den »hinteren Teil« einer Informationstechnik. Es übernimmt die technische Verwaltung, ist eng mit dem Informationssystem verknüpft und bei Bedarf können weitere Umsysteme per Schnittstelle angedockt werden. Das Backend übernimmt die Logik samt Funktionalität, um die reibungslose Usability (Nutzerfreundlichkeit) des Frontend zu gewährleisten. Zum Backend gehören auch Datenbanken sowie Datenbankanwendungen.

Komplexität wandert ins Frontend

War das Frontend ursprünglich noch frei von jeglicher Logik und Funktion, ist eine gewisse Komplexität heutzutage auch in der Präsentationsschicht anzufinden. Das liegt vor allem daran, dass Teile der Backend-Logik sowie Funktionalität ins Frontend wandern. Selbst Belange rund um die Performance können Entwickler heute übers Frontend lösen. Dazu beigetragen hat sicher die kontinuierliche Dekomposition monolithischer Systeme, bei denen Front- und Backend eng miteinander verwoben sind. Business-Systeme setzen daher seit geraumer Zeit auf eine Headless-Architektur, bei der Backend und Frontend unabhängig voneinander agieren. Vorteil: Dank einer systematischen Trennung beider Technologien docken Unternehmen unterschiedliche Frontends mittels Application Programming Interface (API) am selben Backend-System an. So lassen sich etwa im Onlinehandel unzählige Kanäle gleichzeitig mit verschiedenen Daten/Informationen betreiben: Websites, unterschiedliche Apps, Social-Media-Kanäle und andere Vertriebskanäle.

Frontend-Entwicklung

Unsere Frontend-Entwickler:innen erarbeiten ein barrierefreies, performantes und responsives Frontend für Ihre digitale Lösung.

Frontend-Entwicklung

Shopsysteme und die Datenhaltung

Egal ob Multi- oder Omnichannel; E-Commerce ist heutzutage technologiegetrieben. Hinzu kommt ein hoher Grad an kundenrelevanter Individualisierung, die wiederum ein stabiles Backend als Basis voraussetzt. Lösungsanbieter von Shopsystemen setzten daher auf die oben erwähnte Headless-Architektur – man spricht auch von Headless-Commerce.

Speziell im Onlinehandel hat sich die entkoppelte Architektur durchgesetzt. Auch weil Systeme mit integriertem Frontend innerhalb ihres Standards zwar reibungslos laufen; wegen der immer höheren Komplexität sind allerdings individuelle Kundenbedürfnisse nur mit sehr hohen Aufwänden und Kosten zu realisieren.

Headless-Commerce ermöglicht dagegen, Fremdsysteme sowie kleinere Anwendungen von Drittanbietern über Schnittstellen und je nach Anforderung an Front- oder Backend anzudocken. Die rechenintensive Datenverarbeitung oder das Vorhalten von Datensätzen übernehmen die verknüpften Umsysteme und Anwendungen. Benötigte Daten (beispielsweise Bilder, Videos, Produktinformationen) spielen die Systeme bei Bedarf ans Front- oder Backend aus.

Vorteile

  • Gerade große Shopsysteme profitieren, da durch Internationalisierung aus ein paar Daten schnell mehrere Terabytes werden – meist liegen Bild-, Video- und Audiodateien in verschiedenen Derivaten vor (Sprache, Qualität in Megabyte/Gigabyte). Ein klassischer Monolith kommt da schnell an seine Grenzen. Dagegen halten Daten-spezifische Umsysteme bei einem Headless-Ansatz Informationen Kanal-spezifisch sowie aufbereitet vor.

  • Zusätzliche Features und Applikationen lassen sich ohne Weiteres implementieren.

  • Es ist sogar möglich, einzelne Lösungen aus der Software herauszulösen. Der Softwarekern bleibt dabei in der Regel unberührt und so langfristig wartbar.

  • Den Unternehmen bleibt ein Big-Bang-Relaunch in vielen Fällen erspart. Sprich, das Unternehmensrisiko sinkt.

Kontakt für Ihre digitale ​Lösung mit Unic

Termin buchen

Sie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus.​

Jörg Nölke
Gerrit Taaks
Gerrit Taaks

Wir sind da für Sie!

Termin buchen

Sie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus.

Melanie Kluhe
Melanie Klühe
Stefanie Berger
Stefanie Berger
Philippe Surber
Philippe Surber
Stephan Handschin
Stephan Handschin