Frontend-Entwicklung 2017 - Ein Vergleich aktueller Techniken zu 2007
Inhaltsverzeichnis
- Unterschiede Frontend zu Backend
- Definition Frontend
- Definition Backend
- Aktuelle Tools & Editoren
- Sprachen, Techniken und Frameworks
- Vergleich zu 2007
In den vergangenen Jahren ist es zu zahlreichen technischen Entwicklungen und Innovationen im Bereich der Softwareentwicklung gekommen. Insbesondere die Frontend-Entwicklung hat innerhalb der letzten zehn Jahre enorme Fortschritte gemacht. Im Grunde handelt es sich bei dem Frontend einer Website um nichts anderes als das, was die meisten Menschen unter einer herkömmlichen Website verstehen.
In diesem Artikel erläutern wir, welche Tools, Frameworks und Programmiersprachen aktuell bei der Entwicklung einer Webapplikation eingesetzt werden. Darüber hinaus wird beleuchtet, wie sich die Technik sowie die Vorgehensweise in Bezug auf die Webprogrammierung in den letzten zehn Jahren verändert hat.
1. Was unterscheidet ein Frontend von einem Backend?
Nicht alle technischen Aspekte, die bei der Entwicklung einer Webapplikation benötigt werden, können vom durchschnittlichen Nutzer auch tatsächlich gesehen werden. Ein Großteil aller Techniken der Web-Entwicklung hat keinerlei Auswirkungen auf das optische Erscheinungsbild einer Internetseite.
Mit den Begriffen Backend und Frontend werden in der Web-Entwicklung Programm-Oberflächen hinsichtlich ihres Bezugs auf den Nutzer bezeichnet. Der Nutzer kann dabei sowohl ein Mensch als auch ein Programm sein, das auf die Inhalte der Website zugreift. Bei Frontend-Anwendungen handelt es sich um sämtliche Inhalte, die direkt mit dem Benutzer interagieren und von diesem dadurch auch wahrgenommen werden können.
2. Definition Frontend
In webbasierten Anwendungssystemen mit getrennten Nutzeroberflächen für reguläre Benutzer und Systemverwaltung bezeichnet der Begriff Frontend die der Öffentlichkeit zugänglichen Oberflächen. Das Aussehen des Frontends wird hierbei vor allem vom Backend und den getätigten Befehlen gesteuert. Im Frontend einer Internetseite können sowohl vom Besucher Informationen abgerufen werden, als auch selber Eingaben gemacht werden. Alle vom Nutzer im Frontend einer Website oder eines Interfaces gemachten Eingaben werden erst im Backend verarbeitet und dann an die entsprechenden Systeme im Hintergrund weiter gegeben.
3. Definition Backend
Eine Backend-Anwendung hingegen wird vom Nutzer zu keinem Zeitpunkt bemerkt. Diese Anwendungen sind ausschließlich dafür zuständig, die Frontend-Anwendungen in ihrer Funktionsweise zu unterstützen. Dies geschieht in der Regel dadurch, dass sich eine Backend-Anwendung deutlich näher an den benötigten Ressourcen befindet als die Frontend-Anwendung. Meist besitzen Backend-Anwendungen sogar die Fähigkeit, mit den benötigten Ressourcen oder den Datenbanken, in denen diese abgespeichert sind, direkt zu kommunizieren. Auf diese Weise versorgen die Backend-Anwendungen sämtliche Frontend-Anwendungen mit den angeforderten Informationen.
In einigen Applikationen sind die Frontend-Anwendungen jedoch vollständig vom Backend getrennt. In diesen Fällen werden die Daten der Backend-Anwendungen durch eine Schnittstelle abgerufen, welche Daten schließlich an die Frontend-Anwendungen weitergeben.
4. Welche Tools & Editoren werden in der Frontend-Entwicklung eingesetzt?
Bei der Webentwicklung kommen zahlreiche unterschiedliche Tools und Hilfsmittel zum Einsatz. Einige von ihnen sind für die Entwicklung der Website zwingend erforderlich. Andere werden hauptsächlich eingesetzt, um den Aufwand der Programmierung zu minimieren. Grundsätzlich kommen dadurch bei der Webentwicklung drei unterschiedliche Arten von Hilfsmitteln zum Einsatz. Dabei handelt es sich um Tools:
welche die Kommunikation innerhalb des Entwicklerteams vereinfachen (z.B. Slack),
Hilfsmittel zur Versionskontrolle (z.B. Git)
und Editoren, die zur Programmierung eingesetzt werden (z.B. Atom).
In der Web-Entwicklung ist insbesondere eine fortwährende Kommunikation sämtlicher Mitglieder des Entwicklungsteams von entscheidender Bedeutung. Zahlreiche Entwickler legen dabei hohe Anforderungen an die zu verwendenden Hilfsmittel. Aufgrund zahlreicher Entscheidungen im Webdesign und Hindernissen während der Programmierung können nicht alle Kommunikationswege eingesetzt werden. Neben dem Datenschutz spielt dabei insbesondere die Praktikabilität eine sehr große Rolle. Häufig wird deshalb auf die drei großen Kommunikationskanäle zurückgegriffen:
Slack
Bei Slack handelt es sich um einen webbasierten Instant-Messaging-Dienst des gleichnamigen amerikanischen Unternehmens. Mithilfe dieser Software können sowohl Einzelnachrichten als auch Nachrichten an eine Gruppe verschickt werden. Darüber hinaus erlaubt es ebenfalls die gemeinsame Bearbeitung von Dokumenten mit anderen Teammitgliedern. Aus diesem Grund ist Slack modern und wird auch in Deutschland häufig von Entwicklungsteams eingesetzt
Skype
Die Software Skype hingegen wird hauptsächlich zur Kommunikation genutzt. Obwohl dieser Dienst ebenfalls die Möglichkeit bietet, Daten über das Internet auszutauschen, können Dokumente nicht gleichzeitig von mehreren Nutzern bearbeitet werden. Aus diesem Grund wird es oftmals ergänzend zu anderen Softwarelösungen eingesetzt. Im Gegensatz zu vielen Konkurrenzprodukten ermöglicht Skype jedoch das Telefonieren mit anderen Nutzern, Festnetzanschlüssen und Mobiltelefonen. Aus diesem Grund wird es ebenfalls häufig zur Kommunikation mit Kunden eingesetzt.
Asana
Letztlich hat sich innerhalb der Web-Entwicklung auch die Kommunikationssoftware Asana etabliert. Diese Software wurde speziell entwickelt, um Entwicklerteams sowohl beim Datenaustausch als auch bei ihrer Kommunikation zu unterstützen. Dabei können den Nutzern sowohl Aufgaben zugeordnet als auch Updates zu geänderten Daten übermittelt werden. Aus diesem Grund ist Asana überaus modern und eignet sich hervorragend, um die täglichen Herausforderungen der Webentwickler zu meistern.
Editoren
Die Wahl des Editors hingegen erfolgt in den meisten Fällen aufgrund persönlicher Präferenzen der Teammitglieder oder der Teamleitung. Eine kleine Auswahl an guten Editoren:
Darüber hinaus gibt es zahlreiche weitere Produkte auf dem Markt, die sich durch unterschiedliche Features sowie einem individuellem Design auszeichnen. Bei diesen Editoren handelt es sich um eine Programmierumgebung, die dem Entwickler zahlreiche Funktionen und Hilfsmittel zur Verfügung stellt, um das Backend sowie das Frontend zu entwickeln.
Versionskontrolle
Eine ähnliche Situation liegt bei der Nutzung von Tools zur Versionskontrolle vor. In den meisten Fällen kommen dabei die Programme der Anbieter zum Einsatz:
Des Weiteren gibt es zahlreiche kleinere Anbieter, die vorrangig aufgrund zusätzlicher Funktionalitäten überzeugen. Die Wahl des Herstellers erfolgt jedoch ebenfalls in den meisten Entwicklerteams aufgrund persönlicher Präferenzen sowie Erfahrung im Umgang mit der Software eines Anbieters. Diese Tools werden eingesetzt, um mehrere Versionen von den bearbeiteten Dateien anzulegen. Auf diese Weise können Änderungen am Design oder am Code einer Webapplikation innerhalb kürzester Zeit rückgängig gemacht werden.
5. Sprachen, Techniken und Frameworks
In den vergangenen Jahren kam es aufgrund zahlreicher innovativer Entwicklungen zur Entstehung diverser, nützlicher Sprachen, Frameworks und Techniken. Insbesondere Frameworks hat die Arbeit der Webentwickler enorm vereinfacht und für eine Steigerung der integrierbaren Funktionalitäten gesorgt.
Einige Dinge bleiben jedoch immer gleich. Die Verwendung der beiden zentralen Elemente HTML und CSS ist etwas, das sich auch in den kommenden Jahren innerhalb der Webentwicklung nicht ändern wird. Bei HTML handelt es sich um eine textbasierte Auszeichnungsmethode, die zur Strukturierung von Webapplikationen eingesetzt wird. Der Begriff HTML steht dabei für die Bezeichnung "Hypertext Markup Language". Grundsätzlich gibt diese die Strukturierung einer Webapplikation vor und dient dadurch als Grundlage für sämtliche Websites im World Wide Web. Bei CSS-Dateien handelt es sich hingegen um "Cascading Style Sheets". Diese stehen in enger Verbindung zum verwendeten HTML einer Webapplikation. So werden im CSS sämtliche Eigenschaften definiert, welche das grundsätzliche Layout sowie die Anordnung aller Elemente der Webapplikation betreffen. Grundsätzlich können diese Regelungen auch im HTML getroffen werden. Die Nutzung von CSS-Dateien ermöglicht jedoch eine einheitliche Struktur in allen Unterseiten eines Projektes. Aus diesem Grund spielt das CSS insbesondere für das Webdesign eine tragende Rolle.
JavaScript
Die Verwendung von JavaScript ist ebenfalls in der Programmierung von Webapplikationen seit einigen Jahren etabliert. Dabei handelt es sich um eine Programmiersprache, die vor allem im Backend eingesetzt wird. Diese Programmiersprache wurde 1995 speziell für die Webentwicklung entworfen und seither in nahezu jedem Projekt eingesetzt. Grundsätzlich wird mithilfe von JavaScript eine Manipulation der Inhalte einer Webapplikation ermöglicht. Auf diese Weise werden die Inhalte von Websites nicht nur statisch angezeigt, sondern können sich in Abhängigkeit von der Eingabe des Nutzers ändern.
jQuery
Die Bibliothek jQuery hingegen ist modern. Sie stellt zahlreiche JavaScript-Funktionen zur Verfügung, die eingesetzt werden können, um standardmäßige Funktionalitäten in Webapplikationen zu integrieren. Aktuell ist diese Bibliothek bereits standardmäßig in zahlreichen Content-Management-Systemen integriert. Kaum ein Framework verfügt nicht über dieses wertvolle Tool der Webentwicklung.
Angular
Letztlich ist derzeit der Einsatz von Angular sehr beliebt. Dabei handelt es sich um ein Framework, das hauptsächlich im Bereich der Webentwicklung eingesetzt wird. Dieses Framework wird im Wesentlichen von großen Unternehmen der Branche publiziert sowie fortwährend weiterentwickelt. Aus diesem Grund ist Angular zu jedem Zeitpunkt aktuell und modern. Es ermöglicht das einfache Erstellen von anpassungsfähigen Webinhalten.
React
Bei React handelt es sich genau genommen um eine JavaScript-Bibliothek, welche von Facebook entwickelt wurde und seit 2013 als Open-Source-Lösung zur Verfügung steht. Unter anderem wurden Webanwendungen, wie Facebook, Instagram, Netflix oder Airbnb auf Basis von React entwickelt. Im Gegensatz zu anderen MVC-Frameworks besteht React nur aus der View-Komponente. Diese wird in einzelne Funktionen bzw. Komponenten heruntergebrochen, welche den UI-Teil und die Logik der Applikation, also HTML und JavaScript beinhalten. Um den Code einfacher lesen zu können, stellt React in Form von JSX eine optionale JavaScript-Syntax-Erweiterung zur Verfügung. JSX ist eine von React unabhängige Technologie und muss nicht zwingend verwendet werden. Es handelt sich dabei um eine statisch typisierte, objektorientierte Programmiersprache, die zu eigenständigem JavaScript kompiliert wird.
Bootstrap
Viele Entwicklerteams setzen das Framework Bootsrap ein. Dieses ermöglicht ebenfalls das einfach Erstellen von fortschrittlichen Webinhalten. Aus diesem Grund stellt es sowohl für das Backend als auch für das Webdesign eine sehr große Hilfe dar.
Less
Less ist eine Stylesheet-Sprache mit dem Ziel, das Schreiben von CSS effizienter zu gestalten. Hauptziele sind dabei, intelligente Steuerungen zu ermöglichen sowie Code-Wiederholungen zu vermeiden. Less ist eine Obermenge von CSS, das heißt, ein CSS-Code ist gleichzeitig auch gültiger Less-Code. Less wird zu CSS kompiliert. Zusätzlich zu den normalen CSS-Anweisungen bietet Less die Schachtelung von Regeln, wodurch Code-Wiederholungen vermieden werden können. Beispielsweise können einer (bestehenden oder vom Entwickler festgelegten) Klasse von Elementen Regeln zugewiesen werden.
6. Die aktuelle Frontend-Entwicklung im Vergleich zu 2007
In den vergangenen zehn Jahren kam es zu zahlreichen innovativen Entwicklungen. Auf diese Weise wurde nachhaltig für eine Erhöhung der Standards im Webdesign sowie in der Programmierung gesorgt. Den größten Einfluss auf die aktuelle Frontend-Entwicklung hatte die zunehmende Entwicklung von Templates.
Templates
Bei Templates handelt es sich um Vorlagen in der elektronischen Datenverarbeitung. Innerhalb der Webentwicklung werden sie hauptsächlich eingesetzt, um das Erstellen von Webapplikationen stark zu vereinfachen. Auf diese Weise hat sich insbesondere das Design von modernen Websites nachhaltig verbessert. Einige Templates lösen sogar zahlreiche moderne Herausforderungen des Webdesigns, damit sich der Entwickler vollständig auf das Erstellen des Inhaltes konzentrieren kann.
Responsive Webdesign
Eine der zentralen Herausforderungen im aktuellen Design von Websites stellt deren Responsibilität dar. Dabei handelt es sich um die Fähigkeit einer Webanwendung, sich selbstständig an die unterschiedlichen Bildschirmauflösungen der Endgeräte der Verbraucher anzupassen. Auf diese Weise wird eine optimale Darstellung aller Inhalte auf jedem modernen Endgerät ermöglicht. Aus diesem Grund gehen aktuell immer mehr Webentwickler dazu über, ein vorhandenes Template auf die individuellen Bedürfnisse des Kunden anzupassen, anstatt wie vor zehn Jahren eine Webanwendung vollständig neu zu erstellen.
Zahlreiche neue Möglichkeiten dank innovativer Entwicklungen
Diese besonders effektive Vorgehensweise in der Webentwicklung wurde lediglich aufgrund zahlreicher innovativer Entwicklungen ermöglicht. Insbesondere die Entwicklung von Templates hat dazu beigetragen, dass hochwertige und moderne Websites aktuell innerhalb deutlich kürzerer Zeit erstellt werden können, als es vor zehn Jahren möglich gewesen wäre.
Nichts geht über eine gute Kommunikation
Darüber hinaus haben auch Entwicklungen im Bereich der Kommunikation zu einer Qualitätssteigerung in der Webentwicklung geführt. Entwicklerteams stehen heute deutlich mehr Möglichkeiten zur Verfügung, um die Herausforderungen der Frontend- sowie Backend-Entwicklung gemeinsam auf effiziente Weise meistern zu können.
