Mit Drupal und React einen Sprung nach vorn machen

Die digitale Transformation steht an der Spitze jedes Unternehmens, um mit den rasanten technologischen Fortschritten Schritt zu halten. Die New York Times, ein führendes internationales Nachrichtenmedium, geht in diesen Zeiten mit gutem Beispiel voran. Sie ist nicht nur für ihre Premium-Inhalte bekannt, sondern auch für ihre astronomische Präsenz sowohl im Print- als auch im digitalen Bereich. React steht an der Spitze ihrer digitalen Entwicklung, um die Seite sowohl für die Leser als auch für die Entwickler schneller und einfacher zu bedienen.

Große Unternehmen wie die New York Times machen mit ihrer Neigung zu erstklassigen Webtechnologien wie React große Fortschritte. Jede Front-End-Technologie React benötigt ein RESTful-Service-basiertes Backend zum Speichern von Daten und Implementieren von Geschäftslogik. Hier kommt Drupal mit seinen in den Kern integrierten RESTful-Diensten ins Spiel. Bevor wir uns mit der Erkundung des erstaunlichen Duos Drupal und React befassen, wollen wir React erkunden.

React: Der Anfang

Die ersten Anzeichen von React lassen sich laut RisingStack bis ins Jahr 2010 zurückverfolgen. React begann als JavaScript-Portierung von XHP, das von Facebook in seinen PHP-Stack eingeführt und als Open Source veröffentlicht wurde. XHP war hauptsächlich für die Reduzierung von Cross-Site-Scripting-Angriffen (XSS) verantwortlich.

React wurde 2013 eingeführt und als Open Source veröffentlicht.

Das größte Hindernis bei XHP war, dass dynamische Webanwendungen zahlreiche Roundtrips zum Server benötigten, was mit XHP nicht erreicht werden konnte. Dies ebnete den Weg für ReactJS. FaxJS war der frühe Prototyp von React, der 2011 ins Rampenlicht rückte. Letztendlich wurde React im Jahr 2013 eingeführt und als Open Source veröffentlicht.

Seitdem hat sich React aufgrund seines deklarativen Stils und des Fehlens von Annahmen über Ihren Tech-Stack schnell zu einer beliebten Wahl entwickelt (wie in der Grafik unten zu sehen ist). Heute verfügt React über ein großes Ökosystem, das erstklassige Bibliotheken, Konferenzen und eine hohe Nachfrage nach Entwicklern mit React-Kenntnissen umfasst.

Die Welt von React

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen - reactjs.org

ReactJS ist eine JavaScript-Bibliothek, die von einem Facebook-Ingenieur namens Jordan Walke erstellt wurde. Es ist eine deklarative und komponentenbasierte Lösung zum Erstellen von Webanwendungen. Es ist aus folgenden Gründen großartig:

Bereitstellung deklarativer Ansichten

Mit seinen deklarativen Ansichten wird Ihr Code einfacher und vorhersehbarer beim Debuggen, sodass Sie interaktive Benutzeroberflächen entwickeln und optimierte Ansichten für jeden Zustand in Ihrer Anwendung entwerfen können. Im Falle von Änderungen an den Daten kann React die richtigen Komponenten effizient aktualisieren und rendern.

Erleichterung des Schreibens von Komponenten

Das Übergeben umfangreicher Daten über Ihre App und das Heraushalten des Status aus dem Document Object Model (DOM) ist möglich, da die Komponentenlogik in JavaScript anstelle von Vorlagen geschrieben wird. React hilft beim Erstellen gekapselter Komponenten zum Verwalten ihres eigenen Status, die dann zum Erstellen komplizierter Benutzeroberflächen zusammengesetzt werden können.

Fokussiert und leicht zu erlernen

Im Gegensatz zu Angular oder Vue.js ist ReactJS eine Bibliothek und kein voll ausgestattetes Framework. Es konzentriert sich auf eine Sache und erledigt sie richtig. Es wird konsequent in Verbindung mit anderen JavaScript-Bibliotheken eingesetzt. Daher gibt es eine kürzere Lernkurve im Vergleich zum Verständnis von React im Vergleich zu anderen umfassenden Bibliotheken. Es geht nicht von Ihrem vorhandenen Tech-Stack aus, was beim Entwickeln neuer Funktionen in React hilft, ohne vorhandenen Code neu schreiben zu müssen.

React für die Entwicklung mobiler Apps

React Native ist vorteilhaft für seine Portabilität und die Möglichkeit, Komponenten wiederzuverwenden, das Echtzeit-Neuladen und die modulare Architektur, Open Source und ein großzügiges Ökosystem.

React + Drupal

Als Open-Source-Content-Management-System hat Drupal im Laufe der Jahre ein erstaunliches Wachstum erlebt (wie in der Grafik unten zu sehen ist). Es bietet eine großartige Suite von Tools für die Datenmodellierung, die Implementierung von redaktionellen Workflows und die Codierung benutzerdefinierter Anwendungslogik. Es bietet eine hervorragende Unterstützung für JSON-API- oder GraphQL-Webdienste, was es zu einer hervorragenden Wahl als Backend für eine React-Anwendung macht.

Ob einige Elemente auf einer vorhandenen Webseite verbessert werden müssen oder eine vollständig entkoppelte Single-Page-Anwendung erstellt werden muss, das Duo Drupal und React kann alles. Die Implementierung von Drupal und React zusammen kann mit einem vollständig entkoppelten oder Headless-Ansatz und einem progressiv entkoppelten Ansatz durchgeführt werden.

Entkoppeltes oder Headless Drupal mit React

Mit den leistungsstarken Web-APIs vereinfacht Drupal die Erstellung von Headless-Anwendungen. Es wurden mehrere Leuchtturm-Anwendungen mit Drupal als Backend erstellt, und leistungsstarke Demosysteme und Starter-Kits wie Reservoir und Contenta sind auf der Bildfläche erschienen.

Bei einem Headless-Ansatz wird Drupal als Backend für eine in React erstellte Frontend-Anwendung verwendet. Normalerweise werden Headless-Anwendungen verwendet, um Inhalte anzuzeigen, und die Bearbeitung von Inhalten erfolgt weiterhin im Backend. React kann aber auch zur Erstellung einer wunderbaren redaktionellen Erfahrung verwendet werden. Mit den leistungsstarken REST-APIs von Drupal kann ein entkoppeltes Bearbeitungssystem integriert werden. Auf der Drupal Europe 2018 gab es eine Sitzung, die demonstrierte, wie man mit Hilfe von React eine redaktionelle Erfahrung auf Unternehmensebene für Drupal 8 erstellt.

Es wurde eine entkoppelte Anwendung mit React gezeigt, mit der Sie Inhalte direkt im Frontend bearbeiten können. Durch die vollständige Nutzung von React wurde eine moderne redaktionelle Erfahrung mit In-Place-Bearbeitung, kontextsensitiver Bearbeitung, Drag-and-Drop-Platzierung und -Erstellung von Inhalten und vielem mehr geschaffen.

Progressiv entkoppeltes Drupal mit React

Um ein Gleichgewicht zwischen redaktionellen Bedürfnissen wie Layoutverwaltung und den Wünschen der Entwickler zu finden, ermöglicht Ihnen progressiv entkoppeltes Drupal, ein JavaScript-Framework in das Drupal-Frontend zu interpolieren.

OpenSense Labs hat die Website des Produce Market Guide (PMG), einer Ressource für Informationen über Agrarrohstoffe, aktuelle Trends und Datenanalysen, mit Hilfe von progressiv entkoppeltem Drupal und React unter anderem überarbeitet.

Die Module ElasticSearch Connector und Search API wurden für die Erstellung von Mapping und Indizierung auf dem Elastic Server verwendet. Auf die Entwicklung der Elastic-Backend-Architektur folgte der Aufbau einer Faceted-Search-Anwendung mit React und die Integration der App in Drupal als Block- oder Template-Seite.

Die Projektstruktur für die Suche wurde in der Sandbox mit modernen Tools wie Babel und Webpack entworfen und entwickelt, und Bibliotheken von Drittanbietern wie Searchkit, eine Suite von React-Komponenten, die direkt mit dem Elasticsearch-Cluster kommunizieren, erwiesen sich mit ihrer vollständig anpassbaren Lösung als große Hilfe.

Logstash und Kibana, die auf Elasticsearch basieren, wurden auf dem Elasticserver integriert, um die Daten zu sammeln, zu parsen, zu speichern und zu visualisieren. Die App in der Sandbox wurde für die Produktion entwickelt und das gesamte CSS/JS wurde als Block in Drupal integriert, wodurch es zu einer progressiv entkoppelten Funktion wurde.

Das Projekt, das den Prinzipien von Agile und Scrum folgte, führte zu einer benutzerfreundlichen Website für PMG mit einer Suchanwendung. Es lud die Suchergebnisse schneller.

Fazit

Drupal und React können Unternehmen gemeinsam helfen, im digitalen Raum voranzukommen. Das RESTful-Service-basierte Backend von Drupal und React mit seinen erstaunlichen Fähigkeiten als Frontend können sich als bemerkenswerte Lösung erweisen.

Wir halten an unseren Zielen fest, die Bemühungen unserer Partner zur digitalen Transformation mit unserer Servicepalette zu erfüllen.

Kontaktieren Sie uns unter [email protected], um eine Drupal-Website mit React als Front-End-Technologie zu erstellen.