Clientseitige Web-Frameworks erleben auch im Jahr 2021 einen wachsenden Trend bei dem React als Bibliothek zur Erstellung von Benutzeroberflächen weiterhin eine zentrale Rolle spielen wird. In diesem Blogbeitrag möchten wir den Hintergrund und die Anwendungsfälle aufzeigen und die Funktionsweise vorstellen. Um React und clientseitige Web-Frameworks sowie deren Kontext besser einordnen zu können, gehen wir zunächst auf die Grundlagen ein.
Clientseitige Web-Frameworks, JavaScript und React im Kontext
Eine große Anzahl der benutzerorientierten Unternehmensanwendungen sind Web- oder Mobile-Anwendungen. In der Web-Entwicklung dominieren seit einigen Jahren die JavaScript/TypeScript-basierten clientseitigen Web-Frameworks. JavaScript-Frameworks sind ein wesentlicher Bestandteil der modernen Front-End-Web-Entwicklung und bieten Entwicklern bewährte Werkzeuge für den Aufbau skalierbarer, interaktiver Webanwendungen. React ist eine deklarative, effiziente und flexible JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Mit ihr können Software-Entwickler komplexe User Interfaces aus kleinen und isolierten Codestücken, den sogenannten „Komponenten“, zusammenstellen [1]
Die steigende Anzahl der Downloads geben Aufschlüsse darüber, dass sich React im Kontext von clientseitigen Web-Frameworks bewährt.
Welches Ziel wird verfolgt?
Das primäre Ziel von React ist es, die Fehler zu minimieren, die bei der Entwicklung von Benutzeroberflächen auftreten. Dies geschieht durch die Verwendung von Komponenten. Solche Kompotenten können als in sich geschlossene, logische Codestücke definiert werden, die einen Teil der Benutzeroberfläche beschreiben. Diese Komponenten können zusammengesetzt werden, um eine vollständige Benutzeroberfläche zu erstellen. Es abstrahiert dabei einen Großteil der Rendering-Arbeit, sodass die Entwickler sich primär auf das Design der Benutzeroberfläche konzentrieren können, um somit zu einem optimalen User Interface und entsprechender Benutzerfreundlichkeit beizutragen.
Anwendungsbeispiele für React
React erzwingt keine strengen Regeln rund um Code-Konventionen oder Dateiorganisation. Das erlaubt es Entwickler-Teams, Konventionen festzulegen, die für sie am besten funktionieren, und React auf jede Art und Weise zu übernehmen, die sie gerne möchten. Zum Beispiel kann React Native verwendet werden, um mobile Anwendungen zu erstellen; React 360 kann verwendet werden, um Virtual-Reality-Anwendungen zu erstellen und Vieles mehr.
Es kann beispielsweise genutzt werden, um:
- Einzelne Buttons,
- ein paar Teile einer Oberfläche
- oder die gesamte Benutzeroberfläche einer App verwalten.
Gründe für den steigenden Trend
React ist eine sehr einfache und schlanke Bibliothek, die sich nur mit dem Front-End beschäftigt. Jeder Javascript-Entwickler kann die Grundlagen zügig verstehen und dank einer Vielzahl von Tutorials zeitnah mit der Entwicklung einer großartigen Webanwendung beginnen.
Die Bibliothek bietet eine komponentenbasierte Struktur. Sie beginnen mit winzigen Komponenten wie beispielsweise Buttons und erstellen dann Wrapper-Komponenten, die aus diesen kleineren Komponenten bestehen. React-Wrapper-Komponenten oder Komponenten höherer Ordnung, wie sie oft genannt werden, sind ein Muster, das Entwickler für die Wiederverwendung von Komponentenlogik geschaffen haben, die aus der kompositionellen Natur von React hervorgeht. Im nächsten Schritt schreiben Sie Wrapper-Komponenten auf der nächsthöheren Ebene. Und so geht es weiter, bis Sie diese eine Wurzelkomponente, welche dann Ihre App ist.
Jede Komponente entscheidet, wie sie gerendert werden soll und jede Komponente hat dabei ihre eigene interne Logik. Es gehen einige Vorteile aus diesem Ansatz hervor, wie beispielsweise:
- Dass Ihre App ein konsistentes Design besitzt,
- Die Wiederverwendung von Code sich positiv auf die Pflege der Codebasis und dessen Erweiterung auswirkt,
- Und es für Entwickler einfacher ist eine hoch qualitative App innerhalb kürzester Zeit zu entwickeln
Eine weitere Stärke der Bibliothek ist, dass es eine gute Abstraktion bietet, was bedeutet, dass es keine komplexen Interna für den Benutzer offenlegt. Um React zu beherrschen, müssen Entwickler lediglich die Lebenszyklen, Zustände und Requisiten einer Komponente verstehen, um das angestrebte Entwicklungsziel zu erreichen. React diktiert keine Muster oder Architekturen, was es Entwicklern erleichtert, die Architektur Ihrer App so zu gestalten, wie sie es für richtig halten.
Es ist möglich, native Apps für Android und iOS mit React Native schreiben. Sie werden zwar nicht den gleichen Code verwenden können, den Sie für das Web geschrieben haben, aber Sie werden die gleiche Methodik und die gleiche Architektur verwenden können.
Was verbirgt sich hinter React Native?
React Native ist ein JavaScript-Framework zum Entwickeln von nativ gerenderten mobilen Anwendungen für iOS und Android. Es basiert auf React, der JavaScript-Bibliothek von Facebook zur Erstellung von Benutzeroberflächen, zielt aber nicht auf den Browser, sondern auf mobile Plattformen ab. Es stellt außerdem JavaScript-Schnittstellen für Plattform-APIs bereit, sodass Ihre Apps auf Plattformfunktionen wie die Telefonkamera oder den Standort des Benutzers zugreifen können. Unterstützt werden derzeit sowohl iOS als auch Android und es besteht das Potenzial der Erweiterbarkeit für zukünftige Plattformen.
Vorteile von React Native
Durch seine Eigenschaften gehen einige Vorteile hervor. Einige dieser Vorteile, die sich positiv auf das Erlebnis der Entwickler auswirken, sind:
- Zeit- und Ressourcenersparnisse
- Code-Wiederverwendung und Wissensaustausch
- Sehr hohe Performanz der Anwendung durch React Native
- Eine höhere Flexibilität in der Entwicklung von Individualsoftware
- Änderungen werden sofort angezeigt
Fazit React im Kontext clientseitiger Web-Frameworks
Die modulare und intuitive Schnittstelle macht es für andere Entwickler sehr einfach, in das Projekt eines anderen einzutauchen und darauf aufzubauen. Das erhöht die Flexibilität innerhalb eines Entwicklungsteams und erleichtert die Erstellung von Updates und Upgrades für Webanwendungen. Außerdem benötigen Tester weniger Zeit, um die Programmierlogik zu verstehen und geeignete Testszenarien zu erstellen. Dies führt zu einer wertvollen Zeitersparnis, eine Nachricht, die jeder Kunde und/oder CFO gerne hört. Vor allem, wenn dieser Vorteil von Web auf Mobile und umgekehrt ausgedehnt wird.
