Trends und bewährte Praktiken bei der Front-End-Entwicklung (Teil III): auf der Höhe der Zeit

03.15.2019

Wenn Sie auf der Suche nach einer Technologie sind, die die digitalen Eigenschaften Ihres Unternehmens von anderen abhebt, sind Ihnen wahrscheinlich Optionen wie Blockchain, VR, Chatbots, maschinelles Lernen und das Internet der Dinge (IoT) aufgefallen. Aber abgesehen von der Begeisterung, welchen geschäftlichen Wert können sie für Ihr Unternehmen freisetzen? Und werden sie sich auf Ihre Front-End-Entwicklung auswirken? Wir gehen der Frage nach, wie diese Techniktrends die Zukunft der Frontend-Technologien gestalten und welche Best Practices jetzt verfügbar sind, damit Sie die Konkurrenz überlisten können.

Chatbots

Es erfordert viel kreatives Denken, um ein ansprechendes Frontend für eine Website zu erstellen, das einfach zu bedienen ist und gleichzeitig Ihren Kunden und Mitarbeitern hilft, Dinge auf unaufdringliche Weise zu erledigen. In der heutigen Zeit, in der eine Website ein Muss ist, entscheiden sich immer mehr Unternehmen für eine einfache Landing Page mit einem integrierten Chatbot, um schnell eine Webpräsenz aufzubauen.

Ein Chatbot ist eine Anwendung, die mit Kunden interagieren kann, um deren Bedürfnisse herauszufinden und entsprechende Produkte und Dienstleistungen oder Unterstützung anzubieten. Chatbots sind sehr praktisch, da sie die grafische Benutzeroberfläche einer Website durch eine konversationelle Benutzeroberfläche ersetzen können, die es den Kunden ermöglicht, Dienstleistungen zu erkunden, während ein Front-End-Entwicklungsteam an einer vollwertigen Version der Website arbeitet. Je nach Bedarf können sie aber auch eine dauerhafte Lösung sein, um Kunden genau zu dem zu führen, was sie suchen. Chatbots helfen, die Dinge auf den Punkt zu bringen, wenn Kunden sofortige Unterstützung benötigen oder eine schnelle Erklärung der Funktionalität eines Produkts wünschen.

Chatbots dienen nicht nur als schneller Ersatz für eine ausgearbeitete Version einer Website, sondern können Unternehmen auch nach dem Start der Hauptwebsite helfen:

24/7 für den Kunden erreichbar sind
Mehrere Konversationen abwickeln (was Ihnen die Einstellung weiterer Mitarbeiter am Empfang erspart)
Erfassen von Analysen zur weiteren Verbesserung Ihrer Verkaufstrichter und Ihres Supports

Die Entwicklung von Chatbots mag zwar einschüchternd klingen, ist aber mit der richtigen Technologie durchaus machbar. Es gibt Frameworks auf dem Markt, die sich um maschinelles Lernen und KI-Algorithmen kümmern, wie Googles Cloud Natural Language API und Dialogflow, Microsofts Cognitive Services APIs und IBMs Watson Conversation. Einige Chatbot-Entwicklungsframeworks wie Bot Platform oder Botpress bieten CMS-ähnliche Funktionen, so dass auch technisch nicht versierte Benutzer einen einfachen Chatbot erstellen können. Die Entwicklung eines fortgeschrittenen Chatbots mit komplexer Geschäftslogik erfordert jedoch umfangreiche Front-End-Kenntnisse.

Virtuelle Realität

Unternehmen sehen die virtuelle Realität (VR) oft als eine übertriebene Technologie, um hochkarätige Kunden zu beeindrucken. In den letzten Jahren ist die Technologie jedoch so weit ausgereift, dass auch der Durchschnittsnutzer in die VR eintauchen kann - und das zu geringeren Kosten und schneller als je zuvor. Moderne VR-fähige Headsets bieten genug Leistung und Präzision, um beispielsweise chirurgische Eingriffe zu simulieren. Gleichzeitig bietet Google Cardboard jedem Smartphone-Nutzer VR zu einem recht überschaubaren Preis von 15 Dollar.

Die VR-Webentwicklung wurde mit der Einführung von WebVR in der Front-End-Entwicklergemeinschaft möglich. WebVR ist eine JavaScript-API, die es Webanwendungen ermöglicht, Inhalte in einer virtuellen Realität darzustellen, indem eine WebGL-Technologie verwendet wird, die interaktive Grafiken in einem Webbrowser rendert. Die Technologie wird von allen wichtigen Browsern unterstützt, darunter Chrome, Firefox, Edge und Samsung Internet, und ihre spezielle Implementierung, WebVR Polyfill, ermöglicht es Frontend-Entwicklern, grundlegende VR-Funktionen in anderen Webbrowsern zu implementieren.

Die jüngste Initiative von Google, Mozilla, Samsung und Microsoft, WebXR, baut auf WebVR auf und berücksichtigt das Feedback von VR-Geräteherstellern und Webentwicklern. Die neue WebXR-API verbessert WebVR, indem sie es Front-End-Entwicklern ermöglicht, doppelt so viele Pixel in webbasierte VR-Anwendungen einzubauen; außerdem laufen mit der WebXR-API erstellte VR-Anwendungen schneller.

Für Unternehmen bedeutet dies, dass sie ihren Kunden endlich faszinierende webbasierte VR-Erlebnisse bieten können, unabhängig von der verwendeten VR-Hardware. Unternehmen verlassen sich auf VR-Anwendungen, die in einem Webbrowser funktionieren, um einzigartige virtuelle Umgebungen für Konferenzen zu schaffen, Mitarbeiterschulungen durchzuführen oder eine starke emotionale Verbindung mit Kunden durch ein VR-Spielerlebnis aufzubauen.

Und wie alles, was dazu beiträgt, die Aufmerksamkeit der Kunden zu gewinnen, verdient webbasierte VR in der heutigen Welt eine ernsthafte Betrachtung durch Unternehmen. Zu den Pionieren zu gehören, die ihre Kunden ein Produkt oder eine Dienstleistung hautnah erleben lassen, kann in bestimmten Branchen wie der Fertigungsindustrie und der Unterhaltungsbranche einen langen Weg bedeuten.

Augmented Reality

Augmented Reality (AR) ist eine weitere Trendtechnologie, die Unternehmen einen Wettbewerbsvorteil im ständigen Kampf um die Aufmerksamkeit der Kunden verschafft, indem sie virtuelle Objekte über die reale Welt legt. Wir alle haben schon auf die eine oder andere Weise Erfahrungen mit AR gemacht: beim Besuch einer AR-Ausstellung wie ReBlink oder wenn wir Hilfe bei der Indoor-Navigation in Einkaufszentren erhalten. Und wer kann Pokemon Go vergessen? Jetzt setzen Unternehmen auf AR, um die Effizienz zu steigern und Kunden zu begeistern.

Bis vor kurzem waren diese aufregenden AR-Erlebnisse an bestimmte Plattformen gebunden, die Unternehmen wie Apple, Google oder Facebook gehören. Die gute Nachricht ist, dass sich die Webtechnologien in Bezug auf Leistung und Zugänglichkeit für die Nutzer erheblich weiterentwickelt haben, einschließlich mobiler Browser und Front-End-Entwicklungstools. Heute braucht man zum Ausführen einer AR-Anwendung nur noch eine Kamera und einen Webbrowser.

Eine der Front-End-Technologien, die Webentwickler zur Erstellung webbasierter AR-Erlebnisse verwenden, ist AR.js. Dabei handelt es sich um ein Front-End-Framework, das auf three.js (JavaScript-3D-Bibliothek) und ARToolKit (der allerersten AR-Bibliothek) aufbaut. Mit AR.js können Frontend-Teams plattformübergreifende, markerbasierte AR-Erlebnisse entwickeln. Markerbasiert bedeutet, dass der Benutzer einen einzigartigen Marker - einen AR- oder QR-Code - scannen muss, um ein vorprogrammiertes AR-Erlebnis auszulösen.

Der nächste große Akteur, der die AR-Entwicklung im Web ermöglicht, ist die WebXR Device API. Wir haben sie bereits im Zusammenhang mit VR-Webtechnologien erwähnt, aber WebXR ist ein Projekt, an dem Ingenieure von Google, Mozilla, Samsung, Amazon und anderen namhaften Unternehmen aktiv an der AR-Initiative mitwirken. Ziel ist es, fortschrittliche Interaktionen und überzeugende visuelle Effekte in webbasierten AR-Anwendungen zu ermöglichen, so dass die Nutzer mehr tun können, als nur virtuelle Objekte in AR zu betrachten. So werden die Nutzer beispielsweise in der Lage sein, virtuelle Objekte mit Gesten, Sprachbefehlen und mehr zu manipulieren. Natürlich befindet sich diese Funktionalität noch in der Entwicklungsphase, aber hier sind einige grundlegende Beispiele von Google - mit einem Benutzer, der AR-Sonnenblumen in ein Wohnzimmer fallen lässt, und Kollegen, die ein virtuelles AR-Objekt bauen.

Maschinelles Lernen

Nachdem Google auf der Google I/O ‘18 TensorFlow.js vorgestellt hat, ist maschinelles Lernen (ML) für das Web Realität geworden. ML umfasst zwei notwendige Komponenten: das Erstellen von Modellen und das Trainieren einer Maschine mit diesen Modellen, so dass die Maschine, nachdem sie mit mehreren Katzenbildern gefüttert wurde, lernt, selbständig Katzen auf Bildern zu erkennen. Oder wenn Ihr Kunde beispielsweise Ihrem Chatbot ein Problem schildert, wird er automatisch an den am besten geeigneten Supporttechniker weitergeleitet, der das Problem erfolgreich lösen und die Loyalität des Kunden zurückgewinnen kann. Solche webfähigen ML-Anwendungen können Unternehmen dabei helfen, sich mit ihren Dienstleistungen von der Masse abzuheben.

Sicher, ML mit JavaScript war schon vor TensorFlow.js mit Bibliotheken wie Brain.js und deeplearn.js eine Möglichkeit. (Letztere wurde von Google übernommen und mit TensorFlow.js verschmolzen.) Diese JavaScript-Bibliotheken reichten jedoch bei weitem nicht an das Potenzial von TensorFlow.js heran.

TensorFlow.js ist dazu gedacht, “maschinelle Lernmodelle im Browser zu trainieren und einzusetzen.” Front-End-Entwickler können sich auf diese Spitzentechnologie verlassen, um ML-basierte Erfahrungen direkt in das Web-Erlebnis des Kunden zu bringen. (Hier ist eine kurze Demo, die Sie ML im Browser aus erster Hand erleben lässt)

Diese ML-fähige JavaScript-Bibliothek bietet ein hervorragendes Entwicklungserlebnis: Front-End-Ingenieure können Modelle direkt im Browser erstellen und trainieren, ohne dass eine Einrichtung erforderlich ist. Da Browser ML-Erfahrungen beherbergen, werden die verfügbaren Eingaben reichhaltiger: ML-Modelle können Daten von Kameras, Mikrofonen, GPS, Beschleunigungsmessern und Gyroskopen sammeln, um nur einige zu nennen. Der zusätzliche Vorteil ist ein verbesserter Datenschutz, da alle für das Training von ML-Modellen gesammelten Daten im Browser des Nutzers verbleiben und nichts an einen Server übertragen wird.

Auf der anderen Seite ist die Leistung von TensorFlow.js im Vergleich zur “nativen” Python-basierten ML-Programmierung langsamer. Um ein Modell in einem Browser zu trainieren, muss TensorFlow.js über WebGL auf die GPU des Rechners zugreifen, und die resultierende Leistung kann zwei bis zehn Mal langsamer sein als die Python-Version von TensorFlow mit AVX. Natürlich sollten wir nicht vergessen, dass dies erst der Anfang von JavaScript ML ist und Google aktiv an der Lösung dieser Leistungsprobleme arbeitet.

Es ist definitiv ein guter Zeitpunkt, um mit webbasierten Prototypen zu experimentieren, die die Leistung des maschinellen Lernens nutzen, um einen Wettbewerbsvorteil zu erzielen. Es ist einfach, den Wert von Innovationen wie Empfehlungsmaschinen zu erkennen, die Ihren Kunden neue Produkte und Dienstleistungen auf der Grundlage ihrer Aktionen anbieten, genau wie die Vorschläge, die Sie auf Netflix sehen.

Smartwatches

Dank des Erfolgs der Apple Watch sind Smartwatches zu einem allgegenwärtigen Accessoire geworden. Laut CCS Insights wird der Absatz von Smartwatches im Jahr 2022 voraussichtlich 140 Millionen Geräte erreichen. Und auch wenn diese Zahl im Vergleich zu den Smartphone-, PC- und Laptop-Verkäufen bescheiden ist, können Unternehmen dennoch mehr Kunden gewinnen, indem sie ihre Webangebote für die Unterstützung von Smartwatches aufrüsten.

Wenn wir von “Front-End-Entwicklung für Smartwatches” sprechen, meinen wir natürlich die Apple Watch. Obwohl es mehr als 50 Modelle von Smartwatches mit Wear OS auf dem Markt gibt, hat Google das Webbrowsing auf diesen Geräten noch immer nicht in den Griff bekommen.

Apple hingegen hat beschlossen, dass die Zeit für das Surfen im Internet am Handgelenk gekommen ist, und hat diese Funktion 2018 in Watch OS 5 integriert. Jetzt können Apple Watch-Besitzer Websites durchsuchen und grundlegende Aktionen wie das Scrollen von Webseiten, das Vergrößern und Verkleinern sowie das Vor- und Zurücknavigieren in ihrem Browserverlauf durchführen. Allerdings fehlen noch einige der fortgeschrittenen Webbrowsing-Funktionen wie Videowiedergabe, Unterstützung für JavaScript Service Worker und Webfonts. Apple wird sie später hinzufügen.

Mit der Veröffentlichung von Watch OS 5 hat Apple (getreu seiner Natur) einige Richtlinien und Best Practices für die Frontend-Entwicklung seiner Smartwatch veröffentlicht. Ohne zu sehr ins Detail zu gehen, erwähnen wir hier die wichtigsten Aspekte für die Gestaltung reibungsloser Frontend-Erlebnisse für die Apple Watch:

Berücksichtigen Sie drei Bildschirmgrößen.
Wenden Sie geeignete Attribute auf Formularsteuerelemente für Telefonnummern, Daten, Uhrzeit usw. an.
Verwenden Sie spezielles HTML-Markup auf text- und bildlastigen Webseiten für eine optimale Darstellung.
Verwenden Sie Open-Graph-Meta-Tags, um ansprechende, teilbare Link-Vorschauen zu erstellen.

Die Optimierung einer Website für eine optimale Anzeige auf der Apple Watch ist ein weiteres Unterscheidungsmerkmal, das Unternehmen einen Vorsprung verschaffen und ihnen helfen kann, die Loyalität eines technikaffinen Publikums zu gewinnen.

Internet der Dinge

Bei der Front-End-Entwicklung für das Internet der Dinge (IoT) - cloudbasierte Systeme, die Daten aus einem Netzwerk miteinander verbundener intelligenter Geräte und Sensoren abrufen - haben wir eine recht eigenartige Situation.

In seiner einfachsten Form kann ein IoT-Gerät ein intelligenter Wasserkocher sein, den Sie über eine App steuern, oder ein sprachgesteuertes Smart-Home-Gerät wie Amazon Echo. Ein Beispiel für ein IoT-Produkt auf Unternehmensebene wäre ein Kühlkettenüberwachungssystem für Lieferwagen, die Tiefkühlware transportieren, das aus einer Webschnittstelle besteht, die wichtige Daten anzeigt, die von einer Vielzahl von Temperatursensoren, GPS-Einheiten und Smartphone-Apps stammen. Was den Fall für die Front-End-Entwicklung im IoT besonders ungewöhnlich macht, ist, dass IoT-Produkte oft keine Benutzeroberfläche benötigen. Die Benutzer interagieren mit solchen Produkten über Web- oder Mobilanwendungen, die über eigene Benutzeroberflächen verfügen.

Wenn es jedoch notwendig ist, den Nutzern eine Web-UI in einem IoT-Gerät zur Verfügung zu stellen, gibt es bestimmte Beschränkungen. Die intelligenten “Dinge” haben nämlich oft kleine Bildschirme und ihre Leistung ist durch die Hardware begrenzt. Die Entwicklung webbasierter Schnittstellen für solche Geräte ist eine praktikable Alternative zur Verwendung restriktiver nativer Programmiersprachen.

Zu den Best Practices für die Webentwicklung, die UI-Designer und -Ingenieure dabei unterstützen, diese Einschränkungen bei der Entwicklung von Front-Ends für IoT-Endgeräte zu berücksichtigen, gehören:

Responsive Web-Schnittstellen, die sich auf verschiedenen Bildschirmgrößen entsprechend skalieren lassen.
Minimaler Einsatz von JavaScript und wenig bis gar keine Animationen.
Caching-Algorithmen für den Zugriff auf wichtige Daten auch in nicht abgedeckten Bereichen.

Die IoT-Technologie findet in verschiedenen B2C- und B2B-Produkten in vielen Branchen Anwendung: von der Logistik für große Unternehmen bis hin zu intelligenten Wohnungen. Und die intelligenten Endpunkte (auch “Dinge” genannt) variieren entsprechend: von Sensoren ohne Benutzeroberfläche bis hin zu Gebrauchsgütern mit einer webbasierten grafischen Benutzeroberfläche. Es ist wichtig, zu Beginn eines Projekts die Verwendung, Form und Architektur eines IoT-Produkts sorgfältig zu durchdenken und zu entscheiden, welche Arten von Endpunkten eine Benutzeroberfläche benötigen. Die Kunden werden reaktionsschnelle Schnittstellen zu schätzen wissen, die sich je nach Bildschirmgröße eines Endpunkts angemessen skalieren lassen und die Bedienung ihrer Geräte verbessern.

No-Code & Low-Code

No-Code/Low-Code ist ein weiterer disruptiver Trend in der Softwareentwicklung, der darauf abzielt, den Prozess der Softwareentwicklung zu demokratisieren (https://www.door3.com/custom-software-development-company/) und Unternehmen Zeit und Geld zu sparen. No-Code- und Low-Code-Entwicklungstools sind im Wesentlichen leistungsstarke Vorlagen, die die Entwicklung und den Einsatz von funktionsreichen Webanwendungen mit geringen oder gar keinen Programmierkenntnissen ermöglichen. Bürgerliche Entwickler (Personen ohne Programmierkenntnisse) und erfahrene Software-Ingenieure können eine in eine No-Code/Low-Code-Entwicklungsplattform integrierte grafische Benutzeroberfläche nutzen, um die Front-End- und Back-End-Komponenten einer Webanwendung zu entwerfen.

Front_end_development_more_accessible_with_lo-code_and_no-code_solutions.jpg

Der Unterschied zwischen No-Code- und Low-Code-Entwicklungstools (wie ihre Namen vermuten lassen) liegt in der Art der Nutzer, auf die sie abzielen. Erstere heißen jeden willkommen, unabhängig von seiner Programmiererfahrung, während letztere den Entwicklern mehr Flexibilität bieten, indem sie ihnen erlauben, auf Code-Ebene zu arbeiten. Ein deutlicher Vorteil von No-Code- und Low-Code-Plattformen ist natürlich ihre Fähigkeit, automatisch Code zu generieren und einen Großteil der manuellen Programmierung zu ersetzen, die in einem Standard-Softwareentwicklungsprozess üblich ist. Benutzer ziehen Oberflächenelemente und Ereignisfolgen per Drag & Drop in Workflows, während eine No-Code/Low-Code-Plattform den Quellcode, die Datenbank und alles andere generiert, was zur Erstellung des Front-End und Back-End einer Webanwendung gehört.

Es ist erwähnenswert, dass No-Code- und Low-Code-Entwicklungstools Unternehmen zwar dabei helfen können, Web-Apps schneller und kostengünstiger zu entwickeln (durch die Automatisierung der Front-End-Entwicklung), aber die Anwendung dieser Tools ist immer noch auf die Erstellung vergleichsweise einfacher Web-Apps mit transparenter Geschäftslogik und einfachen Workflows beschränkt. Die Entwicklung von AR- und VR-Webanwendungen oder der Einsatz von KI bleiben für No-Code- und Low-Code-Plattformen unerreichbar. Damit soll nicht gesagt werden, dass diese Entwicklungstools die perfekten Instrumente zur Befreiung [der Softwareentwicklung] sind (https://www.door3.com/software-development-company-nyc/), aber sie können es Geschäftsanwendern und Interessengruppen gleichermaßen ermöglichen, die Front-End-Entwicklung voranzutreiben, insbesondere in Proof-of-Concept-Phasen.

Ein idealer Anwendungsfall für den Low-Code- und No-Code-Ansatz in der Frontend-Entwicklung ist die Anfangsphase eines Startups, das keinen Frontend-Ingenieur im Team hat. Die Gründer, die nur eine Geschäftsperspektive haben, können selbst einen einfachen Prototyp bauen und ihn in freier Wildbahn testen.

Blockchain

Blockchain ist im Moment wahrscheinlich die Technologie, die den größten Hype auslöst. Jeder - vom Stubenhocker bis zur Oma - weiß vom Aufstieg und Fall von Bitcoin. Und sie sind vielleicht sogar damit vertraut, wie es eine Rolle bei [der Abstimmung bei den Zwischenwahlen 2018] gespielt hat (https://futurism.com/the-byte/voting-app-west-virginia-blockchain). Beide Entwicklungen wurden durch Blockchain ermöglicht. Doch wie passt diese bahnbrechende Technologie in die Front-End-Entwicklung? Und wie können Unternehmen sie nutzen, um ihre Webentwicklungsdienste auf die nächste Stufe zu heben?

Während der Großteil der Blockchain-Entwicklung im Back-End-Bereich stattfindet, benötigen Front-End-Entwickler möglicherweise noch Tools, um einen Web-Client in eine Blockchain-basierte Infrastruktur zu integrieren. Und wie ein Sprichwort unter Front-End-Entwicklern besagt: “Wenn es auf JavaScript basiert, gibt es eine Bibliothek dafür!” In der Tat können sich Frontend-Entwicklungsteams auf die web3.js-Bibliothek verlassen, eine Ethereum-kompatible JavaScript-API. Web3.js unterstützt alle gängigen Frontend-Entwicklungsframeworks wie React, Angular oder Vue und ermöglicht es dem Frontend-Teil einer Webanwendung, mit der Blockchain-Komponente zu interagieren, z. B. wenn Benutzer Transaktionen oder Nachrichten mit ihren privaten Schlüsseln signieren müssen.

Natürlich steht die Einführung der Blockchain in kommerzielle Produkte noch ganz am Anfang, und wir müssen erst noch sehen, wie sich die Blockchain-Technologie mit der Frontend-Entwicklung vermischen wird. Gleichzeitig birgt das Auftauchen von Projekten wie Esprezzo - einer Blockchain-Middleware für Frontend-Entwickler - ein großes Versprechen für die Zukunft von Blockchain und Frontend-Entwicklung.

Worum geht es bei Ihrem Frontend?

Wir hoffen, dass wir diese Trends in der Frontend-Entwicklung etwas beleuchtet und das Interesse an der Erkundung der Möglichkeiten geweckt haben, die diese Spitzentechnologien in der Webentwicklung eröffnen. Es ist immer ein Risiko, zu den ersten Unternehmen zu gehören, die diese Front-End-Innovationen implementieren: Die Technologien entwickeln sich in diesem Moment weiter. Dennoch können Unternehmen, die diese Technologien frühzeitig einführen, erhebliche Wettbewerbsvorteile erzielen, da sie die Bedürfnisse ihrer Kunden besser verstehen und sie über das gesamte Spektrum der Geräte hinweg erfüllen können.

Wenn Sie Teil I und Teil II verpasst haben, lesen Sie sie noch heute.