De websites van de luchthavens van Varna en Burgas gebruiken React-componenten in Drupal

Hoe hebben we uiteindelijk React nodig gekregen?

Bij Bulcode zijn we allemaal ♥ Drupal, maar toen we voor het eerst de ondersteuning van de websites van de luchthavens Varna en Burgas overnamen, erfden we Drupal 8-systemen die waren gemaakt op een manier die niet zo Drupal was. Daarom was de migratie/herontwikkeling van Drupal 9 de eerste horde. Ter referentie kun je dit artikel bekijken waarin de voordelen van migratie worden uitgelegd, evenals de kosten van niets doen als je nog steeds een upgrade (migratie) overweegt.

Wat maakt het precies een uitdaging? De migratie (of upgrade) van Drupal 8 naar Drupal 9 is volgens alle informatiebronnen een grotendeels geautomatiseerd proces. Dit is niet altijd het geval bij de meeste websites, vooral als ze verouderd zijn met de meest recente core en module contrib versies van Drupal 8, dus bij Bulcode presenteren we het altijd aan klanten als een klein eigen project.

De erfenis die we kregen voor luchthavenschema's was de drijvende kracht achter onze beslissing om React te gebruiken. Er was veel handmatig werk nodig, net als het maken en uploaden van CSV-bestanden, wat af en toe storingen veroorzaakte. Het was een moeizaam proces dat een paar keer per dag plaatsvond. Dit moest zo snel mogelijk worden opgelost.

Dus, wat was onze aanpak? Met specifieke caching en React componenten voor de frontend, zijn API-gestuurde planningen snel en on-the-fly.

Waarom Drupal en React? Drupal is een contentmanagementsysteem met een robuuste API voor webservices, en React is een eenvoudige manier om interactieve gebruikersinterfaces te bouwen. De combinatie van React en Drupal werkt op een aantal manieren goed. Sites met Drupal kunnen echter nog steeds gebruik maken van React voor het ontwikkelen van componenten. Deze methode wordt "progressieve ontkoppeling" genoemd.

Laten we nu eens kijken hoe het wordt gebruikt!

React toevoegen aan onze componenten: onze ervaring

Om te beginnen moeten we alle vereiste afhankelijkheden downloaden en installeren:

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

Houd er rekening mee dat we hier niet ingaan op de specifieke werking van elke module of welke modules moeten worden toegevoegd als devpendencies. Als je de packages pagina gebruikt, kun je dit zien.

Laten we nu onze package.json scripts sectie instellen:

Het is een goed idee om aparte dev en productie webpack configuraties te hebben, dus houd hier rekening mee bij het maken van je eigen bestanden.

Voeg een eenvoudige webpack.config.js toe aan de mix. React Hot Reloader met Webpack Server, wat CSS, SASS en bestandsladers, evenals extra plugins zoals ESLint en minifiers zijn waarschijnlijk nodig in je werk. We zullen hier niet verder op ingaan omdat het een kwestie van persoonlijke voorkeur is.

Laten we onze babel-configuratie niet vergeten. Dit kan worden gedaan met package.json of .babelrc.

We komen steeds dichterbij. In onze dist map vinden we een app.bundle.js die we kunnen gebruiken als bibliotheek in ons thema wanneer onze build scripts worden uitgevoerd. Voor het gemak willen we deze toevoegen aan de hele app. Merk op dat de prestaties van je applicatie in het gedrang kunnen komen als je React alleen nodig hebt voor een paar componenten verspreid over willekeurige pagina's.

We zijn klaar om aan de slag te gaan met ons eigenlijke react component. De mogelijkheden zijn eindeloos in dit gedeelte.

src/index.jsx

Tot slot voegen we de markup toe die nodig is om ons React-component weer te geven. Het is nu aan jou om het te plaatsen waar je wilt!

En voilà, we hebben React met succes geïntegreerd in ons Drupal-project.

Fraport Bulgarije
"De individuele benadering, tijdige leveringen en nauwkeurige documentatie van de ontwikkelingen zijn een klein deel van de redenen om de actieve samenwerking met Bulcode 2016 Ltd. voort te zetten. Het is ons voorrecht en plicht om het team van Bulcode 2016 Ltd. aan te bevelen als uiterst competent, betrouwbaar en verantwoordelijk in de uitvoering van de verplichtingen."