Czym jest headless? Wprowadzenie do tematu

Headless określa nie tyle konkretną technologię ile metodę tworzenia serwisów i aplikacji internetowych. Polega na oddzieleniu frontendu, czyli tego co widzi użytkownik, od backendu, czyli zaplecza technicznego odpowiedzialnego za funkcjonowanie systemu. Dzięki temu edycja i wprowadzanie dodatkowych opcji jest szybsza i prostsza. Sprawia, że nawet rozbudowane portale informacyjne mogą być łatwo dostosowywane do zmieniających się potrzeb, przy jednoczesnym zachowaniu płynności i szybkości działania.

Czym jest metoda headless? Definicja technologii

Standardowy model każdej strony internetowej składa się z trzech podstawowych części:

Baza danych, w której przechowywane są informacje np. na temat produktów, ich ceny, nazwy, opisy czy fotografie prezentacyjne.

Back-end, czyli wnętrze systemu, którego interfejsem jest najczęściej panel administracyjny. Obsługuje działanie wszystkich funkcjonalności (sposobów działania) serwisu i umożliwia zarządzanie nim. 

Front-end to warstwa prezentacji systemu – to co widzisz odwiedzając dany serwis internetowy. Przedstawia przetworzone informacje, pochodzące z bazy danych. Są one przedstawiane użytkownikowi końcowemu, czyli np. Klientowi danego sklepu internetowego.

Tradycyjne podejście zakłada połączenie front-endu i back-endu, podczas gdy headless wprowadza niezależność tych warstw. Głównym punktem modelu headless, jest technologia API, która stanowi łącznik między frontem a back-endem. Odpowiada ona za automatyzację procesów, ułatwia sprawne modyfikowanie, ale czasem również codzienne zarządzanie stroną, czy sklepem internetowym.

API – co to znaczy?

Model headless opiera swoje działanie na technologii API. Ten skrót oznacza „Application Programming Interface”, czyli „Interfejs Programowania Aplikacji”. 

API stanowi swego rodzaju „most”, który pozwala na połączenie różnych systemów, czy baz danych i przesyłanie informacji między nimi. Dokładniej mówiąc, jest połączeniem między frontendem i backendem. Oddziela obie te części od siebie, a równocześnie umożliwia komunikację między nimi. Dzięki temu całość jest spójna i funkcjonalna.

Jak wygląda taka komunikacja? Proces przetwarzania, a następnie przesyłania danych składa się z dwóch etapów.

1. Wszystkie informacje z warstwy „zaplecza” (baza danych + back-end) są gromadzone, a następnie zostają przesłane na zewnątrz, jako surowe dane. Najczęściej występują one w formacie JSON (format wymiany danych) lub XML (format wymiany dokumentów).

2. W ten sposób przesłane dane są następnie pobierane i wyświetlane zgodnie z wymogami danej platformy. Może to być zarówno aplikacja webowa, wyświetlana w przeglądarce internetowej, jak i taka, w wersji mobilnej, na smartfona, czy tablet. Często jest to też oprogramowanie na inne dowolne urządzenie, np. TV lub urządzenia smart.

API, dokładnie w momencie, w którym jest to wymagane, wysyła ​​informacje lub dane z zaplecza do dowolnego systemu, który tych danych potrzebuje. Dzięki temu cały proces jest zautomatyzowany. Poszczególne urządzenia mogą prezentować treść w inny, dostosowany do ich możliwości i ograniczeń sposób, ponieważ zawartość nie jest związana z żadną z góry określoną strukturą.

Schemat obrazujący podejście headless

Headless a tradycyjna struktura stron – podstawowe różnice

Główna różnica między tradycyjnym modelem systemów CMS (np. Wordpress), a wersją headless polega na tym, że klasyczne podejście zakłada ścisłe połączenie frontendu i backendu. W związku z tym mają one z góry określoną grupę technologii, które mogą być wykorzystane do przygotowania warstwy prezentacji. 

Headless wprowadza pełną niezależność tych warstw, dzięki czemu istnieje swoboda w wyborze technologii frontendowych, co ułatwia budowę i późniejszą modyfikację warstwy wizualnej. To jednocześnie sprawia, że serwisy mogą być dostosowane pod kątem optymalnego wyświetlania na różnych urządzeniach, np. telefonach, tabletach, laptopach czy nawet urządzeniach typu Smart TV.

W efekcie możesz zdefiniować zupełnie inny wygląd np. sklepu internetowego na każdym urządzeniu, a to wszystko za pomocą jednego systemu backendowego. Wpływa to znacząco na obniżenie kosztów i skrócenie czasu związanego z budowaniem swojej obecności omnichannel. 

Najważniejsze zalety modelu headless CMS

Główną korzyścią wynikającą z korzystania z modelu headless jest większy potencjał rozbudowy i modyfikacji serwisu internetowego. Można dowolnie modyfikować i rozbudowywać poszczególne jego części, bez wpływu na pozostałe warstwy portalu, ale także na pozostałe kanały, w których funkcjonuje serwis. Co istotne, taka edycja zostaje przeprowadzana przy zachowaniu optymalnej wydajności, co nie było możliwe przy tradycyjnym, monolitycznym sposobie działania. Jakie jeszcze korzyści wynikają z wprowadzenia modelu headless?

Wsparcie Omnichannel

Headless umożliwia dostosowanie np. sklepów internetowych pod różne kanały sprzedaży oraz harmonijne połączenie ich ze sobą. 

Omnichannel wymaga elastyczności, którą zapewnia m.in. rozdzielenie frontendu i backendu. Dzięki temu wszelkie modyfikacje, jak również wdrożenie nowych kanałów sprzedaży staje się znacznie prostsze. Co więcej, możliwe staje się tworzenie indywidualnie dostosowanych do poszczególnych kanałów sprzedaży warstw front-endowych.

Szybkie dostarczanie treści

Technologia headless wpływa również na szybsze ładowanie się strony, co wywołuje pozytywne odczucia klientów. Szybkość działania systemu gwarantują dwie znaczące funkcje, występujące w modelu headless.

– Wykorzystywanie API do pobierania zawartości sprawia, że zasoby nie są współużytkowane.

– Zastosowanie pamięci przeglądarki do wykonywania niektórych skryptów pozwala zmniejszyć ilość zapytań kierowanych do bazy danych.

Lepsze pozycjonowanie

Prędkość działania platformy ma też znaczenie na jej pozycjonowanie, czyli wyświetlanie się na jak najwyżej w wyszukiwarkach internetowych. W ramach SEO znaczenie ma także główna cecha charakterystyczna headless, która wspiera projektowanie rozwiązań lepiej dopasowanych do urządzeń, na których wyświetlany jest serwis. Ma to szczególne znaczenie od momentu ogłoszenia przez Google polityki „mobile first”.

Bezpieczeństwo

Warto także wspomnieć, że architektura headless zapewnia większe bezpieczeństwo przechowywanych informacji. Separacja warstw frontendu oraz backendu sprawia, że użytkownik witryny nie ma bezpośredniego kontaktu z systemem wewnętrznym. Ponadto, w większości przypadków części te umieszcza się na różnych serwerach, co wpływa na jeszcze lepszą ochronę danych.

UX – doświadczenia użytkowników

Jest to wrażenie, jakie wywiera platforma sprzedażowa na Klientach. Chodzi tu głównie o jej funkcjonalność i estetykę. W tym przypadku ważne będą również wszelkie działania e-commerce (działania związane z marketingiem internetowym). Dzięki wykorzystaniu narzędzi dedykowanych dla specyfiki danego kanału sprzedaży możliwa jest wysoka personalizacja UX.

PWA i TWA – odpowiedź na potrzeby mobilnej sprzedaży

1. Headless PWA

Skrót PWA oznacza Progressive Web Application, czyli Progresywna Aplikacja Internetowa. Dzięki temu standardowi, aplikacje uruchamiane są jak zwykłe strony internetowe, a jednocześnie swoim funkcjonowaniem przypominają aplikacje natywne (klasyczne).

W związku z czym, chociaż sklep wygląda jak zwykła strona internetowa, posiada funkcje aplikacji, czyli:

– umożliwia dodanie ikony aplikacji na stronie głównej urządzenia (np. ekranie telefonu),

– działa w trybie offline,

– korzysta z wbudowanych funkcji urządzenia (np. aparat, lokalizacja),

Poza tym, aplikacja PWA zachowuje wszystkie cechy strony internetowej i co ważne, można ją odszukać, jak również przeglądać z poziomu przeglądarki (nie ma potrzeby pobierania / instalowania).

2. Headless TWA

Natomiast technologia TWA oznacza Trusted Web Activity, czyli Zaufana Aktywność Internetowa. Służy ona do „spakowania” serwisów internetowych, bazujących na PWA, do specjalnego „kontenera”. To daje wiele możliwości, w tym uproszczenie procesu dostosowania platformy sprzedażowej do poszczególnych kanałów (sklepy internetowe, social media) i nośników (urządzeń – telefon, laptop itp.).

Dzięki zastosowaniu tej funkcjonalności:

– nie musimy tworzyć osobnej aplikacji mobilnej (możemy zastosować TWA i przerobić stronę internetową do postaci niezależnej aplikacji),

– optymalizujemy koszty utrzymania strony internetowej i aplikacji mobilnej (np. zmieniając kolor na stronie internetowej, automatycznie zmieni się on w aplikacji),

– zwiększamy wygodę klientów i użytkowników (szczególnie ważne, jeśli mamy powracających klientów).

Tak powstała aplikacja, z zastosowaniem rozwiązania TWA, może być z powodzeniem opublikowana w Google Play Store i z punktu widzenia użytkownika, staje się aplikacją mobilną, o przyjaznym wyglądzie tradycyjnej strony internetowej.

Poznaj nowe technologie i skuteczniej sprzedawaj online

Przyszłość zawsze niesie ze sobą pewną dozę niepewności. Największym wyzwaniem stawianym przed właścicielami biznesów jest próba jej przewidzenia i optymalne przygotowanie się do niej. Możemy powiedzieć, że Headless jest narzędziem, które pozwala w dużym stopniu przygotować się na dynamiczne zmiany związane z ewolucją cyfrowej rzeczywistości, jak i oczekiwań klientów.

Obecnie niemal co tydzień pojawiają się nowe przykłady większych i lepiej znanych witryn wykorzystujących Headless. Wymienić można tu m.in. gigantów takich jak Netflix, Amazon, Uber, Nike, Zalando czy też Castorama. Nie ma zatem wątpliwości, że zainteresowanie headless rośnie. Można spodziewać się, że ten trend z każdym dniem będzie się wzmacniał, a w niedalekiej przyszłości stanie się, w przypadku biznesów działających na większą skalę, normą. 

Autor

Marcin Lipiec, Head of Business Development, Ideo