Portal TableIn – frontend React, backend Drupal
React jest idealny do tworzenia super-szybkich i zgrabnych aplikacji frontendowych. Świetnie nadaje się do budowania interfejsów użytkownika dla skomplikowanych i pełnych danych backendów. W tym poście pokażę, w jaki sposób wykorzystaliśmy React do utworzenia nowoczesnej aplikacji dla systemu Drupal 7.
TableIn to system zarządzania restauracjami stosowany przez klientów na całym świecie. Rdzeń systemu został zbudowany w Drupalu7 i z powodzeniem realizuje swoje cele. Na początku, zespół TableIn zwrócił się do nas po wsparcie dla Drupala. Bardzo szybko okazało się, że mają też dodatkowe potrzeby. Oprócz rozszerzenia aplikacji służącej do rezerwacji, mieliśmy za zadanie zbudować osobny portal dla klientów końcowych – gości restauracji korzystających z TableIn. Portal miał na celu umożliwić ludziom znajdowanie restauracji i zamawianie stolików online – bez konieczności kontaktowania się telefonicznie z restauracją.
Od razu wiedzieliśmy, że bazowanie tylko na Drupal development nie pozwoli nam na zbudowanie aplikacji, która naprawdę spodobałaby się użytkownikom. Jako CMS renderowany po stronie serwera, Drupal nie pozwala na stworzenie szybkiego, zgrabnego interfejsu użytkownika, wymaganego w przypadku nowoczesnej aplikacji do rezerwowania miejsc. Ludzie często używają swoich telefonów do zamawiania stolików w restauracjach, więc aplikacja frontendowa w Javascripcie sprawdzi się dużo lepiej, niż renderowana po stronie backendu.
Zaproponowaliśmy użycie biblioteki React, a zespół TableIn się na to zgodził
React wydał nam się najlepszym wyborem do wykonania tego zadania. Wybraliśmy React, bo naprawdę świetnie się nadaje do budowania szybkich aplikacji frontendowych. Jego szybkość jest szczególnie widoczna przy zarządzaniu dużymi listami – a tego właśnie potrzebowaliśmy w przypadku tak dużej liczby restauracji.
Ponieważ współpracowaliśmy już od pewnego czasu z TableIn, wiedzieliśmy również, że pierwsza faza to ledwie początek. Portal musiał być zbudowany w sposób pozwalający na dalszy rozwój pod kątem wielkości i nowych funkcji. Bazujące na komponentach podejście React jest w takim wypadku idealnym rozwiązaniem.
Tworzenie oddzielonego drupalowego frontendu opartego na React z komunikacją REST
Aby umożliwić komunikację pomiędzy Drupalem i React, musieliśmy utworzyć w Drupalu punkty końcowe API, które zwracałyby dane dotyczące restauracji – zdjęcia, nazwy, opisy, tagi i kategorie, godziny otwarcia i dostępność miejsc. Z drugiej strony, API musiał też pozwalać na zapisywanie w systemie rezerwacji składanych w przeglądarce.
Wsparcie dla REST API w Drupalu jest naprawdę solidne, a sam REST jest lekki i popularny. Właśnie dlatego go wybraliśmy. Drupal umożliwił nam zbudowanie REST API dla wszystkich elementów – ta część pracy poszła całkiem gładko.
Jak to zwykle bywa w przypadku dużych systemów Drupal, pojawiły się jednak problemy dotyczące wydajności.
Drupal API i pamięć podręczna
Wszyscy wiemy, że Drupal świetnie się nadaje do obsługi zbuforowanej zawartości. Niestety, w przypadku rezerwowania stolików w restauracjach, najważniejsza jest dokładność danych. Musieliśmy zapewnić, że udzielane informacje są rzeczywiście aktualne. W godzinach szczytu, jak na przykład w piątkowe popołudnia albo w walentynki, stoliki w popularnych restauracjach mogą być rezerwowane co chwilę. Jeśli pokazywalibyśmy nieaktualne dane dotyczące "dostępnych" stolików, które w rzeczywistości są już zarezerwowane, zniechęcałoby to użytkowników.
Problemem jest też wielkość aplikacji i liczba rezerwacji, które musi obsłużyć. Drupala nie zaprojektowano pod kątem obsługi niezbuforowanych danych. Takie żądania wywołują wiele zapytań skierowanych do bazy danych. Jeśli pomnożymy je przez tysiące rezerwacji i wyszukiwań użytkowników, skala problemu jest oczywista.
Sporo czasu zajęło nam opracowanie odpowiedniego buforowania, indeksowania i strategii wywoływania zapytań, które pozwoliłyby na udzielanie odpowiedzi wystarczająco szybko, by aplikacja do składania rezerwacji była przydatna, przy jednoczesnym utrzymaniu aktualności danych. Wraz z rozwojem systemu i zwiększeniem się liczby użytkowników, ciągle poprawiamy wydajność i usuwamy tzw. "wąskie gardła", aby utrzymać UX na satysfakcjonującym poziomie.
Aplikacja React dla wielu języków i wielu krajów
Gdy API były już gotowe, rozpoczęliśmy prace nad samym portalem. Nasz zespół techniczny zaimplementował wspaniałe projekty przekazane nam przez utalentowany zespół TableIn.
Początkowa faza polegała na utworzeniu samej strony dla wyszukiwania i wyników, ale dość szybko dodaliśmy też stronę główną.
TableIn to firma funkcjonująca wyjątkowo sprawnie i w duchu koncepcji tzw. "szczupłego zarządzania". Dopiero gdy opisane wyżej strony okazały się skuteczne, zaprojektowali i poprosili nas o utworzenie stron poszczególnych restauracji, zawierających galerie i opinie.
Osiągnięte dotychczas efekty naprawdę robią wrażenie. Ruch w ramach portalu jest bardzo duży, a liczba rezerwacji rośnie z dnia na dzień. Rozpoczęte zostały już wstępne prace nad dodatkowymi funkcjami i projektami. Jesteśmy przekonani, że – dzięki dobremu planowaniu i zastosowaniu React – będziemy w stanie sprostać zadaniom stawianym przez zespół TableIn, jakikolwiek dalszy kierunek względem rozwoju portalu zechcą obrać.
