Tablein - ein React-Frontend auf einem Drupal-Backend
React ist fantastisch für den Aufbau super schneller und eleganter Frontend-Anwendungen. Es ist großartig für den Aufbau von Benutzeroberflächen für komplexe, datenintensive Backends. In diesem Beitrag werde ich zeigen, wie wir React verwendet haben, um eine moderne Anwendung für ein Drupal 7-System zu entwickeln.
TableIn ist ein Restaurant-Reservierungsverwaltungssystem, das von Kunden auf der ganzen Welt genutzt wird. Das Kernsystem wurde auf Drupal 7 aufgebaut und bedient die Kunden mit großem Erfolg. Zunächst kam TableIn für unseren Drupal-Support-Service zu uns. Sehr schnell stellte sich heraus, dass sie zusätzliche Anforderungen hatten. Abgesehen von der Erweiterung der Reservierungsanwendung erhielten wir den Auftrag, ein separates Portal für die Endkunden - Besucher der Restaurants, die TableIn nutzen - zu erstellen. Das Portal wurde so konzipiert, dass Menschen Restaurants finden und Tische online buchen können, ohne das Restaurant telefonisch kontaktieren zu müssen.
Wir wussten sofort, dass die alleinige Nutzung der Drupal-Entwicklung uns nicht erlauben würde, die Art von Anwendung zu erstellen, in die sich die Benutzer verlieben würden. Als serverseitig gerendertes CMS erlaubt Drupal keine schnelle, elegante Benutzeroberfläche, die eine moderne Buchungs-App erfordert. Menschen buchen oft Restaurants auf ihren Handys, daher ist eine Frontend-Anwendung in Javascript dafür viel besser geeignet als eine backend-gerenderte.
Wir schlugen vor, React zu verwenden, das TableIn-Team sagte „ja“.
Wir wählten React für die Aufgabe. React war unsere Wahl, weil es wirklich großartig ist, um schnelle Frontend-Anwendungen zu entwickeln. Es ist besonders schnell, wenn es darum geht, große Listen zu verwalten, was hier der Fall war, da wir eine Vielzahl von Restaurants zu verwalten hatten.
Nachdem wir nun schon eine Weile mit TableIn gearbeitet haben, wussten wir auch, dass die erste Phase nur ein Anfang sein würde. Das Portal musste so gebaut werden, dass es zukünftiges Wachstum in Bezug auf Größe und neue Funktionen ermöglichen würde. Reactions komponentenbasierter Ansatz eignet sich für diesen Zweck fantastisch.
Erstellung eines entkoppelten Drupal-Frontends auf React mit REST-Kommunikation
Um Drupal und React kommunizieren zu lassen, mussten wir API-Endpunkte auf Drupal erstellen, die zurückgeben
- Daten über Restaurants - Fotos, Namen, Beschreibungen, Tags und Kategorien
- Öffnungszeiten und Verfügbarkeit der Tische
Auf der anderen Seite musste die API es uns auch ermöglichen, vom Benutzer im Browser vorgenommene Reservierungen zurück ins System zu speichern.
Die Unterstützung für REST-APIs in Drupal ist wirklich stark und REST ist wirklich leichtgewichtig und populär. Deshalb haben wir es gewählt. Drupal ermöglichte es uns, REST-APIs für alles zu erstellen, was wir wollten, und dieser Teil der Arbeit verlief ziemlich reibungslos.
Die Probleme traten dort auf, wo sie normalerweise bei einem großen Drupal-System auftreten - bei der Leistung.
Drupal-API und Cache
Wir alle wissen, dass Drupal hervorragend darin ist, zwischengespeicherte Inhalte bereitzustellen. Leider sind im Restaurantbuchungsgeschäft zeitnah genaue Daten entscheidend. Wir müssen die Verfügbarkeit wirklich aktuell halten. In Stoßzeiten, wie Freitagabenden oder am Valentinstag, können viel beschäftigte Restaurants zahlreiche Reservierungen pro Minute erhalten. Wenn wir veraltete Daten mit „verfügbaren“ Tischen anzeigen würden, die in Wirklichkeit bereits gebucht sind, wäre das für die Benutzer wirklich abschreckend.
Dann gibt es die Größe der App und das Volumen der Buchungen, die über die App gehen. Drupal ist nicht dazu ausgelegt, nicht zwischengespeicherte Daten bereitzustellen. Solche Anfragen verursachen viele Datenbankabfragen. Wenn Sie dies mit den Tausenden von Reservierungen und Suchanfragen multiplizieren, die Benutzer durchführen, wird das Problem offensichtlich.
Es hat uns einige Zeit gekostet, eine korrekte Strategie für Zwischenspeicherung, Indizierung und Abfragen zu entwickeln, die ausreichend schnelle Antworten ermöglicht, um die Buchungs-App nutzbar zu machen, die Daten jedoch aktuell zu halten. Da das System und die Anzahl der Benutzer wächst, arbeiten wir auch weiterhin an der Leistungsverbesserung und beseitigen Engpässe, um ein angenehmes Benutzererlebnis zu ermöglichen.
Mehrsprachige, länderübergreifende React-Anwendung
Als die APIs fertig waren, machten wir uns an die Arbeit, um das Portal selbst zu erstellen. Unser technisches Team setzte die wunderschönen Designs um, die vom immer so talentierten TableIn-Team bereitgestellt wurden.
Die anfängliche Phase bestand darin, nur eine Suchseite mit Ergebnissen zu erstellen, aber wir haben wirklich schnell eine Homepage hinzugefügt.
TableIn ist ein wirklich schlankes Unternehmen, das in einer sehr agilen Weise arbeitet. Erst als sich die oben genannten Seiten als erfolgreich erwiesen hatten, entwarfen sie und baten uns, die spezifischen Restaurantseiten mit Bildergalerien und Bewertungen zu entwickeln.
Die bisherigen Ergebnisse sind atemberaubend. Das Portal erhält viel Traffic und die Anzahl der Reservierungen steigt Tag für Tag. Zusätzliche Funktionen und Pläne sind bereits in Arbeit. Dank guter Planung und der Nutzung von React sind wir sicher, dass wir das Portal in jede Richtung bewegen können, die das TableIn-Team uns vorgibt.
