Les sites web des aéroports de Varna et Burgas utilisent des composants React dans Drupal

Comment en sommes-nous arrivés à avoir besoin de React ?

Chez Bulcode, nous avons tous ♥ Drupal, mais lorsque nous avons repris le support des sites web des aéroports Varna et Burgas, nous avons hérité de systèmes Drupal 8 qui avaient été réalisés d'une manière qui n'était pas si Drupal que cela. Par conséquent, la migration / le redéveloppement de Drupal 9 a été le premier obstacle. Pour référence, vous pouvez consulter cet article qui explique les avantages de la migration ainsi que les coûts de l'inaction si vous êtes encore en train de débattre d'une mise à niveau (migration).

Qu'est-ce qui en fait un défi, exactement? La migration (ou mise à niveau) de Drupal 8 vers Drupal 9 est un processus largement automatisé, selon toutes les sources d'information. Ce n'est pas toujours le cas pour la plupart des sites web, en particulier lorsqu'ils ne sont pas à jour avec les versions les plus récentes du noyau et des modules contributeurs de Drupal 8, c'est pourquoi, chez Bulcode, nous présentons toujours la migration à nos clients comme un petit projet qui leur est propre.

L'héritage que nous avons reçu pour les horaires des aéroports a été le moteur de notre décision d'utiliser React. Beaucoup de travail manuel était nécessaire, de même que la création et le téléchargement de fichiers CSV, ce qui entraînait parfois des pannes. Il s'agissait d'un processus laborieux qui se produisait plusieurs fois par jour. C'était un problème qu'il fallait résoudre le plus rapidement possible.

React pour le frontend, les programmations basées sur l'API sont rapides et à la volée.

Pourquoi Drupal et React? Drupal est un système de gestion de contenu doté d'une API robuste pour les services web, et React est un moyen simple de construire des interfaces utilisateur interactives. La combinaison de React et de Drupal fonctionne bien à plusieurs égards. Cependant, les sites alimentés par Drupal peuvent toujours utiliser React pour le développement de composants. Cette méthode est appelée "découplage progressif".

Voyons maintenant comment il est utilisé !

Ajouter React à nos composants : notre expérience

Pour commencer, nous devons télécharger et installer toutes les dépendances nécessaires :

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

Veuillez noter que nous n'allons pas discuter ici des spécificités du fonctionnement de chaque module ou de ceux qui devraient être ajoutés en tant que dépendances dev. En utilisant la page des paquets, vous pouvez voir ceci.

Configurons maintenant notre section de scripts package.json :

Avoir des configurations webpack distinctes pour le développement et la production est une bonne idée, alors gardez cela à l'esprit lorsque vous créez vos propres fichiers.

Ajoutez un simple webpack.config.js au mélange. React Hot Reloader avec Webpack Server, quelques CSS, SASS, et chargeurs de fichiers, ainsi que des plugins supplémentaires tels que ESLint et des minifieurs sont susceptibles d'être nécessaires dans votre travail. Nous ne nous étendrons pas sur ce point ici, car il s'agit d'une question de préférence personnelle.

N'oublions pas nos configurations babel. Cela peut être fait en utilisant package.json ou .babelrc.

Nous nous rapprochons de plus en plus. Dans notre dossier dist, nous trouverons un app.bundle.js que nous pouvons utiliser comme bibliothèque dans notre thème lorsque nos scripts de construction sont exécutés. Pour faciliter la mise en œuvre, nous aimerions l'ajouter à l'ensemble de l'application. Notez que les performances de votre application peuvent être compromises si vous n'avez besoin de React que pour quelques composants dispersés sur des pages aléatoires.

Nous sommes prêts à commencer à travailler sur notre composant react proprement dit. Dans cette section, tout est possible.

src/index.jsx

Enfin, nous ajouterons les balises nécessaires à l'affichage de notre composant React. À vous maintenant de le placer où vous le souhaitez !

Et voilà, nous avons réussi à intégrer React dans notre projet Drupal.

Fraport Bulgaria
"L'approche individuelle, les livraisons dans les délais et la documentation précise des développements ne sont qu'une petite partie des raisons de poursuivre le partenariat actif avec Bulcode 2016 Ltd. Nous avons le privilège et l'obligation de recommander l'équipe de Bulcode 2016 Ltd. comme étant extrêmement compétente, fiable et responsable dans la mise en œuvre des engagements."