-
Firma
-
e-Commerce
-
e-Commerce
- E-Commerce B2C
- Platformy B2B
- Narzędzia PIM
- Marketplace
-
Narzędzia wspierające e-Commerce
- Integracja z ERP
- Narzędzia PIM
- Marketplace
- System OMS
- Systemy CRM
- Silniki wyszukiwania produktów
- Platformy DAM
- Platforma WMS
- Usługi kurierskie
- Systemy płatności
- Zarządzanie cenami
- Silniki rekomendacji produktów
- Programy lojalnościowe
- Kampanie marketingowe
- Marketing Automation
- Social media
- Narzędzia Live Chat
- Web Push
- Systemy PLM
- Rozwiązania Enterprise
- Technologie
- Cross-border Solutions
- Top Developer e-Commerce
- Kompleksowa obsługa sklepów
- Wiedza eCommerce - publikacje
- Raport: Narzędzia i wtyczki eCommerce 2022
- Dlaczego my
-
e-Commerce
-
Konsulting
-
Konsulting
- Analiza danych i Business Intelligence
- Analiza przedwdrożeniowa
- Analiza rynku i konkurencji
- Aplikacje MVP / POC
- Badania użyteczności i testy A/B
- Makiety UX/UI
- Marketing Automation
- Optymalizacja wydajności
- Redesign
- Rozwiązania chmurowe
- Scoping Session
- Strategia rozwoju technologicznego
- Wsparcie techniczne SLA
-
Konsulting
-
Technologie Internetowe
-
Technologie Internetowe
- Dlaczego my
-
Technologie Internetowe
-
Rozwiązania IT
-
Rozwiązania IT
- Platforma Low-code
- Intranet i komunikacja wewnętrzna
- Wsparcie pracy zdalnej
- System workflow EOD
- Portal pracowniczy
- Obsługa reklamacji
- Obieg Faktur
- Elektroniczne paski płacowe
- System Helpdesk
- Zamówienia i zapotrzebowania
- e-PITy
- Outsourcing IT
- eBOK - obsługa Klienta online
- Urlopy i delegacje
- Systemy i aplikacje dedykowane
- Software House
- Stosowane technologie
- Top Custom Software Developer
- Poradnik - INTRANET: Skuteczna komunikacja wewnętrzna w organizacji rozproszonej
- Dlaczego my
-
Rozwiązania IT
- Realizacje
- Kariera
- Kontakt
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).
Headless wykorzystujemy m.in. w projektach tj.: platforma sprzedażowa brw.pl oraz w dedykowanym systemie lotto.pl
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.
Chcesz wiedzieć więcej o rozwiązaniach headless? Zapraszamy do lektury naszego artykułu: Zrozumieć Headless w 11 minut
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.
Może zainteresują Cię także
E-commerce - co nowego? Trendy i wyzwania na 2023 rok
2023 rokiem zmian prawnych w e-commerce
Klienci o nas
Wybrane serwisy produktowe
Kontakt
Używamy plików cookie
Używamy plików cookie i innych technologii śledzenia, aby poprawić jakość przeglądania naszej witryny, wyświetlać spersonalizowane treści i reklamy, analizować ruch w naszej witrynie i wiedzieć, skąd pochodzą nasi użytkownicy.
Możesz zmienić swoje ustawienia i odrzucić niektóre rodzaje plików cookie, które mają być przechowywane na twoim komputerze podczas przeglądania naszej strony. Możesz również usunąć wszystkie pliki cookie już zapisane na komputerze, ale pamiętaj, że usunięcie plików cookie może uniemożliwić korzystanie z części naszej strony internetowej.
Używamy plików cookie
Używamy plików cookie i innych technologii śledzenia, aby poprawić jakość przeglądania naszej witryny, wyświetlać spersonalizowane treści i reklamy, analizować ruch w naszej witrynie i wiedzieć, skąd pochodzą nasi użytkownicy.
Możesz zmienić swoje ustawienia i odrzucić niektóre rodzaje plików cookie, które mają być przechowywane na twoim komputerze podczas przeglądania naszej strony. Możesz również usunąć wszystkie pliki cookie już zapisane na komputerze, ale pamiętaj, że usunięcie plików cookie może uniemożliwić korzystanie z części naszej strony internetowej.
Niezbędne
Te pliki cookie są niezbędne do świadczenia usług dostępnych za pośrednictwem naszej strony internetowej i umożliwienia korzystania z niektórych funkcji naszej strony internetowej.
Bez tych plików cookie nie możemy zapewnić usług na naszej stronie internetowej.
Funkcjonalne
Te pliki cookie służą do bardziej spersonalizowanego korzystania z naszej strony internetowej i do zapamiętywania wyborów dokonywanych podczas korzystania z naszej strony internetowej. Umożliwiają przechowywanie danych związanych z zabezpieczeniami, takimi jak funkcja uwierzytelniania, zapobieganie oszustwom i innymi mechanizmami ochrony użytkowników.
Na przykład możemy używać funkcjonalnych plików cookie do zapamiętywania preferencji językowych lub zapamiętywania danych logowania.
Śledzenie i wydajność
Te pliki cookie służą do zbierania informacji w celu analizy ruchu na naszej stronie internetowej i sposobu, w jaki użytkownicy korzystają z naszej strony internetowej.
Na przykład te pliki cookie mogą śledzić takie rzeczy, jak czas spędzony na stronie lub odwiedzane strony, co pomaga nam zrozumieć, w jaki sposób możemy ulepszyć naszą witrynę internetową.
Informacje zebrane przez te pliki nie identyfikują żadnego konkretnego użytkownika.
Targeting i reklama
Te pliki cookie służą do wyświetlania reklam, które mogą Cię zainteresować na podstawie Twoich zwyczajów przeglądania.
Pliki te tworzone przez naszych dostawców treści i/lub reklam, mogą łączyć informacje zebrane z naszej strony z innymi informacjami, które gromadzili niezależnie w związku z działaniami przeglądarki internetowej w ich sieci witryn.
Jeśli zdecydujesz się usunąć lub wyłączyć te pliki cookie, reklamy nadal będą wyświetlane, ale mogą one nie być odpowiednie dla Ciebie.
Twoja prywatność jest dla nas ważna
Pliki cookie to bardzo małe pliki tekstowe, które są tworzone i przechowywane na komputerze użytkownika podczas odwiedzania strony internetowej. Używamy plików cookie do różnych celów, w tym do ulepszania obsługi online na naszej stronie internetowej (na przykład, aby zapamiętać dane logowania do konta).
W przypadku jakichkolwiek pytań dotyczących naszej polityki dotyczącej plików cookie i Twoich wyborów, skontaktuj się z nami.
Aby dowiedzieć się więcej, odwiedź naszą Politykę prywatności