Geschichte des Frontends

4.1 Geschichte der Webentwicklung: von HTML bis HTML5 und CSS3

Anfang der 1990er Jahre erblickte die Webentwicklung dank Tim Berners-Lee das Licht der Welt. Er war überhaupt der erste Frontend-Entwickler: erfand HTML und schrieb darauf, erstellte selbst den ersten Browser. Einen echten Frontendler stoppt nicht einmal das Fehlen eines Browsers.

Obwohl CSS und JavaScript damals noch nicht erfunden waren, war das Erstellen von Websites einfacher. Man könnte sagen, dass Tim Berners-Lee der erste Old-School-Entwickler war, der Frontend betrieb, bevor es JavaScript und CSS gab.

1995 verabschiedete die Internet Engineering Task Force (IETF) HTML 2.0 als ersten offiziellen HTML-Standard. Diese Version enthielt die grundlegenden Tags und Attribute, die es ermöglichten, einfache Webseiten zu erstellen. HTML 2.0 legte das Fundament für die weitere Entwicklung der Webentwicklung.

HTML 3.2 und HTML 4.0: Erweiterung der Möglichkeiten

1997 war ein bedeutendes Jahr in der Geschichte von HTML. In diesem Jahr wurde HTML 3.2 vom W3C-Konsortium veröffentlicht. Diese Version unterstützte Tabellen, Java-Applets und mathematische Formeln, was die Möglichkeiten für Webentwickler erheblich erweiterte.

Später im selben Jahr erschien HTML 4.0, das erhebliche Verbesserungen brachte. Die Einbeziehung von CSS-Stilunterstützung, verbesserte Semantik und neue Elemente machten HTML 4.0 zu einem mächtigen Werkzeug für die Erstellung komplexerer und strukturierterer Webseiten. Die Einführung von CSS ermöglichte es Entwicklern, den Inhalt von seinem Erscheinungsbild zu trennen, was die Verwaltung von Stilen erleichterte und das Design vereinfachte.

CSS: Revolution in der Stilgestaltung von Webseiten

Der erste Standard für CSS (Cascading Style Sheets) wurde 1996 vom W3C veröffentlicht. CSS ermöglichte es Entwicklern, HTML-Dokumente zu gestalten, indem visuelle Elemente von der Seitenstruktur getrennt wurden. CSS1 bot grundlegende Stiloptionen für Text und Hintergrundbilder.

1998 wurde CSS2 eingeführt, das neue Funktionen hinzufügte, wie die Unterstützung von Media Queries, absolute und relative Positionierung sowie komplexere Druckstile.

CSS3, das 2011 begann, stellte eine modulare Architektur vor. Dadurch konnten neue Funktionen schrittweise eingeführt werden, darunter Animationen, Verläufe, Transformationen und verbesserte Layouts.

HTML5: Neues Zeitalter der Webentwicklung

HTML5, das durch die gemeinsamen Bemühungen von WHATWG und W3C entwickelt wurde, stellte ein bedeutendes Update dar und wurde 2014 offiziell vorgestellt. HTML5 fügte Unterstützung für Multimedia (Video und Audio), neue Elemente zur verbesserten Semantik (wie <article>, <section>, <header>, <footer>), verbesserte Formate für Webformulare und neue APIs für Grafik- und Multithreading-Unterstützung hinzu.

HTML5 erweiterte die Möglichkeiten der Webentwickler erheblich, wodurch interaktivere und dynamischere Webanwendungen erstellt werden konnten. Die Unterstützung von Multimediainhalten und neuen APIs machte Webanwendungen leistungsfähiger und funktionaler.

4.2 Von jQuery zu Angular und React

Je schneller das Internet wurde, desto schwerer wurden die Webseiten. Sie enthielten mehr CSS und JavaScript. Um das Schreiben zu vereinfachen, wurden verschiedene Bibliotheken genutzt. Eine der beliebtesten wurde jQuery.

jQuery: Komfortables Arbeiten mit JavaScript

jQuery wurde von John Resig erstellt und im Januar 2006 auf der BarCamp-Konferenz in New York veröffentlicht. Das Ziel von jQuery war es, die Interaktion mit HTML-Dokumenten, die Ereignisbehandlung, Animationen und Ajax-Interaktionen für die schnelle Webentwicklung zu vereinfachen.

jQuery wurde schnell populär dank der einfachen und intuitiven Methoden, die die Komplexität der Arbeit mit JavaScript und Cross-Browser-Problemen abstrahierten. Zu den Hauptfunktionen gehören:

• Selektoren, die es einfach machten, DOM-Elemente zu finden und zu manipulieren
• Einfaches Arbeiten mit Ereignissen
• Animationen und Effekte
• Integration mit Ajax für die Erstellung interaktiver Webseiten

jQuery änderte den Ansatz der Webentwicklung, machte sie zugänglicher und bequemer für Entwickler.

Angular: Einführung in dynamische Webanwendungen

Eine weitere Antwort auf die zunehmende Komplexität der Webseiten war das Auftauchen des Angular-Frameworks. AngularJS wurde erstmals von Google im Oktober 2010 vorgestellt. Das Projekt wurde von Misko Hevery und Adam Abrons erstellt, um die Entwicklung dynamischer Single-Page-Anwendungen (SPA) zu vereinfachen.

AngularJS stellte mächtige Werkzeuge für die Client-Entwicklung bereit, darunter:

• Deklaratives Daten-Binding durch Direktiven
• Eingebaute Services für HTTP-Anfragen
• Zwei-Wege-Datenbindung, die es ermöglicht, die Ansicht automatisch zu aktualisieren, wenn sich die Daten im Modell ändern
• Modularität und Testbarkeit des Codes

2016 stellte Google eine vollständig überarbeitete Version von Angular (Angular 2 und höher) vor, die zur Plattform für die Entwicklung skalierbarer und performanter Webanwendungen mit TypeScript wurde.

React: Revolution im UI-Rendering

React wurde von Jordan Walke bei Facebook entwickelt und im März 2013 zum ersten Mal veröffentlicht. React war die Antwort auf die Notwendigkeiten von Facebook, die Performance zu verbessern und komplexe Benutzeroberflächen zu unterstützen.

React stellte einen neuen Ansatz zur Entwicklung von Benutzeroberflächen vor, basierend auf Komponenten und virtuellem DOM:

• Komponentenbasierte Architektur, die es erlaubt, wiederverwendbare und isolierte Komponenten zu erstellen
• Virtuelles DOM, das die Aktualisierung der Oberfläche optimiert und schneller und effizienter macht
• Einseitige Datenbindung, die die Fehlersuche und Verwaltung des Anwendungszustands vereinfacht

React erlangte schnell Popularität und wurde die Grundlage für viele moderne Webanwendungen dank seiner Leistung und Flexibilität. Es wurde auch zur Basis für andere Bibliotheken und Frameworks wie React Native für mobile Anwendungen.

Diese drei Technologien — jQuery, Angular und React — spielten Schlüsselrollen in der Evolution der Webentwicklung, jede von ihnen brachte ihre einzigartigen Ansätze und Werkzeuge mit, die die Erstellung moderner Webanwendungen erheblich vereinfachten.

4.3 Node.js, Electron, React Native

HTML5, CSS3, JavaScript 2016 wurden so mächtig, dass das Web über den Browser hinauswuchs und sich zu einer vollständigen Frontend-Fullstack-Technologie entwickelte. Und der erste, der es spürte, war der Backend.

Node.js: Eroberung des Backends

Node.js wurde von Ryan Dahl erstellt und im Mai 2009 zum ersten Mal veröffentlicht. Das Hauptziel von Node.js ist es, eine Ausführungsumgebung für JavaScript außerhalb des Browsers bereitzustellen, was die Verwendung von JavaScript für die Serverentwicklung ermöglicht. Node.js basiert auf der V8-Engine von Google, was hohe Leistung und Geschwindigkeit gewährleistet.

Node.js verwendet nicht-blockierendes I/O (Input/Output), wodurch viele Verbindungen gleichzeitig verarbeitet werden können, ohne den Hauptausführungsstrang zu blockieren. Außerdem verfügt es über ein umfangreiches Ökosystem von Modulen, die über npm (Node Package Manager) verfügbar sind, was die Entwicklung und Integration verschiedener Bibliotheken und Werkzeuge erleichtert. Dank der V8-Engine sorgt Node.js für eine schnelle und effiziente Verarbeitung von Anfragen.

Electron: Eroberung des Desktops

Einen coolen UI für den Desktop zu schreiben, ist eine Herausforderung, aber HTML5+CSS3 ist da in der Nähe. Wenn wir das nur verwenden könnten... Deshalb haben Programmierer einen Trick erfunden: Ihr Anwendung öffnet das Hauptfenster, in dieses Fenster wird ein Browser eingebettet (VebView-Komponente), und in diesem Browser wird der Code in HTML5, CSS3 + JavaScript geladen.

Die Bibliothek Electron, ursprünglich bekannt als Atom Shell, wurde von GitHub für den Code-Editor Atom erstellt. Die erste Version von Electron wurde im Juli 2013 veröffentlicht. Das Ziel von Electron ist es, Entwicklern die Erstellung von Desktop-Anwendungen mit Web-Technologien wie HTML, CSS und JavaScript zu ermöglichen.

Electron ermöglicht die Erstellung von Anwendungen, die auf Windows, macOS und Linux mit derselben Codebasis laufen. Electron kombiniert die Möglichkeiten von Web-Technologien und die Leistung von Node.js, was den Zugriff auf das Dateisystem und andere Systemressourcen ermöglicht. Entwickler können bestehende Web-Frameworks und -Bibliotheken zur Erstellung von Schnittstellen und Funktionen verwenden.

React Native: Mobile Anwendungen

React Native wurde von Facebook entwickelt und erstmals im März 2015 vorgestellt. Das Ziel von React Native ist es, die Möglichkeit zu bieten, native mobile Anwendungen für iOS und Android mit JavaScript und React zu erstellen.

React Native verwendet native Komponenten, was eine Performance bietet, die mit nativen Anwendungen vergleichbar ist. Gleichzeitig können Entwickler Code schreiben, der sowohl auf iOS als auch auf Android läuft, was die Entwicklung erheblich vereinfacht und die Wartungszeit reduziert.

Dasselbe gilt wie bei Electron: Im Vollbildmodus der mobilen Anwendung öffnet sich eine VebView, in die die "Website" geladen wird, geschrieben in HTML5, CSS3 und JS. Alle haben erwartet, dass mobile Anwendungen Webseiten auf Handys verdrängen, aber passiert ist genau das Gegenteil: Webseiten haben native Anwendungen verdrängt.

Heute ist der Frontend Fullstack Software Engineer der gefragteste IT-Beruf der Welt. So ist die Entscheidung, Frontend-Entwickler zu werden, die richtige und weitsichtige!