Eine Geschichte über Frontend-Architekturen – Die Entstehung des FE-Ingenieurs

In jüngsten Diskussionen haben wir verschiedene Anwendungsarchitektur-Muster untersucht und dabei die entscheidende Bedeutung der Isolierung von Geschäftslogik und Code innerhalb einer Organisation hervorgehoben. Frühe Entscheidungen während der Anwendungsentwicklung beeinflussen maßgeblich die zukünftige Konsistenz und Wartbarkeit. Ein Fehltritt in dieser Phase kann später im Anwendungslebenszyklus kostspielige und zeitaufwändige Änderungen nach sich ziehen. Wenn man sich speziell auf Frontend-Architektur-Muster konzentriert, wird es unerlässlich zu verstehen, wie Webseiten für die Benutzererfahrung ausgeliefert und dynamisch aktualisiert werden.\n\nDiese Serie wird Anwendungsarchitekturen für moderne Webprodukte weiter erforschen, einschließlich Single Page Applications (SPAs), die Frameworks wie React, Vue und Angular nutzen, Backend-for-Frontend (BFF)-Muster und serverseitige Rendering-Techniken wie SSG (Static Site Generation), ISR (Incremental Static Regeneration) und SSR (Server-Side Rendering) mit Technologien wie Next.js, Nuxt und Astro. Weitere Themen sind Frontend-Monolithe und Microfrontend-Architekturen.\n\nHistorisch wurden Webanwendungen als Multi Page Applications (MPAs) gebaut, bei denen jede Benutzerinteraktion einen vollständigen Seitenreload auslöste, indem ein neues HTML-Dokument vom Server abgerufen wurde. Diese servergesteuerten, Thin-Client-Anwendungen nutzten JavaScript nur minimal, was zu langsamen und weniger reaktionsfähigen Benutzererfahrungen führte. Zur Verbesserung wurde AJAX (Asynchronous JavaScript and XML) eingeführt, das teilweise Seitenaktualisierungen ohne Neuladen des gesamten HTML-Dokuments ermöglichte. AJAX brachte die XMLHttpRequest-API hervor, die asynchrone Datenanfragen und -antworten erleichterte und so die Interaktivität durch Techniken wie Promises und Callbacks verbesserte, die später in der weit verbreiteten fetch()-API mündeten.\n\nMit zunehmender Komplexität der Anwendungen wurden jedoch die Leistungsgrenzen der JavaScript-Engines deutlich. Die starke Abhängigkeit von DOM-Manipulationen und zahlreichen asynchronen Aufrufen machte die Verwaltung der Frontend-Logik umständlich. Zur Bewältigung dieser Herausforderungen führte Google die V8-JavaScript-Engine ein, einen entscheidenden Durchbruch in der Webentwicklung. V8 implementierte Just-In-Time (JIT)-Kompilierung, die JavaScript in optimierten nativen Maschinencode übersetzte, anstatt es zeilenweise zu interpretieren. Zudem wurden fortschrittliche Optimierungen wie versteckte Klassen, Inline-Caching und ein verbesserter Garbage Collector integriert.\n\nDie Einführung von V8 beschleunigte nicht nur die JavaScript-Ausführung, sondern förderte auch die Entstehung von Node.js im Jahr 2009, das das JavaScript-Ökosystem sowohl auf Client- als auch auf Serverseite erheblich erweiterte. Ergänzt durch Innovationen wie clientseitiges Routing mit der History-API, virtuelle DOM-Implementierungen, komponentenbasierte Modularisierung und Bundler ermöglichten diese Technologien gemeinsam SPAs. SPAs bieten nahtlose Navigation ohne Seitenreloads, clientseitig gerenderte Benutzeroberflächen und wartbare modulare Codebasen.\n\nDas Aufkommen von SPAs markiert einen Meilenstein in der Frontend-Entwicklung und führte effektiv zur Entstehung der dedizierten Rolle des Frontend-Ingenieurs. Sie eröffneten Möglichkeiten für interaktivere und komplexere Webanwendungen und befeuerten die Popularität von Dashboards und Software-as-a-Service (SaaS)-Plattformen. Diese Entwicklung inspirierte auch die Entwicklung bahnbrechender Bibliotheken und Frameworks führender Technologieunternehmen. Während SPAs die Frontend-Entwicklung transformierten, legten sie auch den Grundstein für weitere architektonische Fortschritte, die die Zukunft von Webanwendungen weiterhin prägen.