Dlaczego warto robić wdrożenia headless?

Choć w życiu zawsze warto postępować „z głową”, coraz częściej do zarządzania treściami stosuje się architekturę headless. Zbudowana na jej podstawie platforma sklepu internetowego to przykład wdrożenia najnowszych trendów informatycznych, zapewniających wartość dla wszystkich zainteresowanych stron. Dzięki headless handel internetowy nabiera nowego wymiaru.

Z punktu widzenia klienta sklep dobrze wygląda i sprawniej działa niezależnie od urządzenia, na jakim się go przegląda. Administratorzy strony korzystają zaś na większej swobodzie doboru technologii. Oddzielenie tradycyjnego front-endu pozwala w każdym elemencie zastosować odpowiednie języki programowania (do tego stworzone). Zaletą takiego podejścia jest fakt, że platforma sklepu internetowego staje się znacznie bardziej elastyczna. Możemy stworzyć zupełnie inny wygląd dla różnych rodzajów urządzeń – na każdej jednak będziemy pokazywali te same dane pobierane ze wspólnego back-endu.

Architektura headless – ponowny trend w e-commerce

Rynek e-commerce wyróżnia się niezwykle dynamicznym rozwojem i nieustannym sięganiem po nowe technologie. To tutaj wdrażane są innowacyjne rozwiązania skrojone dla poprawy wygody użytkowników. Klienci chętnie korzystają z coraz nowszych kanałów informacyjnych czy sieci społecznościowych. Mnogość serwisów skupionych na handlu lub przynajmniej oferujących jakąś formę zakupu sprawia, że sprzedaż omnikanałowa staje się jednym z głównych trendów e-commerce.

Architektura headless właśnie tutaj może rozwinąć skrzydła. Klienci oczekują, że ceny i warunki zakupu w sklepie stacjonarnym, internetowym, w aplikacji, na portalu aukcyjnym czy społecznościowym marketplace będą zawsze takie same. Świat rzeczywisty przenika się z tym na ekranie smartfona czy komputera: produkt zakupiony online musi dać się zwrócić w sklepie, a ten wystawiony na ekspozycji – zamówić przez internet. To właśnie dzięki architekturze headless branża e-commerce może odpowiedzieć na te wyzwania i skoordynować wszystkie kanały sprzedaży.

Czym jest technologia headless?

Tradycyjna platforma sklepowa dzieli się na dwa zasadnicze elementy. Back-end to wszystko, czego nie widzi klient – baza danych, narzędzia administracyjne, feedy ze stanami magazynowymi, zarządzanie zamówieniami itd. Natomiast front-end jest interfejsem odpowiedzialnym za wyświetlenie niektórych informacji przechowywanych po stronie back-endu, zbieranie danych od użytkownika i przesyłanie ich znowu do back-endu. W tradycyjnym podejściu obdywa te elementy są trzymane w tej samej technologii, w tym samym „miejscu”.

Zakupy na YouTube wkraczają do Polski. Allegro pierwszym partnerem

Sklep internetowy korzystający z rozwiązania headless architecture również ma rozbudowany back-end, zasadnicza różnica zachodzi jednak w sposobie komunikacji z użytkownikiem. Sztywny front-end zostaje ucięty jak głowa na gilotynie (stąd właśnie wzięło się „headless”). Rozmaite API są – idąc dalej tą metaforą – głowami hydry. Zamiast jednej, może ich być wiele, każda odpowiedzialna za przesyłanie danych między back-endem a innym urządzeniem, które widzi Klient (np. aplikacji, strony internetowej, elektronicznego kiosku).

Zalety rozwiązań headless

Technologia headless zapewnia przede wszystkim dużą spójność, jeżeli chodzi o publikację treści. Różne aplikacje, kanały społecznościowe i witryny internetowe pobierają dane z jednego panelu back-end. Dzięki temu w każdym kanale możemy zobaczyć te same promocje, ceny, nowe towary i aktualne zdjęcia. Jest jedno źródło prawdy: back-end sklepu. Co więcej, każda odnoga interfejsu może być tworzona niezależnie, z wykorzystaniem najbardziej dopasowanej technologii oraz narzędzi udostępnianych przez twórców poszczególnych platform. Oddzielenie warstwy wizualnej i technicznej pozwala również uniezależnić od siebie prace nad tymi elementami (np. nad aplikacją mobilną może pracować zupełnie inny zespół).

Headless commerce to też lepsze wykorzystanie technologii, co szczególnie odczujecie w szybkości działania serwisu. Nowoczesna architektura oparta o Client-Side-Rendering pozwala przekierować wykonanie części operacji bezpośrednio na przeglądarkę użytkownika. Zmniejszenie liczby zapytań do bazy danych przy wykorzystaniu headless idzie więc w parze z poprawą szybkości sklepu po stronie klienta.

Rozdzielenie warstwy procesowej i wizualnej sklepu

Choć tradycyjnie stanowią dwie osobne części, front-end oraz back-end zwykle są ze sobą bardzo silnie powiązane i wykonane w zbliżonych technologiach. Wadą tradycyjnego front-endu jest niewystarczająca elastyczność. Przygotowany z myślą o przeglądarce komputerowej interfejs może źle się skalować do ekranu telefonu. Jeżeli szukacie przykładu, przypomnijcie sobie interfejs Windows 8. Próba wykorzystania zachowań natywnych dla urządzeń mobilnych na komputerze nie skończyła się sukcesem. Rozdzielenie warstwy procesowej i wizualnej sklepu w architekturze headless pozwala uniknąć takich problemów. Do każdego urządzenia dobieramy technologię, która jest do tego dedykowana.

Zmniejszenie zasobów serwerowych

Tradycyjny model Server-Side Rendering stanowi fundament internetu – wszystko, co użytkownik widział w swojej przeglądarce, jest generowane przez serwer WWW i przesyłane przez sieć. O ile przy typowej stronie nie jest to problem, Client-Side Rendering udowadnia swoją przydatność wszędzie tam, gdzie konieczne jest wykonanie części tych operacji po stronie klienta. Dzisiejsze przeglądarki są już na tyle wydajne, by bez trudu poradzić sobie z wieloma operacjami, odciążając zauważalnie serwer sklepu.

Wykorzystanie wielu kanałów komunikacji z klientem

Komunikacja z klientem w e-commerce to już nie tylko nudna i statyczna strona internetowa. Owszem, dalej jest ona narzędziem pierwszego wyboru, ale często większe możliwości dają dedykowane aplikacje mobilne, co zresztą udowadniają od lat największe platformy sprzedażowe na świecie. Headless API nie ogranicza się jednak tylko do smartfonów i tabletów – komunikować się z back-endem mogą choćby wirtualne kioski w stacjonarnym sklepie, smartwatche czy nawet asystenci głosowi. Każdy z tych kanałów korzysta z jednego źródła prawdy, jakim jest backend sklepu. Dzięki te mamy te same promocje, ceny, reguły biznesowe, etc.

Shopware PWA – odpowiedź na potrzeby sklepów headless

Shopware oferuje innowacyjne rozwiązanie PWA (Progressive Web App), które ułatwia stworzenie innowacyjnego sklepu w architekturze headless. Wykorzystanie gotowej technologii jest świetnym sposobem na zmniejszenie kosztów, jakie może wygenerować przejście na nowy system. Oparte o VueStorefront Shopware PWA to kompleksowe narzędzie, które do zastąpienia stosowanych przez Was rozwiązań wymaga jedynie dostosowania kompatybilności niektórych modułów. Dalej jest to więcej pracy w porównaniu z systemem monolitycznym, ale znacznie mniej, niż to, ile tej pracy było potrzebne kilka lat temu. Co otrzymujemy jednak w zamian? Szybsze ładowanie strony, możliwość przeglądania treści offline (przynajmniej częściowo), możliwość korzystania z funkcji urządzenia (np. aparatu do skanowania kodów produktowych), a także możliwość zainstalowania strony, jako aplikacji mobilnej. Przy stosunkowo niewielkiej dodatkowej inwestycji możemy też aplikację PWA dodać do sklepu Google Play Store.

Skontaktuj się z nami, żeby omówić czy Shopware PWA jest właściwym wyborem dla Ciebie.

 

Autor:

Kacper Gugała, regional manager Poland, Shopware

Związany z rynkiem eCommerce od 10 lat. Autor ponad 100 publikacji na czasnaecommerce.pl, konsultant przy wdrożeniach sklepów online zarówno dla lokalnych podmiotów, jak i międzynarodowych korporacji. Prywatnie mąż najlepszej kobiety na świecie, dwukrotny ojciec i wokalisto-gitarzysta zespołu Thesis.

 

Artykuł powstał we współpracy z Shopware.