Headless architecture, bezgłowy e-Commerce, headless PWA – frazy, które pojawiają się w branży coraz częściej. Puste buzzwordy czy prawdziwa rewolucja technologiczna? Sięgnij po więcej wiedzy.
Klasyczne podejście do budowy serwisów internetowych – w tym sklepów – zakłada monolityczność architektury. Jeden, potężny system łączy w sobie to, co widzi klient (frontend), wewnętrzny silnik (backend) oraz jednolitą bazę danych. To nasz punkt wyjścia.
Na czym polega headless e-Commerce?
Nowe podejście to…dekapitacja.
Architektura headless polega na “rozbiciu” oprogramowania na niezależne elementy połączone ze sobą przez API. Znika jednolity frontend na rzecz kilku, przeznaczonych do konkretnych urządzeń. Obie części stają się wobec siebie niezależne, co umożliwia lepsze dopasowanie serwisu do użytkownika – jego urządzenia i warunków technicznych.
Konsekwencją i rozwinięciem podejścia headless jest composable commerce – czyli dalsze “szatkowanie” struktury oprogromowania. Odkrojony od frontendów backend można podzielić na tzw. mikroserwisy, odpowiedzialne za poszczególne funkcje – takie jak płatności, zarządanie opisami produktów czy zamówieniami. Każdy z mikroserwisów ma swoją bazę danych. Całość łączy się ze sobą za pomocą API.
Okiem laika wygląda to na sporą komplikację czegoś, co może funkcjonować jako całość. Ale prawda jest zgoła inna.
Wdrażamy sklepy internetowe headless – potrzebujesz pomocy? Skontaktuj się z nami.
Jakie zalety ma headless e-Commerce?
Budowa sklepu internetowego na bezgłowej platformie daje:
Elastyczność i dopasowanie
Podejście headless daje możliwość niezależnego rozwoju i modyfikacji poszczególnych elementów systemu bez ingerencji w pozostałe. Mając jeden backend sklepu, możesz rozwijać autonomicznie front aplikacji mobilnej, czy strony internetowej. Niezależnym frontem może być także kiosk POS w stacjonarnym sklepie (zobacz jak to robi np. eobuwie.pl). Wprowadzanie wszelkich zmian i aktualizacji jest tu bardzo, bardzo szybkie.
W ten sposób zapewniesz użytkownikom optymalne doświadczenie zakupowe, nie walcząc z dopasowaniem jednolitego systemu do wielkości, rozdzielczości i sposobu interakcji danego kanału.
I zrobisz to na pewno dużo szybciej, lepiej reagując na potrzeby rynku.
Spójność
W podejściu klasycznym do e-Commerce częstym problemem jest utrzymanie spójności danych pomiędzy kanałami sprzedaży. Osobny CMS do strony wizytówkowej, osobny do samego sklepu internetowego. Do tego jeszcze ERP funkcjonujący w sklepach stacjonarnych niezsychronizowany ze stanami magazynowi i sprzedażą online i… mamy galimatias.
Headless e-Commerce bazuje na korzystaniu z jednego źródła danych (single source of truth) i bieżącym aktualizowaniu wszystkich elementów systemu poprzez API. Praktycznym przykładem jest tu wdrożenie PIM (Product Information Managment), czyli bazy danych o produktach, która może synchronizować się zarówno z ERP, jak i np. platformą B2B i B2C, wszędzie zapewniając te same opisy, parametry i stany towarowe.
Pójdźmy szerzej. Współczesny konsument jest wysoce wymagający i oczekuje perfekcyjnego, a przede wszystkim spójnego doświadczenia zakupowego na każdym kanale. A dzięki architekturze headless i czerpaniu “prawdy” o danych z jednego, synchronizowanego źródła, marki e-Commerce mogą tworzyć np. programy lojalnościowe działające online i offline czy zakupy hybrydowe (przymiarka w sklepie, zakup ze smartfona).
Bezpieczeństwo
Jeśli pójdziesz krok dalej i rozszerzysz podejście “rozbijania” architektury również o mikroserwisy, zyskasz na bezpieczeństwie swojego sklepu.
Jest takie anglojęzyczne powiedzenie o tym, że nie warto trzymać wszystkich jajek w jednym koszyku. Przekładając to na technologię, monolityczna architektura e-Commerce to właśnie taki koszyczek pełen jajek, a podejście headless + mikroserwisy to roztropne ich rozproszenie po kilku miejscach. To oznacza mniejszą szansę na awarię krytyczną, która “położy” cały sklep internetowy.
Niezależność
Architektura headless + mikroserwisy w połączeniu z oprogramowaniem open source to przepis na uniezależnienie się od jednej firmy wdrożeniowej. Najlepszy przykład to sklep na Magento wraz z wdrożeniem Akeneo PIM.
Z jednej strony możesz zlecić stworzenie backendu i frontendów osobnym, wyspecjalizowanym w ich tworzeniu software house’om.
Z drugiej kod zawsze jest Twój, i jeśli wykonawca zawiedzie Twoje oczekiwania, możesz przekazać pracę innemu.
Co to jest PWA?
No dobrze, to już znasz zalety architektury bezgłowej. Założę się, że w oczy wpadło Ci też inne pojęcie, często występujące obok headless – mianowicie PWA.
Progressive Web App to inaczej aplikacja webowa działająca z poziomu przeglądarki. Aby oprogramowanie zasłużyło sobie na to miano, musi spełnić szereg wymagań zawartych w postulatach PWA – m.in. wysoką responsywność, szybkość ładowania, możliwość działania offline, dobrą reakcję na działania użytkownika i wspieranie powiadomień push.
Z punktu widzenia user experience sklep internetowy stworzony wg wymagań PWA działa doskonale na każdym smartfonie i w niemal każdych warunkach (wolny internet, niestabilne łącze).
Żeby pełnoprawnie stwierdzić, że aplikacja jest PWA musi być ona:
- progresywna,
- responsywna,
- niezależna od sieci,
- podobna do aplikacji natywnej,
- zawsze aktualna dzięki Service Worker,
- bezpieczna dzięki HTTPS,
- mająca manifest aplikacji,
- angażująca, dzięki powiadomieniom push,
- możliwa do przechowywania na ekranie głównym,
- działająca bez konieczności instalacji.
Pamiętasz słowa: “there is an app for that” z czasów gigantycznego boomu aplikacji mobilnych? Jeszcze 5 lat temu, aby iść z duchem czasu i sprostać oczekiwaniom rynku, marki e-Commerce tworzyły aplikacje swoich sklepów – osobno na iOS, osobno na Androida. Teraz to się zmienia.
Dzięki wdrożeniu bazującym na Progressive Web App możesz zjeść ciastko i mieć ciastko – a na dodatek dwa ciastka. Już tłumaczę. Taki sklep internetowy wygląda i działa jak aplikacja, ale by go odnaleźć, wcale nie trzeba szukać go w Appstore czy Google Play, wystarczy wejść na jego adres przez przeglądarkę.
Niezależnie od używanego systemu czy urządzenia, użytkownik ma spójne doświadczenie. A dla Ciebie to same korzyści, bo raz że oszczędzasz na wdrażaniu osobnych aplikacji, dwa – nie płacisz prowizji sklepom z apkami, trzy – cały serwis jest widoczny w Google’u (dobrze dla SEO!). I cztery – Twój sklep użytkownik może “zainstalować” na telefonie, dodając ikonę na pulpicie z poziomu przeglądarki, jak na filmie poniżej.
A czym jest headless PWA?
Połączmy teraz wszystko w jedną całość.
Architektura headless, dzięki swojej skalowalności i elastyczności, świetnie nadaje się do tworzenia serwisów spełniających postulaty PWA. Czyli nastawionych na mobile-first i dbających o najwyższą jakość doświadczenia użytkownika.
Dzięki wykorzystaniu tych dwóch elementów uzyskujemy platformę sprzedażową, która odpowiada na wszystkie funkcjonalne potrzeby użytkowników, jednocześnie upraszczając to, co dzieje się pod spodem, czyli wszelkie zmiany, modyfikacje i ulepszenia sklepu.
“Headless PWA to idealne połączenie pod nowoczesny internet, gdzie liczy się wygoda, prędkość działania i łatwość dostępu. Jest to świetne rozwiązanie dla e-Commerce’ów, które chcą się rozwijać i myślą o ciągłym ulepszaniu swojego sklepu.”
Szymon Dziewanowski, Magento Developer
Dużo na temat praktycznej strony wdrożenia sklepu na Magento PWA pisaliśmy już tutaj – warto przeczytać całość.
Headless PWA – przykład wdrożenia
Aby zilustrować pojęcia w tym artykule, użyliśmy filmów i screenów ze sklepu Briju.pl. To wdrożony i rozwijany przez nas sklep internetowy zbudowany według architektury headless i spełniający postulaty PWA. Na backendzie jest tam najnowsze Magento open source, z kolei na frontendzie działa specjalny szablon ScandiPWA bazujący na React.
Przeczytaj pełne case studies Briju.pl, wykorzystującego headless PWA dla Magento 2.
Headless e-Commerce – ile to kosztuje?
Na zakończenie kwestia pieniędzy.
Jak to zwykle bywa z nowoczesnym i przyszłościowym softem, wdrożenie początkowe jest znaczną inwestycją, która jednak z czasem się zwraca.
Samo wdrożenie headless e-Commerce może początkowo sporo kosztować, biorąc pod uwagę konieczność zbudowania od nowa zarówno backendu, jak i frontendów sklepu. Wiele tu oczywiście determinuje liczba modułów i połączeń (np. z ERP czy systemy PIM), a także konieczność dostosowania “gołego” silnika (np. Magento open source) do wymagań projektu.
Ale zbudowanie takiej bezgłowej struktury się opłaci, bo jej późniejsza rozbudowa, aktualizacja i skalowanie staną się dużo tańsze niż w przypadku typowego, jednolitego e-Commerce.
Dla kogo?
Sformułujmy to jako mini-ankietę. Jeśli przynajmniej na jedno z poniższych stwierdzeń odpowiadasz “TAK!”:
- masz ambicję i jasną wizję rozwoju e-Commerce o kolejne punkty styku;
- planujesz ekspansję zagraniczną;
- chcesz zainwestować w nowoczesną platformę bez narastającego długu technologicznego;
- pragniesz zapewnić użytkownikom doskonałe doświadczenia zakupowe niezależnie od kanału i urządzenia;
- uważasz, że mobile-first to fundament współczesnego e-Commerce;
- potrzebujesz elastycznego i skalowalnego podejścia do swojego projektu wdrożenia sklepu…
…to musisz zastanowić się nad migracją na architekturę headless e-Commerce.
