Frontend-Entwicklungstrends und bewährte Praktiken (Teil II): Aufkommende Technologien

02.15.2019

Das Frontend Ihres Softwareprodukts ist wie die digitale Version eines Schaufensters, das neue Kunden anlockt. Daher ist es für jedes Unternehmen von entscheidender Bedeutung, auf dem neuesten Stand der Technik zu bleiben und die Vorteile der neuesten Technologien zu nutzen. Und selbst wenn Sie sich nicht auf Ihre Website verlassen, um neue Kunden zu gewinnen, zählen Ihre derzeitigen Kunden dennoch auf ein digitales Erlebnis, das einfach zu nutzen ist und sich nahtlos in Ihr Unternehmen einfügt. Wenn Sie nur begrenzte Ressourcen für Ihre Webpräsenz zur Verfügung haben, aber dennoch Wege finden wollen, Ihr Unternehmen an der Konkurrenz vorbeizuführen, ist die Investition in ein gut funktionierendes Frontend gut angelegtes Geld. Aber auf welche Bereiche der Frontend-Entwicklung sollten Sie sich zuerst und vor allem konzentrieren? Heutzutage kann sich selbst ein erfahrener Frontend-Experte in der Welt der sich ständig ändernden Frontend-Entwicklungstools, Frameworks und Ansätze verlieren. Wie wird man aus all dem Hype schlau?

Um Ihnen den Umgang mit modernen Frontend-Technologien zu erleichtern, haben wir 11 Trends und Best Practices für die Frontend-Entwicklung ausgewählt. Bevor eine dieser Best Practices Teil der technologischen Infrastruktur eines Unternehmens wird, werden sie ausgiebig erforscht. Und Google Trends ist der beste Ort, um dies zu beobachten.

Achten Sie besonders auf die Trends, die im Moment weniger Interesse wecken: Hier werden mit Sicherheit die Trends in der Frontend-Entwicklung und die Innovationen, die den geschäftlichen Wert steigern, stattfinden. Entwickler, die sich ausschließlich auf die Top-Trends wie GraphQL oder WebAssembly konzentrieren, könnten später feststellen, dass sie gegenüber anderen Unternehmen, die mehr Zeit auf Trends verwenden, die gerade erst an Fahrt gewinnen, aufholen müssen. Gleichzeitig können frühe Experimente mit aufkommenden Technologien wie accelerated mobile pages oder statischen Website-Generatoren Ihnen helfen, Ihre Konkurrenten zu überholen. Hier ist unsere Vorhersage, welche Trends und Best Practices in der Frontend-Entwicklung sich in Zukunft sicher durchsetzen werden.

Wiederaufleben statischer Websites

Statische Websites, die aus einfachen, HTML-formatierten Dateien bestehen, beherrschten in den frühen Tagen des Internets das Web, gerade als das Surfen im Internet für den Durchschnittsnutzer zugänglich wurde. In der heutigen Zeit haben sich die Dinge dramatisch verändert: Aus einfachen Webseiten sind dynamische, funktionsreiche Webanwendungen geworden, die oft mit einem CMS im Backend erstellt werden. Dennoch entscheiden sich heute immer mehr Unternehmen für statische Websites, um die Hosting- und Produktionskosten zu senken und ihren Kunden ein sicheres, blitzschnelles Erlebnis zu bieten. Es gibt viele neu gegründete Unternehmen mit minimalen Anforderungen an eine Website, die so schnell wie möglich eine Online-Präsenz aufbauen wollen, und statische Websites passen perfekt in diese Nische.

Die Fülle der verfügbaren Generatoren für statische Websites (463 allein auf staticsitegenerators.net!), die für die Entwicklung einfacher Websites verwendet werden, spricht für diesen steigenden Trend in der Front-End-Entwicklung. Entwickler können sich auf statische Website-Generatoren verlassen, um schnell ladende, sichere Websites zu erstellen. Solche Websites sind weniger anfällig für Angriffe, da sie keine Datenbank im Backend haben. Außerdem sind sie leichter zugänglich und helfen, die Entwicklungskosten niedrig zu halten.

Bewegung UI

Mit dieser Open-Source-Bibliothek auf CSS-Basis können Frontend-Entwickler Websites mit benutzerdefinierten Animationen und Übergängen aufwerten. Heutzutage, wo die Aufmerksamkeitsspanne von Website-Besuchern kürzer ist als die eines Goldfisches, kann jedes Bisschen, das zur Benutzerbindung beiträgt, entscheidend sein.

Die Motion UI-Bibliothek bietet eine ganze Reihe von Standardeffekten: Slide, Fade, Scale und Spin, um nur einige zu nennen. Aber das Tool glänzt wirklich, wenn es um benutzerdefinierte Animationen geht, mit denen Entwickler ihre Vorgaben für Richtung, Intensität und Geschwindigkeit sorgfältig abstimmen können. Bei Bedarf können die Animationen in einer Reihe angeordnet werden, um sie in einer bestimmten Reihenfolge abzuspielen. Bei der Arbeit mit Motion UI gibt es jedoch einen Nachteil: Übermäßige Animationen können die Benutzerfreundlichkeit beeinträchtigen, indem sie den Benutzer ablenken oder die Ladezeit auf langsameren Geräten verlangsamen

GraphQL: Facebooks Abfragesprache für APIs gewinnt an Zugkraft

GraphQL, eine Abfragesprache für APIs, die 2015 von Facebook eingeführt wurde, hat in letzter Zeit an Zugkraft gewonnen. Unternehmen wie die New York Times, GitHub, Pinterest und Shopify, die für ihre umsichtige Herangehensweise an neue Technologien bekannt sind, haben bereits von REST auf GraphQL umgestellt. Warum also spricht plötzlich jeder über diese Technologie?

GraphQL schafft eine Abstraktionsebene zwischen einer Anwendung und ihren Datenquellen, die es Front-End-Entwicklern ermöglicht, Daten aus mehreren Quellen mit einer einzigen Abfrage anstelle von mehreren Anfragen abzurufen. GraphQL-Anfragen können auch sehr spezifisch sein, was die Art der benötigten Daten angeht, im Gegensatz zu einer REST-basierten Anfrage, die alle Daten aus dem Backend abrufen müsste - oft, um einen winzigen Teil des Frontends zu aktualisieren. Wie nicht anders zu erwarten, bietet GraphQL einen flexibleren Ansatz für die Frontend-Entwicklung, mit gut strukturierten Client-Server-Interaktionen.

Dadurch können Webanwendungen, die sich auf unterschiedliche Datenquellen stützen, schneller ausgeführt werden, und die Wartungskosten sinken, da die Anzahl der Anfragen und die Menge der übertragenen Daten abnimmt.

Sprachsuche

Technologien zur Spracherkennung sind auf dem Vormarsch. Wir verlassen uns auf unsere sprachgesteuerten Smart-Home-Geräte, um das Licht ein- und auszuschalten, Erinnerungen zu setzen, Freunden eine SMS zu schicken oder Produkte mit einem einzigen Befehl zu finden - ohne eine Schnittstelle zu benötigen. Gartner geht sogar so weit, vorauszusagen, dass bis zum Jahr 2020 “30 Prozent der Web-Browsing-Sitzungen ohne einen Bildschirm stattfinden werden”. Sie fragen sich vielleicht, wie dieser Zero-UI-Ansatz mit der Front-End-Entwicklung zusammenpasst, bei der zumindest eine grafische Benutzeroberfläche vorausgesetzt wird.

Nun, eine Möglichkeit, diesem steigenden Trend der Front-End-Entwicklung zu konversationsbasierten Schnittstellen zu begegnen, ist die Implementierung einer Sprachsuchfunktion auf Ihrer Website. So können Kunden, die Ihre Website über die Sprachsuche von Google entdecken, Ihre Produkte und Dienstleistungen mit Hilfe von Sprachbefehlen weiter erkunden. Chrome und Firefox, zwei der größten Webbrowser der Welt, unterstützen diese Funktion bereits. Und es gibt Tools wie Google’s JavaScript Web Speech API und Amazon’s Alexa API, mit denen Sie sich von der Masse abheben können, indem Sie die Sprachsuche zu einem integralen Bestandteil Ihrer Webpräsenz machen.

Kopfloser Chrome

Der 2018 von Google eingeführte Headless Chrome ist der gleiche gute alte Chrome-Webbrowser, nur ohne den GUI-Teil. Der Headless-Modus ist in Google Chrome enthalten, und Entwickler können über eine Befehlszeilenschnittstelle (CLI) mithilfe von Skripten darauf zugreifen und es bedienen.

Headless Chrome ermöglicht es Entwicklern, Front-End-Browser-Tests durchzuführen, ohne Ressourcen für die Anzeige des ausgefallenen JavaScript zu verschwenden, das oft in moderne Webseiten gepackt wird. Front-End-Entwickler können auch Puppeteer, eine Open-Source-Node.js-Bibliothek des Chrome-Teams, verwenden, um das Laden bestimmter Seitenelemente wie CSS und Bilder zu umgehen oder sie für ein schnelleres Laden während der Tests zwischenzuspeichern. Solche Praktiken führen zu kürzeren Qualitätssicherungszyklen und insgesamt zu einer schnelleren Bereitstellung von Webprojekten.

Eine weitere Möglichkeit, Headless Chrome und Puppeteer zu nutzen, ist das serverseitige Vor-Rendering von JavaScript und die schnellere Darstellung der Website-Inhalte für die Benutzer - allerdings nur, wenn das von Ihnen verwendete Frontend-Entwicklungsframework nicht bereits serverseitige Rendering-Funktionen bietet. Web-Crawler werden auch den Zugang zu den vorgerenderten Inhalten der Website zu schätzen wissen, die ansonsten hinter JavaScript versteckt sein könnten, was der Website zu einer besseren Platzierung in den Suchergebnissen verhilft.

Online-IDEs

Ähnlich wie Google Docs in vielen Startups und Unternehmen Microsoft Word als Standardlösung für die Zusammenarbeit an Dokumenten abgelöst hat, versprechen Online-IDEs, die traditionellen Desktop-Tools zu ersetzen, die Entwickler zum Schreiben und Arbeiten mit Code verwenden. Der Trend ist eindeutig: Unternehmen wie Amazon und Red Hat haben Startups übernommen, die cloudbasierte IDE-Produkte anbieten.

Diese neue Art von IDE befindet sich in einem Browser, d. h. Entwickler können von jedem beliebigen Ort aus virtuell an ihrem Projekt arbeiten, ohne die zeitaufwändige Einrichtung einer Entwicklungsumgebung; außerdem können sie Zugriff auf den Code für Echtzeit-Pair-Coding, Code-Reviews usw. gewähren. Die moderne Web-Entwicklung ist kompliziert geworden, aber IDEs durchbrechen einen Teil davon, indem sie Entwicklern eine direkte Zusammenarbeit ermöglichen. Front-End-Entwickler und DevOps-Teams verschwenden wahnsinnig viele Stunden mit der Einrichtung einer Entwicklungsumgebung, während sich Entwickler bei Online-IDEs (wie StackBlitz) einfach nur anmelden müssen, um mit der Programmierung zu beginnen.

Code-Formatierungs-Tools

Großprojekte, die einen erheblichen Aufwand für die Front-End-Entwicklung erfordern, haben eines gemeinsam: Ihr Erfolg hängt von einer effizienten Zusammenarbeit zwischen den Teammitgliedern eines Projekts ab. Meistens geht es dabei um die Festlegung und Durchsetzung von Stilrichtlinien für die Frontend-Codierung, um sicherzustellen, dass der Code für alle Projektbeteiligten prägnant und lesbar ist.

An dieser Stelle kommen automatische Quellcode-Formatierungstools wie Prettier ins Spiel. Prettier ist ein aussagekräftiger Code-Formatierer, der mit JavaScript (ES2017), TypeScript, Flow, Vue und vielen anderen Technologien funktioniert, auch außerhalb des Frontend-Stacks. So können sowohl Front- als auch Backend-Teams Prettier oder ein ähnliches Tool, z. B. ESLint, schnell in ihre Entwicklungsumgebung einbinden und sich nicht mehr um das Code-Styling kümmern.

Diese Code-Formatierungstools bringen den Code automatisch in einen einheitlichen, standardisierten Stil, der für andere Entwickler leicht zu verstehen ist. So verbringen Teams weniger Zeit damit, sich bei Sprint-Reviews über den Code-Stil zu streiten, und haben mehr Zeit, hochwertigen Front-End-Code zu schreiben. Auch neue Teammitglieder können sich schneller einarbeiten, da das Onboarding einfacher ist. Und im Gegenzug erhalten Unternehmen stabile Webanwendungen mit leicht anpassbaren Frontend-Komponenten.

WebAssembly

WebAssembly (WASM) ist ein Webstandard, der schnell die Herzen der Frontend-Entwickler erobert. Er wird bereits von allen wichtigen Browsern unterstützt, darunter Chrome (Desktop und Mobil), Firefox und Safari (Desktop und Mobil), und bietet Geschwindigkeit und Flexibilität.

Unternehmen können die Vorteile ihrer vorhandenen Entwicklungsressourcen nutzen, die in einer der folgenden Programmiersprachen programmieren können, um Frontend-Anwendungen zu erstellen und in WebAssembly zu kompilieren:

C, C++
C#, .Net
Java, Kotlin

WebAssembly besteht aus Binärcode, dessen Dekodierung schneller erfolgt als bei JavaScript. Dies führt zu einer Codeausführung, die fast so schnell ist wie die Ausführung von nativem Maschinencode. Daher wird WASM immer mehr zur Lösung, um JavaScript zu ergänzen und leistungsrelevante Teile von Webanwendungen zu beschleunigen. So lädt beispielsweise das Web-Design-Tool Figma lädt dreimal schneller, nachdem seine Entwickler WebAssembly in das Produkt übernommen haben.

Webkomponenten

Web Components ist ein Satz von APIs und HTML-Vorlagen, mit denen Entwickler benutzerdefinierte UI-Elemente erstellen können, die in verschiedenen Webprojekten wiederverwendet werden können, unabhängig vom zugrundeliegenden Frontend-Entwicklungs Framework. Obwohl nur zwei Browser, Chrome und Safari, die Web Components-Funktionalität vollständig unterstützen, ist die Idee, beispielsweise eine React-Webanwendung zu erstellen und dann einige UI-Komponenten in einem Angular-Projekt wiederzuverwenden, so faszinierend, dass andere Browserhersteller aktiv daran arbeiten, Unterstützung für Web Components hinzuzufügen. Web Components bietet Front-End-Teams mehr Flexibilität bei der Entwicklung und die Möglichkeit, Elemente schnell wiederzuverwenden, um den Entwicklungsprozess zu beschleunigen.

Progressive Web Apps

Da die Nutzer immer mehr Zeit auf mobilen Geräten verbringen (laut eMarketer durchschnittlich 3,5 Stunden pro Tag in den USA), versuchen Unternehmen, diese Smartphone-Sucht durch die Optimierung ihrer mobilen Front-End-Entwicklung -Strategien zu nutzen.

Progressive Web Apps (PWA), eine neue Ergänzung der mobilen Toolsets von Unternehmen, vereinen die besten Funktionen von mobilen Web- und nativen Apps zu aufregenden neuen Erfahrungen für die Benutzer. Unter der Haube sind PWAs mobile Webanwendungen, die die Funktionalität nativer mobiler Apps imitieren. Im Folgenden finden Sie eine Liste der wichtigsten Funktionen, die PWAs bieten:

Flüssige Navigation und Animationseffekte
Offline-Modus und Fähigkeit, in langsamen Netzwerken zu arbeiten
Push-Benachrichtigungen
Sichere HTTPS-Verbindung
Sofortiges Laden vom Startbildschirm aus

All diese Funktionen sorgen für ein Fünf-Sterne-Benutzererlebnis und dafür, dass die Benutzer immer wieder auf diese Apps zurückkommen. Unternehmen wie Flipkart nutzen bereits die Vorteile von PWAs: Der E-Commerce-Riese berichtete, dass seine Konversionsrate um 70 Prozent gestiegen ist, nachdem er eine progressive Webanwendung für sein Publikum eingeführt hatte.

Beschleunigte mobile Seiten

Accelerated Mobile Pages (AMP) ist eine weitere Open-Source-Initiative, die das blitzschnelle Laden von Webseiten auf Smartphones und Tablets ermöglicht, auch wenn die Umsetzung schwierig ist. In Anbetracht der Daten von KISSmetrics, die darauf hindeuten, dass “etwa 40 % der Nutzer eine Webseite, die länger als 3 Sekunden zum Laden braucht, abbrechen”, können AMPs zu einem entscheidenden Wettbewerbsvorteil für Unternehmen werden, die langfristig die Nase vorn haben wollen. Sie können auch den Suchverkehr ankurbeln; schneller ladende Seiten werden in den Suchergebnissen bevorzugt behandelt und erhalten daher im Vergleich zu normalen Webseiten mehr Aufmerksamkeit.

die Washington Post hat AMP verwendet, um die Ladezeit ihrer mobilen Seiten drastisch zu verbessern: Die Leser erhalten Zugang zu den Artikeln 88 Prozent schneller als mit der vorherigen mobilen Version der Website. Und ein französisches Startup-Unternehmen Teads meldete einen 200-prozentigen Anstieg der Konversionen für seine Videoanzeigen auf AMP-aktivierten mobilen Webseiten.

Zukunft der Frontend-Entwicklung: Trends und Technologie

Da das Frontend immer mehr Schnittstellen abdeckt - Wearables, intelligente Bildschirme, Geräte und viele andere - ist es sehr sinnvoll, strategisch auf aufkommende Innovationen zu setzen, die die Benutzerfreundlichkeit drastisch verbessern können. Benutzerfreundlichkeit und Leistung sollten immer Hand in Hand gehen, denn wenn Ihre Website zu lange zum Laden braucht, werden Ihre Kunden nie entdecken, wie großartig sie ist.

Bei der Frontend-Entwicklung Trends und Technologien wird es nie langweilig, und wir erwarten, dass in naher Zukunft noch mehr spannende Innovationen auf uns zukommen.

In Teil III werfen wir einen genaueren Blick auf die technischen Trends, die die Zukunft der Frontend-Technologien prägen werden.

Bei DOOR3 sind wir den neuesten Trends in der Frontend-Entwicklung, den Tools und den damit verbundenen Praktiken immer einen Schritt voraus, um den Geschäftserfolg und die Kundenbindung auf digitalen Plattformen zu fördern. Wenn Sie Hilfe bei der Wahl des besten Technologie-Stacks zwischen react und angular für Ihr Web-Entwicklungsprojekt benötigen, nehmen Sie Kontakt mit uns auf.

"Bis 2019 wird das Handy das Fernsehen als das Medium mit den meisten Gesprächsminuten in den USA überholen".

eMarketer’s Bericht Mobil verbrachte Zeit 2018