react

react wurde ursprünglich für die Verwendung in sozialen Medien kreiert. Mittlerweile lassen sich damit spezielle Module auf komplexen Websites einfach und schnell programmieren.

react ist eine Softwarebibliothek auf Basis der Skriptsprache JavaScript zur Erstellung eines Webframeworks für User-Interface-Komponenten von Webdiensten. In react können einzelne Komponenten zu einer performanten, komplexeren Anwendung zusammengebaut werden. Hauptsächlich wird react für die Erstellung von Single-Page-Applikationen verwendet, was sich aus der Entstehungsgeschichte erklären lässt: react ist im Facebook-Konzern entstanden und wurde erstmals zur Programmierung des Facebook Newsfeed Frontends sowie des Instagram Feeds verwendet. 

Mittlerweile ist das Framework als OpenSource für die Allgemeinheit zugänglich. Neben der großen Community, die ständig neue Applikationen anfertigt, zeichnet sich react durch weitere spezielle Features aus. 

Die Vorteile von react 

Die hierarchisch angelegte Software-Bibliothek bietet mehrere Vorteile, die alle zu einem übersichtlichen und hoch performanten Ergebnis beitragen. Die einzelnen Komponenten werden deklarativ statt imperativ aufgebaut. In react wird also vorgegeben, wie ein entsprechendes System aussehen soll. Alle beteiligten Komponenten gehen vom selben State aus, so dass bei jeder Aktion klar ist, wie sich das Ergebnis verändern muss. Das kompliziertere Gegenteil der imperativen Syntax setzt voraus, dass jedem Element initial erklärt werden muss, welche Schritte jeweils ausgeführt werden sollen. Der entsprechende Code ist wesentlich länger und damit auf fehleranfälliger. 

Weitere technische Besonderheiten wie der unidirektionale Datenfluss, ein Virtual Dom sowie die JavaScript Syntac Extension sorgen dafür, dass mittlerweile nicht nur Onepager sondern auch kompliziertere Projekte innerhalb größerer Websites kollaborativ erstellt werden können.  

Durch die Programmierung in react wird verhindert, dass bei einer Aktion die komplette Seite neu geladen werden muss – lediglich das react-Objekt baut sich neu auf. Dadurch können z.B. Suchanfragen, Filterfunktionen oder Konfiguratoren auf einer Website sehr viel schneller ausgespielt werden. Dies wirkt sich wiederum sehr positiv auf Pagespeed und Seitenperformance und letztlich auch Usability aus. 

Wir entwicklen Ihr react-Projekt

Kontaktieren Sie uns jederzeit!

react ist schnell, leistungsstark und effizient

Vereinfach gesagt verhindert eine Programmierung in react, dass bei einer Aktion die komplette Seite neu geladen werden muss – lediglich das react-Objekt baut sich neu auf. Das ermöglicht eine hohe Performance bei Suchanfragen, Filterfunktionen oder Konfiguratoren. Die schnellen und leistungsstarken react-Anwendungen bieten somit eine starke Grundlage für eine gute User Experience. Speziell Webagenturen können Projekte damit schneller und effizienter lösen. Kannte vor react nur der jeweilige Entwickler die besonderen Eigenheiten am Code, können nun alle am Projekt beteiligten Mitarbeiter alle Änderungen einsehen, nachvollziehen und verbessern. Der Kunde wiederum profitiert dabei von einer schnellen und wirtschaftlichen Lösung.

EHG / Crosscamp

Der Camper Van-Konfigurator des Crosscamp, einer Marke der Erwin Hymer Group, ermöglicht eine komplette Individualisierung und Anpassung des Wunsch-Caravans. Dabei aktualisieren sich die einzelnen Komponenten innerhalb des Konfigurators ständig neu und orientieren sich an den bisher ausgewählten Komponenten.

Die Konfiguration erfolgt dabei nur in der Browseroberfläche, so dass das System nicht ständig auf Serverantwort warten muss.

Im Gegensatz zu allen Wettbewerbern ist die Performance des Konfigurators extrem schnell und zuverlässig. Nachdem der Caravan fertig konfiguriert ist, übernimmt react mit der Händlersuche eine weitere wichtige Aufgabe. 

Autobus Oberbayern

Der Buspreiskalkulator von Autobus Oberbayern ermöglicht durch Übersichtlichkeit, schnelle Performance und eine klare Buchungsstrecke die perfekte Auswahl für alle Anfragen hinsichtlich Personen- und Gruppentransport.  und liefert durch sehr wenige Klicks eine informative Übersicht zu allen Anfragen hinsichtlich der Beförderung. Alle Angaben hinsichtlich Ziels, Personenanzahl, Fahrtstrecke etc. werden in Echtzeit zu einem erwartbaren Endpreis kalkuliert. Auch die Auswahl des passenden Busses, grafisch durch eine 360°-Animation unterstützt, fließt unmittelbar in den Preiskalkulator ein.

Die schnelle und übersichtliche Performance ermöglicht eine stetig aktuelle und dadurch transparente Preisübersicht. Dem potentiellen Kunden wird dadurch bereits auf der Buchungsstrecke ein hohes Maß an Service und Kundenfreundlichkeit zuteil. 

Topkita

Der Kita-Finder ermittelt aufgrund von spezifischen Suchanfragen wie Umkreissuche oder Alter des Kindes geeignete Kitas und zeigt diese auf einer Karte an.

Eine Suchergebnis-Seite mit einer Liste von Suchergebnissen, die auch gleichzeitig in einer Map dargestellt werden, muss sehr genau geplant werden. Die Gefahr von Performance-Problemen bei einer derartigen Auflistung ist sehr groß. Würde die Suchergebnisseite bei Änderung jedes Filters ständig neu geladen, wäre die Seitenperformance extrem schwach. Mit React ist es möglich, dass nur die Suchergebnisse neu laden und für den Nutzer kein sichtbarer Seitenwechsel geschieht. Dadurch fühlt sich die Suche sehr schnell an. Auch bei der Map kann man nicht einfach alle Suchergebnisse als Marker anzeigen, denn ab einer gewissen Anzahl braucht die Map mehrere Sekunden, bis sie alle Marker anzeigen kann.

Hier haben wir eine React-Komponente verwendet, die auch in der Lage ist, zehntausende Marker blitzschnell anzuzeigen. Für die bessere Übersichtlichkeit sind die Marker als Cluster zusammengefasst.

Wir benutzen React bei Topkita also vor allem aus Performance- und Usability-Gründen. Der User soll eine schnelle und gut zu bedienende Such-App vorfinden, da diese in beiden Projekten die Kern-Applikation der Website ist.

Ihre Ansprechpartner

Unsere Experten beraten Sie zu allen Fragen rund um das Thema react.

Mark Plötner
Sebastian Drickl

react ist übersichtlich, performant und individuell

Die hierarchisch angelegte Software-Bibliothek bietet mehrere Vorteile, die alle zu einem übersichtlichen und hoch performanten Ergebnis beitragen. Die einzelnen Komponenten werden deklarativ statt imperativ aufgebaut. In react wird also vorgegeben, wie ein entsprechendes System aussehen soll. Alle beteiligten Komponenten gehen vom selben State aus, so dass bei jeder Aktion klar ist, wie sich das Ergebnis verändern muss – somit ist der entsprechende Code relativ kurz und nicht so fehleranfällig.

Weitere technische Besonderheiten wie der unidirektionale Datenfluss, ein Virtual Dom sowie die JavaScript Syntac Extension sorgen dafür, dass mittlerweile nicht nur Onepager, sondern auch kompliziertere Projekte innerhalb größerer Websites kollaborativ erstellt werden können. Die JavaScript Syntax Extension ist stark an der Template-Sprache XML angelehnt. Diese Sprache ermöglicht den Einbau von JavaScript, HTML und CSS in eine react-Komponente. Dadurch können diese Elemente modular in alle Web-Applikationen eingesetzt werden. react wird dadurch noch individueller.