Wenn wir über das Programmieren, Entwicklung oder die Webentwicklung im Allgemeinen sprechen, kann einen das Fachjargon schon einmal durcheinander bringen. Ein paar Ausdrücke tauchen jedoch immer wieder auf. Zwei davon sind Front End und Back End. Wir hören diese beiden Begriffe immer öfter, haben aber vielleicht gar keine Ahnung von ihnen. Was ist das Front- und was das Back End und warum sind sie nützlich?
Ich habe es mir zur Gewohnheit gemacht, meinen Studentinnen und Studenten diese Begriffe vom ersten Tag an zu erklären, an dem sie mit der Webentwicklung beginnen. Heute bist Du dran! Schauen wir uns ihre Rolle, Funktionen und mehr an.
Front End und Back End Technologien sind überall
Im Bereich der Computerentwicklung entwickeln wir "Apps".
Diese Applikationen können die Form einer Website (Beispiel: die Website der Wild Code School), einer Web-App (Google Drive) oder einer mobilen App (Waze) haben.
Damit eine Website oder eine mobile App richtig funktioniert, braucht sie oft ein sogenanntes "Back End" und ein "Front End", wie es im Fachjargon heißt. Wir können das Offensichtliche aus verschiedenen Quellen herausfinden: "Das Front End ist das, was der Endnutzer (Du) sieht, und das Back End ist das, was er/sie nicht sieht", aber was bedeutet das?
Front End / Back End: eine vereinfachte Definition
Um diese beiden Konzepte besser zu verstehen, lassen wir die technischen Begriffe für einen Moment beiseite und nehmen ein Beispiel aus dem Alltag: Postdienstleistungen.
Stellen wir uns die folgende Situation vor: Ich muss einen Brief an ein Unternehmen schicken, und dieses Unternehmen muss mir im Gegenzug einen Brief schicken, um meine Anfrage zu beantworten.
In diesem Beispiel steht der Brief, den ich abschicken muss, für meine Suche nach Informationen auf einer Website (oder einer Web App).
Wir werden nun die verschiedenen Aktionen aufschlüsseln, die auf das Versenden meines Briefes folgen, sowie alle Schritte, die vom Senden des Briefes bis zum Erhalt der Antwort des Unternehmens auf meine Anfrage notwendig sind.
Während des gesamten Prozesses brauchen wir mehrere Akteure:
- den Briefzusteller/die Briefzustellerin
- den Briefkasten
- das Sortierzentrum
- den Schalter
- die Schubladen, in denen die Post gelagert wird
- die Post
Schauen wir uns nun die einzelnen Prozessschritte an:
Wenn ich meinen Brief mit der Post verschicke, stellen alle physischen Interaktionen, die ich habe, während die Post in meinen Händen ist, das Front End des Unternehmens dar.
Die Weiterleitung und Verarbeitung meiner Post (an der ich nicht direkt beteiligt bin) stellt dagegen das Back End des Unternehmens dar.
Jetzt solltest du den oben zitierten Satz besser verstehen: Das Front ist das, was du siehst, und das Back ist das, was du nicht siehst. Ich sehe meine Post am Schalter, im Briefkasten und beim Briefzusteller; das ist die Front End Entwicklung. Aber wenn meine Post sortiert, gelagert und transportiert wird, sehe ich sie nicht, und das ist das Back End des Unternehmens.
Wo findet man das Front End und Back End einer App oder Website
Die gleichen Konzepte finden sich auch im Lebenszyklus einer Website oder einer App wieder:
Front End Entwicklung einer Website
Wenn wir auf der Seite einer Website und/oder einer Web-App landen, können wir direkt mit der so genannten "User Interface"* interagieren: Wir können auf Links klicken, mit der Maus auf und ab scrollen, Formulare ausfüllen, zwischen Registerkarten navigieren... All diese Aktionen, die der Benutzer ausführt, stellen eine direkte Interaktion zwischen Mensch und Maschine dar. Und all diese visuellen Komponenten sind das Front End.
Laut Futura Sciences ist das User Interface die Gesamtheit aller Mechanismen - Hardware und Software -, die Funktionen bieten und es den Benutzern ermöglichen, mit einem Computersystem zu interagieren.
Back End Entwicklung einer Seite
Sobald die Nutzer irgendwo klicken, wird diese "Klick"-Aktion von der Seite oder der App als Anfrage wahrgenommen, die deshalb autonom arbeitet: Die vom Nutzer gesendete "Anfrage" wird von der Seite oder der App empfangen, die auf dem Server nach den angeforderten Informationen sucht und sie dann an die Nutzer zurückschickt. Das ist das Backend.
Ein Beispiel: Ein Nutzer möchte sich für den Newsletter einer Seite anmelden. Dazu geht er auf den Tab "Newsletter" und klickt ihn an. Diese "Klick"-Aktion sendet dann die folgende Anfrage: "Leite den Nutzer auf die Newsletter-Seite der Seite um." Sobald die Seite die Anfrage erhalten und analysiert hat, schickt sie dem Nutzer die erwartete Antwort zurück, die hier lautet: "Gehe zur Newsletter-Seite".
Das Back End ist der Teil, den der Nutzer nicht sieht, der es ihm aber ermöglicht, Aktionen auf einer Seite oder in einer App durchzuführen.
Und wenn das Back End die Informationen zurückgegeben hat, kann ich sie im Front End wieder ansehen und mit ihnen interagieren. Wenn alles gut gelaufen ist, habe ich eine gute User Experience gehabt!
Wenn du mehr über User Experience, Webseitendesign und die UX/UI-Arbeiten hinter einer Website oder App erfahren möchtest, schau dir unseren Artikel an: Der Einsteigerleitfaden zu UX vs. UI
Wir erkennen hier, dass diese beiden Facetten einer Website oder einer mobilen App unverzichtbar sind (genau wie das Sortierzentrum und der Briefzusteller bei der Post). Das eine geht nicht ohne das andere. Bei der Post ist es auch nicht dieselbe Person, die die Post zustellt und sortiert.
Genauso brauchen wir, wenn wir ein Projekt starten, das die Entwicklung einer App oder einer Website erfordert, einen "Front End"- und einen "Back End"-Entwickler oder einen "Full Stack" Entwickler (einen Entwickler, der sowohl über Front End als auch Back End Kenntnisse verfügt und somit ein gewisses Fachwissen auf dem Gebiet der Entwicklung hat).
Um unseren Vergleich noch einen Schritt weiter zu führen...
Wenn wir noch weiter gehen wollten, könnten wir über Sicherheit oder Leistung sprechen:
Genauso wie die Post verschiedene Dienstleistungen anbietet, um die Zustellung deines Pakets zu gewährleisten (Einschreiben, Priority, 24 Stunden usw.), die leicht unterschiedliche Wege im "hinteren" Teil des Prozesses darstellen, kann ich auf meiner Website die Leistung und Sicherheit meiner Aktionen durch eine leicht unterschiedliche Programmierung meines Back-Ends variieren.
In einer App hast du zum Beispiel oft die Möglichkeit, dich auf der Seite zu registrieren, indem du eine E-Mail-Adresse und ein Passwort eingibst, um dann Zugang zu einem privaten und personalisierten Bereich zu erhalten. Einerseits stellt das Ausfüllen des Formulars das Front End dar: Du siehst die Aktion. Auf der anderen Seite steht die Sicherung deines Kontos für das Back End: Du kannst visuell nicht erkennen, dass dein Konto geschützt ist, doch das ist tatsächlich der Fall. All das wird im Back End erledigt.
Die gleiche Parallele könnte man auch bei Expresssendungen und der Verarbeitungsleistung einer Seite ziehen.
Front End, Back End: Welche Rolle spielen die Programmiersprachen bei all dem?
Mit dem U.S. Postal Service kannst du deine Post verschicken, aber du kannst auch ein anderes Unternehmen wählen (UPS, Fedex, etc...). Jedes dieser Unternehmen hat seine eigenen Dienstleistungen und seine eigenen Methoden.
Was die Entwicklung angeht, ist es dasselbe! Aber nennen wir sie doch Sprachen. Für die Entwicklung des Back-Ends kannst du zum Beispiel PHP, Java, Ruby usw. verwenden. Für die Entwicklung des Front-Ends hingegen werden wir hauptsächlich JavaScript, HTML oder CSS verwenden.
Das war's dann auch schon für heute. Hoffentlich hast Du eine Menge gelernt.
In meinem nächsten Abschnitt werde ich ausführlicher auf Programmiersprachen eingehen! 😉
Bis zum nächsten Mal!
Wenn Du mehr lernen möchtest...
Hat dir dieser Abschnitt gefallen und hat er deine Neugierde geweckt? Wir bieten dir kostenlose Ressourcen, die zu deiner Situation und deinem Hintergrund passen:
Neugierde geweckt? Wir bieten dir kostenlose Ressourcen, die zu deiner Situation und deinem Hintergrund passen:
➡️ Hast du Lust, in die Welt der Webentwicklung einzutauchen? Nimm an unserem Schnupper-Webentwicklungskurs teil, der 100% online ist. Nimm an "Tech Workshop - Learn the basics of coding: HTML and CSS" teil.
➡️ Du fragst dich, wie die Arbeit eines Entwicklers aussieht? Schau dir unsere Jobbeschreibung für Webentwickler/innen an.
➡️ Willst du herausfinden, was Frameworks sind? Dann schau dir unseren Abschnitt dazu an: Was ist ein Framework?
➡️ Fragst du dich, was der Unterschied zwischen Java und Javascript ist? Wir haben einen eigenen Artikel für dich verfasst.
➡️ Möchtest du an einem unserer Webentwicklungskurse teilnehmen?
