Definition – was ist ein Frontend/Backend?
In der Informationstechnik beschreiben Front- und Backend visuell wie auch technisch jeweils eine spezielle Funktionsschicht: Das Frontend ist die Präsentationsschicht gegenüber des Endnutzers und in der Regel der sichtbare Teil einer Applikation oder Software (App, Website, Shopsystem). Das Backend orchestriert die systemnahe Schicht samt Prozesslogik und ist eng mit dem Kernsystem sowie den Umsystemen (PIM, DAM ...) verknüpft. Es ist für den herkömmlichen Endnutzer einer Software nicht sichtbar und stellt Funktionsbausteine für das Frontend zur Verfügung, etwa in Form von Services zur Bearbeitung der Geschäftsprozesse.
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 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 wiederkehrende Anwendungen vereinfachen. Je nach Use-Case greifen Frontend-Entwickler 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
Fachexperten 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.
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 buchenSie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Jörg Nölke und Gerrit Taaks (von links nach rechts).
Wir sind da für Sie!
Termin buchenSie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus: Melanie Klühe, Stefanie Berger, Stephan Handschin und Philippe Surber (im Uhrzeigersinn).
