Die Websites der Flughäfen Varna und Burgas verwenden React-Komponenten in Drupal

Warum brauchen wir eigentlich React?

Wir alle bei Bulcode lieben Drupal, aber als wir zum ersten Mal die Betreuung der Websites der Flughäfen Varna und Burgas übernahmen, erbten wir Drupal 8-Systeme, die auf eine Weise erstellt worden waren, die nicht so sehr Drupal entsprach. Folglich war die Migration / Neuentwicklung von Drupal 9 die erste Hürde. Als Referenz können Sie diesen Artikel lesen, der die Vorteile der Migration sowie die Kosten des Nichtstuns erläutert, falls Sie noch über ein Upgrade (Migration) nachdenken.

Was genau macht es zu einer Herausforderung? Die Migration (oder das Upgrade) von Drupal 8 auf Drupal 9 ist allen Informationsquellen zufolge ein weitgehend automatisierter Prozess. Das ist bei den meisten Websites nicht immer der Fall, vor allem, wenn sie mit den neuesten Kern- und Modulversionen von Drupal 8 veraltet sind, weshalb wir bei Bulcode dies unseren Kunden immer als ein eigenes kleines Projekt präsentieren.

Das Erbe, das wir für Flughafenpläne erhielten, war die treibende Kraft hinter unserer Entscheidung, React zu verwenden. Es war viel manuelle Arbeit erforderlich, ebenso wie das Erstellen und Hochladen von CSV-Dateien, was gelegentlich zu Ausfällen führte. Es war ein mühsamer Prozess, der einige Male am Tag stattfand. Das war etwas, das so schnell wie möglich behoben werden musste.

Was war also unser Ansatz? Mit spezifischem Caching und React-Komponenten für das Frontend sind API-gesteuerte Zeitpläne schnell und on-the-fly.

Warum Drupal und React? Drupal ist ein Content-Management-System mit einer robusten API für Webdienste, und React ist eine einfache Möglichkeit, interaktive Benutzeroberflächen zu erstellen. Die Kombination von React und Drupal funktioniert in vielerlei Hinsicht gut. Drupal-basierte Websites können jedoch auch React für die Entwicklung von Komponenten nutzen. Diese Methode wird als "progressive Entkopplung" bezeichnet.

Jetzt wollen wir sehen, wie sie eingesetzt wird!

Hinzufügen von React zu unseren Komponenten: unsere Erfahrungen

Zu Beginn müssen wir alle erforderlichen Abhängigkeiten herunterladen und installieren:

yarn add react react-dom webpack webpack-cli @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli

Bitte beachten Sie, dass wir hier nicht auf die Einzelheiten der Funktionsweise der einzelnen Module eingehen und auch nicht darauf, welche Module als Entwicklungsabhängigkeiten hinzugefügt werden sollten. Auf der Paketseite können Sie dies sehen.

Richten wir nun den Abschnitt package.json scripts ein:

Getrennte Entwicklungs- und Produktions-Webpack-Konfigurationen sind eine gute Idee, also denken Sie daran, wenn Sie Ihre eigenen Dateien erstellen.

Fügen Sie der Mischung eine einfache webpack.config.js hinzu. React Hot Reloader mit Webpack Server, einige CSS-, SASS- und File-Loader sowie zusätzliche Plugins wie ESLint und Minifier werden wahrscheinlich für Ihre Arbeit benötigt. Wir werden hier nicht näher darauf eingehen, da dies eine Frage der persönlichen Vorlieben ist.

Vergessen wir nicht unsere Babel-Konfigurationen. Dies kann über package.json oder .babelrc erfolgen.

Wir kommen der Sache immer näher. In unserem dist-Ordner finden wir eine app.bundle.js, die wir als Bibliothek in unserem Thema verwenden können, wenn unsere Build-Skripte ausgeführt werden. Um die Implementierung zu vereinfachen, möchten wir sie der gesamten Anwendung hinzufügen. Beachten Sie, dass die Leistung Ihrer Anwendung beeinträchtigt werden kann, wenn Sie React nur für einige wenige Komponenten benötigen, die über beliebige Seiten verstreut sind.

Wir sind bereit, mit unserer eigentlichen React-Komponente zu beginnen. In diesem Abschnitt sind uns keine Grenzen gesetzt.

src/index.jsx

Zum Schluss fügen wir das Markup hinzu, das für die Anzeige unserer React-Komponente erforderlich ist. Jetzt liegt es an Ihnen, sie dort zu platzieren, wo Sie wollen!

Und voilà, wir haben React erfolgreich in unser Drupal-Projekt integriert.

Fraport Bulgaria
"Die individuelle Herangehensweise, die pünktlichen Lieferungen und die präzise Dokumentation der Entwicklungen sind ein kleiner Teil der Gründe für die Fortsetzung der aktiven Partnerschaft mit Bulcode 2016 Ltd. Es ist unser Privileg und unsere Verpflichtung, das Team von Bulcode 2016 Ltd. als äußerst kompetent, zuverlässig und verantwortungsbewusst bei der Umsetzung der Verpflichtungen zu empfehlen."