Wdrożenie Headless e-commerce - 7 rzeczy, na które powinieneś zwrócić uwagę

W środowisku e-commerce rozwiązania typu headless są popularne już od kilku lat, jednak wiele firm stosowało tę architekturę, zanim jeszcze została zdefiniowana jako headless. W artykule skupimy się nie tylko na teoretycznych zagadnieniach, a przede wszystkim na korzyściach płynących z tego rozwiązania oraz potencjalnych wyzwaniach, z którymi należy się zmierzyć w trakcie takiego wdrożenia.

Czym jest headless i jakie płyną z niego korzyści?

Headless to koncepcja tworzenia oprogramowania, która zakłada oddzielenie frontendu, czyli warstwy prezentacji aplikacji od backendu, czyli zaplecza technicznego odpowiedzialnego za funkcjonowanie systemu. Mówiąc bardziej technicznie - headless CMS to CMS, który generuje i dostarcza jedynie zestaw informacji, jakie mają zostać wyświetlone na danej stronie, nie definiując jednocześnie jak powinny one wyglądać.

Frontend (czyli to, jak będzie wyglądał dany serwis) zależy od osobnej aplikacji, która ma za zadanie wyświetlić stronę w sposób optymalnie dostosowany do możliwości i ograniczeń danego urządzenia (monitor komputera, laptop, tablet, smartfon itd..). Bardzo często tworzona jest w jednym z frameworków np. JavaScript takim jak np. Vue.js.

Obecnie headless można wykorzystać przede wszystkim w systemach zarządzania treścią (Headless CMS) czy też sklepach internetowych (Headless e-commerce).
 

W tradycyjnym modelu CMS obie warstwy są ze sobą ściśle połączone, natomiast w rozwiązaniach typu headless komunikacja między frontendem a backendem odbywa się przez interfejs API, który służy do dostarczania treści w dowolne miejsce.

W najprostszym ujęciu framework renderuje stronę w całości na komputerze osoby, która wyświetla stronę precyzyjniej: ściągany jest tylko skrypt i przeglądarka wykonując go odpytuje odpowiednie endpointy REST API, pobiera dane i niezbędne zasoby potrzebne do wyrenderowania strony, a sam HTML tworzony jest w przeglądarce).

W przypadku stron typu SSR framework odtwarza stan renderowania na komputerze osoby wyświetlającej stronę. Dzięki temu programiści mają swobodę wyboru technologii frontendowych.

Tradycyjne podejście straciło na wartości ze względu na ciągle zmieniające się potrzeby klientów. Nie jest dostosowane do dużej liczby touchpointów, a przy wielu kanałach sprzedaży rośnie złożoność techniczna i trudno jest utrzymywać treść w odpowiedniej jakości i spójności.

W tradycyjnym CMS każdy kanał to nowa strona i baza danych, przez co odpowiednie zarządzanie informacjami staje się skomplikowane.
 

Headless upraszcza przepływ informacji – z jednej bazy danych możesz umieścić informacje do wielu kanałów sprzedaży (strona internetowa, aplikacja mobilna itd.) w takiej formie, w jakiej potrzebujesz.
 

Korzyści wykorzystania headless

Z perspektywy biznesowej wyróżnia się następujące korzyści headless:

• tworzenie i przesyłanie treści z jednej bazy danych,
• dopasowanie treści do kanałów sprzedaży bez aktualizacji interfejsu w zapleczu aplikacji,
• szybkie dostarczanie treści w wybrane miejsce z zachowaniem odpowiedniego ładowania się strony, co pozytywnie wpływa na współczynnik konwersji,
• spójne doświadczenia klienta w każdym punkcie styku,
• elastyczne projektowanie pozwalające na dostosowanie funkcjonalności do indywidualnych potrzeb klienta,
• zwiększone bezpieczeństwo przechowywania informacji ze względu na ulokowanie danych na różnych serwerach.
   

Jakie wyzwania możesz napotkać podczas wdrażania architektury headless?

Chociaż rozwiązania typu headless przynoszą wiele korzyści biznesowych, musisz być świadomy, że jest to czasochłonna droga. Przede wszystkim wiele zależy od tego, czy planujesz wdrożenie headless od zera, czy zmiana będzie wiązała się z migracją danych ze starego systemu.

Jeśli wybierasz pierwszą opcję, możesz być pewien, że konfiguracja zajmie znacznie mniej czasu niż w przypadku integracji z innymi systemami. Z naszych doświadczeń wynika, że przejście z starego systemu na rozwiązania headless może zająć nawet kilka lat. W przypadku rozpoczęcia od headless, proces potrafi skrócić się do roku.
 

Na co zwrócić uwagę przy wdrażaniu headless?

Poniżej przedstawiamy checklistę z najważniejszymi kwestiami, które pomogą Ci w skutecznym wdrożeniu headless:

• Zacznij od analizy przedwdrożeniowej – to istotny krok przy implementacji każdego projektu. Określając cele, unikniesz wielu błędów w dalszych etapach pracy oraz przygotujesz wszelkie zasoby niezbędne do efektywnej realizacji.

Dlaczego zrozumienie potrzeb i określenie celów jest tak istotnym elementem projektowania? Zapraszamy do lektury artykułu: Analiza przedwdrożeniowa, a powodzenie projektu

• Zaplanuj przejście z starego systemu na nowy lub rozpisz założenia nowego systemu – zaprojektowanie warstwy frontendowej, odzwierciedlenie zmian w backendzie, stworzenie API oraz touchpointów to tylko kilka z aspektów wymagających działań przy przejściu na nową technologię. Wymaga to sporo czasu, dlatego zadbaj o dobry plan uwzględniający wszystkie elementy potrzebujące edycji.
   
• Wykonaj testy A/B przy migracji danych – jeśli nie wdrażasz rozwiązania headless od zera, czeka Cię więcej pracy przy zintegrowaniu starego systemu z nową technologią. Aby przejście na nowy system było mniej uciążliwe, wykonaj testy A/B, które pomogą Ci w wyborze lepszego wariantu pod kątem migracji danych.
   
• Przeanalizuj kwestie budżetowe – ze względu na to, że warstwy frontend i backend są oddzielone, każda z nich może wymagać własnego hostingu i obsługi. W przypadku rozwiązań headless niezbędne jest wykupienie zewnętrznej przestrzeni hostingowej, co wiąże się z dodatkowymi kosztami.
  
  W przypadku większych realizacji powinny być zastosowane dodatkowe serwery np. CDN (Content Delivery Network), które w celu odciążenia serwerów aplikacyjnych oraz przyspieszenia działania strony potrafią przechowywać kopie plików (np. obrazków, odpowiedzi z API czy całych stron HTML) i serwować np. z lokalizacji bliższych geograficznie osobie wyświetlającej stronę w celu przyspieszenia jej działania.
  
  Oczywiście sposób cachowania i jego długość to osobny, dość skomplikowany temat. Serwery takie są dość kosztownym rozwiązaniem.
   
• Stwórz dedykowany zespół - w przypadku architektury headless konieczne będzie znalezienie zespołu, który specjalizuje się w wybranej technologii. Ze względu na to, że takich zespołów jest zdecydowanie mniej, koszt zmiany dostawcy i trudność jego znalezienia może w wielu przypadkach być znacznie wyższy.
   
• Uruchamiaj projekt stopniowo – wprowadzenie headless jest czasochłonne, dlatego aby uniknąć błędów w poszczególnych etapach, przystępuj do wdrażania krok po kroku, by zaoszczędzić czas na wprowadzanie poprawek i uzyskać maksymalne korzyści z tego rozwiązania.
   
• Zadbaj o odpowiednią komunikację – w przypadku rozwiązań typu headless, nad wdrożeniem pracuje kilka zespołów odpowiedzialnych za różne warstwy – od backendu, po frontend oraz integrację systemów. W tym miejscu warto wspomnieć o podejściu DDD (Domain Driven Design), dzięki któremu możliwy będzie poprawny podział obowiązków pomiędzy zespołami.
  
  Podział ten korzystnie wpływa również na aspekt biznesowy, ponieważ pozwala na określenie priorytetów działań w całej aplikacji. Aby projekt mógł zostać zrealizowany w sposób efektywny, ważna jest komunikacja między zespołami dedykowanymi do każdej z warstw.
  
  Im więcej osób jest zaangażowanych w projekt z różnych stron, tym większe ryzyko zaistnienia szumu komunikacyjnego. Ustal odpowiednią hierarchię działań i zadbaj o właściwy przepływ informacji na każdym z etapów realizacji projektu.
   

Wyzwania architektury headless

Bylibyśmy nieobiektywni pisząc tylko o zaletach headless. W przypadku takiego podejścia, nie można zapomnieć o konieczności optymalizacji.

W momencie, kiedy odpowiednie skrypty powodują renderowanie serwisu po stronie przeglądarki, proces ten może być nieoptymalny ze względu np. na pozycjonowanie w Google czy rankingi wydajności, ponieważ bot niekoniecznie będzie potrafił wygenerować zoptymalizowaną stronę. Rozwiązaniem tego problemu są rozwinięcia frameworków JS o SSR (Server Side Rendering). Metoda ta polega na tym, że przy pierwszym żądaniu do danej strony skrypty JavaScript wykonywane są na serwerze w oparciu o silnik Node.js i zwracany jest już wygenerowany HTML, a każda kolejna podstrona renderowana jest w przeglądarce.

Taki proces rozwiązuje problem szybkości wczytywania strony, badanej przez Google oraz problemów z pozycjonowaniem. W przypadku lotto czy brw.pl zastosowany został framework rozszerzający Vue.js czyli Nuxt.js.

Pomimo, że rozwiązania headless są nieco droższe oraz wymagają więcej czasu i zaangażowania, korzyści i zwrot z tej inwestycji jest znacznie większy. Obecnie ta architektura staje się standardowym rozwiązaniem w branży e-commerce, której zadaniem jest nie tylko ułatwienie pracy użytkownikom systemu, ale również uatrakcyjnienie indywidualnego doświadczenia klienta w procesie zakupowym.

Kluczem do skutecznego wdrożenia jest opracowanie właściwego planu, który już na starcie wyeliminuje zbędne koszty i zniweluje ryzyko większej ilości poprawek.