Jak używać ReactJS z Drupalem

17.07.2018

React.js to bardzo popularny framework JavaScript stworzony przez Facebooka. Pozwala na tworzenie przepięknych, interaktywnych i szybkich interfejsów, w których użytkownicy się zakochają. Drupal z kolei to fantastyczny CMS, na którym zbudować można małe, średnie o ogromne strony internetowe.

Czasem możesz chcieć połączyć oba te frameworki, np. zaoferować użytkownikom wyszukany backend na Drupalu i zgrabny, szybki front-end oparty na bibliotece React.

W tym poście omówię różne metody połączenia obu technologii.

“Headless” Drupal vs. osadzony React

Pierwszym wyborem, jakiego należy dokonać, kiedy rozważasz używanie Reacta i Drupala to czy chcesz zastosować podejście “Headless Drupal” (ang. Bezgłowy Drupal), gdzie Drupal stanowi wyłącznie backend, a jedyny interfejs, z jakim zetknie się użytkownik będzie na Reakcie, czy też wolisz osadzić Reactową aplikację w na stronie zbudowanej na Drupalu, generowanej poprzez silnik szablonów Drupala. Pozwól, że wyjaśnię.

Headless Drupal z React frontend

Pierwszy scenariusz zakłada, że Drupal służy jako backend dla frontendowej aplikacji napisanej w Reakcie. Systemy są niezależne i komunikują się poprzez HTTP np. REST albo GraphQL.

To najlepsza opcja, jeśli chcesz stworzyć:

progresywną aplikację webową (PWA) dla użytkowników urządzeń mobilnych
aplikację typu single page (SPA) przechowującą dane w Drupalu
łatwy w użyciu punkt dostępu do podzbioru dużego systemu opartego na Drupalu. Powiedzmy, że Twoi pracownicy w terenie odwiedzają lokalne sklepy i wysyłają zdjęcia towarów na półkach. Mogą potrzebować wyłącznie łatwego sposobu załadowania zdjęć, bez konieczności wchodzenia w cały skomplikowany system CRM, którego używa biuro.
mniejszą aplikację pobierającą pewien rodzaj danych z większej strony, np. pokazuje wyłącznie informacje z jednej sekcji internetowego wydania popularnego dziennika.

Jak stworzyć w Drupalu aplikację headless?

Jeśli wybrałeś headless Drupala, tworzysz osobną aplikację w ReactJS, która będzie się komunikowała z backendem poprzez zapytania HTTP, tak, jak zrobiłbyś to w przypadku każdego innego systemu backendowego. Właściwie w tym przypadku dla Reacta nie ma znaczenia, co stoi po stronie backendu. Wystarczy jeśli aplikacja ma dostęp do wystawionego API.

Facebook przygotował wspaniały projekt demonstracyjny na ReactJS, aby pomóc Ci zrozumieć podstawy.

Kiedy już działa aplikacja w Reakcie, przygotowujesz endpointy w Drupalu, które służą jako źródło danych dla aplikacji. Drupal 8 jest doskonałym oprogramowaniem i posiada pełny REST API. Tutaj znajdziesz pełną dokumentację Drupal Rest API. Przyjrzyj się zwłaszcza modułowi REST UI pozwalającemu na tworzenie jasnych, konfigurowalnych endpointów dla encji. Napisaliśmy obszerny artykuł o ustawianiu REST-owych endpointów dla aplikacji w Javascript.

Jeśli wolisz GrapHQL, tutaj znajdziesz odpowiedni moduł, który jest ciągle rozwijany i pozwala na budowanie endpointów dla GraphQl.

Jeśli headless Drupal jest rozwiązaniem, którego poszukujesz, warto sprawdzić także projekt pokazowy ContentaCMS, który jest implementacją headless Drupala z popularnymi frontendowymi frameworkami. Zastosowanie Reacta można podejrzeć tutaj.

Aplikacja oparta na bibliotece React osadzona w Drupalu

Dość często nie potrzeba nam całej “headless” implementacji, za to wystarczy jeden albo dwa wysoce interaktywne elementy na kilku podstronach Twojego portalu. Może to być na przykład wieloetapowy formularz, który lepiej działałby bez przeładowywania strony albo różnego rodzaju elementy interfejsu użytkownika, które działałyby lepiej zrobione w JavaScripcie.
W takim wypadku znacznie roztropniejsze jest użycie React.js do stworzenia komponentów i osadzenie ich na stronie obsługiwanej przez Drupala. W ten sposób możesz wykorzystać siłę Drupala w innych punktach strony, np. przy rejestracji, renderowaniu pól, viewsów itp.

Jak osadzić w Drupalu aplikację opartą na Reakcie?

Na początek należy dodać bibliotekę React do strony, tak samo, jak robisz to z jakąkolwiek inną biblioteką js (np. jQuery albo inną dla sliderów lub galerii). W zależności od tego, czy skrypt jest potrzebny na każdej z podstron, czy jest to część skórki lub modułu, istnieją różne sposoby dodawania biblioteki js do strony. Nie będę zagłębiał się tu w szczegóły, ponieważ obszerną dokumentację można znaleźć tu i tu.

Metodą niepolecaną, ale szybką i wystarczającą do testów jest dodanie tagów skryptu do pliku html.html.twig w swoim szablonie:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

oraz Twojego własnego skryptu do aplikacji:

<script src="/paht/to/my/scripts/myreactapp.js"></script>

Jednym z ograniczeń osadzonej aplikacji jest możliwość użycia wyłącznie języka JavaScript. W przeciwieństwie do tworzenia aplikacji “headless” nie można skorzystać z JSX ani TypeScripta. Dzieje się tak, gdyż w kompletnej aplikacji w bibliotece React Webpack lub Babel transpilują JSX i TypeSripta do JavaScripta. Dla uproszczenia w naszym przypadku nie używamy tych narzędzi.

Wskazówka: Aby móc używać JSC, musisz najpierw użyć Webpacka, żeby przekompilować plik JavaScript, a następnie dodać go do Drupala. Następnie dobrym krokiem jest użycie na start repozytorium create-react-app repo, a potem skopiowanie pliku js powstałego w wyniku transpilacji i osadzenie go w Drupalu. Nie będzie potrzeby osobnego osadzania React.js w kodzie, ponieważ został już dołączony podczas transpilacji. Nieco bardziej skomplikowaną sprawą jest takie ustawienie, aby działało autoodświeżanie i plik został przekopiowany do Drupala, dlatego w tym wpisie to pominiemy.

Wracając do naszego przykładu pierwszą rzeczą, jaką należy zrobić jest stworzenie tagu HTML w markupie, w którym aplikacja w bibliotece React ma działać. To może być div renderowany w bloku albo specjalny kontroler w osobnej ścieżce.