Co to jest Shopify Hydrogen i dlaczego warto dbać o 2022?

W ciągu ostatnich kilku lat handel bez głowy stał się powszechnym trendem w handlu elektronicznym, który ma zmienić sposób działania handlu online. Shopify, jedna z wiodących obecnie platform eCommerce SaaS, przeniosła handel bezgłowy na wyższy poziom dzięki Shopify Hydrogen – swojej najnowszej technologii.

W tym artykule dowiemy się, dlaczego Shopify Hydrogen zmieni zasady gry w bezgłowym handlu i jak sprzedawcy Shopify mogą czerpać duże korzyści z tej najnowszej technologii Shopify.

=> Przeczytaj więcej: Najlepsze przykłady sklepu bez głowy Shopify

Handel bez głowy przed Shopify Hydrogen

Handel bezgłowy odnosi się do infrastruktury, w której front end Twojego sklepu internetowego jest oddzielony od backendu. Wystarczy zrozumieć, że handel bez głowy pozwala oddzielić warstwę witryny sklepowej („głowa”) od samej platformy eCommerce (aby uczynić ją „bezgłową”).

Ale dlaczego chcemy oddzielić frontend strony od jej platformy? Ponieważ daje nam to maksymalną elastyczność, aby łatwo prowadzić szybkie, płynne, spójne i spersonalizowane zakupy.

W tradycyjnej architekturze witryna sklepowa i zaplecze są ściśle połączone i zazwyczaj działają jako jeden system, co ogranicza nasz projekt i jego funkcjonalność. Tymczasem podejście bezgłowe pozwala dwóm oddzielnym warstwom pracować niezależnie i komunikować się za pośrednictwem interfejsów API. Dzięki temu masz pełną możliwość dostosowania bezproblemowego i niepowtarzalnego doświadczenia zakupowego przy jednoczesnym zachowaniu nienaruszonego istniejącego zaplecza.

Jeśli jesteś nowy w tej technologii, polecamy Ci kilka obszernych artykułów, które pomogą Ci lepiej zrozumieć handel bezgłowy:

• Co to jest handel bez głowy?
• 15 najlepszych przykładów handlu bez głowy   

Zawsze możliwe było zbudowanie sklepu bez głowy przy użyciu Shopify jako platformy eCommerce przy użyciu StorefrontAPI. Jednak bycie bez głowy nie przychodzi bez wyzwań. Jest to zazwyczaj bardziej kosztowne i czasochłonne, ponieważ wymaga wykonania wielu skomplikowanych zadań. Ponadto wymaga więcej czasu i wysiłku w zakresie konserwacji, co może nie być świetnym podejściem dla sprzedawców Shopify, którzy prowadzą małą i rozwijającą się firmę.

Shopify Hydrogen to idealne rozwiązanie, aby wyeliminować wszystkie te zawiłości i dodatkowe koszty, które w przeszłości szły w parze z tworzeniem sklepu bez głowy Shopify. Nie ma potrzeby polegania na integracjach stron trzecich, systemach zewnętrznych lub dodatkowej technologii, aby dostosować witrynę sklepową Shopify. Shopify chce, aby firma Hydrogen zapewniała „spersonalizowane i dynamiczne doświadczenia kupujących obsługiwane przez platformę i interfejsy API Shopify”. Dlatego uważa się, że ta najnowsza technologia Shopify jest przyszłością rozwoju bezgłowego.

Co to jest wodór Shopify?

Uważamy, że przyszłość handlu w Internecie jest szybka, osobista i dynamiczna – a Hydrogen odzwierciedla sposób, w jaki widzimy tę wizję urzeczywistniającą się.

Shopify Polska 2021

Shopify Hydrogen to oparta na React platforma do tworzenia niestandardowej witryny sklepowej Shopify. Obejmuje wszystkie struktury, komponenty i narzędzia potrzebne programistom do rozpoczęcia pracy, szybkiego tworzenia i zapewniania najlepszego spersonalizowanego doświadczenia użytkownika.

Ostatecznym celem Hydrogen jest zapewnienie większej elastyczności i czasu na zbudowanie i dostosowanie sklepu Shopify bez ograniczeń frontonu lub integracji oprogramowania zewnętrznego. Tymczasem wszystkie funkcje handlu zaplecza obsługiwane przez Shopify nadal działają płynnie, bez żadnych zakłóceń. Dzięki temu Twój sklep Shopify może osiągnąć bezgłowe podejście bez pośpiechu i komplikacji integracji z innymi firmami.

Hydrogen to zalecane i ugruntowane podejście Shopify do zapewniania szybkiego doświadczenia użytkownika, najlepszych w swojej klasie możliwości handlowych i doskonałego doświadczenia programistów. To skrzyżowanie handlu, UX i kodowania.

W tej chwili wodór jest w pełni open source i możesz pomóc w budowaniu wodoru, wypróbowując go i wysyłając opinie, aby go ulepszyć.

Jak działa Shopify Hydrogen

Współpracując z milionami sprzedawców na całym świecie, zespół programistów Shopify zdał sobie sprawę, że handel elektroniczny wymaga szybkiego i bezproblemowego doświadczenia użytkownika, które pozostaje jednocześnie spersonalizowane i kontekstowe.

Choć takie podejście brzmi obiecująco, stanowi ogromne wyzwanie dla programistów, którzy utknęli między zastosowaniem wielu technologii w celu uzyskania fantastycznego doświadczenia handlowego a zapewnieniem wydajności witryny. Hydrogen łagodzi ten problem, wprowadzając strukturę z różnymi technologiami, które umożliwiają tworzenie dynamicznych doświadczeń handlowych bez rezygnacji z szybkości witryny.

Hydrogen obejmuje środowisko szybkiego startu z komponentami specyficznymi dla handlu i narzędziami programistycznymi, które są gotowe do użycia:

• Hydrogen framework : Istnieje wtyczka Vite, która oferuje renderowanie po stronie serwera (SSR), oprogramowanie pośredniczące hydratacji i przekształcenia kodu komponentów klienta.
• Komponenty interfejsu użytkownika wodoru: komponenty, haki i narzędzia obsługujące funkcje i koncepcje, które już istnieją w Shopify.

Platforma wodorowa działa jak cegiełki, które pozwalają osiągnąć równowagę między wspaniałymi doświadczeniami handlowymi a doświadczeniem użytkownika. Zapewnienie tych możliwości zmusiło Hydrogen do wykorzystania najwyższego potencjału React i Vite, a także do zwrócenia szczególnej uwagi na opracowywanie zoptymalizowanych komponentów i narzędzi programistycznych.

Ponadto Shopify pomaga zaoszczędzić czas na rusztowaniu i konfiguracji projektu witryny sklepowej Shopify, dołączając szablon startowy, który uruchamia witrynę sklepową w ciągu kilku minut. Ponieważ ten szablon przetwarza podstawową strukturę plików projektu, który jest już zintegrowany ze sklepem Shopify, możesz pominąć konfigurację i szybko rozpocząć dostosowywanie swojej witryny sklepowej.

Oprócz szablonu startowego, Hydrogen przyspiesza proces tworzenia witryny sklepowej z uwzględnieniem wszystkich komponentów interfejsu użytkownika, które są oparte na modelach danych Shopify. Te elementy można zintegrować bezpośrednio z API Storefront w celu interakcji z API Shopify lub dowolnymi źródłami danych stron trzecich.

TL; DR: Shopify Hydrogen pomaga sprzedawcom wykorzystać doświadczenie handlowe dzięki swojej strukturze i przyspieszyć proces rozwoju witryny sklepowej dzięki gotowym do użycia komponentom interfejsu użytkownika. Dzięki temu możesz tworzyć dynamiczne środowiska handlowe bez rezygnacji z wydajności witryny.

Shopify Wodór kontra Płyn

• Liquid : język szablonów napisany w Ruby i stworzony przez Shopify. Jest to podstawa wszystkich motywów Shopify i służy do ładowania treści dynamicznych na stronach sklepu.
• Wodór : struktura do budowania bezgłowej witryny sklepowej Shopify.

Chociaż wielu programistów często odwołuje się do języka szablonów i frameworka zamiennie, w rzeczywistości istnieją między nimi pewne subtelne różnice.

Framework to zbiór gotowych narzędzi i komponentów do tworzenia aplikacji.

Tymczasem język szablonów jest używany do tworzenia stron internetowych, które łączą zawartość statyczną, która jest taka sama na wielu stronach, oraz zawartość dynamiczną, która zmienia się z jednej strony na drugą. Szablony koncentrują się na z góry określonej funkcjonalności i mają mniej opcji dostosowywania w porównaniu z frameworkiem.

Pomyśl o tym w ten sposób: szablon jest jak malowanie po liczbach, a struktura bardziej jak zestaw LEGO.

W przypadku Shopify, dzięki językowi szablonów, możliwe jest ponowne wykorzystanie elementów statycznych, które definiują układ strony internetowej, jednocześnie dynamicznie migrując dane ze sklepu Shopify na stronę. Łącząc Liquid z innymi językami szablonów, takimi jak HTML, CSS, JavaScript, możesz zbudować i dostosować motyw Shopify.

Hydrogen obejmuje całą strukturę, komponenty i narzędzia potrzebne do zbudowania niestandardowych witryn sklepowych Shopify. Dzięki swoim ramom i komponentom interfejsu użytkownika Hydrogen pomaga tworzyć niestandardowe witryny sklepowe, które mogą zapewnić najlepsze wrażenia użytkownika.

Ponieważ Liquid wymaga statycznych i niestatycznych elementów do zbudowania motywu, można zauważyć, że Liquid ma pewne ograniczenia w dostosowywaniu i wydajności witryny sklepowej. Ponadto tworzenie i dostosowywanie motywu za pomocą Liquid jest czasochłonne. Dlatego Hydrogen służy jako rozwiązanie nowej generacji dla witryn sklepowych opartych na Shopify, dzięki otwieraniu nieskończonych możliwości budowania unikalnego UX i interfejsu użytkownika witryny. Przewiduje się, że wodór zostanie opracowany w celu zastąpienia Liquid w rozwoju sklepu Shopify.

W tej chwili zarówno Liquid, jak i Hydrogen są w pełni otwarte na GitHub, aby każdy mógł je pobrać i wypróbować.

Dlaczego bez głowy z Shopify Hydrogen

1. Zoptymalizuj wydajność witryny

Jedną z oczywistych korzyści wynikających z bezgłowego podejścia z Shopify Hydrogen jest doskonała wydajność witryny, zwłaszcza szybkość witryny.

Oddzielając frontend od jego zaplecza, zyskujesz możliwość odblokowania błyskawicznej szybkości ładowania strony, przy jednoczesnym zachowaniu wszystkich dynamicznych treści i funkcji w zapleczu. Przejście na Shopify Hydrogen może pomóc w zmniejszeniu szybkości ładowania strony z kilku sekund do milisekund, wykorzystując w ten sposób podstawowe wskaźniki internetowe sklepu.

Krótko mówiąc, bezgłowe rozwiązanie Shopify umożliwia dostarczanie w pełni spersonalizowanych i dynamicznych treści, które można dostosować w odpowiednim czasie bez spowalniania serwera i szybkości witryny. Dzięki temu możesz zadowolić wszystkich odwiedzających i klientów odwiedzających Twój sklep.

2. Lepsza zdolność skalowania

Innym częstym problemem, który często idzie w parze z optymalizacją szybkości witryny, jest skalowalność. Przed Hydrogen programiści starali się ustalić kompromis między szybkością a doświadczeniem witryny, jeśli chodzi o optymalizację witryny.

Każdy doświadczony programista z pewnością zrozumie fakt, że dostarczanie wysoce interaktywnych i spersonalizowanych zakupów z ultraszybką wydajnością sieci może być nieskomplikowane, jeśli ruch jest stosunkowo niski. Jednak wraz z rozwojem sklepu witryna nie jest w stanie codziennie obsługiwać nowego napływu odwiedzających, co prowadzi do problemów z szybkością i słabą wydajnością witryny.

Teraz Shopify Hydrogen rozwiązało ten problem od samego początku dzięki Shopify Oxygen — globalnemu rozwiązaniu hostingowemu dla witryn sklepowych Hydrogen, które zostanie uruchomione w 2022 roku. Nie musisz polegać na usługach hostingowych innych firm, ponieważ Twój sklep Shopify będzie hostowany bezpośrednio na tlenie.

Shopify mocno zainwestowało w globalną strukturę Oxygen z ponad 100 lokalizacjami serwerów na całym świecie. Tlen gwarantuje, że Twoi klienci zawsze będą cieszyć się natychmiastowym ładowaniem sklepu, niezależnie od ich lokalizacji. Ta nadchodząca infrastruktura umożliwia szybką komunikację między dynamiczną zawartością witryny sklepowej a strukturami handlowymi, pozostawiając kwestie szybkości i skalowalności w przeszłości.

Shopify twierdzi, że Oxygen to najszybszy sposób na wdrożenie doświadczeń handlowych wspieranych przez Shopify. Połączenie wodoru i tlenu toruje drogę nowoczesnemu handlowi bez głowy w najbliższej przyszłości.

3. Większa swoboda projektowania

Ponieważ Hydrogen stosuje podejście bezgłowe, które oddziela witrynę sklepową witryny Shopify od zaplecza zawierającego wszystkie dane i funkcje witryny, zapewnia większą elastyczność i swobodę w tworzeniu i dostosowywaniu witryny sklepowej tak, jak chcesz. Możliwości projektowania dzięki Shopify Hydrogen są nieograniczone i możesz tworzyć unikalne projekty UX/UI, aby zapewnić odwiedzającym spersonalizowane i dynamiczne wrażenia z zakupów.

Korzystanie z narzędzia do tworzenia stron specjalizującego się w witrynach sklepowych wodorowych może sprawić, że proces projektowania będzie jeszcze szybszy i płynniejszy. Sprzedawcy Shopify mogą po prostu przeciągać i upuszczać układ od zera lub korzystać z gotowych szablonów i bloków do tworzenia stron bez żadnych umiejętności kodowania lub projektowania.

Ponadto, ponieważ front i tył witryny Shopify komunikują się za pośrednictwem interfejsu API, możesz swobodnie wprowadzać zmiany w projekcie frontendu, nie martwiąc się o komplikowanie lub złamanie funkcji backendu, co często ma miejsce w przypadku handlu tradycyjnego.

4. Znakomite doświadczenie handlowe

Podczas gdy spersonalizowany marketing dla biznesu eCommerce nie jest czymś nowym (weźmy rekomendacje produktów Amazon jako popularny przykład), nie jest to powszechne podejście, które mogą łatwo przyjąć sklepy bez głowy.

Shopify Hydrogen z elastycznością frontendu i oddzielnym CMS wprowadza proste, lekkie rozwiązanie, z którego może korzystać każdy sklep Shopify. Masz pełną kontrolę nad projektowaniem witryn sklepowych i zarządzaniem treścią, aby dostosować spersonalizowane witryny sklepowe, aby zadowolić klientów. Ponadto połączenie wodoru z tlenem zapewnia szybkość ładowania strony w milisekundach przy jednoczesnym zachowaniu stabilnej wydajności sieci.

Wspaniałe doświadczenie handlowe nie powinno mieć na celu wyłącznie zadowolenia klientów, ale należy starannie zrównoważyć doświadczenie klienta i możliwości sklepu. Shopify Hydrogen pomaga w podejściu do wyjątkowego doświadczenia handlowego, które może jednocześnie zadowolić zarówno wydajność sklepu, jak i wrażenia klientów.

5. Szybki rozwój

Wykorzystując podstawową strukturę i gotowe do użycia komponenty interfejsu użytkownika, Shopify Hydrogen może przyspieszyć rozwój frontendu, jednocześnie dając sprzedawcom nieograniczone możliwości projektowania. Ponadto Hydrogen pomaga zredukować całą złożoność, która często wiąże się z integracjami i oprogramowaniem innych firm, które były w przeszłości potrzebne do zbudowania niestandardowej witryny sklepowej.

Dlatego Shopify Hydrogen jest jedną z najszybszych dróg, jakie sklepy Shopify mogą przyjąć, aby osiągnąć najlepsze funkcje handlu bez głowy bez długiego, złożonego i kosztownego procesu rozwoju.

Shopify Ograniczenia dotyczące wodoru

Ponieważ Shopify Hydrogen jest dostępny tylko w wersji zapoznawczej programisty, niewiele możemy jeszcze powiedzieć o tym bezgłowym rozwoju opartym na Shopify. W tej chwili Hydrogen może być używany tylko do budowania witryn sklepowych Shopify. Wszelkie inne rodzaje niestandardowych witryn sklepowych, w tym aplikacje mobilne, gry wideo i urządzenia inteligentne, nie są obecnie obsługiwane. Będziemy regularnie aktualizować tę najnowszą technologię Shopify, aby informować Cię o innych potencjalnych ograniczeniach i wadach.

Bezgłowy z SimiCart już dziś

Chociaż istnieje wiele podejść do bezgłowego handlu, Shopify Hydrogen zdecydowanie zmienia zasady gry, czego możemy oczekiwać w przyszłości o wiele więcej. Chociaż w najbliższym czasie nie zastąpi Liquid, podążanie za najnowszymi trendami technologicznymi może sprawić, że będziesz o krok przed konkurencją.

Jeśli chcesz mieć nieograniczone możliwości projektowania, błyskawiczną szybkość strony i pełną kontrolę nad witryną sklepową, aby zapewnić doskonałe wrażenia handlowe, Shopify bez głowy jest zdecydowanie ścieżką, którą powinieneś podążać. Pozwól, że pomożemy Ci wzmocnić Twój sklep Shopify dzięki handlowi bez głowy.