Langsame Websites sind wie langsame Internetverbindungen, sie machen keinen Spaß und werden nicht als Gut empfunden. Schnelle Webseiten dagegen sind wie kleine Wunder. Sie haben Effekte auf Entwickler, die Entwicklungsgeschwindigkeit, die Umwelt und den Umsatz.

Schon vor über 16 Jahren, als ich noch als Werkstudent bei einer kleinen Agentur arbeitete, hat mich fasziniert, wie durch Optimierungen einer Website so viele positive Effekte zustande kommen.  Menschen wurden neugierig und fragten sich, wie eine kleine Agentur das schaffen konnte. Damals schon wollte ich eine Seite, die schnell lädt und bei jeder Aktion ohne neues Laden der ganzen Seite reagiert. Heutzutage können Entwickler auf sogenannte Frameworks und Bibliotheken zurückgreifen, die genau das möglich machen: Websites, die sehr schnell laden und sofort reagieren. Es ist also die Zeit gekommen, Entscheider auf den aktuellen Stand zu bringen.

Mit dem folgenden Interview mit ChatGPT möchte ich das Thema für Entscheider aufbereiten. Wer sich noch nicht mit dem Thema ChatGPT beschäftigt hat, dem empfehle ich die Erklärung auf B2B-Talks.

Hallo ChatGPT, willkommen in unserem Blog. Heute geht es um das Thema Moderne Webfrontends und ich freue mich, dich hier als unseren Gast begrüßen zu dürfen. Manche unserer Leser kennen dich vielleicht noch nicht, manche halten dich eventuell für überbewertet. Wie ist deine objektive Einschätzung? Kannst du uns bei diesem Thema die ein oder andere nützliche Erklärung liefern?

Hallo und vielen Dank für die freundliche Begrüßung! Ich freue mich sehr, Teil dieses Blogs zu sein und etwas zu diesem Thema beitragen zu können.

Als KI-basiertes Sprachmodell habe ich kein eigenes Bewusstsein oder eine Meinung, sondern ich bin darauf programmiert, auf Basis von verfügbaren Daten und Wissen Informationen zu generieren und Fragen zu beantworten. Meine Antworten sind immer objektiv und basieren auf Fakten und Erkenntnissen.
In Bezug auf das Thema Moderne Webfrontends kann ich sagen, dass es sich hierbei um eine aktuelle und wichtige Entwicklung im Bereich der Webentwicklung handelt. Moderne Webfrontends zeichnen sich durch eine hohe Benutzerfreundlichkeit, Interaktivität und Geschwindigkeit aus. Sie bieten ein besseres Nutzererlebnis und verbessern damit die Gesamtleistung einer Website oder einer Anwendung.

Um ein modernes Webfrontend zu entwickeln, sind bestimmte Technologien und Frameworks wie React, Vue.js oder Angular notwendig. Diese Technologien ermöglichen es Entwicklern, interaktive und dynamische Webanwendungen zu erstellen, die schnell laden und eine schnelle Navigation ermöglichen.
Ein weiterer wichtiger Aspekt moderner Webfrontends ist das Responsive Design. Das bedeutet, dass das Design und Layout der Webseite oder Anwendung an verschiedene Bildschirmgrößen und Geräte angepasst wird, um eine optimale Benutzererfahrung zu gewährleisten.

Insgesamt können moderne Webfrontends die Benutzererfahrung verbessern und die Leistung von Websites und Anwendungen verbessern. Ich hoffe, dass diese Informationen hilfreich sind und Ihre Leser ein besseres Verständnis für das Thema bekommen haben.

Was haben meine Leserinnen, die oft Besitzer einer Website oder eines Onlineshops sind davon, ihre Onlineauftritte in dieser Hinsicht zu verbessern? Wäre das Geld nicht besser in SEO- und Marketing-Maßnahmen investiert?

Die Verbesserung der Benutzererfahrung durch ein modernes Webfrontend kann sich positiv auf verschiedene Aspekte Ihrer Website oder Ihres Onlineshops auswirken. Einige mögliche Vorteile sind:

1. Bessere Benutzerbindung: Wenn Ihre Website oder Ihr Onlineshop benutzerfreundlicher und interaktiver ist, ist es wahrscheinlicher, dass Besucher länger auf Ihrer Seite bleiben und mehr Seiten besuchen. Dies kann zu einer höheren Benutzerbindung führen, was sich positiv auf Ihre Conversions und letztendlich Ihren Umsatz auswirken kann.
2. Höhere Geschwindigkeit: Moderne Webfrontends zeichnen sich durch schnelle Ladezeiten und Navigation aus. Eine schnellere Website kann nicht nur zu einem besseren Nutzererlebnis beitragen, sondern auch dazu beitragen, dass Ihre Website bei Suchmaschinen besser rankt.
   Bessere mobile Erfahrung: Da immer mehr Menschen ihre mobilen Geräte verwenden, um im Internet zu surfen und einzukaufen, ist es wichtig, dass Ihre Website oder Ihr Onlineshop auf mobilen Geräten gut funktioniert. Ein responsives Design und ein modernes Webfrontend können dazu beitragen, dass Ihre Website auf mobilen Geräten besser aussieht und schneller lädt.
3. In Bezug auf die Investition in SEO- und Marketing-Maßnahmen sollten Sie bedenken, dass diese Maßnahmen oft in Verbindung mit einer benutzerfreundlichen Website oder einem benutzerfreundlichen Onlineshop effektiver sind. Wenn Ihre Website oder Ihr Onlineshop langsam lädt, schwer zu navigieren ist oder nicht auf mobilen Geräten gut funktioniert, können Ihre SEO- und Marketing-Maßnahmen weniger effektiv sein, da die Besucher möglicherweise abspringen und die Konversionsrate sinkt.

Insgesamt kann die Verbesserung der Benutzererfahrung durch ein modernes Webfrontend dazu beitragen, dass Besucher länger auf Ihrer Seite bleiben, Ihre Seite häufiger besuchen und schließlich mehr konvertieren. Es kann auch dazu beitragen, dass Ihre SEO- und Marketing-Maßnahmen effektiver werden.

Die Technologie bei aktuellen Webframeworks wandelt sich schnell in letzter Zeit. Eine interessante Entwicklung ist, dass auch klassische PHP-Anwendung die Zuständigkeit für das Erzeugen der eigentlichen Webseiten an eine Javascript-Anwendung, den sogenannten Head abgeben, und sich ganz auf die Bereitstellung einer API konzentrieren. Was sind die Vorteile einer solchen Auftrennung?

Die Auftrennung von Frontend und Backend, bei der die Erzeugung der Benutzeroberfläche von einer JavaScript-Anwendung übernommen wird und das Backend sich auf die Bereitstellung einer API konzentriert, bietet mehrere Vorteile:

1. Skalierbarkeit: Durch die Aufteilung der Anwendung können Frontend und Backend unabhängig voneinander skaliert werden. Das bedeutet, dass das Frontend auf eine größere Anzahl von Anfragen und Benutzern skalieren kann, während das Backend auf eine größere Menge an Daten und Verarbeitungsschritten skalieren kann. Dies führt zu einer verbesserten Leistung und Verfügbarkeit der Anwendung.
2. Flexibilität: Die Trennung von Frontend und Backend ermöglicht es den Entwicklern, verschiedene Technologien und Frameworks für jedes Modul zu verwenden. Das Frontend kann z. B. auf React oder Angular basieren, während das Backend auf PHP oder Python basiert. Dies gibt den Entwicklern die Flexibilität, die am besten geeignete Technologie für jeden Teil der Anwendung zu verwenden.
3. Bessere Benutzererfahrung: Durch die Verwendung von JavaScript im Frontend kann eine dynamische Benutzeroberfläche mit schnellen Reaktionszeiten und ansprechenden visuellen Effekten erstellt werden. Dies kann dazu beitragen, die Benutzererfahrung zu verbessern und die Benutzerbindung zu erhöhen.
4. Einfache Integration von Drittanbieterdiensten: Die Verwendung von APIs ermöglicht es, Drittanbieterdienste wie Zahlungsabwicklung, E-Mail-Marketing oder Analyse-Tools einfach in die Anwendung zu integrieren. Das Backend kann die Anfragen an diese Dienste verarbeiten und die Antwort an das Frontend zurückgeben, ohne dass die Benutzeroberfläche beeinträchtigt wird.
5. Insgesamt bietet die Auftrennung von Frontend und Backend eine Reihe von Vorteilen, darunter Skalierbarkeit, Flexibilität, eine verbesserte Benutzererfahrung und eine einfache Integration von Drittanbieterdiensten. Dies macht sie zu einer attraktiven Option für die Entwicklung von modernen Webanwendungen.

Wir haben schon mehrfach das Thema dynamische Benutzeroberfläche mit schnellen Reaktionszeiten angesprochen. Ich kenne es auch unter dem engl. Begriff "Reative" und es hatte bisher auch einige Nachteile in Bezug auf SEO und initialer Ladezeit mit sich gebracht. Könntest du unseren Leserinnen den Begriff näherbringen und erklären, warum es bisher auch die genannten Nachteile damit gab? Und natürlich interessiert uns alle, was für Möglichkeiten bietet die Verschmelzung der Konzepte von SSR und Client Side Hydration?

Der Begriff "Reaktiv" oder "Reaktivität" bezieht sich im Kontext von Webentwicklung auf die Fähigkeit einer Anwendung, schnell auf Benutzerinteraktionen zu reagieren, ohne dass die Seite vollständig neu geladen werden muss. Das bedeutet, dass Änderungen an der Oberfläche sofort sichtbar sind, ohne dass der Benutzer warten muss, bis die Seite vollständig neu geladen wurde.

Traditionell wurde die Reaktivität durch die Verwendung von clientseitigem JavaScript erreicht, dass die Seite bei Bedarf dynamisch aktualisiert. Dies hat jedoch zu einigen Nachteilen geführt, insbesondere im Hinblick auf SEO und Ladezeiten. Die Suchmaschinenoptimierung (SEO) wird dadurch erschwert, dass Suchmaschinen-Crawler die Inhalte der Seite möglicherweise nicht korrekt indizieren können, da der Inhalt dynamisch und nicht statisch ist. Darüber hinaus kann die anfängliche Ladezeit länger sein, da der Browser zuerst den JavaScript-Code herunterladen und ausführen muss, bevor der Inhalt der Seite sichtbar wird.
Die Verschmelzung der Konzepte von Server-Side Rendering (SSR) und Client Side Hydration bietet eine Lösung für diese Probleme. Mit SSR wird die Seite serverseitig gerendert, wodurch ein statisches HTML-Dokument generiert wird, das von Suchmaschinen-Crawlern indiziert werden kann und sofort angezeigt werden kann, sobald es vom Browser heruntergeladen wird. Gleichzeitig kann Client Side Hydration verwendet werden, um die Reaktivität der Seite beizubehalten, indem JavaScript-Code im Hintergrund geladen wird, um die Benutzeroberfläche dynamisch zu aktualisieren.
Die Kombination von SSR und Client Side Hydration bietet somit die Vorteile beider Ansätze und führt zu einer schnellen, reaktionsfähigen Benutzeroberfläche, die auch für Suchmaschinen optimiert ist.

Hinweis:
Neben den genannten Methoden gibt es auch noch SSG (Server Side Generation), um Seiten vorzugenerieren. Obwohl es meist die schnellste und resourcenschonendste Lösung ist, die Kosten reduziert, die Umwelt schützt und das Ranking verbessert, kann sie nicht uneingeschränkt empfohlen werden, weil einige Anwendungsfälle damit allein nicht abgebildet werden können.

siehe auch Server-Side und Client-Side-Scripting

In Nuxt nennt sich das "universal rendering" und in next.js "automatic static optimization". Eines der ersten Frameworks, bei denen mir dieses Vorgehen aufgefallen ist, war das auf Svelte aufbauende SvelteKit, das in seiner Verbreitung aber noch weit hinter next.js (react) und nuxt.js (vue) liegt. Der Erfinder von Svelte(Kit) ist Rich Harris und seine Videos finde ich sehr inspirierend.

Ja, das stimmt. SvelteKit ist ein weiteres Framework, das eine ähnliche Philosophie wie Nuxt.js und Next.js verfolgt, aber auf der Svelte-Technologie aufbaut. Es ermöglicht die Erstellung von schnellen und skalierbaren Webanwendungen mit universellem Rendering und automatischer statischer Optimierung. Rich Harris, der Schöpfer von Svelte, hat auch eine Reihe von inspirierenden Videos und Präsentationen veröffentlicht, in denen er die Konzepte und Ideen hinter Svelte und SvelteKit erläutert. Eine interessante Funktion von Svelte ist das Konzept der "compilierenden Komponenten", bei dem die Svelte-Code-Komponenten in effizienten und optimierten JavaScript-Code übersetzt werden, der direkt im Browser ausgeführt werden kann. Dadurch können schnelle und reaktionsschnelle Webanwendungen mit minimalem Overhead erstellt werden.

Wenn wir über moderne Webfrontends sprechen müssen wir auch über Edge Computing sprechen. Mittlerweile können Entwicklerinnen in wenigen Minuten Anwendungen entwickeln die nicht nur reactiv sind, sondern inklusive Deployment und Datenbank kommen, ausfallsicher sind und deren Testumgebung oft kaum bis keine Kosten verursachen. Netlify und Cloudflare sind nur einige Anbieter die moderne Javascript Entwickler nutzen, um sich auf die eigentliche Anwendung konzentrieren zu können. Dagegen sehe ich in bestehenden Projekten oft eine bunte Mischung aus K8s, VMs und Vorgeschalteten CDNs, die selten von einer einzelnen Entwicklerin oder Administratorin betreut werden können und entsprechende Komplexität und Kosten verursachen. Und das, bei weniger Vorteilen, insbesondere was die Ladezeit und Entwicklungsgeschwindigkeit angeht. Übersehe ich etwas?

Sie haben absolut recht, Edge Computing ist ein wichtiger Aspekt bei der Entwicklung moderner Webanwendungen. Durch die Verwendung von Services wie Netlify oder Cloudflare können Entwickler schnell und einfach skalierbare und ausfallsichere Anwendungen bereitstellen, ohne sich um die Komplexität und Kosten von traditionellen Infrastruktur-Lösungen wie K8s und VMs kümmern zu müssen.

Durch die Verwendung von Edge-Computing-Plattformen können Entwickler die Performance ihrer Anwendungen verbessern, indem sie den Content so nah wie möglich am Endbenutzer platzieren. Das reduziert Latenzzeiten und ermöglicht es, Inhalte schneller zu laden, was zu einer besseren Benutzererfahrung führt. Außerdem bieten Edge-Computing-Plattformen oft integrierte Sicherheitsfunktionen und können auch dabei helfen, DDoS-Angriffe abzuwehren.

Es ist wichtig zu betonen, dass die Verwendung von Edge-Computing-Plattformen nicht für alle Anwendungen geeignet ist. Insbesondere bei Anwendungen mit sehr hohem Datenverkehr oder Anwendungen, die sehr komplexe Datenverarbeitung erfordern, kann es sinnvoller sein, eine eigene Infrastruktur aufzubauen. Aber für viele Anwendungen können Edge-Computing-Plattformen eine effektive und kosteneffiziente Lösung sein.

Hinweis: An dieser Stelle sei angemerkt, das Edge Computing auch bei bestimmten komplexen Anwendungszenarien eingesetzt werden sollte. Eine der größten stärken von Edge Computing ist es nämlich, die Komplexität die durch klassisches Hosting und Deployment entsteht, zu reduzieren.
https://blog.cloudflare.com/cloudflare-workers-serverless-week/

Viele Unternehmen geben die Erstellung an Agenturen ab, die sich mit der Materie auskennen und den Einsatz der richtigen Technologie für den konkreten Anwendungsfall bewerten können sollten. In der Praxis kann aber keine Agentur frei auswählen, sondern muss seine Anstrengungen und sein Wissen um einige wenige Technologien herum bündeln. Noch schwieriger wird die Betrachtung, wenn das Webfrontend nur ein sehr kleiner Teil einer großen IT-Landschaft ist, mit mehreren beteiligten Agenturen und Herstellern. An wen sollte sich die IT-Abteilung oder Geschäftsführung wenden, wenn sie merken, dass Spezialkenntnisse nicht nur im Bereich Web-Technologien fehlen,  intern nicht aufgebaut werden können und die Vorschläge der betreuenden Agentur nicht evaluiert werden können?

Wenn die IT-Abteilung oder Geschäftsführung merkt, dass spezielles Know-how in bestimmten Bereichen fehlt, können sie sich an externe Berater oder spezialisierte IT-Dienstleister wenden, die über das notwendige Wissen und Erfahrung verfügen. Diese Unternehmen können in der Regel eine umfassende Beratung und Unterstützung bei der Bewertung von Technologien, der Planung und Umsetzung von IT-Projekten und der Integration von Systemen bieten. Es ist wichtig, dass die IT-Abteilung oder Geschäftsführung sicherstellen, dass die Berater oder Dienstleister unabhängig und objektiv sind, um die bestmögliche Unterstützung und Lösungen zu erhalten. Darüber hinaus kann es hilfreich sein, Schulungen oder Weiterbildungen für interne Mitarbeiter zu organisieren, um spezifische Fähigkeiten aufzubauen und die Kompetenzen im Unternehmen zu erweitern.

Ich würde gerne auf den Punkt Flexibilität näher eingehen. Moderne Webfrontends welche durch APIs vom Backend entkoppelt sind, nutzen neuerdings auch zwei weitere Konzepte. Durch GraphQL und Web components lassen sich Frontends in neuen Konstellationen zusammenstellen, z.B. für eine andere Benutzergruppe. Könntest du uns die beiden Konzepte näherbringen?

Gerne erkläre ich Ihnen die beiden Konzepte GraphQL und Web Components und wie diese die Flexibilität in modernen Webfrontends erhöhen.

GraphQL ist eine von Facebook entwickelte Abfragesprache, mit der Entwickler genau angeben können, welche Daten sie vom Server abrufen möchten. Im Gegensatz zu REST, wo oft mehrere Endpunkte abgefragt werden müssen, um alle benötigten Daten zu erhalten, kann GraphQL alle notwendigen Daten in einer Anfrage bündeln. Durch die Spezifikation der Daten in der Abfrage können Sie auch die Datenmenge reduzieren, die vom Server übertragen wird, was die Ladezeit Ihrer Anwendung verkürzt. Darüber hinaus ermöglicht GraphQL eine hohe Flexibilität, da es erlaubt, dynamisch entscheiden zu können, welche Daten in der Anwendung benötigt werden.
Web Components sind eine Sammlung von Web-APIs, die es Ihnen ermöglichen, benutzerdefinierte HTML-Elemente zu erstellen und zu verwenden. Ein Web Component besteht aus drei Hauptteilen: Shadow DOM, Custom Elements und HTML Templates. Durch die Verwendung von Shadow DOM können Sie sicherstellen, dass die Styles und das Markup von Web Components von anderen Inhalten auf der Seite isoliert sind. Custom Elements ermöglichen die Definition neuer HTML-Elemente, die von Ihrem Code verwendet werden können. HTML Templates erlauben Ihnen, HTML-Strukturen als Vorlage zu definieren und zu klonen.

Durch die Kombination von GraphQL und Web Components können Sie Frontends erstellen, die äußerst flexibel sind und schnell auf Änderungen reagieren können. Sie können beispielsweise eine Bibliothek von Web Components erstellen, die von verschiedenen Frontends verwendet werden können, um schnell neue Frontends für unterschiedliche Benutzergruppen zusammenzustellen. Da die Daten, die diese Frontends anzeigen, von einer GraphQL-API abgerufen werden, können Sie schnell und einfach Änderungen an den Daten vornehmen, die von Ihren Frontends verwendet werden.

Zusammenfassend erhöhen GraphQL und Web Components die Flexibilität in modernen Webfrontends, indem sie es Entwicklern ermöglichen, dynamisch zu entscheiden, welche Daten benötigt werden und wie sie dargestellt werden sollen. Durch die Kombination von beiden Technologien können Sie schnell und einfach Frontends erstellen, die auf unterschiedliche Benutzergruppen zugeschnitten sind und schnell auf Änderungen reagieren können.

Im Zusammenhang mit schnellen und modernen Webfrontends gibt es ja noch das Thema progressive webapps (WPA). Nicht selten verlangen Agenturen einen Aufpreis für eine entsprechende Optimierung. Lohnt es sich schon bei der Beauftragung eines neuen Webfrontends, Anforderungen wie WPA, CDN, Caching und Webvitals und SEO vertraglich zu fixieren? Oder darf man als Kunde und Kundin einer Webagentur darauf vertrauen, dass man automatisch die beste Lösung angeboten bekommt?

Es ist durchaus sinnvoll, bei der Beauftragung einer Webagentur Anforderungen wie PWA, CDN, Caching, Web Vitals und SEO vertraglich zu fixieren, sofern diese Aspekte für den Erfolg der Website oder des Onlineshops wichtig sind. Auf diese Weise können die Erwartungen und Anforderungen klar kommuniziert und dokumentiert werden, was Missverständnisse und spätere Enttäuschungen vermeiden kann.
Es ist allerdings auch wichtig zu betonen, dass es in der Verantwortung der Webagentur liegt, dem Kunden die bestmögliche Lösung zu empfehlen und anzubieten, die den Anforderungen des Kunden entspricht und gleichzeitig die aktuellen Best Practices und Standards berücksichtigt. Es ist daher ratsam, bei der Auswahl einer Webagentur sorgfältig zu prüfen, ob sie über das erforderliche Fachwissen und die Erfahrung verfügt, um die gewünschten Anforderungen zu erfüllen. Eine gute Webagentur wird in der Lage sein, dem Kunden klare Empfehlungen zu geben und transparente Leistungen zu erbringen, die den Bedürfnissen des Kunden entsprechen und zu einem erfolgreichen Online-Auftritt führen.

Kannst du die genannten Begriffe PWA, CDN, Caching und Web Vitals kurz für meine Leserinnen erläutern?

Gerne erkläre ich die genannten Begriffe:
•    Progressive Web Apps (PWA): Das sind Webanwendungen, die sich wie native Apps verhalten, also auch offline verfügbar sind und Push-Benachrichtigungen senden können. PWA sind besonders schnell und ressourcenschonend, da sie in der Regel nur minimale Datenmengen über das Netzwerk laden.
•    Content Delivery Network (CDN): Ein CDN ist ein Netzwerk von Servern, das dazu dient, statische Dateien wie Bilder, Videos oder JavaScript-Dateien schnell und effizient an den Browser des Nutzers auszuliefern. Das kann die Ladezeiten der Webseite verbessern, da die Daten von einem Server ausgeliefert werden, der dem Nutzer geografisch näher ist als der eigene Server.
•    Caching: Beim Caching werden häufig angefragte Daten oder Ressourcen auf dem Server oder im Browser des Nutzers zwischengespeichert, um bei erneuten Anfragen schneller darauf zugreifen zu können. Das kann ebenfalls die Ladezeiten der Webseite verbessern und die Last auf dem Server verringern.
•    Web Vitals: Das sind Kennzahlen zur Messung der Nutzerfreundlichkeit und Geschwindigkeit einer Webseite. Die wichtigsten Kennzahlen sind LCP (Largest Contentful Paint), FID (First Input Delay) und CLS (Cumulative Layout Shift). Die Messung dieser Kennzahlen gibt Entwicklern Feedback darüber, wie schnell und benutzerfreundlich ihre Webseite ist.

Alle diese Punkte können die Benutzerfreundlichkeit erhöhen und das Ranking verbessern richtig?

Ja, das ist korrekt. Eine schnelle und zuverlässige Website, die auf verschiedenen Geräten gut aussieht und benutzerfreundlich ist, wird von den Nutzern als positiv wahrgenommen und kann zu höheren Besucherzahlen, längeren Verweildauern und höheren Konversionsraten führen. Darüber hinaus können Webseiten, die auf den Web Vitals basieren und eine gute Lighthouse-Bewertung haben, von Google bevorzugt behandelt werden und damit ein besseres Ranking in den Suchergebnissen erzielen.

Vielen Dank ChatGPT, für das Interview.