HTML + CSS + JavaScript: die Basis für die Frontendentwicklung
Es ist noch gar nicht so lange her, dass die Begriffe Frontend und Backend eine nennenswerte Unterscheidung in der Softwareentwicklung haben. Der klassische Programmierer war ursprünglich für beides zuständig.
Doch mit dem Aufkommen des Internets begann es sich zu differenzieren. Dabei war der Webdesigner für das Frontend zuständig und der Webentwickler übernahm die funktionelle Programmierung, also das Backend. Programmierarbeit ist allerdings heutzutage in den meisten Fällen auch im Frontend notwendig.
Dadurch dass sich in der Webentwicklung diese beiden Bereiche getrennt entwickelt haben, gibt es dort unterschiedliche Technologien und Programmiersprachen. In der Webentwicklung dominieren heute im Frontendbereich HTML, CSS und Javascript.
Was ist das Frontend?
Das Frontend ist alles, was der Benutzer sehen oder bedienen (anklicken) kann – es geht um Interaktion, visuelle Elemente, Schnittstellen. Das Frontend wird oft als „Client-seitige“ Software bezeichnet und hat grafische Elemente, Bilder und Links.
Ein modernes Web-Frontend ist plattformunabhängig und ermöglicht ein responsives und zunehmend fortschrittliches Webdesign für alle Gerätetypen und Bildschirmauflösungen – vom Smartphone über das Tablet bis hin zum klassischen Desktop-PC. Da alle wichtigen öffentlichen Seiten mittlerweile mehr Zugriffe von mobilen Endgeräten als von Laptops oder stationären Computern haben, macht dieser Ansatz sehr viel Sinn.
Nur so kann eine hohe Nutzerakzeptanz und maximale Produktivität der Software durch umfassende Verfügbarkeit erreicht werden. Ein professioneller Frontend-Entwickler achtet zudem auf höchste Stabilität, damit eine kostengünstige Wartung möglich ist. Javascript, CSS und HTML5 sind dabei für jeden Frontend-Softwareentwickler unverzichtbar. Frontend-Entwickler arbeiten hauptsächlich an Websites. Backend-Entwickler kümmern sich um die gesamte Server-Logik, Datenbanken und den Client-Server-Datenfluss.
Auch wenn der größte Teil der Arbeit eines Backend-Entwicklers auf den ersten Blick nicht sichtbar ist, so ist er doch das Herzstück seiner Anwendung.
Was ist Webentwicklung?
Bei der Webentwicklung geht es um die Erstellung von Websites für das Internet. Ein großer Bereich der Webentwicklung dreht sich darum, Fehler zu erkennen und zu korrigieren, um eine Website dauerhaft zu verbessern.
Die Hypertext Markup Language (HTML) wird dabei in der Webentwicklung zur semantischen Grobstrukturierung digitaler Objekte durch sogenannte Marker verwendet. Auf diese Weise können Elemente wie Textabschnitte, Überschriften, Grafiken oder Hyperlinks definiert werden.
Ein solch ausgezeichneter Quellcode stellt die Grundstruktur jeder Webseite dar. Die moderne Version HTML5 erweitert einen solchen exzellenten Quellcode zusätzlich um Markups für Audio- und Videoelemente. Die wichtigsten Programmiersprachen zur Entwicklung lebendiger Webseiten für das Backend sind PHP, Java und Python – für das Frontend hingegen Javascript.
Wie arbeitet ein Frontend-Entwickler?
Frontend-Entwickler arbeiten oft in einer interdisziplinären, agilen Gruppe. Es findet immer ein reger Austausch mit Kollegen aus dem Backend- und Frontend-Bereich statt. Außerdem arbeiten sie oft eng mit den Abteilungen Design, Technik, Produkt- und Projektmanagement zusammen.
Mit Frontend-Techniken und -Technologien können Frontend-Entwickler Webseiten prinzipiell auch von Grund auf neu schreiben oder, was inzwischen immer häufiger der Fall ist, da es viel Zeit spart, auf das bestehende Design anwenden und es an die Bedürfnisse der Kunden anpassen. Neben der Beherrschung der zentralen Techniken sind auch gute methodische Fähigkeiten für die Frontend-Entwicklung wichtig.
Gerade Firmen und Unternehmen profitieren von Profis mit umfangreichen Kenntnissen. Dazu müssen die Programmierer Begriffe wie Black-Box-Testing, White-Box-Testing und Beta-Testing kennen und Abweichungen erklären können, außerdem muss der Quellcode klar strukturiert sein und eine umfangreiche Dokumentation erstellt werden. Dementsprechend braucht man Kenntnisse in CSS, sollte aber auch etwas von Programmierung verstehen.
Was ist HTML?
HTML ist eine sogenannte Auszeichnungssprache für Dokumente, die neben Texten auch Links, Bilder und andere Dinge enthalten. HTML-Dokumente sind dabei die Basis für des World Wide Web. Sie werden von allen Webbrowsern verarbeitet und angezeigt. HTML-Dateien versehen dabei die Inhalte mit zusätzlichen Informationen, zum Beispiel über Sprachen, den Verfasser oder den Inhalt des Dokuments.
Die visuelle Darstellung ist jedoch nicht Teil von HTML. Vor dem Aufkommen des World Wide Web und seiner Dienste, darunter HTML, war es nicht möglich, Dokumente elektronisch zwischen mehreren Geräten auszutauschen. Daher wurde eine Textauszeichnungssprache benötigt, die leicht zu verstehen war. Genau an dieser Stelle kam HTML ins Spiel. Um Forschungsergebnisse mit Kollegen austauschen zu können, wurde 1989 am CERN ein Projekt initiiert, aus dem letztendlich HTML hervorging.
Was ist CSS?
CSS ist eine Programmiersprache, die im Webdesign verwendet wird, um das Layout, die Farben und das Design von Websites standardmäßig zu programmieren. Zusammen mit HTML bildet CSS eine Kernsprache des World Wide Web.
Die Abkürzung steht für „Cascading Style Sheets“. Die darin definierten Stile werden in „Stylesheets“ mit der Endung .css an die Elemente einer Webseite angehängt. Viele Leute sind der Meinung, dass das Aufkommen von CSS ein Wendepunkt im Webdesign war, weil es Webentwicklern erlaubt, die Stile und das Aussehen mehrerer HTML-Seiten gleichzeitig zu überprüfen, so dass ein Webentwickler nun einen Stil für ein Element definieren und diesen auf unendlich vielen Seiten verwenden kann.
Was ist Javascript?
Javascript ist die Programmiersprache des World Wide Web – geschaffen für Webseiten und im Laufe der Zeit erweitert für immer komplexere Anwendungen. Sie bringt Interaktion auf HTML-Seiten und reduziert die zeitaufwändige Übertragung zwischen Benutzer, Browser und Server. Sie ermöglicht darüber hinaus die Interaktion mit dem Benutzer oder die Validierung von Eingaben. Mit Javascript können Einsteiger auch ohne viel Erfahrung und selbst mit wenig Programmierkenntnissen erstaunlich einfach Aufgaben lösen.
Mit dem Anstieg immer komplexerer Anforderungen für dynamische Frontends, wurden zahlreiche Erweiterungen (Frameworks) in Javascript entwickelt, die dieses in seiner Funktionalität stark erweitern. Eines der ersten Frameworks war JQuery. JQuery vereinfacht den Umgang mit den Elementen, aus denen eine Website besteht, erheblich und erspart dem Entwickler eine Menge Programmierarbeit, da JQuery eine Seite verändern kann, während sie dem Benutzer angezeigt wird. Weitere bekannte Frameworks, die zum Teil auf JQuery aufbauen, sind React, Angular oder Vue.
Fazit
Frontendentwickler im Bereich der Webentwicklung müssen heute mit einer großen Zahl unterschiedlicher Technologien und Programmiersprachen umgehen können. Gleichzeitig müssen sie so unterschiedliche Formate wie HTML, CSS und Javascript miteinander verknüpfen und zu einem funktionieren Ganzen vereinen.
Umfangreiche Javascript-Bibliotheken versuchen mittlerweile diesen Prozess zu vereinfachen und die Technologien miteinander in einem Paket zu verschnüren. Das bedeutet aber wiederum für den Frontendentwickler, dass er sich permanent in neue Technologien einarbeiten muss.
Interessante Links:
Das Zusammenspiel von HTML, CSS und JavaScript
Frontendentwicklung einfach erklärt auf Phlow
Bilder: Canva
Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.
Schreibe einen Kommentar