Was ist ein Frontend?

Frontend und Backend sind ei­gen­stän­di­ge Ebenen einer Software, die sich ge­gen­sei­tig ergänzen. Stellt man sich eine Software als Re­stau­rant vor, umfasst das Frontend die Au­ßen­fas­sa­de, In­nen­ein­rich­tung, Spei­se­kar­te und das Ser­vier­per­so­nal. Dem­ge­gen­über ent­sprä­che das Backend in dieser Analogie der Küche und dem Ma­nage­ment mitsamt Personal und Pro­duk­ti­ons- und Ver­wal­tungs­pro­zes­sen.

Was macht ein Frontend aus?

Ein Frontend ist eine grafische Be­nut­zer­ober­flä­che zur Bedienung einer Website oder App. Das Frontend ori­en­tiert sich an den Be­dürf­nis­sen und Er­war­tun­gen von Menschen. Somit stehen eine an­spre­chen­de Dar­stel­lung von In­for­ma­tio­nen und leicht nach­voll­zieh­ba­re Struk­tu­rie­rung der In­ter­ak­tio­nen im Vor­der­grund. Frontend-Design zielt darauf ab, eine gute User-Ex­pe­ri­ence (UX) zu ge­währ­leis­ten.

Beim Frontend handelt es sich um eine Software-Schicht, welche auf dem Client aus­ge­führt wird. Dabei verbirgt das Frontend Kom­ple­xi­tät, denn die ei­gent­li­che Ver­ar­bei­tung der In­for­ma­tio­nen findet auf dem Backend statt. Hinter den Kulissen kom­mu­ni­ziert das Frontend mit dem Backend, um Daten ab­zu­glei­chen und Än­de­run­gen wi­der­zu­spie­geln. In der Regel kommen dabei als API be­zeich­ne­te Pro­gram­mier­schnitt­stel­len zum Einsatz.

Dem Ent­wick­lungs-Grundsatz „Se­pa­ra­ti­on of concerns“, zu Deutsch, „Trennung der Belange“ folgend, werden Frontend und Backend als un­ab­hän­gi­ge Ebenen rea­li­siert. Für eine voll funk­ti­ons­fä­hi­ge Software werden immer beide Ebenen benötigt. Ein Frontend ohne Backend ist wie eine Fassade mit nichts dahinter.

Wer arbeitet am Frontend?

Grund­sätz­li­che arbeiten zwei gänzlich un­ter­schied­li­che Nut­zer­grup­pen am Frontend:

1. Nut­ze­rin­nen und Nutzer, welche mit dem Frontend arbeiten.
2. Frontend-Ent­wick­le­rin­nen und -Ent­wick­ler, welche Frontends bauen und pflegen.

Schauen wir uns im Folgenden die Ge­mein­sam­kei­ten und Un­ter­schie­de der beiden Gruppen bei der Arbeit mit dem Frontend an.

Wie arbeiten Nut­ze­rin­nen und Nutzer mit dem Frontend?

Be­su­che­rin­nen und Beuscher einer Website na­vi­gie­ren über Links zwischen den einzelnen Seiten. Sie kon­su­mie­ren dabei Inhalte, wie Texte und Medien, und in­ter­agie­ren mit Schalt­flä­chen und anderen in­ter­ak­ti­ven Elementen. Dazu zählen die bekannten HTML-Formulare mit Aus­wahl­me­nüs, Ein­ga­be­fel­dern und Knöpfen.

Kon­zep­tu­ell ähnlich verhält es sich mit den in einer App ein­ge­logg­ten Nut­ze­rin­nen und Nutzern. Diesen stehen im Frontend ggf. reich­hal­ti­ge­re In­ter­ak­ti­ons­mög­lich­kei­ten mit spe­zia­li­sier­ten Schalt­flä­chen zur Verfügung. Wiederum be­schränkt sich der Umfang der In­ter­ak­tio­nen auf wenige, klar fest­ge­leg­te Pfade. Jedoch gibt es ggf. mehr Mög­lich­kei­ten, selbst Inhalte zu erstellen.

Wie arbeiten Ent­wick­le­rin­nen und Ent­wick­ler mit dem Frontend?

Nut­ze­rin­nen und Nutzer sind bei der Arbeit am Frontend recht limitiert. Anders sieht es bei den sog. Frontend-Ent­wick­le­rin­nen und -Ent­wick­lern aus. Diese Pro­gram­mier-Profis sind für die Er­stel­lung, Pflege und Wei­ter­ent­wick­lung eines Frontends zuständig und werden dabei oft von De­si­gne­rin­nen und Designern un­ter­stützt. Letzt­end­lich steht die Be­nut­zer­freund­lich­keit beim Webdesign im Vor­der­grund.

Was genau macht man bei der Frontend-Ent­wick­lung? Schauen wir uns ein Beispiel aus dem WordPress-Ökosystem an. Frontend-Ent­wick­le­rin­nen und Ent­wick­ler erstellen WordPress Widgets und WordPress-Themes, welche einer WordPress-Website ein an­spre­chen­des Aussehen ver­schaf­fen.

Mithilfe eines von Frontend-Ent­wick­le­rin­nen und -Ent­wick­lern er­stell­ten WordPress-Themes werden die variablen Inhalte der einzelnen Seiten und Beiträge in fest­ge­leg­te Struk­tu­ren ein­ge­bet­tet. So wird die kon­sis­ten­te Dar­stel­lung aller Inhalte über die gesamte Site hinweg si­cher­ge­stellt.

Frontend-Ent­wick­le­rin­nen und -Ent­wick­ler bauen Landing­pa­ges und nutzen Call-to-Action (CTA)-Elemente, um Be­su­che­rin­nen und Besucher durch die Site zu leiten. Dabei steht ins­be­son­de­re Re­spon­si­ve Design im Vor­der­grund.

Was sind die wich­tigs­ten Frontend-Frame­works?

Ein Frontend wird für die Nut­ze­rin­nen und Nutzer auf deren End­ge­rä­ten („Clients“) dar­ge­stellt. Prin­zi­pi­ell un­ter­schei­det man zwischen Web-Frontends für die Dar­stel­lung im Browser und nativen Frontends, welche spe­zi­fisch für ein Be­triebs­sys­tem sind. Moderne Methoden der Cross-Platform Ent­wick­lung erlauben, mehrere Frontends aus einer ge­mein­sa­men Basis heraus zu erzeugen.

Web-Frontends umfassen Code in den Web-Sprachen HTML, CSS und Ja­va­Script. Diese ent­spre­chen den drei grund­le­gen­den Belangen der Web-Pro­gram­mie­rung:

Prin­zi­pi­ell lassen sich Frontends direkt auf Basis der drei Web-Sprachen erstellen. Jedoch wäre dieser Ansatz nicht effizient, da man viel unnötigen Aufwand betreiben müsste. Frontend-Frame­works ver­ein­fa­chen die Arbeit ent­schei­dend.

Je nach Ein­satz­ge­biet erfüllen Frontend-Frame­works ver­schie­de­ne Funk­tio­nen. Sie erweitern den Umfang der Web-Sprachen, er­leich­tern die Anbindung an das Backend und stellen die Kon­sis­tenz der Funk­tio­na­li­tät über Browser-Versionen hinweg sicher. Manche Frame­works enthalten ferner Techniken zur Ver­bes­se­rung der Per­for­manz.

Neuere Frame­works, wie React und Vue, setzen verstärkt auf Re­ak­ti­vi­tät; Än­de­run­gen an den Daten werden sofort im Frontend wi­der­ge­spie­gelt. Ferner verankern diese Frame­works Kom­po­nen­ten als zentrales Konzept. Dabei handelt es sich um in sich ge­kap­sel­te, wie­der­ver­wend­ba­re Einheiten reaktiver UI-Elemente.

Abhängig vom genutzten Ansatz gibt es reine CSS- oder Ja­va­Script-Frontend-Frame­works. Ferner un­ter­schei­det man zwischen Web- und Cross-Platform Frontend-Frame­works.

Mit Reactive Frame­works Frontends auf Basis von Kom­po­nen­ten ent­wi­ckeln

Bei diesen Ja­va­Script Frontend-Frame­works dreht sich alles um maß­ge­schnei­der­te, reaktive Kom­po­nen­ten. Kom­po­nen­ten vereinen Struktur, Aussehen und Verhalten und passen sich au­to­ma­tisch an Än­de­run­gen der zu­grun­de­lie­gen­den Daten an. Löscht man bei­spiels­wei­se einen Datensatz, ver­schwin­det der ent­spre­chen­de Eintrag aus einer Lis­ten­dar­stel­lung und ein etwaiger Zähler zeigt sofort den aktuellen Wert an.

Die Platz­hir­sche der reaktiven Frontend-Frame­works sind seit Jahren Angular und React. Beide eignen sich zum Erstellen von Single Page Ap­pli­ca­ti­ons, wie auch um­fang­rei­che­rer An­wen­dun­gen und gelten als recht komplex. Dem­ge­gen­über steht das deutlich schlan­ke­re Frontend-Framework „Vue“ als moderne Al­ter­na­ti­ve.

Mit dem Svelte-Framework existiert eine in­ter­es­san­te Neu­ent­wick­lung. Denn Svelte be­schrei­tet einen grund­sätz­lich anderen Weg, als React und Co. Anstatt innerhalb von Ja­va­Script neue Struk­tu­ren zu erfinden, handelt es sich bei Svelte um einen Compiler. So lässt sich simpler Svelte-Code schreiben, welcher vom Compiler in kom­ple­xe­ren Ja­va­Script-Code umgesetzt wird.

Die meisten reaktiven Frontend-Frame­works ver­ein­fa­chen ferner das Arbeiten mit globalen Daten. Dabei kommt ein „State-Store“ zum Einsatz, mit dessen Hilfe eine Kapselung der Zu­stands­da­ten er­mög­licht wird.

Zum Erzeugen des Frontend-Codes kommt ggf. ein separater Build-Prozess mit einem Task-Runner wie Gulp oder Grunt zum Einsatz.

Mixed-Concern Frontend-Frame­works: die alte Garde

Diese älteren Frontend-Frame­works erfreuten sich vor dem Aufkommen der reaktiven Frame­works großer Be­liebt­heit. Bootstrap oder Bootstrap-Al­ter­na­ti­ven boten eine damals dringend benötigte Stan­dar­di­sie­rung über Browser-Un­ter­schie­de hinweg und hatten eine Auswahl vor­ge­fer­tig­ter Kom­po­nen­ten an Bord. Dazu zählten bei­spiels­wei­se hier­ar­chi­sche Na­vi­ga­ti­ons-Menüs, Ak­kor­de­ons mit auf­klapp­ba­ren Feldern und animierte Bilder-Slider.

Gemein ist diesen Frame­works, dass sie sowohl Ja­va­Script-Code als auch CSS-Code umfassen. Das kompakte UI-Framework ZURB Foun­da­ti­on zielte eher auf An­pas­sungs­fä­hig­keit für pro­fes­sio­nel­le An­wen­dun­gen. Mit „jQuery UI“ gab es ferner einen mi­ni­ma­lis­ti­schen Ansatz zur Kom­bi­na­ti­on mit dem beliebten Ja­va­Script-Framework.

Vor­teil­haft an diesen Frontend-Frame­works ist, dass sie sich aus­ge­spro­chen einfach einsetzen lassen. Meist genügt es, eine CSS- und / oder Ja­va­Script-Datei ein­zu­bin­den. Anders sieht es aus, möchte man An­pas­sun­gen und Op­ti­mie­run­gen vornehmen, dann wird es schnell kom­pli­ziert. Auch das Kom­bi­nie­ren von Teilen dieser Frame­works gestaltet sich er­fah­rungs­ge­mäß eher pro­ble­ma­tisch.

Single-Concern Frontend-Frame­works: die schlanken Spe­zia­lis­ten

Anders als die Mixed-Concern Frontend-Frame­works, welche Ja­va­Script und CSS kom­bi­nie­ren, be­schrän­ken sich Single-Concern Frontend-Frame­works auf eine der Sprachen. Mit Tailwind CSS hat sich quasi ein Standard zum Versehen von Frontend-Kom­po­nen­ten mit CSS-Regeln etabliert. Anstatt CSS-Code selber zu schreiben, werden vor­de­fi­nier­te Klassen direkt in das HTML-Gerüst ein­ge­bet­tet.

Was Tailwind für die Dar­stel­lung bietet, leistet das schlanke Frontend-Framework Alpine JS in Bezug auf Verhalten und Re­ak­ti­vi­tät. Anstelle von CSS kommen vor­ge­fer­tig­te Ja­va­Script-Schnipel zum Einsatz. Dabei versteht sich Alpine als „jQuery for the modern web“ und vollzieht damit den Zir­kel­schluss zum Klassiker unter den Ja­va­Script-Frame­works.

Ent­schei­den­der Vorteil der Single-Concern Frontend-Frame­works ist ihre Ein­fach­heit. In der Regel ist es möglich, den Umfang des ein­ge­setz­ten Codes auf das tat­säch­lich benötigte zu Be­schrän­ken. Dazu wird ggf. ein separater Build-Prozess benötigt. Ferner lassen sich Teile dieser Frame­works pro­blem­los mit­ein­an­der kom­bi­nie­ren. Eine beliebte Kom­bi­na­ti­on besteht aus Tailwind CSS + Alpine JS.

Mit Cross-Platform Frame­works mehrere Frontends aus einer ge­mein­sa­men Basis erzeugen

Die bisher be­spro­che­nen Frontend-Frame­works zielen allesamt auf die Dar­stel­lung im Web-Browser ab. Darüber hinaus exis­tie­ren sog. Cross-Platform Frontend-Frame­works, welche Code für native Apps erzeugen. Native Apps benötigen keinen Browser, sondern laufen direkt auf einem Be­triebs­sys­tem, wie Windows, macOS, Android, oder iOS.

Ein bekanntes Cross-Platform Frontend-Framework ist Flutter, welches auf Googles eigener Dart Pro­gram­mier­spra­che aufsetzt. Eine in Flutter gebaute Be­nut­zer­ober­flä­che dient als ge­mein­sa­me Basis, aus der sich mehrere native und Web-Frontends erzeugen lassen.

Ein ähnlicher Ansatz findet sich beim rein nativen Frontend-Framework GTK. Aus einer ge­mein­sa­men Basis lassen sich Frontends für Linux, Windows, und macOS erzeugen. Anders als bei Flutter setzt GTK nicht auf Web-Tech­no­lo­gien auf. Dafür exis­tie­ren An­bin­dun­gen an eine große Auswahl von Pro­gram­mier­spra­chen, aus deren heraus sich mit GTK arbeiten lässt.